Sushi Design System - UI Kit

Zomato

Περιγραφή εφαρμογής

Το Sushi είναι το δικό του σύστημα σχεδίασης της Zomato, το οποίο βοηθά στη δημιουργία ισχυρών διεπαφών χρήστη ακολουθώντας μια καθαρή και απλή γλώσσα σχεδιασμού. Εμείς στο zomato, το έχουμε φτιάξει από την αρχή. Δεν είναι απλώς ένα σύστημα σχεδιασμού για εμάς, αλλά περισσότερο από αυτό μας βοηθά να παρέχουμε μια νέα και βελτιωμένη εμπειρία στους χρήστες μας. Το σούσι μπορεί να σας βοηθήσει να δημιουργήσετε προσαρμοσμένες διεπαφές χρήστη ακολουθώντας μια ατομική, καθαρή και απλή γλώσσα σχεδιασμού. Ενώ το Sushi βασίζεται στη δική του γλώσσα σχεδιασμού, αγκαλιάζει πλήρως και χρησιμοποιεί εσωτερικά τα στοιχεία Σχεδιασμού Υλικού της Google σε πολλούς τομείς.

Ως σύστημα σχεδιασμού και αναφορά για τις κατευθυντήριες γραμμές της επωνυμίας, χρησιμοποιείται και αντιπροσωπεύεται από διάφορες ομάδες εντός της Zomato, όπως - Προϊόν, Μηχανική, Μάρκετινγκ και Επωνυμία.

Τι είναι ένα σύστημα σχεδιασμού;
Ένα σύστημα σχεδιασμού είναι μια συλλογή επαναχρησιμοποιήσιμων εξαρτημάτων, καθοδηγούμενα από σαφή πρότυπα, τα οποία μπορούν να συναρμολογηθούν μαζί για την κατασκευή οποιουδήποτε αριθμού εφαρμογών. Ένα σύστημα σχεδίασης δεν είναι μόνο μια συλλογή των στοιχείων και των στοιχείων που χρησιμοποιείτε για την κατασκευή ενός ψηφιακού προϊόντος. Σύμφωνα με τον Emmet Connolly, διευθυντή σχεδιασμού προϊόντων στην Intercom, «… τα περισσότερα Συστήματα Σχεδίασης είναι στην πραγματικότητα απλώς Βιβλιοθήκες μοτίβων: ένα μεγάλο κουτί με κομμάτια Lego UI που μπορούν να συναρμολογηθούν με σχεδόν άπειρους τρόπους. Όλα τα κομμάτια μπορεί να είναι συνεπή, αλλά αυτό δεν σημαίνει ότι τα συγκεντρωμένα αποτελέσματα θα είναι. Το προϊόν σας είναι κάτι περισσότερο από ένα σωρό επαναχρησιμοποιήσιμων στοιχείων διεπαφής χρήστη. Έχει δομή και νόημα. Δεν είναι μια γενική ιστοσελίδα, είναι η ενσάρκωση ενός συστήματος εννοιών».

Σύστημα σχεδίασης σούσι

Ιδρύματα
Τα θεμέλια είναι κατευθυντήριες γραμμές ψηφιακής επωνυμίας, οι οποίες ορίζουν την τυπογραφία, τις χρωματικές παλέτες, τα εικονίδια, τα κενά, την αρχιτεκτονική σκιών και πληροφοριών του σχεδιαστικού μας συστήματος. Το σούσι, ακολουθώντας τις αρχές του ατομικού σχεδιασμού, κατασκευάζεται από κάτω προς τα πάνω χρησιμοποιώντας σύνθετα συστατικά, ταξινομημένα ως άτομα ➡️ μόρια ➡️ οργανισμούς.

Atomic Design
Το Atomic Design (όπως περιγράφεται από τον Brad Frost) χαρτογραφήθηκε στο σύστημά μας.

#Atoms
Οι μικρότερες αδιαίρετες μονάδες είναι τα άτομα. Στο Android (ή σε οποιοδήποτε διεπαφή χρήστη για κινητά) οι ετικέτες κειμένου, τα κουμπιά και οι θήκες εικόνων είναι άτομα.

#Molecules
Οι προβολές που περιλαμβάνουν πολλά άτομα για να σχηματιστούν, αλλά εξακολουθούν να φαίνονται και να συμπεριφέρονται σαν μια ενιαία οντότητα στον χρήστη είναι μόρια. Για παράδειγμα, τα πεδία εισαγωγής έχουν το πλαίσιο εισαγωγής, το πεδίο σφάλματος και ένα κουμπί διαγραφής, αλλά μαζί είναι μια ενιαία οντότητα.

#Οργανισμοί
Πολύπλοκα, αλλά επαναχρησιμοποιήσιμα εξαρτήματα, που συνεργάζονται με συνεκτικό τρόπο. Αποτελείται από πολλαπλά άτομα και μόρια. Ένα χαρακτηριστικό παράδειγμα είναι οι γραμμές αξιολόγησης, οι οποίες αποτελούνται από ετικέτες, καθεμία από τις οποίες έχει έναν αριθμό και ένα εικονίδιο. Οι ετικέτες αλλάζουν επίσης χρώμα, όταν επιλέγονται διαφορετικές βαθμολογίες. Κάθε ετικέτα ξεχωριστά χρησιμοποιείται επίσης σε άλλα μέρη, αλλά ως γραμμή αξιολόγησης, όλα λειτουργούν μαζί για να δημιουργήσουν νέο νόημα.

Τυπογραφία
Η τυπογραφία, όπως ίσως γνωρίζετε, είναι η τέχνη της διευθέτησης τύπων για να κάνει τη γραπτή γλώσσα ευανάγνωστη, ευανάγνωστη και ελκυστική όταν εμφανίζεται. Η διάταξη του τύπου περιλαμβάνει την επιλογή γραμματοσειρών, μεγεθών σημείων, μήκους γραμμών, απόστασης γραμμών και διαστήματος γραμμάτων και προσαρμογής του διαστήματος μεταξύ των ζευγών γραμμάτων.

Υποστηρίζουμε τις ακόλουθες παραλλαγές γραμματοσειράς -

Extralight
Φως
Τακτικός
Μεσαίο
Ημίτολμη
Τολμηρός
Extra Bold

Μπορείτε να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά που έχει έως και 8 βάρη γραμματοσειρών και να τα εκχωρήσετε από αυτά τα ψευδώνυμα. Ενώ έχουμε το Metropolis, το Okra και το Roboto για επίδειξη, μπορείτε να χρησιμοποιήσετε οποιαδήποτε γραμματοσειρά ταιριάζει με την επωνυμία σας.

Χρώματα
Το Sushi παρέχει επίσης ένα σύνολο προκαθορισμένων χρωμάτων στην παλέτα του. Για εξαιρετικά μοναδικές περιπτώσεις, μη διστάσετε να χρησιμοποιήσετε τα δικά σας χρώματα, αλλά διαφορετικά, σας συνιστούμε να χρησιμοποιείτε χρώματα από αυτήν την παλέτα για όλα τα εξαρτήματα του προϊόντος σας.

Αποθετήριο κώδικα