Sushi Design System - UI Kit

Zomato

Энэ аппын тухай

Суши бол Zomato-гийн өөрийн гэсэн дизайны систем бөгөөд цэвэр, энгийн дизайны хэлээр хэрэглэгчийн бат бөх интерфейсийг бий болгоход тусалдаг. Зомато бид үүнийг эхнээс нь босгосон. Энэ нь зөвхөн бидний хувьд дизайны систем биш, үүнээс гадна хэрэглэгчдэдээ шинэ, сайжруулсан туршлага өгөхөд тусалдаг. Суши нь атомын, цэвэр, энгийн дизайны хэлийг дагаж хэрэглэгчийн захиалгат интерфейсийг бий болгоход тусална. Суши нь өөрийн дизайны хэл дээр тулгуурладаг ч Google-ийн Материалын дизайны бүрэлдэхүүн хэсгүүдийг олон салбарт бүрэн ашиглаж, ашигладаг.

Дизайн систем, брэндийн удирдамжийн лавлагааны хувьд үүнийг Zomato дахь бүтээгдэхүүн, инженерчлэл, маркетинг, брэндинг гэх мэт янз бүрийн багууд ашиглаж, төлөөлдөг.

Дизайн систем гэж юу вэ?
Дизайн систем гэдэг нь тодорхой стандартын дагуу дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүдийн цуглуулга бөгөөд тэдгээрийг нэгтгэж, хэдэн ч програм бүтээх боломжтой. Дизайн систем нь зөвхөн дижитал бүтээгдэхүүн бүтээхэд ашигладаг эд хөрөнгө, бүрэлдэхүүн хэсгүүдийн цуглуулга биш юм. Интеркомын бүтээгдэхүүний дизайны захирал Эммет Конноллигийн хэлснээр, "... Дизайн системүүдийн ихэнх нь үнэхээр зүгээр л Хэв маягийн номын сан юм: бараг хязгааргүй аргаар угсарч болох UI Lego хэсгүүдийн том хайрцаг. Бүх хэсгүүд нь нийцтэй байж болох ч энэ нь угсарсан үр дүн гарах болно гэсэн үг биш юм. Таны бүтээгдэхүүн зүгээр л дахин ашиглах боломжтой UI элементүүдийн овоолго биш юм. Энэ нь бүтэц, утга учиртай. Энэ бол ерөнхий вэб хуудас биш, харин үзэл баримтлалын системийн биелэл юм."

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

Суурь
Суурь нь дижитал брэндийн удирдамж бөгөөд манай дизайны системийн хэв загвар, өнгөт палитр, дүрс, зай, сүүдэр, мэдээллийн архитектурыг тодорхойлдог. Суши нь атомын дизайны зарчмуудыг баримталж, атом ➡️ молекул ➡️ организм хэлбэрээр эрэмблэгдсэн нэгдэх бүрэлдэхүүн хэсгүүдийг ашиглан доороос дээшээ бүтээдэг.

Атомын дизайн
Атомын дизайн (Брэд Фрост тайлбарласны дагуу) манай системд зурагдсан.

#Атом
Хамгийн жижиг хуваагдашгүй нэгж бол атомууд юм. Android (эсвэл ямар ч гар утасны UI) дээр текстийн шошго, товчлуурууд болон зураг эзэмшигч нь атомууд юм.

#Молекулууд
Хэд хэдэн атомыг үүсгэсэн боловч хэрэглэгчийн хувьд нэг биет мэт харагдах, биеэ авч явах байдал нь молекулууд юм. Жишээлбэл, оролтын талбарууд нь оруулах талбар, алдааны талбар, тодорхой товчлууртай боловч хамтдаа нэг нэгж юм.

#Организм
Хамтдаа нэгдмэл байдлаар ажилладаг цогц, гэхдээ дахин ашиглах боломжтой бүрэлдэхүүн хэсгүүд. Олон атом, молекулуудаас бүрддэг. Үүний нэг жишээ бол тус бүр нь дугаар болон дүрс бүхий шошгуудаас бүрдэх үнэлгээний самбар юм. Янз бүрийн үнэлгээг сонгох үед шошгоны өнгө мөн өөрчлөгддөг. Шошго бүрийг бусад газарт тусад нь ашигладаг боловч үнэлгээний самбарын хувьд бүгд хамтдаа шинэ утгыг бий болгодог.

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

Бид дараах үсгийн хувилбаруудыг дэмждэг -

Нэмэлт гэрэл
Гэрэл
Тогтмол
Дунд
Хагас Болд
Зоригтой
ExtraBold

Та 8 хүртэлх фонтын жинтэй дурын фонтыг ашиглаж, эдгээр нэрсээс оноож болно. Манайд Метрополис, Окра, Робото загварууд байдаг ч та өөрийн брэндтэй тохирох ямар ч фонтыг ашиглаж болно.

Өнгө
Суши нь мөн өөрийн палитрт урьдчилан тодорхойлсон өнгөний багцыг өгдөг. Хэт өвөрмөц тохиолдлуудад өөрийн өнгийг ашиглах боломжтой, гэхдээ бусад тохиолдолд бид энэ палитр дээрх өнгийг бүтээгдэхүүнийхээ бүх бүрэлдэхүүн хэсгүүдэд ашиглахыг зөвлөж байна.

Кодын агуулах