Sushi ay sariling sistema ng disenyo ng Zomato, na tumutulong sa pagtatayo ng mahusay na mga interface ng gumagamit kasunod ng malinis at simpleng disenyo ng wika. Kami sa Zomato, ay nagtayo ito mula sa lupa. Ito ay hindi lamang isang sistema ng disenyo para sa amin, ngunit higit pa sa na tumutulong sa amin na magbigay ng bago at pinahusay na karanasan sa aming mga gumagamit. Ang Sushi ay maaaring makatulong sa iyo na bumuo ng mga pasadyang mga interface ng gumagamit kasunod ng isang atomic, malinis at simpleng disenyo ng wika. Habang ang sushi ay nagtatayo sa sariling wika ng disenyo, ito ay ganap na sumasaklaw at gumagamit ng mga bahagi ng disenyo ng materyal ng Google sa loob ng maraming lugar.
Bilang isang sistema ng disenyo at isang sanggunian para sa mga alituntunin ng tatak, ginagamit ito at kinakatawan ng iba't ibang mga koponan sa loob ng zomato, tulad - produkto, engineering, marketing at branding.
Ano ang isang Disenyo ng sistema?
Isang sistema ng disenyo ay isang koleksyon ng mga magagamit na bahagi, ginagabayan ng malinaw na mga pamantayan, na maaaring tipunin upang bumuo ng anumang bilang ng mga application. Ang isang disenyo ng sistema ay hindi lamang isang koleksyon ng mga asset at mga bahagi na ginagamit mo upang bumuo ng isang digital na produkto. Ayon kay Emmet Connolly, direktor ng disenyo ng produkto sa intercom, "... karamihan sa mga sistema ng disenyo ay talagang mga library ng pattern: isang malaking kahon ng mga piraso ng Lego ng UI na maaaring tipunin sa malapit na walang katapusan na paraan. Ang lahat ng mga piraso ay maaaring maging pare-pareho, ngunit hindi ito nangangahulugan na ang mga natipon na resulta ay magiging. Ang iyong produkto ay higit pa sa isang tumpok ng magagamit na mga elemento ng UI. Mayroon itong istraktura at kahulugan. Ito ay hindi isang pangkaraniwang web page, ito ay ang sagisag ng isang sistema ng mga konsepto. "
Sushi Design System
Foundations
Ang mga pundasyon ay mga digital na alituntunin ng tatak, na tumutukoy sa palalimbagan, kulay palette, mga icon, spacing, anino at arkitektura ng impormasyon sa aming sistema ng disenyo. Sushi, sumusunod na mga prinsipyo ng Atomic Design, ay binuo sa ilalim-up gamit ang mga composable component, na iniutos bilang atoms ➡ ️ Mga Organisms.
Atomic Design
Atomic Design (tulad ng inilarawan ni Brad Frost ) Mapped sa aming system.
#atoms
Ang pinakamaliit na hindi mahahalagang yunit ay mga atom. Sa Android (o anumang mobile UI) mga label ng teksto, mga pindutan, at mga may hawak ng imahe ay mga atomo.
#molecules
Mga tanawin na may maraming mga atomo upang mabuo, ngunit tumingin pa rin at kumilos Tulad ng isang solong entity sa mga molecule. Halimbawa, ang mga patlang ng input ay may input box, ang field ng error, at isang malinaw na pindutan, ngunit magkasama ito ay isang solong entity.
#Organisms
complex, ngunit magagamit muli ang mga bahagi , na nagtatrabaho sa isang magkakasamang paraan. Binubuo ng maraming atoms at molecule. Ang isang kaso sa punto ng rating bar, na binubuo ng mga tag, bawat isa ay may isang numero at isang icon. Ang mga tag ay nagbabago rin ng kulay, kapag ang iba't ibang mga rating ay pinili. Ang bawat tag ay ginagamit din sa iba pang mga lugar, ngunit bilang isang rating bar, ang lahat ng ito ay gumagana nang sama-sama upang lumikha ng bagong kahulugan.
palalimbagan
palalimbagan, tulad ng maaari mong malaman, ay Ang sining ng pag-aayos ng uri upang gumawa ng nakasulat na wika na nababasa, nababasa, at sumasamo kapag ipinakita. Ang pag-aayos ng uri ay nagsasangkot sa pagpili ng mga typefaces, laki ng punto, haba ng linya, line-spacing, at sulat-spacing, at pagsasaayos ng espasyo sa pagitan ng mga pares ng mga titik.
Sinusuportahan namin ang sumusunod na mga pagkakaiba-iba ng typeface -
Extralight
light
regular
medium
semibold
bold
Extrabold
Maaari kang gumamit ng anumang font na may hanggang 8 na timbang ng font at italaga ang mga ito mula sa mga ito alias. Habang kami ay may metropolis, okra at roboto para sa demo, maaari mong gamitin ang anumang font na napupunta sa iyong brand.
Mga kulay
Sushi din ay nagbibigay ng isang hanay ng mga paunang natukoy na kulay sa palette nito . Para sa mga natatanging natatanging mga kaso, huwag mag-atubiling gamitin ang iyong sariling mga kulay, ngunit sa kabilang banda, inirerekumenda namin ang paggamit ng mga kulay mula sa palette na ito para sa lahat ng mga bahagi ng iyong produkto.
9Apps 4.9
