PMO2 Pertemuan 1 Konsep Dasar Desain UI

November 23, 2018
 |  No Comments

PEMROGRAMAN MOBILE 2

KONSEP DASAR DESAIN UI ANDROID

KELOMPOK 5

 

Youngky Ricky Arief W                    (16.11.0288)

Mejiv Igazkia                                      (16.11.0291)

Alung Susli                                         (16.11.0292)

Rafly Maulana                                    (16.11.0295)

 Muchamad Arief didik                        (16.11.0296)

 Alif Nuraziz                                        (16.11.0297)

 Isna Budiati                                         (16.11.0299)

 Wahyu Aji Pangestu                            (16.11.0309)

Rahmita Pratama                                  (16.11.0312)

Muhamad Bagus Prabowo                   (16.11.0313)

Fajar Rizky Ferdrianto                         (16.11.0343)

 Anggi Saputra Daeng                          (16.11.0355)

TI16B

 

STMIK AMIKOM PURWOKERTO

2018

 

Kompetensi Mata Kuliah:

Mahasiswa dapat memahami konsep dasar tentang konsep dasar desain User Interface

Pengantar Awal Pemrograman Mobile:

  • Multi bahasa
  • Multi ukuran layar
  • Desain responsive

 

KONSEP DASAR DESAIN UI ANDROID

Bersarkan Wikipedia pengertian Desain User Interface adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna (User Experience) dan interaksi.

Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna—atau apa yang sering disebut dengan user-centered design.

  1. Multi Bahasa

Kebanyakan pengembang sebuah aplikasi, meraka hanya menyedikan satu macam bahasa saja, dan sebenarnya tidak menjadi masalah selama menggunkan bahasa International yaitu bahasa Inggris. Akan tetapi ketika memberikan support multi bahasa pada aplikasi kita ini akan membuat pengalaman pengguna aplikasi kita akan lebih baik karena mereka akan lebih mengerti dengan Bahasa yang ada pada aplikasi kita.

Dengan fitur yang mendukung multi bahasa ini, developer melihat kebutuhan pengguna Android yang berasal dari negara yang berbeda dengan berbagai macam bahasa. Maksud dari menyesuaikan bahasa yaitu ketika pada perangkat Android menggunakan bahasa Inggris (default) maka aplikasi tersebut menampilkan isi yang berbahasa Inggris. Dan jika mengubah pengaturan perangkat menjadi bahasa Indonesia, maka secara otomatis bahasa pada aplikasi tersebut berganti seluruhnya menjadi bahasa Indonesia, dan begitu seterusnya.

  • Untuk menambahkan dukungan untuk lebih banyak bahasa, buat direktori value, tambahan dalam /res yang menyertakan tanda hubung dan kode bahasa ISO di akhir nama direktori.
  • Misalnya, /values-es adalah direktori yang mengandung sumber daya sederhana untuk Lokal dengan kode bahasa “es” (spanyol).
  • Android memuat sumber daya yang sesuai menurut setelan lokal perangkat pada waktu proses.

 

2. Mendukung Multi Layar

Fondasi dukungan Android untuk multilayar adalah kemampuannya mengelola rendering layout aplikasi dan sumber daya dapat digambar berupa bitmap dengan cara semestinya untuk konfigurasi layar saat ini. Sistem menangani hampir semua pekerjaan untuk merender aplikasi Anda dengan benar pada setiap konfigurasi layar dengan menskalakan layout agar pas dengan kepadatan/ukuran layar dan menskalakan sumber daya dapat digambar yang berupa bitmap untuk kepadatan layar, sebagaimana mestinya. Akan tetapi, agar lebih mulus dalam menangani konfigurasi layar berbeda, Anda juga harus:

  • Secara eksplisit mendeklarasikan dalam manifes ukuran layar mana yang didukung aplikasi Anda

