Belajar dengan Prototipe Sederhana Part2

 Menentukan Ukuran Font

Saat merancang layar sederhana, Anda harus sangat memperhatikan ruang. Mengapa? Karena Anda dapat secara besar-besaran melebih-lebihkan atau meremehkan efek menyisipkan gambar, menentukan font, dan membuat gaya di kemudian hari (ini adalah tahap yang kami sebut prototyping high-fidelity). Akan sangat menghancurkan untuk menyadari bahwa desain yang indah yang telah kami tiru, yang menawarkan pengalaman pengguna yang luar biasa, tidak terlihat atau merespons dengan sangat baik begitu visual telah ditambahkan.

Sementara low-fidelity mockup dianggap dasar / minimal, kita perlu agak realistis dengan konsep ruang. Ketika datang ke menggambar bentuk yang saya maksud nilai lebar dan tinggi, tetapi ketika datang ke teks yang saya maksud adalah ukuran font. Jika Anda pikir Anda akan menggunakan font sans-serif sederhana dalam desain akhir Anda, maka tetap menggunakan font sistem sans-serif seperti Helvetica di mockup low-f Anda.

Membuat Layers Teks

Mulailah langkah berikutnya dengan mengetuk T untuk Teks pada keyboard dan mengklik kanvas tempat Anda ingin teks tersebut muncul. Kami ingin lapisan teks ini menjadi cairan (yaitu, untuk mengubah ukuran secara otomatis tergantung pada nilai teks), jadi tidak perlu menggambar lapisan ini. Lapisan teks fluida memiliki atribut lebar dan tinggi dinonaktifkan di inspektur. Anda harus membungkus konten secara manual dengan menambahkan jeda baris menggunakan Return (Enter in Windows).

Adapun nilai teks, ketik "Makanan Laut", karena ini adalah aplikasi makanan.

Terus mengetuk Esc sampai Anda kembali ke alat bergerak, dan seret-luruskan layer teks ke arah kiri bidang input.

Secara default, font harus Helvetica Neue, dan beratnya harus Reguler, tetapi Anda harus mengubah ukuran font menjadi 14px menggunakan inspektur. Saat ini, warnanya tidak masalah.

Helvetica Neue adalah font sistem yang akan sangat mirip dengan font sans-serif yang akan kita pilih nanti; 14px adalah ukuran font yang tepat mengingat penggunaannya. Ingat, ruang dan ukuran adalah fokus Anda di sini, bukan warna, font, dan estetika lainnya.

2-7. Lapisan teks cair

Sekarang mari kita tambahkan beberapa teks yang menjelaskan apa yang dilakukan aplikasi, karena ini adalah layar pembuka. Tekan T untuk Teks lagi, tapi kali ini gambarkan bidang teks menggunakan mouse sehingga kita dapat mengedit atribut lebar dan tinggi. Kami akan memperkirakan lebarnya pada 190px dan membiarkan teks berjalan selama dua baris. Buat beberapa teks boneka lorem ipsum untuk saat ini. Teks akan secara otomatis membungkus ke baris kedua karena kita menggambar lapisan teks ini dan membelokkan lebar, sebagai lawan membuat lapisan fluida.

Untuk saat ini Anda dapat menyisipkan lapisan teks ini di mana saja di sepertiga bawah layar, tetapi pastikan ukuran fontnya 24px - ini adalah judul utama layar kami, jadi itu perlu menonjol.

Juga, tekan tombol rata tengah di inspektur.

2-8. Memperbaiki layer teks

Layer Duplikat

Anda dapat menduplikasi layer dengan pintasan keyboard Cmd + D (Ctrl + D di Windows), tetapi juga dengan menahan Option (Alt di Windows) dan menyeret layer, secara efektif membuat salinan. Pilih salah satu metode dan duplikat layer teks heading utama, lalu ubah ukuran font layer teks baru ini menjadi 14px - ini akan digunakan sebagai teks sekunder.

Gunakan Inspektur untuk Mengatur Ketinggian yang Cocok

Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur.

Group Layer

Lapisan pengelompokan memungkinkan kita untuk menggabungkan lapisan sehingga mereka dapat dipindahkan bergantung satu sama lain (atau hanya karena lebih bersih / rapi untuk menggabungkan lapisan terkait). Untuk Menggunakan Inspektur untuk Mengatur Ketinggian yang Cocok Ingat, jika Anda menggambar lapisan teks, atribut lebar atau tinggi tidak akan cair, jadi pastikan layer teks Anda memiliki ketinggian yang sesuai dengan menggunakan inspektur. Mempelajari Dasar-Dasar dengan Prototyping Low-Fidelity 24contoh, jika kita ingin memindahkan input bidang, termasuk lapisan teks dan tombol kirim, kita dapat memilih semua lapisan sekaligus (klik masing-masing sambil menahan Shift) dan gunakan pintasan keyboard Cmd + G (Ctrl + G di Windows) untuk mengelompokkannya bersama.

Anda dapat memisahkan grup lapisan dengan memilih grup dan menekan Cmd + Shift + G (Ctrl + Shift + G di Windows).

Saat kami di sini, ulangi langkah-langkah ini dengan lapisan teks yang menjelaskan apa yang dilakukan aplikasi. Pengelompokan harus menjadi kebiasaan, karena itu adalah cara yang rapi untuk menjaga desain Anda teratur saat berkembang.

Klik melalui

Klik dua kali atau Cmd + klik untuk memilih lapisan di dalam grup - ini dikenal sebagai "klik-tayang".