Sushi Design System - UI Kit

Zomato

Bu tətbiq haqqında

Sushi, təmiz və sadə dizayn dilindən sonra möhkəm istifadəçi interfeysləri yaratmağa kömək edən Zomato-nun öz dizayn sistemidir. Biz zomatoda bunu sıfırdan qurmuşuq. Bu, təkcə bizim üçün dizayn sistemi deyil, həm də istifadəçilərimizə yeni və təkmilləşdirilmiş təcrübə təqdim etməyimizə kömək edir. Sushi, atomik, təmiz və sadə dizayn dilindən sonra sifarişli istifadəçi interfeysləri yaratmağa kömək edə bilər. Sushi öz dizayn dili üzərində qurulsa da, bir çox sahələrdə Google-un Material Design komponentlərini tam əhatə edir və istifadə edir.

Dizayn sistemi və brend təlimatları üçün istinad kimi o, Zomato daxilində müxtəlif komandalar tərəfindən istifadə olunur və təmsil olunur - Məhsul, Mühəndislik, Marketinq və Brendinq.

Dizayn sistemi nədir?
Dizayn sistemi aydın standartlara əsaslanan, istənilən sayda tətbiq yaratmaq üçün bir araya toplana bilən təkrar istifadə edilə bilən komponentlər toplusudur. Dizayn sistemi təkcə rəqəmsal məhsul yaratmaq üçün istifadə etdiyiniz aktivlərin və komponentlərin toplusu deyil. Intercom-un məhsul dizaynı üzrə direktoru Emmet Connolly-ə görə, “… Əksər Dizayn Sistemləri həqiqətən sadəcə Nümunə Kitabxanalarıdır: sonsuza yaxın şəkildə yığıla bilən UI Lego hissələrinin böyük bir qutusu. Bütün parçalar ardıcıl ola bilər, lakin bu, yığılmış nəticələrin olacağı demək deyil. Məhsulunuz təkrar istifadə edilə bilən UI elementləri yığınından daha çox şeydir. Onun strukturu və mənası var. Bu, ümumi veb səhifə deyil, anlayışlar sisteminin təcəssümüdür."

Sushi Dizayn Sistemi

Əsaslar
Vəqflər dizayn sistemimizin tipoqrafiyasını, rəng palitrasını, nişanlarını, məsafəsini, kölgəsini və məlumat arxitekturasını müəyyən edən rəqəmsal brend qaydalarıdır. Suşi, atom dizaynı prinsiplərinə uyğun olaraq, atomlar ➡️ molekullar ➡️ orqanizmlər kimi sıralanan birləşə bilən komponentlərdən istifadə etməklə aşağıdan yuxarıya qurulur.

Atom Dizaynı
Atom Dizaynı (Brad Frost tərəfindən təsvir edildiyi kimi) sistemimizə uyğunlaşdırılıb.

#Atomlar
Ən kiçik bölünməz vahidlər atomlardır. Android-də (və ya hər hansı mobil UI) mətn etiketləri, düymələr və şəkil sahibləri atomlardır.

#Molekullar
Çoxlu atomların əmələ gəlməsini əhatə edən, lakin istifadəçi üçün vahid bir varlıq kimi görünən və davranan görünüşlər molekullardır. Məsələn, giriş sahələrində giriş qutusu, xəta sahəsi və aydın düymə var, lakin birlikdə o, tək bir varlıqdır.

#Orqanizmlər
Birgə bir şəkildə işləyən mürəkkəb, lakin təkrar istifadə edilə bilən komponentlər. Çoxlu atom və molekullardan ibarətdir. Hər birində nömrə və ikona olan teqlərdən ibarət olan reytinq çubuqları nümunədir. Müxtəlif reytinqlər seçildikdə etiketlər də rəngini dəyişir. Hər bir etiket ayrı-ayrılıqda başqa yerlərdə də istifadə olunur, lakin reytinq çubuğu kimi hamısı birlikdə yeni məna yaratmaq üçün işləyir.

Tipoqrafiya
Mətbəə, bildiyiniz kimi, yazı dilini oxunaqlı, oxunaqlı və nümayiş olunduqda cəlbedici etmək üçün növü təşkil etmək sənətidir. Növün düzülüşü şriftlərin, nöqtə ölçülərinin, sətir uzunluqlarının, sətir aralığının və hərf aralığının seçilməsini və hərf cütləri arasındakı boşluğun tənzimlənməsini əhatə edir.

Biz aşağıdakı şrift varyasyonlarını dəstəkləyirik -

Əlavə İşıq
İşıq
Daimi
Orta
Yarı Qalın
Qalın
ExtraBold

Siz 8-ə qədər şrift çəkisi olan istənilən Şriftdən istifadə edə və onları bu ləqəblərdən təyin edə bilərsiniz. Demo üçün Metropolis, Okra və Roboto olsa da, siz brendinizə uyğun istənilən şriftdən istifadə edə bilərsiniz.

Rənglər
Sushi də öz palitrasında əvvəlcədən təyin edilmiş rənglər dəstini təqdim edir. Son dərəcə unikal hallar üçün öz rənglərinizdən istifadə etməkdən çəkinməyin, əks halda məhsulunuzun bütün komponentləri üçün bu palitradakı rənglərdən istifadə etməyi tövsiyə edirik.

Kod anbarı