Sushi Design System - UI Kit

Pyszny zestaw interfejsu użytkownika do tworzenia aplikacji na Androida. Wykonane z ❤ przez Zomato

Sushi to własny system projektowania Zomato, który pomaga budować solidne interfejsy użytkownika w czystym i prostym języku projektowania. W zomato zbudowaliśmy to od podstaw. Dla nas to nie tylko system projektowania, ale co więcej, pomaga nam zapewnić nowe i ulepszone wrażenia naszym użytkownikom. Sushi może pomóc w tworzeniu spersonalizowanych interfejsów użytkownika w atomowym, przejrzystym i prostym języku projektowania. Chociaż Sushi opiera się na własnym języku projektowania, w pełni obejmuje i wykorzystuje wewnętrznie komponenty Google Material Design w wielu obszarach.

Jako system projektowania i punkt odniesienia dla wytycznych marki, jest wykorzystywany i reprezentowany przez różne zespoły w Zomato, takie jak - Produkt, Inżynieria, Marketing i Branding.

Co to jest system projektowania?

System projektowy to zbiór komponentów wielokrotnego użytku, kierujących się jasnymi standardami, które można ze sobą łączyć w celu zbudowania dowolnej liczby aplikacji. System projektowania to nie tylko zbiór zasobów i komponentów, których używasz do tworzenia produktu cyfrowego. Według Emmeta Connolly'ego, dyrektora ds. projektowania produktów w Intercom, „… większość systemów projektowania to tak naprawdę tylko biblioteki wzorów: duże pudełko elementów Lego interfejsu użytkownika, które można składać w niemal nieskończoność. Wszystkie elementy mogą być spójne, ale to nie znaczy, że zebrane wyniki będą takie same. Twój produkt to coś więcej niż tylko stos elementów interfejsu użytkownika wielokrotnego użytku. Ma strukturę i znaczenie. To nie jest zwykła strona internetowa, to ucieleśnienie systemu pojęć”.

System projektowania sushi

Fundamenty

Fundamenty to cyfrowe wytyczne marki, które definiują typografię, palety kolorów, ikony, odstępy, cienie i architekturę informacji naszego systemu projektowania. Sushi, zgodnie z zasadami projektowania atomowego, jest budowane oddolnie przy użyciu komponujących się składników, uporządkowanych jako atomy molekuły organizmy.

Projekt atomowy

Atomic Design (zgodnie z opisem Brada Frosta) zmapowany do naszego systemu.

#Atomów

Najmniejszymi niepodzielnymi jednostkami są atomy. W systemie Android (lub dowolnym mobilnym interfejsie użytkownika) etykiety tekstowe, przyciski i uchwyty obrazów są atomami.

#cząsteczki

Widoki, w których tworzy się wiele atomów, ale nadal wyglądają i zachowują się jak jedna jednostka, są dla użytkownika cząsteczkami. Na przykład pola wejściowe mają pole wprowadzania, pole błędu i przycisk wyczyść, ale razem stanowią jedną jednostkę.

#Organizmy

Złożone, ale wielokrotnego użytku komponenty, które współpracują ze sobą w spójny sposób. Składa się z wielu atomów i cząsteczek. Przykładem są paski oceny, które składają się z tagów, z których każdy ma numer i ikonę. Tagi również zmieniają kolor, gdy wybierane są różne oceny. Każdy tag z osobna jest również używany w innych miejscach, ale jako pasek oceny, wszystko razem tworzy nowe znaczenie.

Typografia

Typografia, jak być może wiesz, to sztuka układania czcionek, aby język pisany był czytelny, czytelny i atrakcyjny podczas wyświetlania. Układ pisma obejmuje dobór krojów pisma, wielkości punktów, długości linii, odstępów między wierszami i odstępów między literami oraz dostosowanie odstępów między parami liter.

Obsługujemy następujące odmiany kroju pisma -

Dodatkowe światło

Lekki

Regularny

Średni

Półpogrubienie

Pogrubiony

ExtraBold

Możesz użyć dowolnej czcionki, która ma do 8 grubości czcionek i przypisać je z tych aliasów. Chociaż mamy Metropolis, Okrę i Roboto w wersji demo, możesz użyć dowolnej czcionki pasującej do Twojej marki.

Kolory

Sushi oferuje również zestaw predefiniowanych kolorów w swojej palecie. W wyjątkowo wyjątkowych przypadkach możesz używać własnych kolorów, ale poza tym zalecamy używanie kolorów z tej palety dla wszystkich komponentów Twojego produktu.

Repozytorium kodu