Panduan reka bentuk UI utama

Kandungan

• 01. Pilih tipografi anda
• 02. Pilih palet yang betul
• 03. Pautan dan butang gaya
• 04. Buat komponen anda
• 05. Mendokumentasikan dan bekerjasama

Apakah reka bentuk antara muka pengguna? Soalan yang lebih baik ialah, apa yang sebenarnya berlaku dalam reka bentuk antara muka pengguna? Estetika? Kebolehgunaan? Kebolehcapaian? Kesemuanya? Bagaimana semua faktor ini bersatu untuk membolehkan pengalaman pengguna yang optimum dan mana yang harus didahulukan?

Kebolehcapaian harus selalu didahulukan, meletakkan asas untuk kebolehgunaan optimum (menggunakan pembina laman web teratas akan membantu di sini). Kemudian, apabila UI dapat diakses dan digunakan, ia mesti kelihatan agak baik dari segi estetika (alat reka bentuk UI akan membantu di sini). Kemudian, untuk memastikan reka bentuk anda berfungsi di semua peringkat, anda perlu mengujinya secara menyeluruh, yang boleh anda lakukan dengan pilihan alat ujian pengguna terbaik kami. Mari kita lihat lebih dekat elemen asas kebanyakan reka bentuk dan apa yang boleh dilakukan untuk memastikan konsistensi visual.

01. Pilih tipografi anda

Tipografi yang hebat (seperti banyak aspek reka bentuk) menjadi mudah dicapai. Reka bentuk visual pastinya menambahkan pengalaman keseluruhan pengguna tetapi pada akhirnya, pengguna berinteraksi dengan UI, dan tidak melihatnya sebagai seni. Huruf yang dibaca menghasilkan kejelasan dan perkataan yang dapat dibaca adalah yang membantu pengguna mencerna kandungan dengan cekap. Kedua-duanya lebih penting daripada estetika visual apa pun.

Walau bagaimanapun, tipografi yang dirancang dengan baik tetap dapat memuaskan secara estetik. Helvetica hitam-putih (atau fon serupa) boleh menjadi keindahan setelah hanya beberapa penambahan tipografi sederhana. Dengan peningkatan, kami bermaksud mengubah ukuran fon, ketinggian garis, jarak huruf dan sebagainya - bukan fon atau warna teks.

Tipografi 'cantik' sebenarnya jelek ketika tidak dapat dibaca kerana kekecewaan selalu mengalahkan estetika. Reka bentuk yang hebat seimbang dan harmoni.

Seperti banyak aspek reka bentuk UI, penyesuaian visual untuk menyeimbangkan aksesibilitas dan estetika bukanlah cabarannya. Cabarannya adalah mengekalkan konsistensi di seluruh reka bentuk. Konsistensi menetapkan hierarki yang jelas antara elemen yang berbeza-beza, yang seterusnya membantu pengguna memahami UI lebih cepat dan bahkan mencerna kandungan dengan lebih berkesan.

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). Saiz fon terbaik untuk digunakan bergantung pada fon itu sendiri tetapi penting untuk memperhatikan hierarki visual dan bagaimana ukuran asas ini membezakan dirinya dari ringkasan dan tajuk (iaitu h1>, h2>, h3>).

Dengan alat reka bentuk UI pilihan anda (kami akan menggunakan InVision Studio), buat rangkaian lapisan teks (T) dan kemudian sesuaikan semua ukuran untuk berkorelasi dengan templat berikut:

• h1>: 44 piksel
• h2>: 33 piksel
• h3>: 22 piksel
• p>: 18 piksel

Dengan InVision Studio (dan semua alat reka bentuk UI lain), ini dapat dilakukan dengan menyesuaikan gaya menggunakan panel Inspektor di sebelah kanan.

Seterusnya pilih fon anda, tetapi berhati-hatilah kerana yang mungkin anda perhatikan dengan beberapa fon ialah 18px p> dan 22 piksel h3> tidak kelihatan berbeza. Kami mempunyai dua pilihan: mengubah ukuran fon atau mempertimbangkan fon yang berbeza untuk tajuk. Ikutilah yang terakhir jika anda menjangkakan bahawa reka bentuk anda akan berat teks.

Perlu diingat bahawa:

• Reka bentuk UI visual selalunya merupakan pendekatan perasaan
• Tidak ada yang diputuskan; semuanya boleh berubah

Ketinggian garisan

