Sushi Design System - UI Kit

Sushi — это собственная дизайн-система Zomato, которая помогает создавать надежные пользовательские интерфейсы, следуя чистому и простому языку дизайна. Мы в zomato построили это с нуля. Для нас это не просто дизайн-система, но более того, она помогает нам предоставлять нашим пользователям новые и улучшенные возможности. Sushi может помочь вам создавать индивидуальные пользовательские интерфейсы, следуя атомарному, чистому и простому языку дизайна. Хотя Sushi построен на собственном языке дизайна, он полностью охватывает и использует компоненты материального дизайна Google во многих областях.

В качестве системы дизайна и эталона для руководств по бренду она используется и представлена ​​различными командами в Zomato, такими как продукты, разработка, маркетинг и брендинг.

Что такое дизайн-система?

Дизайн-система — это набор повторно используемых компонентов, руководствующихся четкими стандартами, которые можно собрать вместе для создания любого количества приложений. Дизайн-система — это не только набор ресурсов и компонентов, которые вы используете для создания цифрового продукта. По словам Эммета Коннолли, директора по дизайну продуктов в Intercom, «…большинство систем проектирования на самом деле представляют собой просто библиотеки шаблонов: большую коробку с деталями пользовательского интерфейса Lego, которые можно собирать практически бесконечным количеством способов. Все части могут быть последовательными, но это не означает, что собранные результаты будут одинаковыми. Ваш продукт — это больше, чем просто набор повторно используемых элементов пользовательского интерфейса. У него есть структура и смысл. Это не обычная веб-страница, это воплощение системы понятий».

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

Основы

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

Атомарный дизайн

Атомный дизайн (по описанию Брэда Фроста) сопоставлен с нашей системой.

#Атомы

Наименьшие неделимые единицы – это атомы. В Android (или любом мобильном пользовательском интерфейсе) текстовые метки, кнопки и держатели изображений — это атомы.

#Молекулы

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

#Организмы

Сложные, но многоразовые компоненты, которые работают слаженно. Состоит из множества атомов и молекул. В качестве примера можно привести рейтинговые полосы, состоящие из тегов, каждый из которых имеет номер и значок. Теги также меняют цвет при выборе разных рейтингов. Каждый тег по отдельности также используется в других местах, но в качестве рейтинговой шкалы все вместе создает новое значение.

Типографика

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

Мы поддерживаем следующие варианты шрифта:

Сверхлегкий

Свет

Обычный

Середина

Полужирный

Жирный

Очень жирный

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

Цвета

Sushi также предоставляет набор предопределенных цветов в своей палитре. В исключительных случаях вы можете использовать свои собственные цвета, но в остальных случаях мы рекомендуем использовать цвета из этой палитры для всех компонентов вашего продукта.

Репозиторий кода