[UX Calendar] Memudahkan penciptaan tema antara muka menggunakan token reka bentuk

Dunia reka bentuk digital sentiasa berkembang, dan untuk kekal berdaya saing, adalah penting untuk mengekalkan konsistensi visual merentas semua platform dan peranti. Di sinilah token reka bentuk masuk. Unit reka bentuk kecil ini, walaupun sering diabaikan, memainkan peranan penting dalam mencipta pengalaman pengguna yang harmoni dan berkesan.

Apakah token reka bentuk?

Token reka bentuk adalah nilai piawai yang mewakili elemen asas sistem reka bentuk.
Sebagai peringatan, a sistem reka bentuk ialah repositori yang menghimpunkan semua komponen projek digital. Ini memungkinkan untuk mereka bentuk logik yang koheren sepanjang pengeluaran dan membimbing semua pasukan yang terlibat dalam reka bentuk antara muka.
Token Reka Bentuk boleh digunakan untuk menentukan warna, fon, saiz, jidar, ruang putih dan elemen reka bentuk lain. Ini adalah alat berkuasa yang boleh membantu meningkatkan konsisten dan berkualiti reka bentuk, serta kerjasama antara pereka bentuk dan pembangun.
Daripada menggunakan nilai, kami menggunakan token. Ini kemudian membolehkan anda mempunyai hanya satu halaman dengan semua token yang dimasukkan dan boleh bergantung pada a sumber tunggal.

Contoh untuk token satu warna:

Pada tahap ini, reka bentuk token adalah sedikit seperti gaya pada figma ou Lakaran (warna, fon, bayang-bayang, dll.) tetapi dengan lebih banyak kemungkinan dan lebih fleksibiliti. Token reka bentuk paling kerap digunakan untuk warna, saiz, jidar, kelegapan, sempadan, dsb.

Jadi, daripada mempunyai:

Kami akan mempunyai:

Reka bentuk token membolehkan kita menukar nilai dengan cepat dari "{primary}" jika perlu, tanpa perlu kembali ke baris yang berbeza.
Tambahan pula, sekiranya berlaku Sistem Reka Bentuk Pelbagai jenama, ini juga memungkinkan untuk memiliki satu sahaja satu-satunya halaman untuk diedit untuk menukar gaya.
Yang ideal adalah untuk mempunyai nama yang sama dalam gaya pada perisian reka bentuk kami untuk ketekalan dan kesederhanaan yang lebih besar apabila menyerahkan antara pereka dan pembangun.
Walau bagaimanapun, penggunaan token reka bentuk sebagai bahagian penting dalam sistem reka bentuk adalah lebih daripada itu. Mereka juga membenarkan a peningkatan skalabiliti, komunikasi yang lebih baik antara pasukan dan oleh itu membuat keputusan yang lebih baik.

Dua jenis Token Reka Bentuk

  • Primitif token
    Primitif token ialah nilai asas sistem reka bentuk. Ia termasuk warna, fon, saiz fon, jidar, ruang putih dan elemen reka bentuk lain. Token primitif biasanya disimpan dalam format data piawai, seperti JSON, CSS ou YAML. Ini memudahkan pereka bentuk dan pembangun berkongsi dan menggunakannya.
  • Token semantik
    Token semantik ialah gabungan token primitif yang mempunyai makna khusus dalam sistem reka bentuk. Sebagai contoh, token semantik boleh menjadi warna khusus yang digunakan untuk butang arahan atau fon khusus yang digunakan untuk tajuk halaman. Token semantik membolehkan anda membuat a reka bentuk yang koheren dan homogen, dan memudahkan kerjasama antara pereka bentuk dan pembangun.

Primitif dan semantik adalah dua elemen penting dalam sistem reka bentuk. Mereka membenarkan menentukan elemen asas mereka bentuk, dan menyusunnya supaya mudah dicari dan digunakan. Dengan menggunakan token, pereka bentuk dan pembangun boleh mencipta antara muka yang konsisten dan berkualiti tinggi dengan lebih cepat dan mudah.

