Bagaimana dan mengapa saya merancang varian warna dan alat kebolehcapaian

Sebagai pemaju, memilih warna untuk reka bentuk saya selalu menjadi salah satu tugas yang lebih sukar. Untuk membantu saya cenderung menggunakan alat seperti Coolor, SASS Color Generator, dan pemeriksa kontras warna ini.

Proses saya dulu kelihatan seperti ini:

  1. Hasilkan palet menggunakan Coolor
  2. Pilih varian untuk setiap warna menggunakan SASS Color Generator
  3. Pasangkan varian menjadi gabungan latar / latar depan.
  4. Periksa bahawa pasangan boleh diakses menggunakan pemeriksa kontras warna.
  5. Tambahkan warna pilihan saya pada alat pilihan saya (Figma).
  6. Tweak warna dan ulangi dari langkah 2.

Jadi, apa masalahnya?

Proses lama saya banyak berlaku berulang-alik antara aplikasi yang berbeza. Saya tidak dapat mengubah warna saya dan melihat kesan terhadap aksesibilitas dalam masa nyata. Sebaliknya, saya terpaksa menyalin / menampal kod HEX dari satu aplikasi ke aplikasi yang lain. Kemudian ketika saya sudah bersedia untuk memulakan pembangunan, saya harus membuat pemboleh ubah secara manual dalam SASS / CSS dan menyalin semula nilai-nilai tersebut.

Dan penyelesaiannya?

Buat alat yang boleh saya lakukan (hampir) semuanya di satu tempat. Tujuan saya adalah untuk menuju ke proses seperti ini:

  1. Hasilkan palet menggunakan Coolor
  2. Pilih varian, pasangkan warna, dan buat perubahan menggunakan satu aplikasi.
  3. Tambahkan warna yang dihasilkan pada alat reka bentuk pilihan saya.

Saya juga mahu aplikasi dapat mengeksport warna saya dengan kod jadi saya akan mempunyai titik permulaan yang baik untuk pembangunan.

Bukti awal konsep

Saya mahu mendapatkan sesuatu dan berjalan secepat mungkin supaya saya dapat mengujinya. Untuk itu, saya akan membuat prototaip.

Gunakan Kes

Langkah pertama untuk menyusun prototaip adalah menentukan kes penggunaan yang akan mendorongnya.

  1. Sebagai pengguna, saya ingin menghasilkan varian untuk warna asas saya.

Saya mahu dapat membuka aplikasi, menambah warna asas saya, memilih varian, dan kemudian mengeksportnya kembali ke alat reka bentuk saya sekali lagi. Ringkas ?.

2. Sebagai pengguna, saya ingin memeriksa sama ada pasangan warna latar / latar depan dapat diakses.

Dari warna asas yang dimasukkan atau variannya, saya ingin dapat memeriksa apakah dua warna dapat diakses ketika dipasangkan bersama.

3. Sebagai pengguna, saya seharusnya dapat melihat kesan perubahan warna asas terhadap aksesibilitas.

Saya ingin mendapat maklum balas masa nyata mengenai pasangan warna yang saya pilih setiap kali membuat perubahan pada warna asas saya.

Versi kerja (sangat kasar)

Dengan kes penggunaan yang ditentukan, saya kemudian merancang merancang prototaip. Saya hadir dengan palet warna, merancang komponen yang terhad, dan akhirnya sampai pada penyelesaian yang mempunyai tiga "mod" atau halaman, dengan pengguna harus beralih di antara mereka untuk menyelesaikan tugas mereka.

Daripada menghuraikannya lebih jauh, mari kita lihat.

Seperti yang anda dapat lihat dari gambar di atas, prototaip mencapai semua yang saya mahukan berdasarkan kes penggunaan awal ... Semacam.

Klik di sini jika anda ingin mencuba prototaip itu sendiri, berkat keajaiban pratonton Netlify menyebarkan.

Yang baik dan buruk dari reka bentuk asal

Saya tidak pernah bermaksud agar prototaip pertama menjadi yang lain daripada batu loncatan, dan anda dapat melihat sendiri bahawa ia agak kasar dan cacat.

Untuk versi seterusnya, saya mulakan dengan melihat apa yang saya suka mengenai prototaip.

Mod Varian

Saya cukup gembira dengan bagaimana varian yang menghasilkan bahagian prototaip itu ternyata. Cukup mudah untuk memilih warna dan mendapatkan senarai varian anda. Pendekatan tab juga berfungsi dengan baik untuk menambahkan beberapa warna asas.

Mampu melihat perubahan aksesibilitas setelah menukar warna

Seperti yang anda lihat dalam demo pendek di atas, tidak perlu menyalin / menampal kod HEX antara aplikasi. Saya sekarang boleh menukar salah satu warna saya dan melihat bagaimana kesannya mempengaruhi aksesibilitas warna dengan cepat.