Ketinggian garis optimum memastikan bahawa baris teks mempunyai jarak yang cukup di antara mereka untuk mencapai tahap kesediaan membaca yang baik. Ini semakin dikenali sebagai 'standard'; Alat Audit Rumah Api Google bahkan mencadangkannya sebagai pemeriksaan manual (atau bahkan bendera jika teks tersebut mengandungi pautan yang mungkin terlalu dekat bersamaan kerana ketinggian garis bawah optimum).

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 18px, maka ketinggian garis adalah 27px (18 * 1.5 - anda juga dapat menjalankan operasi matematik secara langsung di Inspektor). Sekali lagi, ingatlah - jika 1.6x terasa lebih sesuai, gunakan 1.6x. Ingat bahawa fon yang berbeza akan menghasilkan hasil yang berbeza.

Masih terlalu awal untuk memikirkan penggunaan data sebenar dalam reka bentuk kami tetapi, sekurang-kurangnya, kami masih harus menggunakan data yang agak realistik (bahkan lorem ipsum). InVision Studio mempunyai aplikasi data sebenar asli untuk membantu kita melihat rupa tipografi kita.

Jarak perenggan

Jarak perenggan bukanlah gaya yang dapat kita nyatakan menggunakan Inspektor InVision Studio. Sebaliknya, kita perlu menyelaraskan lapisan secara manual menggunakan Panduan Pintar (⌥). Sama dengan ketinggian garis, pengganda ajaib adalah 2x (dua kali ganda saiz fon). Sebagai contoh, jika ukuran fon 18px, maka sekurang-kurangnya harus ada ruang 36px sebelum menuju ke blok teks seterusnya. Jarak huruf hendaklah sekurang-kurangnya 0.12.

Namun, kita tidak perlu risau tentang perkara ini sehingga kita mula membuat komponen.

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 dicapai melalui Inspektor.

02. Pilih palet yang betul

Memilih warna yang sesuai untuk reka bentuk anda melampaui estetika: ia dapat memberitahu keseluruhan hierarki laman web anda.

Mengenai reka bentuk UI, warna biasanya merupakan salah satu perkara pertama yang kami gemari, tetapi kami diajar bahawa menyelami reka bentuk visual adalah perkara yang tidak baik. Ini tentu saja benar, namun dalam hal konsistensi visual, warna harus menjadi perhatian utama kerana memainkan peranan lain.

Warna dalam reka bentuk UI sangat berkesan tetapi kerana sebilangan pengguna (ramai sebenarnya) menderita pelbagai jenis kecacatan penglihatan, ia tidak selalu boleh dipercayai. Oleh itu, ini tidak semestinya mengenai warna tertentu yang sedang digunakan, melainkan jenis warna. Ini mungkin tidak benar ketika datang ke jenama kerana warna digunakan untuk kesan emosi dalam hal ini tetapi, dalam reka bentuk UI, warna juga digunakan untuk menyampaikan maksud, makna dan, tentu saja, hierarki visual.

01. Stark
Plugin Stark serasi dengan Sketch dan Adobe XD dan membantu anda memeriksa kontras warna dan mensimulasikan buta warna secara langsung dari kanvas. Sokongan untuk Figma dan InVision Studio akan datang tidak lama lagi.
02.Warna
Warna adalah sekumpulan 90 kombinasi warna yang mempunyai jumlah kontras warna yang sesuai untuk memenuhi Garis Panduan WCAG 2.0 - beberapa di antaranya berjaya memenuhi standard AAA.
03. Projek A11y
Projek A11y adalah hab besar untuk semua perkara yang berkaitan dengan kebolehcapaian. Ini merangkumi sumber, alat, petua, tutorial dan dibuat oleh pembuat plugin Stark dan menerima dana dari InVision.

Tiga jenis warna

Warna mempunyai makna, jadi penting untuk tidak mempunyai terlalu banyak warna. Terlalu banyak makna menghasilkan lebih banyak perkara yang harus difahami dan diingat oleh pengguna - apatah lagi lebih banyak kombinasi warna untuk kita bimbangkan. Secara amnya, ini adalah format yang disyorkan:

• Warna ajakan bertindak (juga warna jenama utama)
• Warna gelap yang neutral (lebih baik untuk elemen UI atau mod gelap)
• Untuk semua perkara di atas, variasi yang sedikit lebih ringan dan lebih gelap

Ini membolehkan perkara berikut:

• Mod gelap akan dapat dicapai dengan mudah
• Warna CTA kami tidak akan bertentangan dengan warna lain
• Dalam senario apa pun, kita akan dapat menekankan dan menekankan

Sediakan palet anda

Dengan alat reka bentuk UI pilihan anda, buat satu papan seni yang cukup besar (ketuk A) untuk setiap warna (dinamakan 'Jenama', 'Neutral / Cahaya' dan 'Neutral / Gelap'). Kemudian, di setiap papan seni, buat segi empat kecil yang lebih kecil yang memperlihatkan variasi warna yang lebih gelap dan lebih terang dan juga warna lain.

