Yang ada di artikel ini adalah untuk memahami user interface dan elemen pada Android 3.x Honeycomb. Diharapkan Anda yang berencana mendesain aplikasi untuk tablet Android akan memiliki dasar bagaimana aplikasi itu nantinya kompatibel untuk tablet Android.
Perlu diketahui jika aplikasi pada Android 2.x bisa dijalankan pada tablet Android, Android 3.0 Honeycomb didesain khusus untuk tablet. Update yang akan dan telah diberikan Google pada Honeycomb akan mampu memberikan fitur pada Honeycomb untuk ponsel Android.
Mengingat tablet pertama yang meledak di pasaran dan dikenal banyak orang adalah iPad, maka tidak ada salahnya membuat perbandingan user interface antara iPad dan Android tablet. Dengan membandingkan itu, Anda nantinya dapat memenuhi keinginan user akan UI yang unik dan berbeda.
Adanya touch gestures, app launch icons, modals, dan hal-hal lain yang membuat iPad dan tablet Android memiliki banyak persamaan, maka sebagai seorang desainer Anda harus tahu perbedaan di antara keduanya.
1. Ukuran Screen dan Orientasi
Perbedaan terbesar antara dua platform tersebut ada pada form factor. Layout di iPad berukuran 768 x 1024 dan menggunakan portrait mode sebagai orientasi default.
Sementara untuk tablet Android, harus diakui lebih komplek karena dibuat oleh beragam vendor. Secara umum terbagi menjadi ukuran 7 dan 10 inci; yakni angka yang didapat dari mengukur secara diagonal dari sudut kiri atas ke sudut kanan bawah. Meski demikian, kebanyakan tablet Android yang ada saat ini berkuruna 10 inci.
Jika dihitung tanpa system bar maka tablet Android 10 inci dan menggunakan orientasi landscape akan memiliki layout 1280 x 752 pixel. Seperti halnya iPad, konten di tablet Android bisa ditampilkan baik dalam mode landscape maupun portrait namun kebanyakan mode landscape lebih disukai.
^Portrait mode di tablet Android 10 inci (kiri) dan pada iPad (kanan)
^Landscape mode di tablet Android 10 inci (kiri) dan di iPad (kanan)
Tablet Android memiliki densitas screen yang berbeda; jumlah piksel dalam area screen. Sebagai seorang desainer Anda harus menyiapkan tiga densitas screen yang berbeda dengan cara skala setiap bitmap yang Anda buat 1,5x dan 2x lebih besar dari ukuran aslinya. Sebagai contoh, sebuah bitmap image yang berukuran 100 x 100 pixel harus Anda copy menjadi 150 x 150 dan 200 x 200. Dengan memiliki 3 ukuran itu Anda akan bisa menciptakan bitmap untuk 5 ukuran densitas screen: medium, high dan extra high tanpa khawatir kehilangan kualitas image.
2. System Bar
Jika iOS memiliki system bar minimal, Android Honeycomb justru memiliki ukuran yang lebih besar dengan menyertakan tombol notifikasi dan soft navigasi di dalam screen. Ada tombol Back, Home dan Recent apps yang akan selalu muncul di setiap aplikasi layaknya sebuah UI permanen.
^ System bar di tablet Android Honeycomb
3. ‘Back’ Button
Tombol back yang ada di system bar Honeycomb bisa berfungsi global di semua aplikasi
4. Action Bar
Perbedaan pada besarnya UI anta platform bisa dilihat pada action bar yang terletak di bagian atas. Bar tersebut untuk mengatur elemen dan format visual seperti peletakan icon dan logo sebuah aplikasi.
5. Widgets
Widget berfungsi sebagai notifikasi kecil dan shortcut tool yang yang bisa diatur oleh user untuk bisa muncul di launch screen. Widget bisa didesain untuk menunjukkan stack views, grid views dan list views. Dengan adanya Android 3.1 widget tersebut kini bisa diatur ukurannya.
6. Notifikasi
Berbeda dengan sistem notifikasi pada iOS yang menunjukkan simple alert ke lauch screen, Honeycomb memberikan notifikasi lengkap yang muncul di sudut kanan bawah screen. Custom layout untuk notifikasi bisa bermacam-macam mulai dari bentuk icons sampai text dan button.
7. Setting
Setting di Honeycomb terlihat seperti General Settings di layar iOS. User bisa menavigasi kategori yang ada di sebelah kiri dan melihat detailnya di sebelah kanan.
8. UI Elements
Elemen pada UI Honeycomb sangat berbeda dengan yang ada di iOS. Bahkan kini UI Honeycomb memiliki ‘holographic UI’ visual language untuk hal-hal rutin yang sering Anda lakukan seperti setting jam, memilih sebuah opsi, setting volume, dll. Memahami bahasa UI sangat penting untuk bisa menciptakan screen flows dan layout.
Perlu diketahui jika aplikasi pada Android 2.x bisa dijalankan pada tablet Android, Android 3.0 Honeycomb didesain khusus untuk tablet. Update yang akan dan telah diberikan Google pada Honeycomb akan mampu memberikan fitur pada Honeycomb untuk ponsel Android.
Mengingat tablet pertama yang meledak di pasaran dan dikenal banyak orang adalah iPad, maka tidak ada salahnya membuat perbandingan user interface antara iPad dan Android tablet. Dengan membandingkan itu, Anda nantinya dapat memenuhi keinginan user akan UI yang unik dan berbeda.
Adanya touch gestures, app launch icons, modals, dan hal-hal lain yang membuat iPad dan tablet Android memiliki banyak persamaan, maka sebagai seorang desainer Anda harus tahu perbedaan di antara keduanya.
1. Ukuran Screen dan Orientasi
Perbedaan terbesar antara dua platform tersebut ada pada form factor. Layout di iPad berukuran 768 x 1024 dan menggunakan portrait mode sebagai orientasi default.
Sementara untuk tablet Android, harus diakui lebih komplek karena dibuat oleh beragam vendor. Secara umum terbagi menjadi ukuran 7 dan 10 inci; yakni angka yang didapat dari mengukur secara diagonal dari sudut kiri atas ke sudut kanan bawah. Meski demikian, kebanyakan tablet Android yang ada saat ini berkuruna 10 inci.
Jika dihitung tanpa system bar maka tablet Android 10 inci dan menggunakan orientasi landscape akan memiliki layout 1280 x 752 pixel. Seperti halnya iPad, konten di tablet Android bisa ditampilkan baik dalam mode landscape maupun portrait namun kebanyakan mode landscape lebih disukai.
^Portrait mode di tablet Android 10 inci (kiri) dan pada iPad (kanan)
^Landscape mode di tablet Android 10 inci (kiri) dan di iPad (kanan)
Tablet Android memiliki densitas screen yang berbeda; jumlah piksel dalam area screen. Sebagai seorang desainer Anda harus menyiapkan tiga densitas screen yang berbeda dengan cara skala setiap bitmap yang Anda buat 1,5x dan 2x lebih besar dari ukuran aslinya. Sebagai contoh, sebuah bitmap image yang berukuran 100 x 100 pixel harus Anda copy menjadi 150 x 150 dan 200 x 200. Dengan memiliki 3 ukuran itu Anda akan bisa menciptakan bitmap untuk 5 ukuran densitas screen: medium, high dan extra high tanpa khawatir kehilangan kualitas image.
2. System Bar
Jika iOS memiliki system bar minimal, Android Honeycomb justru memiliki ukuran yang lebih besar dengan menyertakan tombol notifikasi dan soft navigasi di dalam screen. Ada tombol Back, Home dan Recent apps yang akan selalu muncul di setiap aplikasi layaknya sebuah UI permanen.
^ System bar di tablet Android Honeycomb
3. ‘Back’ Button
Tombol back yang ada di system bar Honeycomb bisa berfungsi global di semua aplikasi
4. Action Bar
Perbedaan pada besarnya UI anta platform bisa dilihat pada action bar yang terletak di bagian atas. Bar tersebut untuk mengatur elemen dan format visual seperti peletakan icon dan logo sebuah aplikasi.
5. Widgets
Widget berfungsi sebagai notifikasi kecil dan shortcut tool yang yang bisa diatur oleh user untuk bisa muncul di launch screen. Widget bisa didesain untuk menunjukkan stack views, grid views dan list views. Dengan adanya Android 3.1 widget tersebut kini bisa diatur ukurannya.
6. Notifikasi
Berbeda dengan sistem notifikasi pada iOS yang menunjukkan simple alert ke lauch screen, Honeycomb memberikan notifikasi lengkap yang muncul di sudut kanan bawah screen. Custom layout untuk notifikasi bisa bermacam-macam mulai dari bentuk icons sampai text dan button.
7. Setting
Setting di Honeycomb terlihat seperti General Settings di layar iOS. User bisa menavigasi kategori yang ada di sebelah kiri dan melihat detailnya di sebelah kanan.
8. UI Elements
Elemen pada UI Honeycomb sangat berbeda dengan yang ada di iOS. Bahkan kini UI Honeycomb memiliki ‘holographic UI’ visual language untuk hal-hal rutin yang sering Anda lakukan seperti setting jam, memilih sebuah opsi, setting volume, dll. Memahami bahasa UI sangat penting untuk bisa menciptakan screen flows dan layout.
0 komentar:
Posting Komentar