Kemudian, saya mula memilih perkara yang tidak saya sukai dan perlu diperbaiki .

Interaksi tidak jelas

Berdasarkan ketibaan di laman utama, tidak jelas bagaimana anda memilih varian dan memeriksa kebolehaksesan. Anda mungkin dapat mengetahui bahawa anda mesti mengklik jubin pada akhirnya, tetapi itu benar-benar kikuk.

Modnya membingungkan

Dalam reka bentuk awal, anda hanya dapat menambahkan pasangan dari paparan palet, dan anda hanya dapat menambah / membuang varian dari pandangan varian. Itu semua melibatkan banyak pertukaran antara skrin dan saya merasa kecewa dengan berapa banyak kerja yang membuat aplikasi saya buat. Ini membawa saya ke titik seterusnya.

Terlalu banyak klik diperlukan

Anda mesti mengklik untuk menambahkan varian. Kemudian anda perlu mengklik untuk beralih ke paparan palet. Kemudian anda perlu mengklik beberapa kali untuk membuat pasangan. Kemudian anda perlu mengklik lagi untuk melihat pasangan yang baru anda tambahkan. Seperti yang saya nyatakan di atas, semuanya agak kikuk dan ini mungkin merupakan bahagian terburuk dari prototaip dan sesuatu yang saya tahu perlu saya ubah.

Tidak cukup maklumat yang dapat dilihat di skrin sekaligus

Semakin saya menggunakannya, semakin saya mula tidak menyukai konsep "modes" yang saya buat. Saya rasa saya dipengaruhi oleh proses asal yang mengilhami aplikasi dan saya merancang skrin dalam silo daripada merancang pengalaman yang bersatu. Setelah menggunakan prototaip, saya memutuskan bahawa saya perlu berpindah dari konsep "modes" ke sesuatu yang idealnya semuanya dapat dilakukan dalam satu halaman.

Percubaan kedua

Saya mengambil pelajaran yang telah saya pelajari dari prototaip dan mula membuat versi aplikasi yang lebih baik.

Untuk mengurangkan bilangan interaksi yang diperlukan, mengurangkan kesamaran dalam interaksi , dan untuk meningkatkan jumlah maklumat yang tersedia kepada pengguna sekaligus, saya memutuskan untuk beralih ke UI berasaskan seret dan lepas di mana pengguna dapat menyeret jubin di sekitar untuk menambah palet mereka atau membuat pemeriksaan kebolehaksesan.

Sasaran seret akan selalu dipaparkan dan ini akan mengelakkan perlunya beralih antara skrin.

Mari lihat apa yang saya buat.

Anda boleh mengakses versi aplikasi semasa di sini.

Langkah seterusnya

Aplikasi ini masih sangat awal dan walaupun versi kedua jauh lebih dekat dengan idea yang saya fikirkan, masih ada penambahbaikan yang dapat dilakukan.

Import dari kod

Serta mengeksport palet, saya berencana untuk menambahkan kemampuan membaca warna asas awal dari kod yang mengandungi pemboleh ubah (pemboleh ubah SASS, dan CSS sebagai permulaan)

Eksport ke lebih banyak format

Pada masa ini, anda hanya boleh mengeksport SASS. Saya merancang untuk menambahkan sokongan untuk Pembolehubah CSS, dan format lain pada masa akan datang.

Bersepadu dengan alat reka bentuk

Mengeksport ke kod memang bagus, tetapi akan lebih baik jika saya dapat mengeksport palet dan kemudian mengimportnya sebagai lapisan atau gaya bersama dalam alat reka bentuk seperti Figma atau Sketch.

Perincikan UI

Mari kita hadapi, ini bukan aplikasi yang paling menarik di dunia. Saya merancang untuk mengubah komponen UI untuk meningkatkan aplikasi secara visual.

Maklum balas dan laporan pepijat

Yang ini bercakap sendiri. Saya hanya dapat memperbaiki aplikasi dengan input daripada mereka yang menggunakannya. Untuk melakukannya, saya merancang untuk menambah borang maklum balas pada masa akan datang.

Maklum balas

Bercakap mengenai maklum balas ... Saya menulis artikel ini kerana dua sebab. Makhluk pertama yang menuntun anda melalui proses yang saya lalui untuk mencapai rancangan semasa dengan harapan anda dapat mempelajarinya.

Sebab kedua ialah saya ingin mempamerkan alat tersebut kepada komuniti pembangunan dan reka bentuk kerana saya percaya ia dapat berguna bagi banyak orang, dan juga untuk mengumpulkan maklum balas mengenai keadaannya sekarang.

Oleh itu, jika anda mempunyai pemikiran mengenai reka bentuk, fungsi, proses yang saya lalui untuk membuat alat, atau apa sahaja, saya pasti senang mendengarnya!

Pautan

Prototaip

Versi terkini

Perpustakaan komponen