Kami akan mempertimbangkan sedikit lebih ringan dan lebih gelap sebagai 10 peratus tambahan putih dan 10 peratus tambahan hitam masing-masing. Setelah selesai, paparkan salinan gaya tipografi pada setiap papan seni. Warna lapisan teks ini mestilah cahaya neutral, kecuali pada papan seni cahaya neutral di mana warna gelap mestilah gelap.

Kontras

Seterusnya kita perlu memeriksa warna kita untuk mendapatkan kontras warna yang optimum. Terdapat pelbagai alat yang dapat melakukan ini, misalnya plugin Stark untuk Sketch dan Adobe XD atau Contrast untuk macOS - namun, penyelesaian dalam talian seperti Contrast Checker atau Color Contrast Checker akan berfungsi dengan baik.

Periksa kontras warna untuk setiap kombinasi dan ubah warna sesuai. Sekiranya anda tidak pasti warna apa yang harus digunakan, cuba gunakan cadangan Warna Selamat.

03. Pautan dan butang gaya

Saiz

Butang dan pautan, seperti tipografi, harus mempunyai beberapa variasi. Bagaimanapun, tidak semua tindakan memiliki tahap kepentingan yang sama dan, seperti yang kita bincangkan sebelumnya, warna adalah kaedah komunikasi yang tidak dapat dipercayai, jadi itu tidak boleh menjadi kaedah utama untuk mempengaruhi hierarki visual. Kita juga perlu bermain dengan ukuran.

Uji kemampuan visual adalah ujian kebolehgunaan yang digunakan untuk menentukan sama ada sasaran ketuk kelihatan dapat diklik. Segerakkan reka bentuk dari Studio ke Freehand (⌘⇧F), hantarkan URL yang dihasilkan kepada penguji dan minta mereka mengelilingi elemen yang dipercayai boleh diklik.

Pengguna Non-InVision Studio juga dapat menggunakan Freehand, tetapi pengguna InVision Studio dapat melancarkan reka bentuk mereka ke Freehand dengan lancar dari InVision Studio, yang merupakan cara terpantas dan paling berkesan untuk mendapatkan maklum balas visual dari pengguna.

Secara amnya, kami mengesyorkan agar teks butang dinyatakan sebagai 18px (sama dengan teks badan) tetapi butang itu sendiri mempunyai tiga variasi ukuran:

• Biasa: 44px tinggi (sudut bulat: 5px)
• Besar: 54px tinggi (sudut bulat: 10px)
• Sangat besar: Tinggi 64 piksel (sudut bulat: 15 piksel)

Ini membolehkan kita membuat butang tertentu kelihatan lebih penting tanpa bergantung pada warna dan juga butang sarang (contohnya, gunakan butang di dalam medan bentuk yang kelihatan minimum).

Kedalaman

Tidak kira sama ada sasaran ketukan adalah butang atau bidang bentuk, bayangan harus digunakan untuk meningkatkan kedalaman dan oleh itu menyarankan interaktiviti. Gaya bayangan tunggal untuk semua varian butang dan medan bentuk adalah baik.

Interaktiviti

Setiap jenis butang memerlukan variasi untuk menunjukkan keadaan hovernya. Ini menjelaskan kepada pengguna bahawa apa yang mereka cuba lakukan adalah baik-baik saja dan memastikan bahawa mereka terus berjalan tanpa penangguhan.

Ini sebenarnya adalah salah satu aspek yang lebih kompleks untuk mengekalkan konsistensi visual kerana warna sering menjadi gaya yang digemari untuk berubah ketika membuat keadaan. Syukurlah, perubahan keadaan ini mungkin agak halus, jadi baiklah mengubah warnanya menjadi variasi yang sedikit lebih terang atau lebih gelap - itulah yang mereka inginkan. Ini juga berlaku untuk pautan.

Memutuskan perkara ini akan menyebabkan kita menggunakan warna yang sudah mempunyai makna yang signifikan, mengakibatkan pengguna menjadi keliru, atau memutuskan untuk membuat warna lain. Memutuskan untuk menggunakan warna sekunder adalah baik tetapi ia harus disimpan untuk visual pemasaran dan bukannya elemen UI. Kurang lebih banyak (dan lebih mudah).

Ingatlah untuk mengulangi langkah ini untuk setiap papan seni. Jangan sertakan butang CTA berjenama di papan seni jenama - kemudian kita akan membahas apa yang berlaku apabila kombinasi tertentu tidak berfungsi.