Faedah Token Reka Bentuk

  • konsisten
    Token reka bentuk bertindak balas, antara lain, kepada a masalah perniagaan : bagaimana untuk menjamin identiti grafik jenama dengan geseran minimum?
    Sekiranya berlaku perubahan dalam asas (contohnya penjenamaan semula), token reka bentuk memungkinkan untuk menggunakan pengubahsuaian ini dengan cepat.
    Gaya disatukan merentas semua produk dan platform.
  • Kebolehgunaan semula
    Token reka bentuk boleh digunakan semula merentas satu atau lebih produk, yang membenarkanmenjimatkan masa dan sumber dalam pembangunan. Pembangun mendapatkan semula token secara langsung daripada perlu mencipta gaya baharu setiap kali.
    Token reka bentuk mengelakkan nilai penulisan keras dalam kod.
  • Kebolehselenggaraan
    Token reka bentuk memudahkan penyelenggaraan projek kerana ia membenarkan kemas kini gaya pantas. bagaimana? Token ialah data yang mengandungi nama dan nilai yang berpusat.
    Dengan hanya mengubah suai nilai token, seperti warna butang utama, ini akan memberi kesan kepada semua butang aplikasi/tapak dalam satu campur tangan! Oleh itu, pembangun boleh mengekalkan gaya projek dengan lebih mudah walaupun apabila pilihan reka bentuk berkembang.

Had Token Reka Bentuk

  • Alatan belum siap
    Memandangkan format token reka bentuk tidak ditetapkan, tiada siapa yang bersetuju tentang cara menggunakannya. Setiap pasukan dan syarikat ada fungsinya sendiri dan bahasanya sendiri. Pada masa ini W3C sedang mengusahakan format yang akan menyelesaikan masalah ini. Tetapi buat masa ini adalah wajar untuk menyesuaikan diri dengan alat yang ada dan batasannya. Figma telah menyatakan bahawa ia sedang mengusahakan subjek ini, tetapi ciri ini mungkin tidak akan dikeluarkan sebelum akhir tahun ini.
  • Kelembapan dalam aliran kerja
    Mencari tatanama difahami oleh semua orang adalah pencarian sebenar untuk Holy Grail. Di samping itu, seperti mana-mana sistem, ia perlu berkembang mengikut bilangan parameter yang baik. Untuk ini ditambah kerumitan dokumentasi dan masa yang diperlukan untuk menulisnya. Pasukan khusus dalam Sistem Reka Bentuk masih belum meluas, dan ini lebih benar untuk orang yang berdedikasi untuk menulis dokumentasi.
    Sedikit pengubahsuaian salah satu primitif ini boleh menghasilkan banyak kemas kini yang mesti diambil kira.
    Mempunyai gambaran keseluruhan sistem adalah penting apabila melaksanakan token reka bentuk.
    L 'pelaksanaan adalah kompleks dan memerlukan usaha akar umbi yang ketara, tetapi saya yakin pendekatan sedemikian jauh mengatasi faedah eksponen yang boleh dibawanya.

Kesimpulan

Token Reka Bentuk ialah entiti dengan nama dan tatanama tertentu yang disimpan data yang tidak boleh dibahagikan (seperti jarak atau warna contohnya). Mereka semua adalah nilai yang diperlukan untuk pembinaan dan penyelenggaraan sistem. Kami menggunakan nilai ini dan bukannya "pengekodan keras" dalam kod untuk memastikan maksimum fleksibiliti, kehomogenan dan kebolehskalaan merentasi produk dan pengalaman yang berbeza… Mereka juga agnostik dan harus berfungsi pada mana-mana platform.
Tetapi di atas semua mereka mewakili metodologi dan bukan hanya "pembolehubah". Mereka membenarkan mana-mana Sistem Reka Bentuk berkembang merentas semua platform, peranti dan produk yang mungkin ada pada jenama. Bahagian yang berubah-ubah hanyalah setitik di lautan.

Bawa pulang

  • Token reka bentuk bukan sahaja menyimpan maklumat, tetapi juga menghantar maklumat.
  • Mereka digunakan untuk menunjukkan nilai primitif, tetapi potensi sebenar mereka terserlah apabila ia digunakan dalam dokumentasi komponen UI.
  • Mereka serupa dengan a metodologi dan satu cara untuk membina sistem yang kompleks.

Sumber untuk pergi lebih jauh

  • Token dalam Sistem Reka Bentuk: 10 Petua untuk Arkitek & Melaksanakan Keputusan Reka Bentuk untuk Semua Orang: Baca di sini 
  • Token Reka Bentuk melangkaui warna, tipografi dan jarak: Baca di sini

 

 

 

Alexandre Caillé, Ketua UI & Sistem Reka Bentuk di UX-Republic