Panduan ini membantu Anda mulai mendesain Android dengan menerjemahkan desain seluler iOS yang ada ke Android menggunakan pola UX Android mendasar, bersama dengan Desain Material.
Dikelompokkan untuk kesamaan desain dan diurutkan untuk efisiensi. Jika Anda mengikuti sistem desain dasar bersama, Anda dapat menerjemahkan desain dengan sistem Anda sendiri, bukan Material 3. Android dan iOS mematuhi ide bahwa konten adalah yang utama.
Setelah itu, branding dapat ditampilkan melalui warna, huruf, dan bentuk. Hal ini tidak hanya memungkinkan keterbacaan konten, tetapi juga mempermudah pembuatan kohesi.
Mulai dengan desain iOS Anda
Sebelum memulai, buat salinan aplikasi iOS Anda. Aplikasi iOS dibagi menjadi tiga area: Kolom, Tampilan, dan Kontrol. Anda dapat menggunakan struktur ini untuk mengerjakan terjemahan, dengan gaya terakhir.
Lihat bagian-bagian aplikasi Android.
1. Menghapus UI sistem iOS
Hapus status bar dan indikator beranda. Sekarang lebih mudah melakukannya.
2. Mengubah ukuran frame
Anda dapat menggunakan ukuran ringkas Android, 412 dp. Namun, pertimbangkan berbagai perangkat meskipun dalam ukuran class jendela yang sama. Misalnya, lakukan pengujian pada 360 dp, untuk mengakomodasi layar yang lebih kecil, dan sesuaikan di semua ukuran class jendela.
3. Diganti dengan Batang Sistem Android
UI sistem Android dapat bervariasi bergantung pada perangkat dan setelan pengguna, tetapi menampilkan UI sistem bawaan dapat membantu memberikan lebih banyak konteks pada desain Anda. Tempatkan menu notifikasi di bagian atas dan menu navigasi gestur atau menu navigasi tiga tombol di bagian bawah.
Untuk mengetahui informasi selengkapnya, lihat Panel sistem Android.
4. Bergantung pada navigasi Anda
Tukar Tabbar (navigasi bawah) dengan Navigation Bar.
Lihat kembali peta alur Anda. Apakah aplikasi iOS Anda menggunakan menu lainnya? (Praktik terbaik HIG menyarankan untuk tidak menggunakan pola ini). Tetap gunakan lima item atau kurang, pertahankan panel navigasi bawah untuk navigasi utama, evaluasi apakah ada sesuatu yang sekunder, seperti profil atau setelan, yang dapat dipindahkan ke Panel Aplikasi Atas, atau mungkin Anda memiliki tindakan utama yang dapat diterjemahkan ke FAB?
Navigasi utama Anda harus selalu ada di tampilan induk (tingkat teratas untuk bagian dalam peta alur Anda). Tampilan turunan (apa pun di bawah tampilan induk) dapat menyertakan navigasi utama jika berada lebih tinggi dalam hierarki navigasi dan bukan modal.
Perbarui Menu Navigasi Bawah dengan ikon dan label yang sesuai. Kedua platform menghindari gerakan lateral di antara tujuan navigasi.
5. Menu Navigasi ke Panel Aplikasi Atas
Pecah ini bagian demi bagian; tampilan induk terlebih dahulu, lalu tampilan turunan. Panel Aplikasi terdiri dari sisi kiri: navigasi dan judul, serta sisi kanan: item tindakan.
Jika aplikasi Anda menggunakan menu panel navigasi, bukan menu navigasi bawah, ikon panel akan ditampilkan di semua tampilan induk.
Jika aplikasi Anda tidak memiliki rel, atau panel samping, tampilan induk tidak akan menampilkan ikon navigasi utama.
Judul diratakan kiri secara default di Panel Aplikasi untuk Android.
Tampilan turunan memiliki panah atas di tempat ikon navigasi. Jangan sampai tertukar dengan kembali. Panah atas memindahkan pengguna ke tingkat atas melalui hierarki navigasi aplikasi dalam alur pengguna, sementara geser kembali atau tepi berada di navigasi sistem, memindahkan pengguna ke belakang dan bahkan membawa pengguna keluar dari aplikasi.
Bagaimana dengan tampilan modal? Untuk modal layar penuh (seperti pemutar video dan gambar), tampilannya akan mirip dengan App Bar tampilan turunan, kecuali ikon navigasi harus berubah menjadi tutup, yang menutup modal.
6. Lebih banyak modalitas
Mulailah dengan tampilan modal besar, yang paling baik digunakan untuk memfokuskan perhatian pengguna pada suatu tugas. Di iOS, ini sering terlihat sebagai sheet, tempat pengguna dapat menggesernya ke bawah.
Selesaikan penggantian Panel Aplikasi. Untuk modal sheet iOS, ganti bagian sheet atas dan intipan latar belakang dengan Panel Aplikasi dialog layar penuh.
Bonus: Periksa apakah ada sheet modal iOS Anda yang dapat diterjemahkan menjadi sheet bawah.
Sheet Tindakan dan Aktivitas ke Sheet bawah. (Lembar berbagi juga dapat diterjemahkan sekarang).
Untuk pemberitahuan, gunakan dialog sistem. Jika Anda menggunakannya untuk informasi penting yang perlu dikonfirmasi pengguna dengan cara tertentu, ganti dengan dialog sistem. Jangan lupa untuk menukar input dan pemilih pada tahap ini juga.
7. Konten saudara kandung
Tab atau penggeser tampilan atau tab geser. Jika Anda menggunakan kontrol tersegmentasi di iOS, kontrol ini akan diterjemahkan ke tab di Android. Keduanya berfungsi sebagai cara untuk memfilter antara tampilan informasi yang serupa, tetapi tidak sama. Tab Android biasanya dilampirkan ke App Bar, dan memiliki manfaat tambahan berupa kemampuan untuk menggeser antar-konten.
8. Konten & Kontrol
Bergantung pada cara Anda menyiapkan batasan atau perilaku pengubahan ukuran, sebagian besar konten Anda mungkin sudah diubah ukurannya. Namun, luangkan waktu ini untuk melihat dan menyetel margin Anda. 16 dp adalah standar yang baik di layar kecil.
Petak dasar didasarkan pada petak 8 dp untuk komponen dan 4 dp untuk huruf dan ikon. Petak 8 pt berfungsi dengan baik di iOS, jadi mungkin pertimbangkan petak ini sebagai titik awal untuk kedua platform.
Kontrol. Ganti tombol tersebut dengan tombol Android. Menggunakan kotak centang dan tombol pilihan Android. Android dilengkapi dengan semua fitur ini.
Jika Anda memiliki formulir, ganti kolom teks iOS dengan kolom teks Android. Material hadir dengan opsi seperti garis luar atau diisi, jadi pilih salah satu yang paling sesuai dengan branding Anda.
Daftar Material memiliki beberapa perbedaan jika dibandingkan dengan sel tabel iOS:
- Garis pemisah digunakan seperlunya.
- Indikator tidak digunakan pada daftar untuk meminimalkan gangguan visual.
- Dimensi mematuhi petak 8 dp.
9. Gaya
Warna: Warna UI terdiri dari warna aksen, semantik, dan permukaan yang disusun dalam skema warna. Warna ini diterapkan ke UI berdasarkan perannya.
Huruf: Jika menggunakan font sistem, ganti San Francisco. Roboto adalah font sistem default untuk Android. Namun, kami mendorong Anda untuk mengekspresikan gaya unik merek Anda dengan tema dan font Google yang dapat didownload.
Ikon: Sama seperti di sini. Jika menggunakan simbol SF, periksa kembali apakah semuanya telah dikonversi menjadi Ikon atau Simbol Material. Pilih variasi yang tepat untuk merek Anda. Tahukah Anda bahwa Anda dapat menggunakan ikon material di platform apa pun?
Gerakan: Android dan iOS memiliki desain gerakan yang berbeda, yang harus diperhatikan untuk setiap platform. Gerakan material bersifat informatif, fokus, dan diekspresikan. Ripple adalah sorotan berbeda yang digunakan dalam komponen untuk memberikan masukan sentuhan. Sistem Gerakan adalah serangkaian pola transisi untuk memanfaatkan animasi transformasi container, sumbu merata, memudar, dan pudar. Pertimbangkan apakah elemen dalam desain Anda memiliki penampung persisten, hubungan antar-elemen, dan cara elemen tersebut masuk atau keluar.
10. Rapikan
Jika Anda menerjemahkan prototipe, ini adalah titik yang tepat untuk menyusun ulang semuanya. Kembali melalui navigasi utama Anda. Kemudian, pilih App Bar Anda, ingat perbedaan antara naik dan kembali, dan pastikan untuk memilih transisi halaman yang sesuai untuk Android (disebutkan di langkah 9).
Anda harus menyiapkan prototipe yang berfungsi penuh, dan karena Anda telah mengubah ukurannya, prototipe tersebut siap diserahkan.
Panduan gaya dan komponen
Jika memiliki sistem desain atau panduan gaya yang sudah ada, Anda mungkin memiliki gaya dasar (warna, huruf, ikon, bentuk) sendiri yang dapat digunakan bersama dengan Desain Material, seperti yang akan Anda gunakan bersama panduan iOS. Dengan Penerapan Tema Material, Anda dapat menyesuaikan komponen Material dengan gaya unik brand Anda menggunakan warna, jenis, dan bentuk.
Memiliki panduan khusus platform adalah hal yang umum di antara produk multiplatform dan dapat membuat sistem desain Anda sendiri lebih berfokus pada pengguna.
Terakhir, jika Anda bekerja tanpa sistem desain, ketahui bahwa tidak setiap aplikasi atau produk memerlukan sistem desain kustom penuh. Pertimbangkan untuk membuat panduan gaya satu halaman. Panduan gaya adalah dokumen yang menguraikan spesifikasi dasar untuk desain. Pedoman branding sering kali berisi panduan gaya di dalamnya.
Hal ini dapat disalin untuk Android dan digunakan sebagai sumber untuk memperbarui gaya (atau simbol, komponen, atau pustaka).