04. Buat komponen anda

Komponen adalah penjimat masa yang besar dan semua alat reka bentuk UI menawarkan ciri ini (contohnya dalam Sketsa, mereka dipanggil Simbol). Di Studio kita dapat membuat komponen dengan memilih semua lapisan yang harus membentuk komponen dan menggunakan ⌘K jalan pintas.

Menggunakan komponen

Wireframe sangat berguna, bukan sahaja untuk merancang UI yang boleh digunakan tinggi tetapi juga untuk mengetahui apa yang diperlukan oleh UI kami dalam jangka masa panjang. Ia seperti pemeriksaan masa depan.

Ini tidak bermaksud bahawa kita perlu merancang banyak komponen atau bersedia untuk sebarang kemungkinan senario, tetapi ini bermaksud bahawa kita perlu menggunakan sikap 'Bagaimana jika?'

Contohnya, jika bingkai kawat kita memerlukan komponen 3x1 tetapi kita tahu bahawa kandungannya tidak terpahat, sedikit perenungan mungkin menyebabkan kita bertanya-tanya: 'Bagaimana jika komponen ini akhirnya menjadi 4x1?'. Peraturan praktisnya adalah: reka bentuk hanya untuk keperluan pengguna yang sudah ada tetapi cuba membuat penyelesaian yang relatif fleksibel. Jika tidak, kita akan berakhir dengan 'hutang reka bentuk' yang sangat tidak kemas kemudiannya.

Sekarang kita dapat menggunakan semula komponen ini dengan menyeretnya ke kanvas dari Perpustakaan> Dokumen di sebelah kiri, walaupun perlu diingat bahawa aliran kerja ini mungkin berbeza bergantung pada alat UI anda.

Kaedah membuat panduan gaya (dan akhirnya membuat reka bentuk itu sendiri) berfungsi dengan baik dengan susun atur berasaskan modular / kad, walaupun 'kawasan umum' seperti tajuk, footer dan navigasi juga merupakan calon yang sangat baik untuk komponen.

Sama seperti gaya, warna dan butang tipografi kita, kita mesti ingat untuk mengatur komponen kita dengan teliti.

Memanfaatkan peraturan kami

Sebelumnya kami memberi komen tentang tidak menggunakan butang CTA berjenama di atas warna jenama, kerana butang CTA berjenama jelas perlu menonjol di antara yang lain. Jadi bagaimana kita membuat komponen berjenama sementara masih dapat menggunakan butang CTA berjenama? Lagipun, jika kita menggunakan butang gelap netral untuk, katakanlah, butang navigasi atau butang yang tidak begitu penting, itu bukan pilihan, bukan?

Betul. Jadi ini akan menjadi peluang yang ideal untuk membuat komponen - khususnya, kombinasi tajuk + teks + butang. Perhatikan bagaimana saya membuat latar belakang kad cahaya neutral untuk membolehkan penggunaan butang berjenama. Begitu juga, medan bentuk cahaya neutral (medan bentuk biasanya berwarna putih kerana model mental yang secara historis sinonim dengan bentuk kertas) tidak kelihatan luar biasa pada latar belakang cahaya neutral sehingga hanya boleh digunakan pada latar belakang gelap yang neutral - sama ada secara langsung atau dalam komponen gelap yang neutral. Ini adalah bagaimana kita menjadikan reka bentuk kita fleksibel sambil mematuhi peraturan kita dan mengekalkan konsistensi.

Ujian tekanan

Sebaik-baiknya, kaedah terpantas dan paling berkesan untuk memastikan ketahanan dalam reka bentuk kami adalah dengan menguji tekanan. Menguji rekaan bermaksud kejam. Katakan bahawa kita mempunyai navigasi dengan jumlah item nav X kerana itulah syaratnya; untuk benar-benar memastikan fleksibiliti, cuba ubah keperluan ini dengan menambahkan lebih banyak item nav atau, untuk benar-benar membuang sepana dalam karya, cuba juga menambahkan item nav dengan hierarki visual yang lebih tinggi daripada yang lain. Adakah peraturan ukuran, tipografi dan warna kita memungkinkan sesuatu seperti ini? Atau untuk menawarkan kebolehgunaan yang optimum adakah kita memerlukan peraturan lain?

Ingatlah bahawa ada perbezaan antara menambahkan peraturan dan membengkokkan peraturan. Lebih banyak kes kelebihan bermaksud kurang konsisten, jadi kebanyakan masa lebih baik demi kegunaan hanya memikirkan semula komponen.

05. Mendokumentasikan dan bekerjasama

