Cara Menerapkan Desain UI iOS Pixel-sempurna

Anda mungkin pernah mendengar ungkapan "desain pixel-sempurna" berkali-kali, bahkan tanpa mempertimbangkan apa artinya, atau apa artinya. Dalam beberapa bulan terakhir, ada kemungkinan Anda telah mendengar tentang penurunan konsep desain pixel-perfect, tetapi ada masalah kecil dengan klaim tersebut, terutama dalam hal desain UI iOS.

Yaitu, definisi desain pixel-sempurna tidak diukir di batu seperti kebanyakan pedoman UI iOS. Orang menafsirkannya dengan cara yang berbeda, oleh karena itu masalahnya—kesempurnaan piksel mungkin tampak sepele bagi sebagian orang, tetapi yang lain akan terus menggunakan prinsip ini selama bertahun-tahun yang akan datang, meskipun dengan nama yang berbeda. Ini sebagian besar masalah nomenklatur.

Apa itu desain UI pixel-perfect?

Karena tidak ada definisi yang jelas tentang kesempurnaan piksel, pemahaman saya tentang konsep desain piksel-sempurna adalah bahwa semuanya dilakukan untuk memaksimalkan ketajaman dan ketepatan. Setelah desain diterapkan, tampilannya identik pada layar iPhone mana pun tanpa artefak atau masalah apa pun.

Membuat UI aplikasi iOS piksel-sempurna berarti Anda membuat desain dengan piksel dalam pikiran dan menerapkan desain yang sama persis di layar, hingga ke setiap piksel pada desain yang direferensikan, sambil memastikan itu secara responsif disesuaikan dengan perangkat lain.

Tapi Mengapa Desain Pixel-sempurna?

Desainer UI melakukan yang terbaik untuk membuat antarmuka yang mudah dilihat dan berinteraksi. Merupakan tugas profesional pengembang untuk menghormati pekerjaan perancang dan mengimplementasikan antarmuka persis seperti yang disampaikan.

Dengan aplikasi non-piksel-sempurna, pengguna tidak akan mengalami masalah signifikan yang akan mencegah mereka menggunakan dan menikmati aplikasi, tetapi aplikasi dengan piksel-sempurna pasti terlihat lebih tajam, lebih bersih, dan lebih konsisten.

Karena sifat App Store Apple yang sangat kompetitif, setiap polesan yang meningkatkan keseluruhan tampilan dan pengalaman pengguna disambut baik. Ini dapat membantu membedakan aplikasi Anda dan membuatnya lebih terlihat, dan dengan demikian lebih menguntungkan.

Panduan desain UI iOS cepat ini akan membawa Anda melalui proses dari tahap desain dasar hingga implementasi, dari perspektif desainer dan pengembang.

Membuat Desain UI iOS

Mari kita mulai. Aplikasi pixel-perfect jelas dimulai sebagai desain pixel-sempurna, dan kita semua tahu dari mana asalnya saat ini.

Alat Desain Antarmuka iOS Penting

Saya rasa saya akurat dalam mengatakan bahwa Sketch telah menjadi standar de facto untuk web dan desainer UI/UX seluler. Meskipun Adobe XD adalah alternatif yang sedang naik daun, Adobe XD tertinggal dari Sketch dalam hal popularitas.

Selanjutnya, kita akan memilih ukuran artboard. Saat ini, kami memiliki perangkat iOS dengan ukuran layar dan rasio aspek yang berbeda dan kami harus memilih satu ukuran untuk membuat desain kami. Berkat Tata Letak Otomatis, ini akan disesuaikan dengan mulus ke ukuran tampilan lainnya. Jika perlu, Anda dapat membuat variasi tata letak yang berbeda untuk Kelas Ukuran yang berbeda.

Satu-satunya pertanyaan sebenarnya di sini adalah: Bagaimana seharusnya desainer berbagi informasi tentang mengadaptasi desain untuk tampilan yang berbeda dengan pengembang?

Untungnya, tidak perlu menuliskan spesifikasi untuk masing-masingnya, karena plugin Tata Letak Otomatis untuk Sketsa akan menanganinya. Perancang hanya perlu mengatur tata letak otomatis yang diinginkan, mengekspor ke berbagai ukuran layar dengan satu klik, dan pengembang akan memahami cara menempatkan batasan tata letak dan memastikan semuanya terlihat bagus, baik di iPhone X atau iPhone 5 lama.

Catatan: Sejak versi 44, tim Sketch telah secara dramatis meningkatkan kontrol pengubahan ukuran, memberi pengguna lebih banyak kekuatan dan kontrol atas bagaimana lapisan harus berperilaku saat induknya diubah ukurannya.

Menyiapkan Desain Anda

