Sushi Design System - UI Kit

Zomato

Всичко за това приложение

Sushi е собствената дизайнерска система на Zomato, която помага за изграждането на стабилни потребителски интерфейси, следвайки изчистен и прост език за дизайн. Ние от zomato изградихме това от самото начало. Това не е просто система за проектиране за нас, но повече от това ни помага да предоставим ново и подобрено изживяване на нашите потребители. Суши може да ви помогне да изградите потребителски интерфейси по поръчка, следвайки ясен, изчистен и прост език на дизайна. Докато Sushi се основава на собствения си език за дизайн, то напълно обхваща и използва вътрешно компонентите на Google Material Design в много области.

Като система за проектиране и справка за насоки за марката, тя се използва и представлява от различни екипи в рамките на Zomato, като продукт, инженеринг, маркетинг и брандинг.

Какво е система за проектиране?
Системата за проектиране е колекция от компоненти за многократна употреба, ръководени от ясни стандарти, които могат да бъдат сглобени заедно, за да изградят произволен брой приложения. Системата за проектиране не е само колекция от активи и компоненти, които използвате за изграждане на дигитален продукт. Според Емет Коноли, директор на продуктовия дизайн в Intercom, „... повечето системи за проектиране са наистина просто библиотеки с шаблони: голяма кутия от UI Lego парчета, които могат да бъдат сглобени по почти безкрайни начини. Всички части може да са последователни, но това не означава, че събраните резултати ще бъдат. Вашият продукт е повече от просто купчина елементи на потребителския интерфейс за многократна употреба. Има структура и смисъл. Това не е обща уеб страница, това е въплъщение на система от концепции."

Система за дизайн на суши

Основи
Основите са насоки за дигитална марка, които дефинират типография, цветови палитри, икони, разстояние, сенки и информационна архитектура на нашата система за проектиране. Сушито, следвайки принципите на атомния дизайн, е изградено отдолу нагоре с помощта на композируеми компоненти, подредени като атоми ➡️ молекули ➡️ организми.

Атомен дизайн
Atomic Design (както е описано от Брад Фрост), съпоставено с нашата система.

#Атоми
Най-малките неделими единици са атомите. В Android (или всеки мобилен потребителски интерфейс) текстовите етикети, бутоните и държачите на изображения са атоми.

#Молекули
Изгледите, които включват множество атоми за образуване, но все пак изглеждат и се държат като едно цяло за потребителя, са молекули. Например полетата за въвеждане имат полето за въвеждане, полето за грешка и бутон за изчистване, но заедно са едно цяло.

#Организми
Сложни, но за многократна употреба компоненти, които работят по сплотен начин заедно. Състои се от множество атоми и молекули. Показателен пример са ленти за оценка, които се състоят от тагове, всеки от които има число и икона. Етикетите също променят цвета си, когато са избрани различни оценки. Всеки етикет поотделно се използва и на други места, но като лента за оценка, всичко работи заедно, за да създаде ново значение.

Типография
Типографията, както може би знаете, е изкуството да подреждате шрифта, за да направите писмения език четлив, четим и привлекателен, когато се показва. Подреждането на шрифта включва избор на шрифтове, размери на точки, дължини на редове, междуредово и буквено разстояние и регулиране на разстоянието между двойки букви.

Поддържаме следните варианти на шрифта -

ExtraLight
Светлина
Редовен
Среден
Полудебели
Удебелен
ExtraBold

Можете да използвате всеки шрифт, който има до 8 тегла на шрифта и да ги присвоите от тези псевдоними. Докато имаме Metropolis, Okra и Roboto за демонстрация, можете да използвате всеки шрифт, който върви с вашата марка.

Цветове
Суши също предоставя набор от предварително определени цветове в своята палитра. За изключително уникални случаи, не се колебайте да използвате свои собствени цветове, но в противен случай препоръчваме да използвате цветове от тази палитра за всички компоненти на вашия продукт.

Хранилище на кодове