Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. UI Design
Webdesign

Kisah Dua Platform: Rancangan untuk Android dan iOS

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Baik Anda bekerja dalam rumah, mengontrak, atau untuk biro iklan, perusahaan membutuhkan aplikasi karena berbagai alasan. Perusahaan-perusahaan yang sudah mapan secara khusus harus melayani pelanggan mereka yang ada dan perangkat yang mereka gunakan. Seringkali itu artinya aplikasi baru untuk Android dan iPhone.

Di dunia yang ideal, kita menghabiskan waktu berbulan-bulan untuk merancang dua aplikasi. Namun dalam kenyataannya, banyak proyek tidak memberikan yang banyak waktu. Untuk aplikasi apa pun yang saya kerjakan, deadline sudah cukup ketat untuk merancang satu aplikasi, apalagi membagi proyek menjadi dua.

Cukup sering Anda merancang satu aplikasi, dengan tweak yang dibuat sebelum menyerahkannya ke dua tim pengembangan. Jika Anda merancang sebuah aplikasi dengan cara ini, penting untuk memahami perbedaan antara dua platform awal, dan cara-cara cepat yang Anda dapat membuat pengalaman merasa asli untuk masing-masing.

Sebelum Anda Mulai: Pilih Pendekatan Anda 

1. Jagalah musuh Anda lebih dekat

Sepertinya Anda akan memiliki preferensi pribadi untuk satu sistem. Aku selalu menggunakan iPhone, jadi saya memiliki pemahaman yang lebih alami pola UI pada iOS. Hal pertama yang harus dilakukan adalah mengatasi platform lain, dan cara terbaik untuk melakukan ini adalah dengan membeli perangkat lain, Android dalam kasus saya. Bahkan mungkin ide yang bagus untuk menggunakan ini sebagai perangkat utama Anda untuk durasi proyek, untuk benar-benar merasakan platform.

Jika Anda bekerja di rumah, suruh mereka membelikan Anda perangkat tes. Jika ada masalah, komunikasikan dengan manajemen nilai yang memahami platform alternatif akan menambah pekerjaan desain Anda (biayanya mahal untuk dua perangkat dari kantong Anda sendiri, tetapi untuk bisnis itu biaya yang rendah dibandingkan pengeluaran pada desain dan pengembangan aplikasi baru). Jika Anda bekerja freelance, Anda harus bisa menuliskannya terhadap tagihan pajak Anda.

2. Pilih Pemimpin

Karena kami merancang untuk dua platform sekaligus, sementara berurusan dengan dunia nyata di mana waktu terbatas, Anda harus menerima kenyataan memprioritaskan satu platform di awal. Buat keputusan ini tidak berdasarkan preferensi pribadi Anda, tetapi berdasarkan pasar untuk aplikasi Anda. Apakah lebih banyak orang di pasar Anda menggunakan ponsel Android? Apakah itu app berbayar? Apa yang dimaksud dengan target audiens? Mengajukan pertanyaan-pertanyaan ini akan membantu Anda memutuskan mana yang lebih baik.

3. Tahu Aturan

Membaca tentang pedoman UI untuk Android dan iOS. Di masa lalu Apple dikenal karena lebih ketat dengan pedoman mereka. Untuk mendapatkan aplikasi di app store, ada proses persetujuan yang memerlukan waktu sekitar dua minggu. Ada tidak ada proses persetujuan untuk Play store. Namun, karena penghalang yang lebih rendah untuk masuk pada Android, kualitas desain secara tradisional lebih buruk. Google ingin mengubah ini dengan Material Design guidelines mereka.

Estetika Desain Material telah menjadi sangat akrab bagi para desainer web

Ada banyak kit UI yang bagus dan gratis yang dapat Anda gunakan untuk proyek Anda (Anda akan menemukan beberapa yang terdaftar di bagian akhir artikel ini). Menggunakan komponen ini akan secara alami memberikan aplikasi Anda merasakan asli. Tetapi bahkan ketika Anda mendapatkan kit UI, mungkin sulit mengetahui di mana harus berbeda dan di mana harus tetap sama antara platform, jadi di sanalah saya ingin membantu.

Merancang Aplikasi Anda

Ikuti langkah-langkah sederhana ini, dan aplikasi Anda akan berada di jalur yang benar untuk menyesuaikan pada perangkat Android dan iOS.

1. Gaya Umum 

