PMO2 Pertemuan 1 Konsep Dasar Design UI

TUGAS PEMROGRAMAN MOBILE 2

Pertemuan 1

Disusun Oleh Kelompok 1 dengan anggota :

Syamsul falah 16.11.0029

Muhammad Aris nur Aziz 16.11.0046

Linatun Masrohah 16.11.0055

ZaenurRochman 16.11.0068

Yahya Dani Lisharyanto 16.11.0070

Muhammad Ali Hasani 16.11.0071

Muhammad Yunus 16.11.0076

Sofyan Fathur Rohim 16.11.0082

Hamid Ashari 16.11.0086

Asep Tri Wibowo 16.11.0091

Firmansah Putra 16.11.0093

STMIK AMIKOM PURWOKERTO 2017/2018

konsep dasar desain User Interface

User Interface (UI)

Menurut Wikipedia, user interface adalah sebuah desain yang digunakan sebagai penghubung antara manusia sebagai pengguna dengan software pada perangkat sehingga akan memudahkan pengoperasian dari perangkat tersebut. Mudahnya, UI merupakan desain tampilan pada layar perangkat seperti yang dimiliki oleh smartphone, tablet dan berbagai jenis perangkat lainnya. Atau sebagian orang awam lebih mengenalnya sebagai tema.

Sekarang ini UI bukan hanya untuk memudahkan interaksi antar manusia (pengguna) dengan perangkatnya saja, tetapi juga untuk mempercantik perangkat ini sendiri. Beberapa macam UI yang dimiliki oleh vendor yang menggunakan OS Android antara lain adalah ZenUI dari ASUS, MIUI oleh Xiaomi, TouchWiz oleh Samsung, ColorOS oleh Oppo, Otimus UI oleh LG serta SenseUI dari HTC. Sedangkan UI “asli” dari Android disebut juga dengan Vanilla.

Multi Bahasa

Sebagian besar aplikasi perangkat lunak telah memiliki dukungan fitur pengaturan bahasa. Tentu saja fitur ini sangat penting, khususnya bagi aplikasi yang ditujukan untuk pengguna secara global—dengan kemampuan penguasaan bahasa yang beragam.

Tidak semua pengguna aplikasi di dunia ini menguasai lebih dari satu bahasa. Mayoritas dari mereka hanya fasih memakai bahasa local. Oleh karena itu, dikembangkanlah fitur multi bahasa agar dapat disesuaikan dengan bahasa yang mereka pahami. Hal ini dimaksudkan untuk memudahkan mereka dalam menggunakan berbagai macam aplikasi tersebut agar tingkat kenyamanan dan produktivitas mereka tidak menurun. Dampaknya, ini akan menjaring lebih banyak pengguna sehingga menguntungkan para pengembang aplikasi.

Android, sebagai salah satu sistem operasi terbesar dan terpopuler di dunia, juga telah mendukung fitur multibahasa ini. Para pengembang dan produsen aplikasi Android dibekali akses untuk menanamkan fitur ini ke dalam aplikasi buatan mereka melalui peralatan pengembangan perangkat lunak (software development tools/SDK) bawaan. Fitur dukungan multibahasa di Android merupakan bagian dari fitur localization. Fitur ini secara umum digunakan untuk menangani keragaman lokasi pengguna aplikasi Android. Para pengembang dapat mengatur content aplikasi buatan mereka, meliputi teks, file audio, filegrafis, bilangan, dan mata uang, untuk disesuaikan dengan lokasi di mana aplikasi tersebut akan digunakan agar tepat guna. Maka, secara singkat, fitur dukungan multibahasa ini dapat diartikan sebagai proses penyesuaian konten teks berdasarkan region tertentu.

Multi Layar (Multi Screen)

Semakin beragamnya ukuran layar pada prangkat Android, mulai dari 2 inch sampai dengan 10 inch, dengan begitu banyak jenis ukuran layar yang berbeda, aplikasi yang kita buat pun harus mendukung beberapa layar yang berbeda pula, untuk menyesuaikan antarmuka pengguna aplikasi ke layar yang menampilkannya.

Macam macam ukuran layar handphone :

Resolusi qHD

Macam ukuran layar handphone yang pertama adalah qHD. Huruf “q” kecil pada rangkaian istilah ini berarti quarter yaitu seperempat bagian dari layar Full HD. Untuk ukuran dari resolusi layar quarter HD ini adalah 960 x 540 pixel dengan perbandingan layar atau rasionya 16:9 (ukuran memanjang). qHD ini merupakan ukuran resolusi terendah saat ini.

Resolusi HD

Ukuran resolusi berikutnya adalah resolusi HD (High Definition) atau biasa disebut dengan 720p. HD menggunakan ukuran 1280 x 720 pixel dengan perbandingan layar 16:9. Jenis resolusi ini yang paling banyak digunakan smartphone saat ini.

Resolusi WXGA

Resolusi berikutnya adalah resolusi layar WXGA. Sebetulnya resolusi jenis ini memiliki ukuran yang lebih tinggi sedikit diatas HD, namun masih dianggap sama dengan resolusi HD. Untuk ukuran resolusi WXGA adalah 1366 x 768 pixel. Jenis resolusi ini banyak digunakna di teknologi layar tablet. Untuk layar dengan ukuran resolusi 1280 x 800 juga disebut dengan WXGA.

Resolusi FHD (Full HD)