Kedengarannya bagus, tetapi kami masih belum memilih ukuran yang akan kami gunakan untuk membuat desain kami. Menurut statistik iOS David Smith, 57% dari semua pengguna iPhone mengandalkan layar 4,7 inci, diperkenalkan di iPhone 6/6s dan kemudian digunakan di iPhone 7 dan bahkan iPhone 8 yang baru diluncurkan.

Saya yakin Anda semua sudah familiar dengan layar 4,7 inci Apple sekarang, tetapi jika Anda bukan orang angka, kita berbicara tentang layar 750x1334-piksel dengan 326 piksel per inci (PPI). Ini adalah tampilan Retina standar dan dalam kode kita akan memiliki setengah dari resolusi. Oleh karena itu, saya sarankan Anda mulai dengan 375x667 piksel.

Selanjutnya, kita perlu memastikan bahwa desain UI iOS kita memaksimalkan ketajaman. Untuk mencapai tujuan ini, Anda perlu mengaktifkan penyesuaian piksel :

Berikut adalah contoh persegi panjang sederhana dengan dan tanpa penyesuaian piksel:

Gunakan Putaran: Piksel Penuh saat mengedit objek vektor:

Ini jelas hanya dasar-dasarnya, dan untuk melihat lebih dekat elemen UI iOS piksel-sempurna di Sketch, Anda harus melihat tutorial resminya.

Jangan ragu untuk menggunakan animasi vektor yang kompleks, karena pengembang dapat dengan mudah memainkannya menggunakan perpustakaan Lottie. Anda dapat memutar animasi Adobe After Effects di perangkat seluler tanpa mengalami artefak penskalaan apa pun. Cukup berikan file JSON ke pengembang dan hanya itu.

Gunakan profil warna sRGB sebanyak mungkin. Jika sRGB tidak cukup pada tampilan wide gamut, Anda perlu menyediakan warna atau aset grafis (satu sRGB dan lainnya dengan profil warna yang disematkan). Info rinci tentang profil warna tersedia di pedoman HID Apple jika Anda membutuhkannya.

Kode Kustom untuk Hasil Sempurna Piksel

Besar! Sekarang kita cukup tahu untuk membuat desain pixel-sempurna; bagaimana kita membaginya dengan pengembang? Kami jelas perlu menjangkau kotak peralatan kami.

Memilih Alat yang Tepat

Ada alat yang sangat berguna untuk berbagi pekerjaan desainer dengan pengembang - Zeplin. Cukup gunakan dan pengembang akan memiliki hampir semua informasi yang diperlukan untuk memastikan bahwa desain UI Anda berfungsi: aset grafis, font, dan warna yang digunakan dalam desain, teks, dan banyak lagi. Cukup banyak satu-satunya yang mungkin perlu disediakan oleh perancang pada saat ini adalah file font, jika mereka menggunakan font yang tidak termasuk dalam iOS.

Alat keren lainnya adalah PaintCode, yang dapat menghasilkan kode dari gambar vektor. PaintCode menggunakan jalur SVG dan data warna Anda untuk menghasilkan kelas Swift atau ObjC. Dengan PaintCode, Anda dapat menggunakan ekspresi, variabel, dll. untuk membuat status pasif/aktif tombol Anda, status naik/turun, teks dinamis, animasi dari variabel, dan banyak lagi.

Anda jelas perlu mengandalkan Xcode dan beberapa alat pengembangan iOS standar, tetapi kita akan membahasnya nanti.

Ini sangat berguna jika Anda harus memperbarui secara dinamis hanya bagian tertentu dari aset desain, misalnya, mengubah warna dasar untuk latar belakang gradien pada ikon obrolan. Dan, sebagai bonus yang nyaman, aplikasi Anda akan menurunkan berat badan.

Oke, pengembang akhirnya memiliki semua yang mereka butuhkan, jadi bagaimana kita menerapkan desain pixel-perfect dengan sempurna (maafkan permainan kata)?

Menyiapkan dan Menyinkronkan Alat Anda

Dengan Zeplin, Anda harus mendapatkan hampir semua yang Anda butuhkan, asalkan perancang mengatur semuanya dengan benar. Jika ada sesuatu yang terlewatkan atau tidak jelas, Zeplin menyediakan fitur komentar yang efektif, memungkinkan perancang dan pengembang untuk dengan cepat mengidentifikasi dan menyelesaikan masalah potensial. Bahkan jika semuanya dilakukan dengan benar, komentar dapat digunakan untuk umpan balik dan perbaikan kecil.

Namun, seperti yang kita semua tahu, segala sesuatunya tidak selalu berjalan sesuai rencana, jadi terkadang pengembang perlu memilih warna, meskipun perancang menyediakan palet warna yang digunakan dalam aplikasi.

