[Kalendala ya UX] Yambitsani kupanga mitu yamawonekedwe pogwiritsa ntchito zizindikiro zamapangidwe

Dziko la mapangidwe a digito likusintha nthawi zonse, ndipo kuti mukhalebe opikisana, ndikofunikira kusunga mawonekedwe osasinthika pamapulatifomu ndi zida zonse. Apa ndipamene zizindikiro zamapangidwe zimabwera. Magawo ang'onoang'ono apangidwe, ngakhale nthawi zambiri amanyalanyazidwa, amagwira ntchito yofunika kwambiri popanga zokumana nazo zogwirizana komanso zothandiza kwa ogwiritsa ntchito.

Kodi chizindikiro cha mapangidwe ndi chiyani?

Zizindikiro zamapangidwe ndizo mfundo zokhazikika zomwe zimayimira zofunikira za dongosolo lokonzekera.
Monga chikumbutso, a dongosolo lopanga ndi malo osungira omwe amasonkhanitsa pamodzi zigawo zonse za polojekiti ya digito. Izi zimapangitsa kuti zikhale zotheka kupanga malingaliro ogwirizana panthawi yonse yopanga ndikuwongolera magulu onse omwe akukhudzidwa pakupanga mawonekedwe.
Zizindikiro Zopangira Zitha kugwiritsidwa ntchito kutanthauzira mitundu, mafonti, makulidwe, m'mphepete, malo oyera, ndi zinthu zina zamapangidwe. Izi ndi zida zamphamvu zomwe zingathandize kuwongolera bwino kusasinthika neri La khalidwe kapangidwe, komanso mgwirizano pakati pa opanga ndi opanga.
M'malo mogwiritsa ntchito mtengo, timagwiritsa ntchito chizindikiro. Izi zimakupatsani mwayi wokhala ndi tsamba limodzi lokha ndi zizindikiro zonse zomwe zidalowetsedwa ndikutha kudalira a gwero limodzi.

Chitsanzo cha chizindikiro cha mtundu umodzi:

Pa mlingo uwu, kamangidwe ka zizindikiro ndi pang'ono ngati masitayelo pa Mkuyu ou Sakani (mitundu, mafonti, mithunzi, ndi zina) koma ndizotheka zambiri komanso kusinthasintha kochulukirapo. Chizindikiro cha mapangidwe chimagwiritsidwa ntchito nthawi zambiri pamitundu, kukula, m'mphepete, kuwala, malire, ndi zina.

Choncho, osati kukhala:

Tikanakhala:

Mapangidwe a chizindikiro amatilola kutero kusintha mtengo pa ntchentche kuchokera ku "{primary}" ngati kuli kofunikira, popanda kubwerera ku mizere yosiyana.
Komanso, muzochitika za Multi-brand Design System, izi zimapangitsanso kukhala ndi imodzi yokha tsamba limodzi lokha loti musinthe kusintha masitayilo.
Choyenera ndikukhala ndi dzina lomwelo pamasitayelo pa pulogalamu yathu yopangira kuti zigwirizane komanso kuphweka pamene pereka pakati pa opanga ndi opanga.
Komabe, kugwiritsa ntchito zizindikiro zapangidwe monga gawo lofunikira la dongosolo la mapangidwe ndiloposa. Amalolanso a kuchuluka kwa scalability, kulankhulana bwino pakati pa magulu motero kupanga zisankho zabwinoko.

Mitundu iwiri ya Zizindikiro Zopangira

  • Zoyamba za zizindikiro
    Zoyamba za zizindikiro ndizo mfundo zofunika dongosolo lopanga. Zimaphatikizapo mitundu, mafonti, kukula kwa mafonti, mitsinje, malo oyera, ndi zina zopangira. Ma token primitives nthawi zambiri amasungidwa mumtundu wa data, monga JSON, CSS ou YAML. Izi zimapangitsa kukhala kosavuta kwa opanga ndi opanga kugawana ndikuzigwiritsa ntchito.
  • Zizindikiro za Semantics
    Zizindikiro za Semantic ndizophatikiza zizindikiro zakale zomwe zimakhala ndi tanthauzo lapadera pamapangidwe. Mwachitsanzo, chizindikiro cha semantics chikhoza kukhala mtundu wina wake womwe umagwiritsidwa ntchito polemba batani, kapena font yomwe imagwiritsidwa ntchito pamutu watsamba. Zizindikiro za Semantic zimakulolani kuti mupange a kamangidwe kogwirizana komanso kofanana, ndi kufewetsa mgwirizano pakati pa opanga ndi opanga.

Primitives ndi semantics ndi zinthu ziwiri zofunika pakupanga dongosolo. Amalola fotokozani zinthu zofunika kupanga, ndi kuzikonza kuti zikhale zosavuta kuzipeza ndi kuzigwiritsa ntchito. Pogwiritsa ntchito zizindikiro, okonza ndi opanga amatha kupanga mawonekedwe osakanikirana, apamwamba kwambiri mofulumira komanso mosavuta.