Sejak iOS7, Apple telah beralih ke gaya desain yang lebih datar, dan membuang bayangan, tekstur dan efek skeuomorphic yang menentukan tahun-tahun awal iPhone. Android, yang lebih sistematis dalam gaya pada awalnya, sedikit berbeda. Panduan Desain Material baru Google membuat referensi yang lebih halus ke dunia nyata, dengan pendekatan "kertas" berlapis yang memberikan lebih banyak hierarki.

2. Tombol Nyata

Ponsel Android memiliki tombol kembali, yang dapat digunakan untuk kembali ke layar sebelumnya dalam app.

Mundur

iPhone tidak memiliki tombol ini, jadi perlu ada cara untuk kembali ke layar sebelumnya. Ini biasanya dilakukan oleh chevron "back" di kiri atas layar, tetapi perlu dipertimbangkan di seluruh berbagai perjalanan di aplikasi Anda.

3. Global elemen

Ada elemen global (seperti bilah status dan tajuk) yang muncul di semua halaman desain Anda. Anda tidak boleh mengubah tinggi atau gaya bilah ini sama sekali jika Anda ingin aplikasi tersebut terasa asli, jadi saya akan menyarankan untuk mendefinisikannya sekali dalam desain halaman pertama Anda untuk setiap platform. Kemudian setelah itu Anda dapat menggunakan placeholder (atau status dan bilah atas dari OS utama Anda) pada masing-masing mockup Anda, tetapi menunjukkan kepada pengembang bahwa itu harus sama di seluruh papan.

Ada sedikit perbedaan antara bilah navigasi di setiap platform. Di Android, teks rata kiri, sedangkan untuk iOS di rata tengah. Pada iOS, banyak perusahaan mengganti judul halaman utama dengan logo perusahaan mereka, tetapi hal ini bukan praktek terbaik pada Android. Status bar (dengan jaringan, baterai, dan informasi waktu) adalah komponen yang asli, dan Anda tidak perlu mempertimbangkan desain. Pastikan saja ketika menyajikan maket untuk menggunakan yang benar dalam menghindari kebingungan atau gangguan.

Global Elements on Android and iOS

4. Navigasi

Mungkin perbedaan terbesar antara iOS dan platform Android adalah navigasi. Pola navigasi utama di Android adalah menu drawer. Pengguna Android secara alami pergi ke ini untuk item menu, dan itu cenderung selalu ada di seluruh pengalaman. Panduan Apple lebih mendukung tab bar, yang terletak di bagian bawah layar, dan memungkinkan akses mudah ke area tingkat atas aplikasi. Ketika Anda memutuskan arsitektur tingkat teratas dari aplikasi Anda, Anda dapat merencanakan dua menu terpisah untuk dua platform.

Memikirkan tentang arsitektur aplikasi ini bisa dibilang lebih penting daripada tata letak menu-poin yang saya buat di artikel lain tentang beberapa masalah ini. Jika struktur Anda suara, navigasi akan mengikuti.

Seperti yang Anda lihat di sini, ada dua pola navigasi: menu drawer untuk Android dan bilah tab untuk iOS. Terkadang lebih mudah untuk hanya menyembunyikan lapisan navigasi saat Anda bekerja pada tampilan individual.

Navigation patterns on Android and iOS

5. Kartu, atau tidak?

Kartu menjadi pola UI utama dalam desain digital. Mereka serba guna dan memungkinkan pengguna untuk mengonsumsi cepat konten dengan cara yang sesuai dengan perilaku seluler. Secara visual, kartu sangat cocok dengan desain materi Android (terinspirasi oleh kertas). Menggunakan drop shadow dan reasonable gutters di antara kartu akan menciptakan tampilan dan nuansa asli secara alami.

Di iOS, menggunakan kartu membutuhkan lebih banyak perhatian dan pertimbangan. Bahkan aplikasi besar seperti Facebook dan Pinterest menggunakan kartu dengan cara yang sedikit tidak sesuai dengan pedoman iOS. Pedoman iOS menyarankan penggunaan kedalaman dalam transparansi dan overlay, tetapi tampilan dasarnya biasanya lebih datar. Instagram menggunakan gaya desain yang sepenuhnya datar, meskipun setiap posting dapat dianggap sebagai kartu dari sudut pandang arsitektur. Sebaiknya perhatikan bagaimana Instagram mendapatkan komponen yang sama dalam gaya iOS. Jika Anda menggunakan kartu di iOS, Anda harus sangat berhati-hati menggunakan bayangan apa pun, dan cobalah membuatnya tetap selembut mungkin.