Untuk melakukannya dengan benar, Anda perlu menyinkronkan alat Anda:

• Atur profil warna tampilan Anda ke sRGB: buka System Preferences - Displays - Color dan pilih sRGB IEC61966-2.1 .

• Di Digital Color Meter , atau alat pemilih warna lainnya, pilih untuk ditampilkan dalam sRGB .

• Periksa apakah profil warna dalam palet warna Xcode diatur ke RGB Perangkat.

Catatan: Gambar dapat memiliki profil warna yang disematkan. Jika ini masalahnya, Anda perlu menyesuaikan alat Anda ke profil ini jika Anda ingin mengambil warna yang benar dari gambar ini. Untungnya, ini harus menjadi pengecualian, dan Anda tidak boleh mengalami kasus seperti itu terlalu sering.

Di Xcode 9, ingatlah untuk Pertahankan Data Vektor saat dibutuhkan. Meskipun akan meningkatkan ukuran aplikasi, ini juga memungkinkan Anda menggunakan gambar untuk ukuran tampilan apa pun. Namun, pada iOS 10 dan versi OS seluler Apple sebelumnya, gambar tidak akan ditingkatkan menggunakan data vektor tambahan.

Sebagai gantinya, versi OS yang lebih lama akan menggunakan mekanisme penskalaan lama dan akan membuat Anda memiliki gambar buram saat meningkatkan ukuran di luar ukuran aslinya. Anda dapat melihat dokumentasi resmi Apple untuk informasi tambahan tentang masalah khusus ini.

Terakhir, pengembang perlu memastikan ukuran dan jarak sedekat mungkin dengan desain aslinya. Jika ada informasi yang meragukan di Zeplin, Anda dapat mengukur jarak antara komponen UI iOS yang berbeda dengan variasi pada aturan layar. Salah satunya adalah xScope, penggaris di layar dengan banyak fitur praktis.

Menghidupkan Desain UI iOS Anda

Saat menerapkan desain UI iOS, ada beberapa pendekatan yang dapat dipilih: Storyboard, XIB, dan kode kustom.

• Storyboard - Memvisualisasikan layar dan navigasi di antara keduanya, tetapi tidak ada opsi untuk mewarisi desain dari satu pengontrol ke pengontrol lainnya.

• XIBs - Memvisualisasikan satu layar atau bagiannya, mudah diwarisi. Sebelum Xcode 9, tidak ada opsi untuk menggunakan panduan tata letak atas/bawah, sedangkan di Xcode 9 kita dapat menggunakan Safe Area .

• Kode - Sejauh ini merupakan opsi yang paling fleksibel, tetapi tidak memberikan visualisasi langsung.

Untuk storyboard, Anda perlu membagi desain menjadi alur, misalnya, LoginFlow.storyboard, SettingsFlow.storyboard, atau NewsFeedFlow.storyboard. Dengan begitu, Anda akan menjaga storyboard Anda tetap ringan.

Kelompokkan elemen UI ke dalam blok. Ini menyederhanakan dukungan untuk semua kendala. Jangan malas dan tempatkan tampilan bernama secara berurutan, karena mereka muncul di layar dari atas ke bawah. Ingatlah bahwa bagian bawah akan ditampilkan di atas bagian atas. Ini akan membantu Anda menemukan tampilan yang berbeda lebih cepat.

Lihat contoh berikut untuk elemen yang tidak dikelompokkan dan yang dikelompokkan:

Jika Anda memiliki beberapa objek yang rata kiri/kanan, jangan ratakan ke tepi dengan offset. Pendekatan yang lebih baik adalah menyelaraskan ke elemen sebelumnya atau menerapkan _ffset view_ khusus dengan batasan lebar. Jika Anda perlu mengubah offset di masa mendatang, ini akan membuatnya lebih mudah.

Untuk menggunakan warna di IB, Anda dapat menyiapkan palet di bagian bawah Xcode Color Picker.

Catatan: Jika versi iOS minimum aplikasi Anda adalah 11, Anda dapat menggunakan opsi "Warna Bernama" di Katalog Aset.

Membungkus

Itu dia. Sekarang kita tinggal mengirimkan hasilnya ke tim QA, periksa apakah semuanya beres, dan voila! Aplikasi sempurna piksel kami sudah siap.

Tujuan artikel ini adalah untuk memberikan contoh linier dan sederhana dari desain UI iOS piksel-sempurna, mendapatkan hasil terbaik dalam waktu sesingkat mungkin. Kolaborasi antara desainer UI dan pengembang tidak selalu sesederhana dan tanpa gesekan ini, tapi itu masalah untuk artikel lain.