7 cara mendesain untuk iPhone X

Dengan pengumuman perangkat keras Apple yang paling mutakhir, para perancang dan pengembang bersiap-siap untuk memastikan aplikasi mereka siap untuk iPhone X. Tidak semua perangkat keras Apple baru perlu dipersiapkan, tetapi yang ini tidak.

Mari kita lihat beberapa spesifikasi dan fitur unik dari iPhone X dan cara mendesainnya.

1. Gunakan ukuran artboard iPhone X

Artboard iPhone X

Dengan dihilangkannya tombol home dan bentuk yang bergigi, Apple meningkatkan tinggi layar iPhone X sekitar 20% dibandingkan iPhone "kecil" generasi sebelumnya. Peningkatan 20% sama dengan 145pt ruang desain ("pt" menjadi piksel dalam unit non-retina. Lebih dari itu sebentar lagi.) Oleh karena itu, merancang untuk iPhone X berarti membuat artboards Anda di Sketch atau Photoshop dengan resolusi 375 x 812.

2. Buat aset untuk kerapatan pixel baru

pixel density

Tidak hanya tampilan baru sedikit lebih tinggi, tetapi juga resolusi yang jauh lebih tinggi untuk ukurannya. Layar Super Retina baru dari iPhone X memiliki resolusi 2436 x 1125 yang mengejutkan yang hanya berukuran 5,8 inci yang membuat mata 458ppi muncul. Apa artinya ini untuk kita? Nah, kerapatan piksel ekstra tinggi baru berarti aset perlu diekspor @ 3x seperti iPhone berukuran plus daripada @ 2x.

3. Berhati-hatilah dengan bentuk tampilan

Shape

Layar baru ini tidak hanya lebih tinggi — ia juga memiliki sudut-sudut bulat dan gigitan yang diambil dari atas untuk memberikan kamera menghadap ke depan, sensor, dan penerima rumah. Gigitan itu menciptakan tepi atas bergigi yang membagi bilah status menjadi dua. Ketinggian vertikal yang dialokasikan ke status bar juga dua kali lipat dari 22pt menjadi 44pt untuk memberikan margin nyaman dari sudut-sudut membulat. Kabar baiknya adalah bahwa bilah status sekarang jauh lebih keluar dari jalan dan menempati ruang berbentuk aneh yang Anda cenderung tidak akan berusaha untuk mendapatkan kembali. Karena itu, Apple meminta Anda mempertimbangkan kembali keputusan masa lalu untuk menyembunyikan bilah status.

Apple juga meminta kami merancang dengan cara yang tidak menutupi atau memberi perhatian ekstra pada penyimpangan tampilan ini. Misalnya, jangan membuat warna bilah judul Anda berhenti di mana bilah status dimulai. Selain itu, jangan buat bilah status hitam untuk menyamarkan layar sebagai bentuk "normal". Apple meminta kami membuat pengalaman kami " layar penuh, " memungkinkan mereka berdarah ke tepian tanpa gangguan.

4. Pikirkan rasio aspek baru

Rasio aspek yang lebih tinggi (atau lebih lebar jika Anda memeganginya landscape) pada iPhone X berarti bahwa setiap karya seni layar penuh yang sebelumnya dirancang agar sesuai dengan iPhone generasi sebelumnya bisa menjadi sedikit aneh. Seperti sebagian besar ketidakcocokan rasio aspek, konten dapat berakhir dipangkas atau dikirim dengan huruf .

Dalam hal konten iPhone X ditampilkan pada perangkat yang lebih pendek 4,5 inci, konten bahkan dapat berakhir dengan pillarboxed (kotak surat vertikal). Ke depan, Anda mungkin ingin mempertimbangkan untuk membuat aset terpisah untuk rasio aspek yang berbeda.

5. Hindari gangguan gerakan

Ada beberapa gerakan sistem yang membutuhkan sedikit ruang untuk bernafas pada iPhone X untuk memperbaiki kekurangan tombol perangkat keras. Kurangnya pembelian rumah fisik akan membuat Anda menggunakan mengharapkan dan mengandalkan indikator rumah di bagian bawah layar. Apple meminta kita untuk melakukan beberapa hal sederhana. Pertama, jangan sembunyikan indikator rumah kecuali jika benar-benar diperlukan. Kedua, hati-hati menambahkan elemen interaktif seperti tombol yang terlalu dekat dengan indikator rumah.

Jika aplikasi Anda merupakan pengalaman immersive layar penuh seperti game yang membutuhkan gerakan khusus yang diprioritaskan, maka gesekan pertama akan memunculkan perilaku aplikasi Anda dan gesekan kedua memanggil gerakan sistem. Apple menyebut ini "edge protect" dan menyarankan untuk menggunakannya dengan hemat. Kami tidak ingin membuat kerja ekstra untuk pengguna kami.

6. Referensi metode otentikasi dengan benar

Jika Anda telah merancang aplikasi di masa lalu yang menyebutkan Touch ID, Anda mungkin ingin mengubahnya menjadi ID Wajah. IPhone X menghilangkan pemindai sidik jari untuk memproyeksikan dan menganalisis lebih dari 30.000 titik tak terlihat untuk membuat peta kedalaman wajah Anda secara tepat. Jika desain Anda menyebutkan Apple Pay atau fitur buka kunci sistem lainnya, pastikan untuk merujuk Face ID.

7. Manfaatkan warna yang lebih berdampak

Apple mendorong desainer dan pengembang untuk membuat aset UI untuk iPhone X dengan Display P3 Color Space (sebagai lawan sRGB) untuk mengambil keuntungan dari tampilan warna lebar pada ponsel. Ini berarti aset yang lebih kaya dan lebih jenuh dapat diekspor pada 16 bit / channel PNG dalam profil warna Display P3, yang dimungkinkan oleh Photoshop tetapi bukan Sketch.

Hal lain yang perlu dipertimbangkan adalah bahwa tidak setiap display komputer mampu menampilkan gamut Display P3 ekstra lebar yang akan membuat tidak mungkin untuk secara akurat mendesainnya. Akhir 2015 Retina iMac adalah Mac pertama dengan layar gamut lebar dan MacBook Pro dengan Touch Bar mengikutinya. Apple juga merekomendasikan bahwa untuk warna terbaik dan paling akurat pada layar non-P3, kami melayani satu set aset sRGB yang terpisah.

Selama kita semua tetap sadar akan perubahan perangkat keras yang halus, itu akan lancar dalam mendesain aplikasi untuk iPhone X. Membatasi dimensi tampilan baru dan memanfaatkan kontrol layar baru adalah nama permainan — dan jika Anda ' Kembali merasa pedas, mungkin menciptakan satu set aset Display P3 untuk warna dunia yang out-of-this.

Belum ada Komentar untuk "7 cara mendesain untuk iPhone X"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel