Sushi Design System - UI Kit

Zomato

Пра гэту праграму

Сушы - гэта ўласная дызайнерская сістэма Zomato, якая дапамагае ствараць надзейныя карыстальніцкія інтэрфейсы на чыстай і простай мове дызайну. Мы ў Zomato пабудавалі гэта з нуля. Гэта не проста сістэма дызайну для нас, але больш за тое, яна дапамагае нам даць новы і палепшаны вопыт для нашых карыстальнікаў. Сушы можа дапамагчы вам стварыць індывідуальныя карыстальніцкія інтэрфейсы, якія прытрымліваюцца атамарнай, чыстай і простай мовы дызайну. Нягледзячы на ​​тое, што Sushi абапіраецца на ўласную мову дызайну, ён цалкам ахоплівае і выкарыстоўвае кампаненты Material Design Google унутры ў многіх галінах.

У якасці сістэмы дызайну і даведкі да кіруючых прынцыпаў брэнда яна выкарыстоўваецца і прадстаўлена рознымі камандамі ў Zomato, такімі як прадукт, інжынерыя, маркетынг і брэндынг.

Што такое сістэма дызайну?
Сістэма праектавання - гэта набор шматразовых кампанентаў, якія кіруюцца выразнымі стандартамі, якія можна сабраць разам для стварэння любой колькасці прыкладанняў. Сістэма дызайну - гэта не толькі сукупнасць актываў і кампанентаў, якія вы выкарыстоўваеце для стварэння лічбавага прадукту. Па словах Эмета Коналі, дырэктара па дызайне прадуктаў Intercom, «...большасць сістэм дызайну - гэта на самай справе проста бібліятэкі шаблонаў: вялікая скрынка з дэталяў UI Lego, якія можна сабраць амаль бясконцымі спосабамі. Усе часткі могуць быць аднатыпнымі, але гэта не азначае, што вынік будзе ў сукупнасці. Ваш прадукт - гэта больш, чым проста куча шматразовых элементаў карыстальніцкага інтэрфейсу. Яна мае структуру і сэнс. Гэта не агульная вэб-старонка, гэта ўвасабленне сістэмы паняццяў».

Сістэма дызайну сушы

Асновы
Асновы - гэта кіруючыя прынцыпы лічбавага брэнда, якія вызначаюць тыпаграфію, каляровую палітру, значкі, інтэрвал, цень і інфармацыйную архітэктуру нашай сістэмы дызайну. Сушы, прытрымліваючыся прынцыпаў атамнага дызайну, будуюцца знізу ўверх з выкарыстаннем кампазуемых кампанентаў, упарадкаваных у выглядзе атамаў ➡️ малекул ➡️ арганізмаў.

Атамны дызайн
Atomic Design (як апісана Брэдам Фростам) супастаўляецца з нашай сістэмай.

#Атамы
Найменшыя непадзельныя адзінкі — атамы. У Android (або ў любым мабільным інтэрфейсе) тэкставыя надпісы, кнопкі і трымальнікі малюнкаў з'яўляюцца атамамі.

#малекулы
Выгляды, якія ўтвараюць некалькі атамаў, але па-ранейшаму выглядаюць і паводзяць сябе як адзіная сутнасць для карыстальніка, з'яўляюцца малекуламі. Напрыклад, палі ўводу маюць поле ўводу, поле памылкі і кнопку ачысткі, але разам гэта адзінае цэлае.

#Арганізмы
Складаныя, але шматразовыя кампаненты, якія працуюць разам. Складаецца з некалькіх атамаў і малекул. Прыкладам з'яўляюцца рэйтынгавыя паласы, якія складаюцца з тэгаў, кожны з якіх мае нумар і значок. Тэгі таксама мяняюць колер, калі выбіраюцца розныя рэйтынгі. Кожны тэг паасобку таксама выкарыстоўваецца ў іншых месцах, але як радок рэйтынгу, усё гэта працуе разам, каб стварыць новы сэнс.

Тыпаграфія
Як вы, магчыма, ведаеце, тыпаграфіка - гэта мастацтва аранжыроўкі шрыфтоў, каб зрабіць пісьмовую мову разборлівай, чытэльнай і прывабнай пры адлюстраванні. Размяшчэнне шрыфтоў прадугледжвае выбар шрыфтоў, памераў кропак, даўжыні радкоў, міжрадковых і літарных інтэрвалаў, а таксама наладжванне прасторы паміж парамі літар.

Мы падтрымліваем наступныя варыянты шрыфту -

ExtraLight
Святло
Рэгулярны
Сярэдні
Напаўтлусты
Тоўсты
ExtraBold

Вы можаце выкарыстоўваць любы шрыфт, які мае да 8 вагаў шрыфтоў, і прызначаць іх з гэтых псеўданімаў. У той час як у нас ёсць Metropolis, Okra і Roboto для дэманстрацыі, вы можаце выкарыстоўваць любы шрыфт, які падыходзіць да вашага брэнда.

Колеры
Сушы таксама прадугледжвае набор загадзя вызначаных колераў у сваёй палітры. У надзвычай унікальных выпадках не саромейцеся выкарыстоўваць свае колеры, але ў іншым выпадку мы рэкамендуем выкарыстоўваць колеры з гэтай палітры для ўсіх кампанентаў вашага прадукту.

Сховішча кода