Cards for Android and iOS
Kartu untuk Android dan iOS, beberapa dimensi meminjamkan sedikit kemampuan

6. Tipografi

Sistem font family di iOS adalah Helvetica Neue. Di Android itu adalah Roboto. Meskipun gaya dari tipografi sangat berbeda, metrik font sebenarnya cukup mirip. Jika Anda menghemat waktu Anda akan cukup aman untuk bekerja dengan hanya satu, tetapi komunikasikan dengan pengembang untuk menerapkan font yang tepat untuk sistem. Ketika bekerja dengan tata letak penting dan ekstrem dalam ukuran jenis, sebaiknya setidaknya menguji tata letak Anda dengan kedua font.

Jika Anda ingin bekerja ekstra, Anda harus lebih memperhatikan konvensi tipografi dan tata letak pada setiap platform, lagi-lagi mengacu pada pedoman di atas. Beberapa generalisasi:

  • Desain Materi Android menggunakan banyak ruang putih dalam tata letak
  • Ada juga penggunaan ukuran font yang lebih dramatis dalam desain material. Judul mencolok dengan banyak ruang menyediakan hierarki
  • Di iOS, ada variasi ukuran yang kurang dramatis. Namun ada sedikit variasi dalam bobot font, yang masih memungkinkan Anda membuat hierarki.
  • Biasanya, kedua platform menggunakan bobot yang lebih ringan dalam keluarga font. Namun, dalam contoh di bawah ini, desain Android menggunakan light dan regular weights Roboto, sementara desain iOS menggunakan bold dan regular weights Helvetica Neue.

Ini adalah contoh yang sangat sederhana, untuk menekankan bagaimana bahkan dengan cara sederhana, tipografi dapat segera memberi tahu Anda jika Anda berurusan dengan Android atau aplikasi iOS.

Typography on Android and iOS

7. Grids dan touch target

iOS (44px @1 x) dan Android (48dp - 48px pada rasio 1:1) memiliki pedoman sedikit berbeda dalam touch target. Pedoman Desain Material juga menyarankan menyelaraskan semua elemen ke 8dp square baseline grid.

Pada proyek terbaru yang saya kerjakan, kami merasa lebih aman mengikuti pedoman Android ini karena (a) touch target 48px yang lebih besar aman untuk kedua platform, dan (b) tata letak untuk desain Material lebih jelas dan terbaru. Dengan kata lain, Anda akan membutuhkan grid untuk bekerja, tetapi dengan Android yang lebih ketat dalam membatasi kami menemukan 8dp berfungsi dengan baik. Ini berarti mengatur dokumen Anda dengan penambahan 8dp di kedua bidang horisontal dan vertikal untuk membuat tiled grid layout.

8. Tombol Gaya

Ada beberapa gaya tombol yang didefinisikan dalam Desain Material:

  1. Floating action buttons: tombol berbentuk paling tradisional. Drop shadow cukup berat dan mengangkatnya dari halaman. Ini hanya boleh digunakan pada background, atau hemat pada kartu. Mereka seharusnya tidak digunakan sama sekali pada peringatan atau popup, karena hal itu menciptakan terlalu banyak lapisan kedalaman. Tindakan utama mengambil warna aksen Anda, sementara versi sekunder biasanya warna yang kurang menonjol.
  2. Flat buttons: pada dasarnya teks dalam warna aksen Anda, tanpa elemen pembatas apa pun. Mereka menggunakan padding dan semua huruf besar untuk memberikannya struktur.

Dibandingkan dengan Desain Material, aplikasi iOS biasanya datar dalam penampilan, tidak menggunakan depth atau drop shadow. Tombol utama memiliki warna isi, sementara tombol sekunder dibaliknya, menggunakan stroke warna yang sama. Metafora ini dapat menjadi agak terbatas, terutama bila dibandingkan dengan tab dan elemen lain untuk diikuti. Untuk mendapatkan gaya yang sangat datar ini, penting untuk memiliki metafora yang jelas dan konsisten untuk warna apa yang berarti di aplikasi Anda.

iOS juga memiliki tombol gaya teks biasa, tetapi tidak berbagi gaya huruf besar Android, dan lebih ringan dalam bobot font.