Bagaimana kita membuat fail reka bentuk kita lebih mudah digunakan untuk diri kita sendiri dan pereka lain yang mungkin menggunakan fail reka bentuk kita? Oleh itu, menyimpannya dengan selamat di dalam penyimpanan awan yang boleh dipercayai dan penting adalah seperti yang anda akan ketahui.

Warna

Langkah pertama adalah menyimpan semua warna ke swatch 'Warna Dokumen' jika kita belum melakukannya - ini akan menjadikannya lebih mudah diakses apabila kita perlu menerapkannya dalam reka bentuk kita.Untuk melakukan ini, buka widget pemilih warna dari Inspektor, pilih 'Document Colors' dari dropdown dan kemudian klik ikon + untuk menambahkan warna ke swatch. Ini berfungsi dengan cara yang sama di kebanyakan alat UI.

Perpustakaan Berkongsi

Seterusnya, kita perlu menukar dokumen kita - lengkap dengan gaya tipografi, warna, butang, kawasan umum dan komponen asas - menjadi perpustakaan bersama.

Pada dasarnya ini bermaksud bahawa setiap elemen harus menjadi komponen, walaupun hanya terdiri daripada satu lapisan. Klik butang + ‌ di bar sisi Perpustakaan sebelah kiri dan kemudian import dokumen ini ke dalam dokumen baru. Betul: dokumen kami kini menjadi perpustakaan dan siap digunakan untuk merancang UI dengan ketekalan yang dijamin.

InVision Studio agak terhad dalam arti ia belum diselaraskan dengan alat Pengurus Sistem Reka Bentuk rasmi InVision tetapi cukup mudah untuk menempatkan perpustakaan di Dropbox untuk digunakan dan dikemas kini oleh pereka lain dari masa ke masa. Apabila perubahan dibuat (secara tempatan atau jarak jauh), setiap fail Studio yang menggunakan perpustakaan (sekali lagi, secara lokal atau dari jauh) akan menanyakan apakah anda ingin mengemas kini warna dan komponen. Ini adalah bagaimana perpustakaan reka bentuk dikekalkan di antara pasukan.

Untuk merancang antara muka pengguna yang konsisten secara visual, gunakan semula semuanya. Butang reka bentuk, kemudian gunakan butang untuk membuat komponen butang, kemudian gunakan
komponen butang untuk membuat komponen lain seperti amaran dan dialog.

Jangan buat komponen yang tidak diperlukan. Ingat, membina perpustakaan adalah usaha kolaboratif yang berterusan. Ia tidak perlu diselesaikan sekaligus, diselesaikan sendiri oleh anda sendiri atau pernah selesai. Ia hanya perlu menyampaikan bahasa.

Reka bentuk mengikut skala

Apabila reka bentuk berkembang, menguruskannya menjadi lebih sukar. Terdapat pelbagai penyesuaian yang mungkin ingin kami lakukan agar tetap efisien dan dapat dikekalkan, terutamanya kerana DSM InVision belum berfungsi dengan Studio.

Sebagai contoh, kami mungkin ingin menggunakan lapisan teks untuk memberi penjelasan pada perpustakaan kami sebagai alat untuk menjelaskan kes penggunaan pelbagai elemen. Untuk gaya tipografi, kita bahkan dapat mengedit teks agar lebih deskriptif (mis. "H1> / 1.3 / 44px"). Ini mengatakan bahawa h1>s harus berukuran 44 piksel dan tinggi garisan 1.3.

Penyerahan Reka Bentuk

Alat handoff reka bentuk mempamerkan pelbagai gaya yang digunakan oleh setiap elemen dalam reka bentuk sehingga pembangun dapat membina aplikasi atau laman web. Alat ini merangkumi gambaran keseluruhan gaya dan juga salinan swatch 'warna dokumen'. Pembangun bahkan boleh menyalin gaya ini sebagai kod, yang sangat baik jika anda memutuskan untuk membuat dokumentasi reka bentuk bertulis dan anda ingin memasukkan gambaran corak komponen.

Sekiranya anda bimbang untuk menyelesaikan masalah dan mengurus laman web, pastikan anda mendapat perkhidmatan hosting web yang tepat akan membantu, tetapi untuk sistem reka bentuk anda, alat penyerahan reka bentuk InVision, Inspect, adalah hal yang harus digunakan. Untuk memanfaatkannya, kami mengklik butang / ikon ‘Publikasikan ke InVision’ di InVision Studio, buka URL yang dihasilkan dan kemudian ketuk untuk beralih ke Mod Pemeriksaan. Ia sangat selesa.

Kandungan ini pada mulanya muncul di majalah net.