Ubwino wa Design Tokens

  • Kusasinthasintha
    Zizindikiro zamapangidwe zimayankha, mwa zina, ku a vuto labizinesi : mungatsimikize bwanji chizindikiritso cha mtunduwo ndi kukangana kochepa?
    Pakachitika kusintha kwa maziko (kubwezeretsanso mwachitsanzo), zizindikiro zamapangidwe zimapangitsa kuti zitheke kutumiza zosinthazi mwachangu.
    Masitayilo ndi ogwirizana pazogulitsa zonse ndi nsanja.
  • Reusability
    Zizindikiro zamapangidwe zitha kugwiritsidwanso ntchito pa chinthu chimodzi kapena zingapo, zomwe zimalolasungani nthawi ndi chuma mu chitukuko. Madivelopa amatenga ma tokeni mwachindunji m'malo mongopanga masitayelo atsopano nthawi iliyonse.
    Ma tokeni opangira amapewa zolemba zolimba mu code.
  • Kukhalitsa
    Ma tokeni apangidwe amathandizira kukonza ntchito chifukwa amalola masitayilo ofulumira. Bwanji ? Zizindikiro ndi data yomwe ili ndi dzina ndi mtengo womwe uli pakati.
    Mwa kungosintha mtengo wa chizindikiro, monga mtundu wa batani lalikulu, izi zidzakhudza mabatani onse a ntchito / malo mu njira imodzi yokha! Madivelopa amatha kusunga masitayilo a projekiti mosavuta ngakhale zosankha zitasintha.

Malire a Zizindikiro Zopangira

  • Zida sizili zokonzeka
    Popeza mawonekedwe a zizindikiro zapangidwe sanakhazikitsidwe mwala, palibe amene adagwirizanabe momwe angagwiritsire ntchito. Gulu lililonse ndi kampani zili nazo ntchito zake komanso chilankhulo chake. Pakadali pano W3C panopa akugwira ntchito yokonza njira yomwe ingathetse vutoli. Koma pakadali pano ndikofunikira kupanga zida zomwe zilipo komanso zofooka zawo. Figma yasonyeza kuti ikugwira ntchito pankhaniyi, koma izi mwina sizidzatulutsidwa kumapeto kwa chaka.
  • Kuchepa kwa kayendetsedwe ka ntchito
    Pezani a nomenclature kumvetsetsa ndi aliyense ndikufunafuna kwenikweni kwa Grail Woyera. Kuphatikiza apo, monga dongosolo lililonse, liyenera kusinthika molingana ndi kuchuluka kwa magawo. Kwa izi akuwonjezedwa ndi zovuta zolemba neri Le nthawi yofunikira kuti alembe. Magulu apadera mu Design System sanafalikirebe, ndipo izi ndi zoona makamaka kwa anthu odzipereka kulemba zolemba.
    Kusinthidwa pang'ono kwa chimodzi mwazinthu zoyambirirazi kungapangitse zosintha zambiri zomwe ziyenera kuganiziridwa.
    Kukhala ndi chiwongolero cha dongosololi n'kofunika kwambiri pokhazikitsa zizindikiro zapangidwe.
    Thekukhazikitsa ndizovuta ndipo imafuna khama lalikulu, koma ndili ndi chidaliro kuti njira yotereyi ndi yopambana kwambiri ndi phindu lodziwika bwino lomwe lingabweretse.

Kutsiliza

Zizindikiro Zopanga ndi mabungwe omwe ali ndi dzina lapadera ndi mayina omwe amasunga deta yosaoneka (monga katayanidwe kapena mtundu mwachitsanzo). Zonse ndizofunika pakumanga ndi kukonza dongosolo. Timagwiritsa ntchito mfundozi m'malo "mozilemba molimba" mu code kuti tiwonetsetse kuti ndizochuluka kusinthasintha, homogeneity neri de A scalability kudutsa zinthu zosiyanasiyana ndi zochitika… Amakhalanso osakhulupirira ndipo ayenera kugwira ntchito pa nsanja iliyonse.
Koma koposa zonse amaimira njira osati "zosinthika" zokha. Amalola Mapangidwe Amtundu uliwonse kukula pamapulatifomu onse, zida ndi zinthu zomwe mtundu ungakhale nazo. Mbali yosinthika ndi dontho chabe m'nyanja.

Tengera kwina

  • Zizindikiro zopanga sizingosunga zambiri, koma kufalitsanso zambiri.
  • Amagwiritsidwa ntchito kusonyeza makhalidwe akale, koma kuthekera kwawo kwenikweni kumawululidwa akagwiritsidwa ntchito Zolemba za gawo la UI.
  • Amafanana ndi a njira ndi njira yopangira dongosolo lovuta.

Zothandizira kupita patsogolo

  • Zizindikiro mu Kapangidwe Kapangidwe: Malangizo 10 Opangira Zomanga & Kukhazikitsa Zosankha Zopanga Kwa Aliyense: Werengani apa 
  • Zizindikiro Zopanga kupitilira mitundu, kalembedwe, ndi masitayilo: Werengani apa

 

 

 

Alexandre Caillé, UI & Design System Lead ku UX-Republic