Dengan mendeklarasikan ukuran layar yang didukung aplikasi, Anda bisa memastikan bahwa hanya perangkat dengan layar yang didukung saja yang bisa mengunduh aplikasi Anda. Mendeklarasikan dukungan untuk ukuran layar berbeda juga bisa memengaruhi cara sistem menggambar aplikasi Anda pada layar yang lebih besar khususnya, bila aplikasi berjalan dalam mode kompatibilitas layar. Untuk mendeklarasikan ukuran layar yang didukung aplikasi, Anda harus menyertakan elemen <supports-screens> dalam file manifes.

  • Menyediakan layout berbeda untuk ukuran layar berbeda

Secara default, Android mengubah ukuran layout aplikasi Anda agar pas dengan layar perangkat saat ini. Umumnya, ini akan berhasil. Dalam kasus lain, UI Anda mungkin terlihat tidak bagus dan perlu penyesuaian untuk ukuran layar yang berbeda. Misalnya, pada layar yang lebih besar, Anda mungkin ingin menyesuaikan posisi dan ukuran sebagian elemen untuk memanfaatkan ruang layar tambahan, atau pada layar yang lebih kecil, Anda mungkin perlu menyesuaikan ukuran agar semuanya bisa pas pada layar.

Qualifier konfigurasi yang bisa Anda gunakan untuk menyediakan sumber daya ukuran spesifik adalah small, normal, large, dan xlarge. Misalnya, layout untuk layar ekstra besar harus masuk dalam layout-xlarge/. Untuk menambahkan dukungan terhadap beragam layar, buat direktori layout tambahan, di dalam folder /res yang menyertakan tanda hubung dan kode ukuran (small, normal, large, and xlarge).

  • Menyediakan sumber daya dapat digambar berupa bitmap untuk kepadatan layar berbeda

Secara default, Android menskalakan sumber daya dapat digambar berupa bitmap (file .png, .jpg, dan .gif) dan sumber daya dapat digambar berupa Nine-Patch (file .9.png) akan dirender pada ukuran fisik yang sesuai di setiap perangkat. Misalnya, jika aplikasi Anda menyediakan sumber daya dapat digambar berupa bitmap hanya untuk patokan, kepadatan layar medium (mdpi), kemudian sistem akan menaikkan skalanya bila di layar berkepadatan tinggi, dan menurunkan skalanya bila di layar berkepadatan rendah. Penskalaan ini bisa menyebabkan artefak di bitmap. Untuk memastikan penampilan terbaik bitmap, Anda harus menyertakan versi alternatif pada resolusi berbeda untuk kepadatan layar berbeda.

Qualifier konfigurasi (dijelaskan secara detail di bawah ini) yang bisa Anda gunakan untuk sumber daya kepadatan spesifik ldpi (rendah), mdpi (medium), hdpi (tinggi), xhdpi ekstra tinggi), xxhdpi (ekstra-ekstra-tinggi), dan xxxhdpi (ekstra-ekstra-ekstra-tinggi). Misalnya, bitmap untuk layar berkepadatan tinggi harus dimasukkan dalam drawable-hdpi/.

3. Desain Responsif

Untuk membuat desain responsif pada sebuah aplikasi, salah satu caranya dengan membuat orientasi layar untuk potrait dan landscape secara terpisah. Yang kemudian diatur  sendiri-sendiri file xml nya agar desain bisa ditampilkan dengan baik pada saat potrait maupun landscape.

  • Untuk menambahkan dukungan terhadap orientasi layar potrait dan landscape, buat direktori layout tambahan, di dalam folder /res yang menyertakan tanda hubung dan kode landscape (land).
  • Misalnya, /layout-land adalah direktori yang mengandung sumber daya layout untuk orientasi layar landscape
  • Didalam directory /layout-land kita bisa tambahkan file xml nya.

 

Contoh Projek Multi Bahasa, Multi Layar, dan Desain Responsif

Projek bisa di download pada link dibawah

Download projek Android Studio :

Download projek

Download materi ppt :

Konsep Dasar Desain UI Android – Kelompok 5

referensi :

https://developer.android.com/training/basics/supporting-devices/languages

https://developer.android.com/guide/practices/screens_support

 

Uncategorized