Sushi Design System - UI Kit

Zomato

Um þetta forrit

Sushi er mjög eigin hönnunarkerfi Zomato, sem hjálpar til við að byggja upp öflug notendaviðmót eftir hreinu og einföldu hönnunarmáli. Við hjá zomato höfum byggt þetta upp frá grunni. Það er ekki bara hönnunarkerfi fyrir okkur, heldur meira en það að það hjálpar okkur að veita notendum okkar nýja og aukna upplifun. Sushi getur hjálpað þér að byggja upp sérsniðin notendaviðmót eftir atómbundnu, hreinu og einföldu hönnunarmáli. Þó Sushi byggi upp á sínu eigin hönnunartungumáli, tekur það að fullu og notar efnishönnunarhluta Google innbyrðis á mörgum sviðum.

Sem hönnunarkerfi og tilvísun í vörumerkjaleiðbeiningar er það notað og táknað af ýmsum teymum innan Zomato, svo sem - vara, verkfræði, markaðssetning og vörumerki.

Hvað er hönnunarkerfi?
Hönnunarkerfi er safn af endurnýtanlegum íhlutum, með skýra staðla að leiðarljósi, sem hægt er að setja saman til að byggja upp hvaða fjölda forrita sem er. Hönnunarkerfi er ekki aðeins safn eigna og íhluta sem þú notar til að smíða stafræna vöru. Samkvæmt Emmet Connolly, forstöðumanni vöruhönnunar hjá Intercom, „... flest hönnunarkerfi eru í raun bara mynstursöfn: stór kassi af UI Lego-hlutum sem hægt er að setja saman á næstum óendanlegan hátt. Allir hlutar geta verið samkvæmir, en það þýðir ekki að samsettar niðurstöður verði það. Varan þín er meira en bara bunki af endurnýtanlegum UI þáttum. Það hefur uppbyggingu og merkingu. Þetta er ekki almenn vefsíða, það er útfærsla á hugtakakerfi.“

Sushi hönnunarkerfi

Stofnanir
Undirstöður eru stafrænar vörumerkjaleiðbeiningar, sem skilgreina leturfræði, litatöflur, tákn, bil, skugga og upplýsingaarkitektúr hönnunarkerfisins okkar. Sushi, samkvæmt frumeindahönnunarreglum, er byggt neðan frá og upp með því að nota samsetta hluti, raðað sem frumeindir ➡️ sameindir ➡️ lífverur.

Atómhönnun
Atomic Design (eins og lýst er af Brad Frost) kortlagt á kerfið okkar.

#Atóm
Minnstu ódeilanlegu einingarnar eru atóm. Í Android (eða hvaða farsímaviðmóti sem er) eru textamerki, hnappar og myndahaldarar frumeindir.

#sameindir
Skoðanir sem fela í sér að mörg atóm myndast, en samt líta út og hegða sér eins og ein heild fyrir notandann eru sameindir. Til dæmis eru innsláttarreitir með innsláttarreitinn, villureitinn og hreinan hnapp, en saman er þetta ein heild.

#Lífverur
Flóknir, en endurnýtanlegir íhlutir, sem vinna á samræmdan hátt saman. Samsett úr mörgum atómum og sameindum. Dæmi um það eru einkunnastikur, sem samanstanda af merkjum, sem hvert um sig hefur númer og tákn. Merkin breytast líka um lit þegar mismunandi einkunnir eru valdar. Hvert merki fyrir sig er einnig notað á öðrum stöðum, en sem einkunnastika vinnur þetta allt saman til að skapa nýja merkingu.

Týpafræði
Leturfræði, eins og þú kannski veist, er listin að raða leturgerð til að gera ritað mál læsilegt, læsilegt og aðlaðandi þegar það er sýnt. Fyrirkomulag leturs felur í sér val á leturgerðum, punktastærðum, línulengd, línubili og stafabili og stilla bilið á milli bókstafapöra.

Við styðjum eftirfarandi leturgerðaafbrigði -

ExtraLight
Ljós
Venjulegur
Miðlungs
Hálffjört
Djarft
ExtraBold

Þú getur notað hvaða letur sem er sem hefur allt að 8 leturþyngd og úthlutað þeim úr þessum samnöfnum. Þó að við höfum Metropolis, Okra og Roboto fyrir kynningu geturðu notað hvaða leturgerð sem er sem passar vörumerkinu þínu.

Litir
Sushi býður einnig upp á sett af fyrirfram skilgreindum litum í stikunni. Fyrir einstök tilfelli skaltu ekki hika við að nota þína eigin liti, en annars mælum við með að nota liti úr þessari litatöflu fyrir alla hluti vörunnar.

Kóðageymsla