Penyesuaian optimal desainmu untuk iPhone X

iPhone X telah mengubah desain aplikasi secara mendasar. Dengan formatnya yang unik dan elemen antarmuka pengguna yang baru, para perancang harus menunjukkan lebih banyak fleksibilitas dan kreativitas untuk mendesain aplikasi yang mengesankan. Dalam panduan ini, langkah demi langkah akan dijelaskan bagaimana kamu dapat menggunakan Sketch untuk menyesuaikan desainmu dengan kebutuhan iPhone X.

Kesimpulan terpenting

• Tinggi layar iPhone X adalah 812 piksel, yang memberikan ruang untuk elemen UI baru.
• Navigasi dan Tab Bar lebih tinggi dan memerlukan penyesuaian dalam tata letak.
• Penting untuk memperhatikan Safe Area untuk memastikan bahwa tidak ada konten yang masuk ke area layar yang membulat.
• Home Indicator adalah elemen antarmuka baru yang harus dipertimbangkan saat mendesain.

Panduan Langkah-demi-Langkah

Mulailah dengan membuat Desain iPhone X baru di Sketch. Tekan A untuk menambahkan elemen baru dan lalu klik pada desain iPhone X.

Lebar tetap di 375 piksel, sementara tinggi diatur ke 812 piksel. Ini memberikanmu lebih banyak ruang untuk merancang antarmuka pengguna. Ingatlah bahwa sudut-sudut membulat dari layar sangat penting untuk tata letak.

Salin Home Controller dan sesuaikan desainnya. Disarankan untuk tidak menggunakan pustaka standar, tetapi menggunakan pustaka iPhone X khusus untuk penyesuaian yang lebih tepat. Masuk ke pengaturan di Sketch dan aktifkan pustaka iOS 11 jika belum ada.

Tambahkan bilah navigasi standar untuk membuat antarmuka konsisten. Pastikan tinggi Navigation Bar adalah 88 piksel dibandingkan dengan 44 piksel dari iPhone 8.

Cari Status Bar di pustaka iOS 11 dan tambahkan juga. Itu harus ditempatkan di tepi atas layar.

Untuk Tab Bar, hal yang sama berlaku: Pilih versi dengan tiga tab dari pustaka iOS 11 dan pastikan tingginya 83 piksel, agar sesuai dengan tata letak dengan baik.

Pastikan saat mendesain, tidak ada elemen yang menjulur ke area membulat. Dalam pemrograman, ini disebut Safe Area Layout Guide – itu adalah ruang yang kamu butuhkan untuk tampilan yang aman.

Tambahkan Home Indicator sebagai bagian penting dari desainmu. Ini harus ditempatkan di tengah tepi bawah.

Setelah kamu menambahkan elemen-elemen dasar, kamu bisa menyalin seluruh bagian dan menempelkannya di tempat yang diinginkan. Ingat untuk menyesuaikan jarak setelah menyalin.

Ulangi proses ini untuk Chat Controller. Buat salinan desain dan beri nama sesuai.

Ganti ikon untuk tab dan sesuaikan tampilannya. Di sini penting untuk memilih simbol dan teks yang tepat dengan hati-hati.

Perhatikan jarak, terutama antara Chat Bubbles dan Tab Bar. Pertahankan jarak 16 piksel untuk memastikan elemen-elemen tersebut saling berharmoni dengan baik.

Langkah-langkah ini menunjukkan betapa cepatnya kamu dapat menyesuaikan desainmu dengan format baru. Namun, jika ada ketidakjelasan, tidak masalah untuk terus menyempurnakan desain.

Di pelajaran berikutnya, kamu akan belajar bagaimana cara bekerja dengan efek tambahan di area profil, termasuk penggunaan efek Blur.

Ringkasan – Desain iPhone X yang Efektif di Sketch

Menyesuaikan desainmu dengan iPhone X membuka kemungkinan baru. Dengan pemahaman yang tepat tentang format layar baru dan elemen UI, kamu dapat membuat antarmuka pengguna yang mengesankan.