Sushi Design System - UI Kit

Zomato

Колдонмо тууралуу

Суши – бул Zomato компаниясынын өзүнүн дизайн системасы, ал таза жана жөнөкөй дизайн тилинен кийин күчтүү колдонуучу интерфейстерин түзүүгө жардам берет. Биз zomato, муну башынан эле курдук. Бул биз үчүн жөн гана дизайн системасы эмес, андан да көбүрөөк колдонуучуларыбызга жаңы жана өркүндөтүлгөн тажрыйбаны берүүгө жардам берет. Суши атомдук, таза жана жөнөкөй дизайн тилинен кийин атайын колдонуучу интерфейстерин түзүүгө жардам берет. Суши өзүнүн дизайн тилине негизделгени менен, Google'дун Материалдык Дизайн компоненттерин көптөгөн аймактарда толугу менен камтыйт жана колдонот.

Дизайн системасы жана бренд көрсөтмөлөрү үчүн шилтеме катары, ал Zomato ичиндеги ар кандай командалар тарабынан колдонулат жана сунушталат, мисалы - Продукт, Инженердик, Маркетинг жана Брендинг.

Дизайн системасы деген эмне?
Дизайн системасы – бул ар кандай сандагы тиркемелерди куруу үчүн чогуу чогултулушу мүмкүн болгон ачык-айкын стандарттардын негизинде көп жолу колдонулуучу компоненттердин жыйындысы. Дизайн системасы - бул санарип продуктуну куруу үчүн колдонгон активдердин жана компоненттердин жыйындысы гана эмес. Интеркомдун продукт дизайны боюнча директору Эммет Конноллинин айтымында, “... Дизайн системаларынын көбү чындыгында жөн гана Pattern Libraries: UI Lego бөлүктөрүнүн чоң кутучасы, аларды дээрлик чексиз жолдор менен чогултууга болот. Бардык бөлүктөр ырааттуу болушу мүмкүн, бирок бул чогулган жыйынтыктар болот дегенди билдирбейт. Сиздин продукт жөн гана көп жолу колдонулуучу UI элементтеринин үймөгү эмес. Анын структурасы жана мааниси бар. Бул жалпы веб-баракча эмес, бул түшүнүктөр системасынын ишке ашырылышы."

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

Фонддор
Фонддор – бул типографияны, түс палитраларын, иконаларды, аралыкты, көлөкөнү жана дизайн системабыздын маалымат архитектурасын аныктаган санариптик бренддин көрсөтмөлөрү. Суши атомдук дизайн принциптерине ылайык, атомдор ➡️ молекулалар ➡️ организмдер катары иреттелген составдык компоненттерди колдонуу менен ылдыйдан өйдө курулат.

Атомдук долбоор
Атомдук дизайн (Бред Фрост сүрөттөгөндөй) биздин системага түшүрүлгөн.

#Атомдор
Эң кичинекей бөлүнгүс бирдиктер атомдор. Androidде (же кандайдыр бир мобилдик UI) текст энбелгилери, баскычтар жана сүрөт ээлери атомдор.

#Молекулалар
Бир нече атомдун пайда болушун камтыган, бирок дагы эле колдонуучу үчүн бир объект сыяктуу көрүнгөн жана өзүн алып жүргөн көрүнүштөр молекулалар. Мисалы, киргизүү талааларында киргизүү кутучасы, ката талаасы жана так баскычы бар, бирок алар чогуу бир объект болуп саналат.

#Организмдер
Татаал, бирок көп жолу колдонула турган компоненттер, алар биригип иштешет. Көптөгөн атомдордон жана молекулалардан турат. Ар биринин номери жана сөлөкөтү бар тегдерден турган рейтинг тилкелери. Ар кандай рейтингдер тандалганда тегдер да түсүн өзгөртөт. Ар бир тег өзүнчө башка жерлерде да колдонулат, бирок рейтинг тилкеси катары, анын баары жаңы маанини түзүү үчүн чогуу иштейт.

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

Биз шрифтин төмөнкү варианттарын колдойбуз -

ExtraLight
Жарык
Регулярдуу
Орто
SemiBold
Bold
ExtraBold

Сиз 8ге чейинки ариптин салмагына ээ болгон каалаган Шрифти колдонуп, аларды ушул лакап аттардан дайындай аласыз. Демо үчүн бизде Metropolis, Okra жана Roboto бар, бирок сиз брендиңизге туура келген ар кандай шрифттерди колдоно аласыз.

Түстөр
Суши ошондой эле анын палитрасында алдын ала аныкталган түстөрдүн топтомун камсыз кылат. Өтө уникалдуу учурларда, өз түстөрүңүздү колдонуудан тартынбаңыз, бирок антпесе, продуктуңуздун бардык компоненттери үчүн бул палитрадагы түстөрдү колдонууну сунуштайбыз.

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