Button styles on Android and iOS

9. Lembar Tindakan

Lembar tindakan memungkinkan pengguna memilih banyak tindakan dari satu item UI. Sebagai contoh, ketika saya menyentuh (atau tekan agak lama) pada gambar saya mungkin ingin berbagi, upload, menyalin, atau menghapus gambar.

iOS dan Android menangani ini dengan cara yang sedikit berbeda. Pertama, ada lembar tindakan serupa yang ditampilkan dari bagian bawah layar, sebagai overlay pada tampilan saat ini.

Dengan lembar Tindakan, hamparan, dan lansiran, iOS dan Android menggunakan detail yang berbeda untuk menunjukkan kedalaman lapisan:

  • Hamparan Android memiliki warna solid dengan sedikit drop shadow untuk menunjukkan bahwa itu adalah lapisan "kertas" di atas.
  • Hamparan iOS tidak memiliki drop shadow, tetapi sedikit transparansi pada latar belakang.
Action sheet differences on Android and iOS

Tombol Dropdown 

Hanya pada Android, ini adalah metode cepat untuk membuat pilihan. Namun, ingatlah bahwa tidak ada yang setara dengan iOS asli. Dalam contoh di bawah ini, pengguna menekan "profil" pada langkah 1, dan disajikan dengan menu sederhana di lokasi tersebut untuk memilih salah satu profil yang tersedia. Menu ini juga sering digunakan dari tombol hamparan di action bar, ditunjukkan oleh tiga titik vertikal.

Specific Data Input

Untuk masukan tertentu seperti tanggal dan waktu, Android now comes with built in dialogues. Ini terlihat seperti popup peringatan, tetapi dengan UI secara khusus melayani untuk memasukkan jenis data ini. Contoh ditunjukkan dari input kalender. Android memiliki hamparan yang dioptimalkan tersedia untuk memasukkan tanggal. Penawaran iOS dengan ini sangat berbeda, muncul sebagai roda yang muncul seperti bottom sheet. Hati-hati dalam merencanakan ini, dan berkomunikasi dengan pengembang sejak awal pada komponen input.

10. Kontrol tersegmentasi

Kontrol tersegmentasi digunakan untuk beralih antara konten yang berbeda dalam satu tampilan. Penggunaannya hampir sama, tetapi sangat khas secara visual di setiap platform, jadi penting untuk menggunakan gaya yang tepat. Di iOS ada tiga tab, ditata mirip dengan tombol garis yang dibahas sebelumnya. Di Android, mereka dilambangkan dengan garis bawah sederhana, dan diberi lebih banyak ruang putih untuk menandakan interaksi mereka.

Segmented controls on Android and iOS

11. Peringatan

Penting untuk mendapatkan gaya hak ini karena mereka dapat mengontrol tindakan penting seperti mendaftar, menerima persyaratan, atau bahkan mengonfirmasi pembayaran. Kami ingin mereka merasa dapat dipercaya dan asli.

Peringatan Android menggunakan gaya tombol datar yang ditunjukkan sebelumnya, dimensi yang dapat ditemukan dalam pedoman desain material. Tindakannya berada di kanan bawah dari peringatan. "Tombol" yang benar-benar sepenuhnya berbasis teks. Mereka menggunakan semua tutup untuk memberi mereka lebih banyak struktur, dan mereka membawa warna aksi utama aplikasi Anda. 

Pada iOS, tindakan dipisahkan oleh pembagi. Mereka biasanya berada dalam kalimat atau judul kasus, karena mereka mendapatkan struktur mereka berasal dari blok terpisah. Mereka berada di tengah area, dan sekali lagi mereka akan mewarisi warna aktif Anda.

Example of alert dialogues for Android and iOS using location as an example

12. Ikon

Desain ikon cukup bidang spesialis dalam desain UI. Baik Anda menggunakan ikon gratis, menugaskan desainer ikon, atau merancang ikon sendiri, ada gaya asli yang berbeda untuk masing-masing platform. iOS Dipopulerkan ikon baris, dengan stroke sangat tipis. Android sistem ikon memiliki stroke tebal, atau ikon sepenuhnya sangat solid.  Di masa lalu, ikon Android menggunakan perspektif atau putaran tiga dimensi, tetapi sekarang panduan mereka menentukan dua ikon dimensi yang dilihat langsung. Berikut contoh cepat dengan beberapa ikon untuk perbandingan, atau gunakan tautan langsung ke panduan ikon untuk Android atau iOS

