Kandungan
- Peraturan # 1: Jenis yang baik adalah mengenai kebolehcapaian
- 01. Saiz fon
- 02. Ketinggian garisan
- 03. Jarak perenggan
- 04. Gaya yang dikongsi
Reka bentuk UI salah faham. Ini bukan hanya mengenai reka bentuk visual, tetapi juga tidak merangkumi UX secara keseluruhan. Reka bentuk UI yang hebat sebenarnya adalah campuran kejelasan dan kecekapan. Dalam artikel ini, kami akan mendedahkan peraturan emas reka bentuk UI yang berkesan, dan cara mencapainya. Peraturan ini berkaitan dengan tipografi, palet warna, CTA, komponen, dan sistem reka bentuk.
Di sini, kami menggunakan InVision Studio. Walau bagaimanapun, peraturan tersebut menggunakan alat apa sahaja yang anda gunakan, dan selalunya prosesnya sangat serupa (lihat panduan kami untuk alat reka bentuk UI terbaik untuk beberapa pilihan lain, atau sebagai alternatif panduan umum kami untuk alat reka bentuk web terkemuka dan terbaik pembangun laman web).
Reka bentuk UI adalah mengenai kebolehgunaan. Walaupun reka bentuk visual hanya berkaitan dengan bentuk, reka bentuk UI adalah mengenai bagaimana bentuk itu membantu fungsinya. Mari kita lihat beberapa peraturan penting untuk memandu proses reka bentuk UI anda, bermula dengan tipografi.
Peraturan # 1: Jenis yang baik adalah mengenai kebolehcapaian
Tipografi yang hebat bermula dari kebolehcapaian. Dalam sistem reka bentuk, ukuran font, tinggi baris, jarak ayat dan jarak huruf harus dirancang dengan cara yang dapat meningkatkan keterbacaan dan keterbacaan.
Reka bentuk visual - iaitu warna dan fon - pastinya menambah pengalaman keseluruhan pengguna, tetapi pada akhirnya pengguna menggunakan UI, tidak menganggapnya sebagai seni. Huruf yang dibaca menghasilkan kejelasan, dan kata-kata yang dapat dibaca adalah yang membantu pengguna mencerna kandungan dengan cekap. Perhatikan, perkhidmatan web hosting yang betul akan memberi perbezaan besar kepada apa yang anda akan capai di sini.
Walau bagaimanapun, tipografi yang dirancang dengan baik tetap dapat memuaskan secara estetik. Ada sisi sains yang sering kita lupakan, dan inilah sisi di mana bentuk dan fungsi menjadi satu. Sebenarnya, anda akan sangat terkejut dengan betapa indahnya Helvetica hitam-putih (atau fon yang serupa) setelah hanya beberapa peningkatan tipografi sederhana. Dengan peningkatan, apa yang kita maksudkan adalah mengubah ukuran font, ketinggian garis, jarak huruf dan sebagainya. Begitu juga, fon "cantik" boleh menjadi jelek ketika tidak dapat dibaca hanya kerana kekecewaan selalu mengalahkan estetika.
Walau bagaimanapun, seperti banyak aspek reka bentuk UI, penyesuaian gaya individu ini sebenarnya tidak menjadi cabaran. Tantangannya adalah menjaga konsistensi di seluruh rancangan, kerana, sebagai manusia, kita menjelajahi dunia (dan antara muka pengguna) berdasarkan model mental, corak, peristiwa masa lalu, dan keakraban.
Dan di sinilah sistem reka bentuk masuk ke dalam cerita. Sistem reka bentuk membantu kami untuk mengekalkan konsistensi dan mewujudkan hierarki visual yang jelas antara elemen yang berbeza-beza, yang seterusnya membantu pengguna memahami UI kami dengan lebih cepat dan bahkan mencerna kandungan kami dengan lebih berkesan. Sekarang, sementara sistem reka bentuk hampir sama rumitnya dengan kerangka seperti Bootstrap, mereka sebenarnya lebih mirip seperti panduan gaya, dan itulah yang akan kita buat hari ini, bermula dengan tipografi.
01. Saiz fon
Ketika membacanya dan mudah dibaca, ukuran fon minimum yang boleh diterima seperti yang ditentukan oleh Garis Panduan Kebolehcapaian Kandungan Web WCAG 2.0 adalah 18pt (atau tebal 14pt). Kami tidak dapat benar-benar memberitahu anda saiz fon yang hendak digunakan, kerana ini sangat bergantung pada fon itu sendiri, tetapi penting untuk memperhatikan hierarki visual dan bagaimana ukuran asas ini membezakannya daripada teks yang diringkaskan seperti tajuk (h1>, h2>, h3> dan lain-lain.).
Dengan alat pilihan reka bentuk UI anda (Studio InVision digunakan di sini), buat rangkaian lapisan teks (T) dan sesuaikan ukuran untuk berkorelasi dengan templat berikut:
- h1> 44 piksel
- h2> 33 piksel
- h3> 22 piksel
- p> 18 piksel
Dengan Studio (dan semua alat reka bentuk UI lain), ini dilakukan dengan menyesuaikan gaya menggunakan pemeriksa di sebelah kanan.
Seterusnya, pilih fon.Sekarang, yang mungkin anda perhatikan dengan beberapa fon ialah 18px p> dan 22 piksel h3> tidak kelihatan berbeza. Kami ada dua pilihan di sini: ubah ukuran fon, atau pertimbangkan untuk menggunakan fon yang berbeza untuk tajuk. Pertimbangkan yang terakhir jika anda menjangkakan bahawa reka bentuk anda akan berat teks.
Perlu diingat bahawa reka bentuk visual UI selalunya merupakan pendekatan perasaan, dan tidak ada yang tetap - semuanya boleh berubah.
02. Ketinggian garisan
Ketinggian garis optimum memastikan bahawa baris teks mempunyai jarak yang cukup di antara mereka untuk mencapai tahap kesediaan membaca yang baik. Ini menjadi lebih dikenali sebagai standard, bahkan dengan Wawasan PageSpeed Google menyarankannya sebagai pemeriksaan manual atau bendera jika teks tersebut mengandungi pautan yang terlalu dekat karena ketinggian garis.
Sekali lagi, WCAG membantu kami dengan yang satu ini, menyatakan bahawa ketinggian garis harus berukuran 1.5x dari ukuran fon. Oleh itu, dalam alat reka bentuk UI anda di bawah 'Line' (atau serupa), gandakan ukuran fon dengan - sekurang-kurangnya - 1.5. Sebagai contoh, jika teks badan adalah 18 piksel, maka ketinggian garis harus 27 piksel (18 * 1.5). Sekali lagi, ingatlah naluri usus anda - jika 1.6x terasa lebih baik untuk anda, maka lakukanlah.
Anda boleh menjalankan operasi matematik secara langsung dengan menggunakan pemeriksa. Terlalu awal untuk mula memikirkan penggunaan data sebenar dalam reka bentuk kami, tetapi sekurang-kurangnya, kami dapat menggunakan data yang agak realistik (walaupun hanya lorem ipsum). InVision Studio mempunyai aplikasi data sebenar asli untuk membantu kita melihat rupa tipografi kita.
03. Jarak perenggan
Jarak paragraf (atau jarak teks) bukan gaya yang dapat kita nyatakan menggunakan pemeriksa. Sebaliknya, kita perlu menjajarkan lapisan secara manual menggunakan panduan pintar untuk ketepatan. Sama dengan ketinggian garis, pengganda ajaib adalah 2x (bermaksud, menggandakan ukuran fon).
Sebagai contoh, jika ukuran fon adalah 18px, maka harus ada ruang 36px sebelum menuju ke blok teks seterusnya. Sehubungan dengan jarak huruf, ini harus sekurang-kurangnya 0.12. Namun, kami tidak perlu risau tentang perkara ini sehingga kami mula menggunakan elemen ini untuk membuat komponen, seperti kit UI.
04. Gaya yang dikongsi
Sekiranya alat reka bentuk UI anda menyokongnya (InVision Studio belum), pertimbangkan untuk mengubah gaya tipografi ini menjadi 'Gaya Dikongsi' untuk menjadikannya cepat dapat digunakan semula sambil memastikan konsistensi visual. Ini biasanya dilakukan melalui pemeriksa.
Halaman seterusnya: Memilih palet warna