Dikenal dengan sebutan Full HD, adalah jenis resolusi yang disebut juga dengan 1080p. Untuk ukuran dari dimensi ini adalah 1920 x 1080 pixel. Resolusi ini sangat cocok digunakan pada jenis smartphone yang memiliki ukuran layar antara 5 sampai 5, 5 inch. Dengan ukuran tersebut gambar yang dihasilkan akan sangat jernih dan berkualitas.

Resolusi QHD

Resolusi ini sangat berbeda dengan resolusi qHD, bukan hanya berbeda dari besar kecilnya huruf “q” tapi memang secara maksud juga berbeda. Kalau “q” kecil berarti quarter, kalau Q pada jenis resolusi ini disebut dengan Quad. QHD berarti quad HD yang berarti 4 kali lipat dari layar HD. Dengan ukuran yang dimiliki dari resolusi ini adalah: 2560 x 1440 pixel dengan menggunakan rasio 16:9 untuk ukuran layarnya. Jenis resolusi layar ini biasa disebut dengan 2K atau juga Wide Quad HD (WQHD). Jenis layar ini banyak digunakan oleh smartphone flagship.

Resolusi UHD

Jenis resolusi ini merupakan jenis resolusi handphone tertajam saat ini. Teknologi layar UHD ini digunakan oleh Smartphone Xperia Z5 Premium.

UHD sendiri merupakan singkatan dari Ultra HD yang memiliki resolusi 3840 x 2160 pixel. Jumlah ini setara dengan 4X dari resolusi yang dimiliki oleh Full HD. Jenis resolusi ini pula yang biasa disebut dengan resolusi 4K. Kalau ada yang bertanya tentang kualitasnya, jawabannya sudah pasti sangat tajam dan jernih sekali.

Size (ukuran) : small, normal, large, xlarge

Density (kepadatan) : low(ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)

Desain Responsive

untuk membuat aplikasi yang user friendly perlu mempertimbangkan aspek responsive. Berikut beberapa aspek responsive berdasarkan referensi

Ukuran layar

Ukuran fisik sesungguhnya, yang diukur sebagai diagonal layar.

Untuk penyederhanaan, Android mengelompokkan semua ukuran layar sesungguhnya ke dalam empat ukuran umum: kecil, normal, besar, dan ekstra besar.

Kepadatan layar

Jumlah piksel dalam area fisik layar; biasa disebut sebagai dpi (dot per inci). Misalnya, layar berkepadatan “rendah” memiliki piksel lebih sedikit dalam area fisik yang diberikan, dibandingkan layar berkepadatan “normal” atau “tinggi”.

Untuk penyederhanaan, Android mengelompokkan semua kepadatan layar sesungguhnya ke dalam enam kepadatan umum: rendah, medium, tinggi, ekstra-tinggi, ekstra-ekstra-tinggi, dan ekstra-ekstra-ekstra-tinggi.

Orientasi

Orientasi layar dari sudut pandang pengguna. Orientasi ini bisa berupa lanskap atau potret, berarti masing-masing rasio aspek layar bisa berupa melebar atau meninggi. Ketahuilah bahwa secara default tidak hanya melakukan pengoperasian perangkat berbeda dalam orientasi berbeda, melainkan orientasi bisa berubah pada waktu proses bila pengguna memutar perangkat.

Resolusi

Total jumlah piksel fisik di layar. Saat menambahkan dukungan untuk multilayar, aplikasi tidak menangani resolusi secara langsung; aplikasi hanya perlu memperhatikan ukuran dan kepadatan layar, sebagaimana ditetapkan oleh kelompok kepadatan dan ukuran umum.

Piksel berkepadatan independen (dp)

Satuan piksel virtual yang harus Anda gunakan saat mendefinisikan layout UI, untuk menyatakan dimensi layout atau posisi dengan cara yang tidak bergantung pada kepadatan.

Piksel berkepadatan independen sama dengan satu piksel fisik pada layar 160 dpi, yang merupakan kepadatan patokan yang diasumsikan oleh sistem untuk layar kepadatan “medium”. Pada waktu proses, sistem secara transparan menangani penskalaan satuan dp, bila diperlukan, berdasarkan kepadatan sesungguhnya dari layar yang digunakan. Konversi satuan dp ke piksel layar adalah sederhana:px = dp * (dpi / 160). Misalnya, pada layar 240 dpi, 1 dp sama dengan 1,5 piksel fisik. Anda harus selalu menggunakan satuan dp saat mendefinisikan UI aplikasi Anda untuk memastikan UI Anda ditampilkan dengan benar di layar yang memiliki kepadatan berbeda.

Untuk lebih lengkap dan detailnya bisa download materinya dibawah ini :

Format word : PMO2_TI16B_Kelompok1_ pertemuan1

Format PPT : PMO2_TI16B_Kelompok1_ pertemuan1

Contoh projek bisa didownload melalui link dibawah ini :

Multibahasa : https://drive.google.com/open?id=1fos1HO5BEYA_v_snYM2dfuSXt5wrqrw5

Design UI : https://drive.google.com/open?id=11iujh4ViJHkzwuMHWut_-AkQk35z9gHd

Referensi

https://developer.android.com/training/multiscreen/screensizes

https://medium.com/@kalifardy56/mengenal-jenis-layout-android-studio-335a63666ff7

https://developer.android.com/guide/practices/screens_support?hl=id

https://www.okedroid.com/2015/12/cara-agar-aplikasi-android-mendukung-multi-screen.html

http://reskindroid.blogspot.com/2017/04/cara-membuat-responsive-ui.html