13. Snackbars, toasts, loading images

Sayangnya. Ada beberapa detail UI yang dapat lolos dari celah. Yang umum seperti lansiran dan ikon pemuatan seringkali diserahkan kepada pengembang. Anda mungkin telah mengalami penipuan dan peringatan aneh yang terasa tidak selaras dengan aplikasi lainnya. Ada cenderung solusi asli untuk hal ini, tetapi mereka dapat disetel ke gaya aplikasi Anda. Ini jelas merupakan area di mana kolaborasi dengan pengembang adalah cara terbaik untuk memutuskan di mana Anda harus bekerja

14. Kontrol UI Umum

Tombol radio, check box, bidang, dan sakelar adalah komponen fungsional yang harus diberikan nuansa asli.  Dengan Lansiran dan dialog, kontrol dan masukan ini merupakan wilayah kepercayaan dan keakraban bagi pengguna. Gunakan komponen asli sebanyak mungkin untuk ini, sehingga orang (a) tahu cara menggunakannya, dan (b) percaya aplikasi Anda dengan data sensitif atau detail pembayaran mereka.

Dalam contoh di bawah ini, kami melihat tombol dan ekuivalen tombol radio untuk Android dan iOS. Sekali lagi, perbedaannya cukup kecil untuk Anda maju dengan satu desain, dan tweak untuk yang lain nanti, tetapi perbedaan halus sangat penting untuk tampilan asli. Gunakan kit UI Anda sebanyak mungkin untuk komponen ini, dan lagi komunikasikan dengan pengembang sejak awal dalam prosesnya.

Android left and iOS right
Android (kiri) dan iOS (kanan)

Ringkasan

Ini bukanlah tugas yang mustahil untuk menciptakan nuansa asli untuk aplikasi Anda di iOS dan Android dengan satu desain. Cobalah untuk tetap di atas tweak ini dari awal, perhatikan komponen yang terasa tidak sinkron pada satu platform, dan selalu bekerja sedekat mungkin dengan pengembang.

Sumber

Artikel ini mudah-mudahan akan memberi Anda jawaban cepat tentang di mana harus menyimpang merancang untuk dua aplikasi, tetapi Anda juga memerlukan beberapa alat dan template untuk menjalankan desain Anda dengan benar. Ada banyak sumber yang tersedia secara umum yang dapat Anda gunakan sebagai titik awal, berikut adalah beberapa yang terbaik:

Pedoman

Jika Anda ingin tahu lebih, banyak informasi yang saya berikan dapat ditemukan di panduan platform. Mereka cukup luas, jadi saya hanya menarik bagian-bagian yang penting untuk dibandingkan. Tapi jika Anda memiliki pertanyaan lebih spesifik ini adalah tempat terbaik untuk memulai:

UI kit

Kit UI ini akan menyelamatkan Anda menciptakan dasar kontrol asli dan cocok ukuran. Anda dapat memetik potongan-potongan yang Anda butuhkan dan kemudian beralih di antara mereka untuk output Android dan iPhone dari desain Anda.

Ikon

Bahkan jika Anda membuat ikon sendiri, atau menugaskan ikon, mereka berguna untuk dimiliki sebagai placeholder saat Anda bekerja. Desain ikon dapat menjadi pekerjaan itu sendiri, dan Anda tidak ingin ikon melambatkan Anda saat Anda merasakan keseluruhan aplikasi Anda. Saya baru-baru ini menemukan tautan di bawah ini di icons8 terlihat bagus, atau flaticon.com sangat bagus untuk ikon yang lebih umum.

Mockups

Selalu berguna untuk memiliki mockup perangkat untuk menyajikan aplikasi Anda. Yang datang dalam berbagai kategori. Anda mungkin ingin mockup perangkat dasar untuk konteks, perangkat datar yang disederhanakan untuk membiarkan aplikasi Anda bersinar, atau mockup gaya hidup untuk menyajikan kasus penggunaan. Berikut beberapa sumber yang menurut saya bermanfaat, ada banyak lagi di luar sana. Ketika datang ke perangkat Android, hati-hati yang Anda pilih. Saya akan condong ke kisaran Nexus, karena mereka adalah ponsel Google sendiri dan tidak akan mengisyaratkan preferensi terhadap produsen lain.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.