Sushi Design System - UI Kit

Zomato

Осы қолданба туралы

Суши - бұл Zomato-ның жеке дизайн жүйесі, ол таза және қарапайым дизайн тілінен кейін сенімді пайдаланушы интерфейстерін құруға көмектеседі. Біз zomato-да мұны басынан бастап жасадық. Бұл біз үшін жай дизайн жүйесі емес, сонымен қатар ол бізге пайдаланушыларымызға жаңа және жақсартылған тәжірибені ұсынуға көмектеседі. Суши атомдық, таза және қарапайым дизайн тілінен кейін тапсырыс беруші интерфейстерін құруға көмектеседі. Суши өзінің дизайн тіліне негізделгенімен, ол көптеген салаларда Google-дың Материалдық дизайн құрамдастарын толығымен қабылдайды және пайдаланады.

Дизайн жүйесі және бренд нұсқауларына сілтеме ретінде оны Zomato ішіндегі әртүрлі командалар пайдаланады және ұсынады - Өнім, Инженерлік, Маркетинг және Брендинг.

Жобалау жүйесі дегеніміз не?
Дизайн жүйесі - бұл кез келген қосымшаларды құру үшін біріктіруге болатын нақты стандарттарды басшылыққа алатын қайта пайдалануға болатын компоненттер жиынтығы. Дизайн жүйесі сандық өнімді құру үшін пайдаланатын активтер мен құрамдас бөліктердің жиынтығы ғана емес. Intercom компаниясының өнім дизайны бойынша директоры Эммет Конноллидің айтуынша, «... Дизайн жүйелерінің көпшілігі шын мәнінде жай үлгі кітапханалары: шексіз дерлік тәсілдермен жиналатын UI Lego бөліктерінің үлкен қорабы. Барлық бөліктер дәйекті болуы мүмкін, бірақ бұл жиналған нәтижелер болады дегенді білдірмейді. Сіздің өніміңіз қайта пайдалануға болатын UI элементтерінің үйіндісі ғана емес. Оның құрылымы мен мағынасы бар. Бұл жалпы веб-бет емес, бұл ұғымдар жүйесінің іске асуы».

Суши дизайн жүйесі

Негіздер
Негіздер - типографияны, түстер палитрасын, белгішелерді, кеңістікті, көлеңкені және дизайн жүйеміздің ақпараттық архитектурасын анықтайтын цифрлық бренд нұсқаулары. Суши атомдық дизайн принциптеріне сүйене отырып, атомдар ➡️ молекулалар ➡️ организмдер ретінде реттелген құрамдас бөліктерді пайдалана отырып, төменнен жоғары қарай құрастырылады.

Атомдық дизайн
Атомдық дизайн (Бред Фрост сипаттағандай) біздің жүйемен салыстырылған.

#Атомдар
Ең кіші бөлінбейтін бірлік атомдар. Android жүйесінде (немесе кез келген мобильді UI) мәтіндік белгілер, түймелер және кескін ұстағыштары атомдар болып табылады.

#Молекулалар
Түзету үшін бірнеше атомды қамтитын, бірақ бәрібір пайдаланушыға бір нысан сияқты көрінетін және әрекет ететін көріністер молекулалар болып табылады. Мысалы, енгізу өрістерінде енгізу өрісі, қате өрісі және тазалау түймесі бар, бірақ олар бірге бір нысан болып табылады.

#Организмдер
Біріктірілген түрде жұмыс істейтін күрделі, бірақ қайта пайдалануға болатын компоненттер. Бірнеше атомдар мен молекулалардан тұрады. Әрқайсысының саны мен белгішесі бар тегтерден тұратын бағалау жолақтары. Әртүрлі бағалаулар таңдалған кезде тегтердің түсі де өзгереді. Әрбір тег басқа жерлерде де пайдаланылады, бірақ бағалау жолағы ретінде барлығы жаңа мағына жасау үшін бірге жұмыс істейді.

Типография
Типография, сіз білетіндей, жазбаша тілді түсінікті, оқылатын және көрсетілген кезде тартымды ету үшін типті реттеу өнері. Түрді орналастыру шрифттерді, нүкте өлшемдерін, жол ұзындығын, жол аралығын және әріптер аралығын таңдауды және әріптер жұбының арасындағы кеңістікті реттеуді қамтиды.

Біз келесі қаріп нұсқаларын қолдаймыз -

Қосымша жарық
Жарық
Тұрақты
Орташа
Жартылай қалың
Қалың
ExtraBold

Сіз 8 қаріп салмағына дейін кез келген Қаріпті пайдалана аласыз және оларды осы бүркеншік аттардан тағайындай аласыз. Бізде демонстрацияға арналған Metropolis, Okra және Roboto бар болса да, сіз өзіңіздің брендіңізге сәйкес келетін кез келген қаріпті пайдалана аласыз.

Түстер
Сондай-ақ суши палитрасында алдын ала анықталған түстер жинағын қамтамасыз етеді. Өте ерекше жағдайлар үшін өз түстеріңізді пайдаланыңыз, бірақ басқа жағдайда өніміңіздің барлық құрамдас бөліктері үшін осы палитрадағы түстерді пайдалануды ұсынамыз.

Код репозиторийі