Sushi Design System - UI Kit

Zomato

ამ აპის შესახებ

Sushi არის Zomato-ს საკუთარი დიზაინის სისტემა, რომელიც ეხმარება შექმნას ძლიერი მომხმარებლის ინტერფეისი სუფთა და მარტივი დიზაინის ენის მიხედვით. ჩვენ ზომატოში ეს ავაშენეთ თავიდანვე. ეს არ არის მხოლოდ დიზაინის სისტემა ჩვენთვის, არამედ ის გვეხმარება ახალი და გაუმჯობესებული გამოცდილების მიწოდებაში ჩვენი მომხმარებლებისთვის. სუში დაგეხმარებათ შექმნათ შეკვეთილი მომხმარებლის ინტერფეისი ატომური, სუფთა და მარტივი დიზაინის ენის მიხედვით. მიუხედავად იმისა, რომ სუში ეფუძნება საკუთარი დიზაინის ენას, ის სრულად მოიცავს და იყენებს Google-ის Material Design კომპონენტებს შიდა მრავალ სფეროში.

როგორც დიზაინის სისტემა და მითითება ბრენდის გაიდლაინებისთვის, იგი გამოიყენება და წარმოდგენილია Zomato-ს სხვადასხვა გუნდების მიერ, როგორიცაა - პროდუქტი, ინჟინერია, მარკეტინგი და ბრენდინგი.

რა არის დიზაინის სისტემა?
დიზაინის სისტემა არის მრავალჯერადი გამოყენების კომპონენტების კოლექცია, რომელიც ხელმძღვანელობს მკაფიო სტანდარტებით, რომლებიც შეიძლება შეიკრიბონ ერთად ნებისმიერი რაოდენობის აპლიკაციის შესაქმნელად. დიზაინის სისტემა არ არის მხოლოდ იმ აქტივებისა და კომპონენტების კოლექცია, რომელსაც იყენებთ ციფრული პროდუქტის შესაქმნელად. Intercom-ის პროდუქტის დიზაინის დირექტორის, ემეტ კონოლის თქმით, „... დიზაინის სისტემების უმეტესობა მართლაც მხოლოდ ნიმუშის ბიბლიოთეკებია: UI Lego ნაწილების დიდი ყუთი, რომელიც შეიძლება შეიკრიბოს თითქმის უსასრულო გზებით. ყველა ნაწილი შეიძლება იყოს თანმიმდევრული, მაგრამ ეს არ ნიშნავს რომ აწყობილი შედეგები იქნება. თქვენი პროდუქტი უფრო მეტია, ვიდრე უბრალოდ ხელახლა გამოყენებადი UI ელემენტების გროვა. მას აქვს სტრუქტურა და მნიშვნელობა. ეს არ არის ზოგადი ვებ გვერდი, ეს არის კონცეფციების სისტემის განსახიერება. ”

სუშის დიზაინის სისტემა

ფონდები
ფონდები არის ციფრული ბრენდის გაიდლაინები, რომლებიც განსაზღვრავს ჩვენი დიზაინის სისტემის ტიპოგრაფიას, ფერთა პალიტრებს, ხატებს, ინტერვალს, ჩრდილებს და საინფორმაციო არქიტექტურას. სუში, ატომური დიზაინის პრინციპების დაცვით, აგებულია ქვემოდან ზევით კომპოზირებადი კომპონენტების გამოყენებით, რომლებიც დალაგებულია ატომებად ➡️ მოლეკულებად ➡️ ორგანიზმებად.

ატომური დიზაინი
ატომური დიზაინი (როგორც აღწერილია ბრედ ფროსტის მიერ) შედგენილია ჩვენს სისტემაში.

#Atoms
ყველაზე პატარა განუყოფელი ერთეულები ატომებია. Android-ში (ან ნებისმიერ მობილურ ინტერფეისში) ტექსტური ეტიკეტები, ღილაკები და გამოსახულების დამჭერები არის ატომები.

#მოლეკულები
ხედები, რომლებიც მოიცავს რამდენიმე ატომს ფორმირებაში, მაგრამ მაინც გამოიყურებიან და იქცევიან როგორც ერთიანი არსება მომხმარებლისთვის, არის მოლეკულები. მაგალითად, შეყვანის ველებს აქვთ შეყვანის ველი, შეცდომის ველი და გასუფთავების ღილაკი, მაგრამ ერთად ეს არის ერთი ერთეული.

#ორგანიზმები
რთული, მაგრამ მრავალჯერადი გამოყენებადი კომპონენტები, რომლებიც ერთად მუშაობენ. შედგება მრავალი ატომისა და მოლეკულისგან. მაგალითად, არის შეფასების ზოლები, რომელიც შედგება ტეგებისგან, თითოეულს აქვს ნომერი და ხატულა. ტეგები ასევე იცვლებიან ფერს, როდესაც არჩეულია სხვადასხვა შეფასება. თითოეული ტეგი ინდივიდუალურად ასევე გამოიყენება სხვა ადგილებში, მაგრამ როგორც შეფასების ზოლი, ეს ყველაფერი ერთად მუშაობს ახალი მნიშვნელობის შესაქმნელად.

ტიპოგრაფია
ტიპოგრაფია, როგორც მოგეხსენებათ, არის ტიპების მოწყობის ხელოვნება, რათა წერილობითი ენა იყოს იკითხება, წაკითხვადი და მიმზიდველი, როდესაც ნაჩვენებია. ტიპების განლაგება გულისხმობს შრიფტების, წერტილების ზომის, ხაზის სიგრძის, სტრიქონების ინტერვალის და ასოების დაშორების შერჩევას და ასოების წყვილებს შორის სივრცის რეგულირებას.

ჩვენ მხარს ვუჭერთ შრიფტის შემდეგ ვარიაციები -

დამატებითი მსუბუქი
Მსუბუქი
რეგულარული
საშუალო
ნახევრად სქელი
თამამი
ExtraBold

თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი შრიფტი, რომელსაც აქვს 8-მდე შრიფტის წონა და მიაკუთვნოთ ისინი ამ მეტსახელებს. მიუხედავად იმისა, რომ ჩვენ გვაქვს Metropolis, Okra და Roboto დემოსთვის, შეგიძლიათ გამოიყენოთ ნებისმიერი შრიფტი, რომელიც შეესაბამება თქვენს ბრენდს.

ფერები
სუში ასევე შეიცავს წინასწარ განსაზღვრულ ფერთა კომპლექტს თავის პალიტრაში. უკიდურესად უნიკალური შემთხვევებისთვის, მოგერიდებათ გამოიყენოთ თქვენი საკუთარი ფერები, მაგრამ წინააღმდეგ შემთხვევაში, ჩვენ გირჩევთ გამოიყენოთ ფერები ამ პალიტრიდან თქვენი პროდუქტის ყველა კომპონენტისთვის.

კოდების საცავი