Apabila menggunakan piagam grafik pada antara muka kami, kami perlu bertanya kepada diri sendiri soalan warna.
Jika piagam telah dibuat, anda mesti membacanya dan menerapkannya (selalunya di bawah pengawasan jabatan pemasaran dan komunikasi, yang memastikan penggunaan elemen grafik yang betul).
Tetapi anda mungkin bertanggungjawab untuk mencipta carta dan oleh itu memilih warna. Untuk membina piagam, anda mesti memberi perhatian khusus kepada simbolisme dan gabungan warna.
Palet yang koheren dan harmoni memungkinkan untuk menyampaikan mesej dengan betul. Warna mempunyai kuasa komunikasi yang sangat kuat. Bergantung pada penggunaannya, pilihan dan kepelbagaian warna yang dipilih, anda akan dapat membuat hierarki antara kandungan anda dan menyerlahkan elemen tertentu, termasuk seruan bertindak sebagai contoh.
Perhatian khusus juga harus diberikan kepada kebolehaksesan. Apabila kami menyebut kebolehaksesan untuk warna, kami terutamanya memikirkan kontras warna antara latar belakang dan teks. Terdapat nisbah untuk memilih padanan warna yang betul.
Saya kongsikan awak alat dalam talian yang akan membolehkan anda mengesahkan perkahwinan warna anda dari segi kebolehcapaian web.
Mencipta palet warna mempunyai tiga tujuan :
- Bawa estetika, keharmonian dan konsistensi pada antara muka anda.
- Dapatkan pembaca anda merentasi isu, nilai dan personaliti jenama anda.
- Serlahkan diri dan tandakan semangat berbanding pesaing.
Saya juga boleh menambah hujah dengan bercakap dengan anda tentang organisasi: sebagai pereka bentuk, dengan cepat menentukan palet warna anda dan melekat padanya membolehkan anda membina antara muka dengan tenang dan tidak tersesat.
Jadi hari ini saya berkongsi petua saya untuk membina palet warna anda.
Jangan teragak-agak untuk memberikan kami dalam ulasan amalan baik anda pada projek anda! Di UX Republic, kami sentiasa mendengar amalan terbaik anda dan pendapat anda!
#1 Warna Utama
Mari kita mulakan dengan permulaan : warna utama tapak anda! Ia adalah warna yang menghidupkan identiti jenama anda.
Untuk warna dominan ini, adalah menarik untuk belajar tentang psikologi dan makna
warna. Oleh itu, bergantung pada sektor aktiviti, tipologi atau sasaran, anda akan mendapat bantuan untuk memilihnya.
Jangan pilih berdasarkan pilihan peribadi anda atau trend reka bentuk. Anda perlu mempunyai hujah yang kukuh untuk pelanggan anda dan di atas semua objektif anda adalah untuk menghantar mesej kepada pengguna melalui warna.
Anda boleh membuat variasi daripada warna ini untuk mendapatkan ton yang berbeza dan kelegapan yang berbeza.
#2 Warna Sekunder
Warna sekunder memberikan kontras kepada warna utama anda.
Anda perlu berfikir bahawa ia melambangkan keadaan yang berbeza dalam antara muka anda dan khususnya tindakan (seruan untuk bertindak dan pautan sebagai contoh).
Memandangkan ia akan menandakan interaksi dan kandungan penting, adalah penting untuk memilih warna yang menyerlah dan menggalakkan klikan, sambil kekal harmoni dengan piagam anda.
Bagaimana saya mencari warna ini ?
Secara amnya, seseorang memilih warna yang bertentangan dan pelengkap kepada warna utama. Anda boleh menggunakan roda warna untuk ini. Tetapi ini bukan peraturan mutlak! Biarkan kreativiti anda berkembang pesat!
Banyak tapak menggunakan hitam sebagai warna aksi (terutamanya dalam sektor mewah) dan ia berfungsi kerana ia sesuai dengan alam semesta jenama dan proses lain digunakan untuk menyerlahkan kandungan.
Warna sekunder adalah amalan yang baik dalam reka bentuk UX tetapi ramai pereka tidak menggunakannya dan menggunakan warna utama sebagai warna aksi.
Contohnya, dalam garis panduan Apple, kami dapati Warna Tint, warna unik ini yang melambangkan warna jenama / produk dan elemen boleh klik.
#3 Warna Latar Belakang
Warna latar belakang yang digunakan selalunya berwarna putih atau kelabu muda. Tetapi sekali lagi, jangan teragak-agak untuk melakukan ujian untuk menyedarkan kreativiti anda.
● Putih ialah pilihan yang selamat, ia adalah warna bersih yang akan menyerlahkan kandungan anda.
● Yang kelabu terang membolehkan anda menyerlahkan kandungan dengan latar belakang putih dan oleh itu menyerlahkannya (contohnya peta atau jadual).
● Warna-warna gelap anda juga boleh menjadikan antara muka anda lebih gelap dan menggunakan warna gelap seperti kelabu arang atau biru tengah malam. Sekali lagi, bergantung pada palet anda.
● Kecerunan juga merupakan pilihan dan untuk ini anda memerlukan beberapa warna yang bersatu dan tidak menimbulkan ketidakseimbangan atau perpecahan yang terlalu ketara.
Helah saya untuk menentukan warna latar belakang adalah bermula dari warna utama dan meringankannya untuk membuat sambungan dengannya.
Bagaimana saya mencari warna ini ?
- Saya memilih warna utama dalam Figma, Sketch atau alat reka bentuk lain.
- Saya beralih kepada mod HSL (bukannya dalam Hex sebagai contoh.
- Saya menukar nilai "L" kepada 95.
#4 Warna teks
Amalan yang baik untuk diingat untuk reka bentuk anda ialah tidak menggunakan hitam (#000000) untuk elemen anda, terutamanya teks anda.
Kami lebih suka varian hitam yang bermula daripada biru, hijau, kelabu, … Sekali lagi, bergantung pada palet anda.
Helah saya untuk menentukan warna teks menggunakan kaedah untuk warna latar belakang, iaitu, mulakan dengan warna utama dan gelapkan untuk membuat pautan dengannya.
Bagaimana saya mencari warna ini ?
- Saya memilih warna utama dalam Figma, Sketch atau alat reka bentuk lain
Saya bertukar kepada mod HSL (bukannya dalam Hex sebagai contoh) - Saya menukar nilai "L" kepada 10
Saya juga menasihati anda untuk memilih dua warna untuk teks. Satu gelap dan satu lebih cerah untuk membuat hierarki antara jenis kandungan yang berbeza.
#5 Warna Makluman
Untuk jenis tapak tertentu, adalah menarik untuk menyediakan warna untuk makluman: merah, oren dan hijau.
Ia boleh digunakan untuk menghantar mesej atau pemberitahuan kepada pengguna anda seperti ralat atau pengesahan.
Ini adalah warna yang digunakan untuk :
● mesej ralat, halaman 404, makluman (bar snek, roti bakar, modal, dsb.).
● keadaan dan/atau status sesuatu elemen
● butang atau pautan (merah untuk memusnahkan atau memadam contohnya)
# Kesimpulannya
Untuk membina palet warna, tugas pertama anda adalah untuk memilih warna utama anda terlebih dahulu. Terima kasih kepada pilihan ini, anda akan dapat mencipta palet yang harmoni dan koheren.
Kesampingkan penggunaan dan perkongsian piagam yang akan anda buat: fikirkan untuk mencipta dokumen yang mengumpulkan warna dan kegunaannya untuk berkongsi dengan pasukan projek dan khususnya dengan pembangun projek.
Ia juga boleh dalam bentuk perpustakaan dalam alat reka bentuk kegemaran anda.
Dan dalam kes ini, saya menasihati anda untuk menggunakan istilah (“warna utama”, “warna kedua”, …). Dan bukan nama warna ("Biru", "merah", "#FEFEFE, ...).
Oleh itu, jika perubahan dibuat ia akan menjadi lebih mudah untuk anda. Dan ia juga akan digunakan semasa membuat kursus berbeza anda.
Ingatlah untuk meluangkan masa anda untuk mendapatkan inspirasi, semak simbol, kemudian lakukan ujian dan cabar pilihan anda.
Sumber imej: https://undraw.co/illustrations
Alexa CUELLAR Pereka UX-UI @UX-Republic
