Sushi Design System - UI Kit

Zomato

O tej aplikaciji

Sushi je Zomatoov zelo lasten sistem oblikovanja, ki pomaga graditi robustne uporabniške vmesnike po čistem in preprostem oblikovalskem jeziku. Pri zomato smo to zgradili od začetka. Za nas to ni le sistem oblikovanja, ampak nam pomaga zagotoviti novo in izboljšano izkušnjo našim uporabnikom. Sushi vam lahko pomaga zgraditi uporabniške vmesnike po meri, ki sledijo atomskemu, čistemu in preprostemu oblikovalskemu jeziku. Medtem ko Sushi temelji na lastnem oblikovalskem jeziku, v celoti zajema in uporablja Googlove komponente Material Design interno na mnogih področjih.

Kot sistem oblikovanja in referenca za smernice blagovnih znamk ga uporabljajo in predstavljajo različne ekipe znotraj Zomato, kot so produkt, inženiring, marketing in blagovna znamka.

Kaj je sistem oblikovanja?
Sistem oblikovanja je zbirka komponent za večkratno uporabo, ki jih vodijo jasni standardi, ki jih je mogoče sestaviti skupaj za izdelavo poljubnega števila aplikacij. Sistem oblikovanja ni le zbirka sredstev in komponent, ki jih uporabljate za izdelavo digitalnega izdelka. Po besedah ​​Emmeta Connollyja, direktorja produktnega oblikovanja pri Intercomu, »... večina oblikovalskih sistemov je v resnici le knjižnice vzorcev: velika škatla kosov Lego uporabniškega vmesnika, ki jih je mogoče sestaviti na skoraj neskončne načine. Vsi deli so lahko dosledni, vendar to ne pomeni, da bodo zbrani rezultati. Vaš izdelek je več kot le kup elementov uporabniškega vmesnika za večkratno uporabo. Ima strukturo in pomen. To ni generična spletna stran, je utelešenje sistema konceptov."

Sushi Design System

Osnove
Temelji so smernice digitalnih blagovnih znamk, ki opredeljujejo tipografijo, barvne palete, ikone, razmike, sence in informacijsko arhitekturo našega oblikovalskega sistema. Sushi, ki sledi načelom atomskega oblikovanja, je zgrajen od spodaj navzgor z uporabo komponent, ki jih je mogoče sestaviti, urejenih kot atomi ➡️ molekule ➡️ organizmi.

Atomska zasnova
Atomic Design (kot je opisal Brad Frost), preslikan v naš sistem.

#Atomi
Najmanjše nedeljive enote so atomi. V Androidu (ali katerem koli mobilnem uporabniškem vmesniku) so besedilne oznake, gumbi in nosilci slik atomi.

#Molekule
Pogledi, ki vključujejo nastajanje več atomov, a so za uporabnika še vedno videti in se obnašajo kot ena entiteta, so molekule. Vnosna polja imajo na primer polje za vnos, polje z napako in gumb za brisanje, vendar so skupaj ena sama entiteta.

#Organizmi
Kompleksne, a večkrat uporabne komponente, ki delujejo na koheziven način. Sestavljen je iz več atomov in molekul. Primer so ocenjevalne vrstice, ki so sestavljene iz oznak, od katerih ima vsaka številko in ikono. Oznake spremenijo tudi barvo, ko so izbrane različne ocene. Vsaka oznaka posebej se uporablja tudi na drugih mestih, vendar kot ocenjevalna vrstica vse skupaj ustvarja nov pomen.

Tipografija
Kot morda veste, je tipografija umetnost urejanja črk, da je pisni jezik čitljiv, berljiv in privlačen, ko je prikazan. Razporeditev vrste vključuje izbiro pisave, velikosti pik, dolžine vrstic, razmika med vrsticami in razmika med črkami ter prilagajanje razmika med pari črk.

Podpiramo naslednje različice pisave -

ExtraLight
Svetloba
Redno
srednje
Polkrepko
Krepko
Ekstrakrepko

Uporabite lahko katero koli pisavo, ki ima do 8 uteži pisave, in jih dodelite iz teh vzdevkov. Medtem ko imamo Metropolis, Okra in Roboto za demo, lahko uporabite katero koli pisavo, ki ustreza vaši blagovni znamki.

Barve
Sushi ponuja tudi nabor vnaprej določenih barv v svoji paleti. Za izjemno edinstvene primere lahko uporabite svoje barve, sicer pa priporočamo uporabo barv iz te palete za vse komponente vašega izdelka.

Skladišče kod