- Garis Dasar
Langkah pertama dan paling penting adalah memastikan struktur inti untuk kisi-kisi dokumen Anda. Anda dapat menentukan nilai kisi dengan menavigasi View> Canvas> Grid Settings.
Tim desain Bahan Google melakukan pekerjaan yang baik mendefinisikan metode bagaimana baseline ini mempengaruhi nilai-nilai elemen tipe lain dari inti UI. Semuanya mulai dari bilah navigasi, tipografi, keyline, spasi, dan ukuran target target minimum untuk tindakan disusun di sekitar baseline inti ini. Saya akan menambahkan lebih banyak di sini, tetapi saya mengikuti panduan ini dengan cukup dekat. Jika tidak rusak, jangan memperbaikinya.
- Layout Templates
Langkah selanjutnya adalah menentukan sistem kolom untuk tata letak di berbagai layar. Saya mencoba untuk tetap konservatif pada ukuran kanvas saya, tetapi selalu mencoba untuk menggunakan kotak 4, 8, atau 16 kolom dengan selokan 8pt (atau pengali itu). Untuk ritme vertikal, saya memiliki grid 48pt berulang sederhana. Anda dapat menentukan nilai tata letak dengan menavigasi View> Canvas> Layout Settings.Di bawah ini adalah contoh sederhana bagaimana saya memanfaatkan kisi kolom saya (8 kolom, selokan 16pt), metrik baseline (8pt), dan ritme vertikal (48pt) pada UI testimonial baru yang kami kirimkan minggu ini.
- Ikon
Ikon adalah bagian besar untuk membuat kisi garis dasar berfungsi dengan benar di seluruh antarmuka pengguna. Ada banyak matematika rumit untuk mendapatkan ini sempurna, tetapi jika dilakukan dengan benar integritas ikon Anda akan dipertahankan dalam spektrum kepadatan layar (Retina, 1x, 2x, MDPI-XXXHDPI. jika ini tidak masuk akal baca ini ) . Kunci mereka untuk mengeksekusi ikon dengan cara ini adalah untuk memastikan bahwa semua bentuk, goresan, dan margin adalah "rata" (2, 4, 6, 8), sehingga Anda dibiarkan dengan ikon berpusat di area 24 x 24pt yang dapat juga dikalikan (x2, x3, x4) dan skalakan secara merata.Ada juga banyak set ikon gratis yang telah dirancang agar sesuai dengan baseline 8pt. Desain Material sekali lagi memiliki beberapa sumber daya yang luar biasa untuk ini, tetapi Anda dapat mendesain sendiri. Di bawah ini adalah gambaran bagaimana saya mengindeks semua ikon kami di template GUI inti kami.
- Struktur GUI
Sebenarnya tidak ada aturan preskriptif tentang cara terbaik membuat panduan ini, tetapi dokumen-dokumen ini adalah sumber kebenaran yang memberi saya (dan mudah-mudahan rekan-rekan teknik saya) ketenangan pikiran. Tujuannya adalah untuk memiliki versi "pixel-perfect" dari setiap komponen inti semua dalam satu dokumen, sehingga setiap layar dan keadaan aplikasi tidak perlu ditarik untuk diproduksi. Ada banyak contoh & sumber hebat yang bisa dijadikan referensi secara online, tetapi jika Anda ingin memulai dari awal, Anda dapat mengunduh file basis saya dengan kisi dan struktur kolom yang ditentukan.Posting ini singkat, tetapi ingin membagikan sedikit tentang proses saya. Jika Anda merasa terbantu, silakan bagikan dengan teman yang akan mendapat manfaat. Juga, jika Anda menikmati videonya, saya juga memposting vlog mingguan, akan senang jika Anda berlangganan.