Sushi Design System - UI Kit

Zomato

Kuhusu programu hii

Sushi ni mfumo wa kubuni wa Zomato mwenyewe, ambao husaidia kujenga violesura thabiti vya watumiaji kufuatia lugha safi na rahisi ya kubuni. Sisi katika zomato, tumeijenga hii kutoka chini kwenda juu. Sio tu mfumo wa kubuni kwa ajili yetu, lakini zaidi ya hayo hutusaidia kutoa hali mpya na iliyoboreshwa kwa watumiaji wetu. Sushi inaweza kukusaidia kuunda violesura vilivyo dhahiri kwa kufuata lugha ya atomiki, safi na rahisi ya kubuni. Ingawa Sushi inaundwa na lugha yake ya kubuni, inakumbatia kikamilifu na kutumia vipengele vya Usanifu Bora vya Google ndani katika maeneo mengi.

Kama mfumo wa kubuni na rejeleo la miongozo ya chapa, hutumiwa na kuwakilishwa na timu mbalimbali ndani ya Zomato, kama vile - Bidhaa, Uhandisi, Uuzaji na Biashara.

Mfumo wa kubuni ni nini?
Mfumo wa kubuni ni mkusanyiko wa vipengele vinavyoweza kutumika tena, vinavyoongozwa na viwango vilivyo wazi, vinavyoweza kukusanywa pamoja ili kujenga idadi yoyote ya maombi. Mfumo wa usanifu sio tu mkusanyiko wa mali na vipengele unavyotumia kuunda bidhaa ya kidijitali. Kulingana na Emmet Connolly, mkurugenzi wa muundo wa bidhaa katika Intercom, "... Mifumo mingi ya Usanifu kwa kweli ni Maktaba za Miundo: sanduku kubwa la vipande vya UI Lego ambavyo vinaweza kuunganishwa kwa njia zisizo na kikomo. Vipande vyote vinaweza kuwa sawa, lakini hiyo haimaanishi kuwa matokeo yaliyokusanywa yatakuwa. Bidhaa yako ni zaidi ya rundo la vipengele vya UI vinavyoweza kutumika tena. Ina muundo na maana. Sio ukurasa wa wavuti wa kawaida, ni mfano wa mfumo wa dhana.

Mfumo wa Usanifu wa Sushi

Misingi
Misingi ni miongozo ya chapa ya kidijitali, ambayo inafafanua uchapaji, paleti za rangi, aikoni, nafasi, kivuli na usanifu wa taarifa wa mfumo wetu wa kubuni. Sushi, kwa kufuata kanuni za muundo wa atomiki, hujengwa kutoka chini kwenda juu kwa kutumia viambajengo vinavyoweza kutungwa, vinavyopangwa kama atomi ➡️ molekuli ➡️ viumbe.

Muundo wa Atomiki
Muundo wa Atomiki (kama ilivyoelezewa na Brad Frost) uliowekwa kwenye mfumo wetu.

#Atomu
Vitengo vidogo visivyoweza kugawanywa ni atomi. Katika Android (au UI yoyote ya simu) lebo za maandishi, vitufe, na vishikilia picha ni atomi.

#Molekuli
Mionekano inayohusisha atomi nyingi kuunda, lakini bado inaonekana na kuwa kama huluki moja kwa mtumiaji ni molekuli. Kwa mfano, sehemu za ingizo zina kisanduku cha ingizo, sehemu ya hitilafu, na kitufe kilicho wazi, lakini kwa pamoja ni huluki moja.

#Viumbe
Vipengele ngumu, lakini vinavyoweza kutumika tena, vinavyofanya kazi kwa njia ya kushikamana pamoja. Inaundwa na atomi nyingi na molekuli. Mfano halisi ni pau za ukadiriaji, ambazo zinajumuisha lebo, kila moja ikiwa na nambari na ikoni. Lebo hubadilisha rangi pia, wakati ukadiriaji tofauti huchaguliwa. Kila tagi kibinafsi pia inatumika katika maeneo mengine, lakini kama sehemu ya ukadiriaji, yote hufanya kazi pamoja ili kuunda maana mpya.

Uchapaji
Uchapaji, kama unavyojua, ni ufundi wa kupanga aina ili kufanya lugha iliyoandikwa isomeke, na kuvutia inapoonyeshwa. Mpangilio wa aina unahusisha uteuzi wa aina, ukubwa wa pointi, urefu wa mstari, nafasi ya mstari, na nafasi ya barua, na kurekebisha nafasi kati ya jozi za barua.

Tunaunga mkono tofauti za aina zifuatazo -

Mwanga wa Ziada
Mwanga
Mara kwa mara
Kati
SemiBold
Ujasiri
ExtraBold

Unaweza kutumia Fonti yoyote ambayo ina uzani wa fonti hadi 8 na uwape kutoka kwa lakabu hizi. Ingawa tuna Metropolis, Okra na Roboto kwa onyesho, unaweza kutumia fonti yoyote inayoendana na chapa yako.

Rangi
Sushi pia hutoa seti ya rangi zilizoainishwa katika palette yake. Kwa matukio ya kipekee sana, jisikie huru kutumia rangi zako mwenyewe, lakini vinginevyo, tunapendekeza kutumia rangi kutoka kwa palette hii kwa vipengele vyote vya bidhaa yako.

Hazina ya msimbo