Sushi Design System - UI Kit

Zomato

關於這個應用程式

Sushi 是 Zomato 自己的設計系統，它有助於按照簡潔明了的設計語言構建強大的用戶界面。我們在 zomato，從頭開始構建了這個。它不僅是我們的設計系統，而且還幫助我們為用戶提供全新的增強體驗。 Sushi 可以幫助您按照原子、乾淨和簡單的設計語言構建定制的用戶界面。雖然 Sushi 建立在自己的設計語言之上，但它在許多領域內部都完全接受並使用了 Google 的 Material Design 組件。

作為設計系統和品牌指南的參考，它被 Zomato 內部的各個團隊使用和代表，例如產品、工程、營銷和品牌。

什麼是設計系統？
設計系統是可重用組件的集合，由明確的標準指導，可以組裝在一起以構建任意數量的應用程序。設計系統不僅僅是您用於構建數字產品的資產和組件的集合。根據 Intercom 產品設計總監 Emmet Connolly 的說法，“……大多數設計系統實際上只是模式庫：一大盒 UI 樂高積木，可以以近乎無限的方式組裝。所有的部分可能都是一致的，但這並不意味著組裝的結果會是一致的。您的產品不僅僅是一堆可重用的 UI 元素。它有結構和意義。它不是一個通用的網頁，它是一個概念系統的體現。”

壽司設計系統

基金會
基礎是數字品牌指南，它定義了我們設計系統的排版、調色板、圖標、間距、陰影和信息架構。壽司遵循原子設計原則，使用可組合組件自下而上構建，按原子➡️分子➡️有機體排序。

原子設計
原子設計（如 Brad Frost 所述）映射到我們的系統。

#原子
最小的不可分割單位是原子。在 Android（或任何移動 UI）中，文本標籤、按鈕和圖像持有者是原子。

#分子
涉及多個原子形成的視圖，但在用戶看來和行為仍然像單個實體是分子。例如，輸入字段有輸入框、錯誤字段和清除按鈕，但它們合在一起就是一個實體。

#有機體
複雜但可重用的組件，它們以一種內聚的方式一起工作。由多個原子和分子組成。一個典型的例子是評分欄，它由標籤組成，每個標籤都有一個數字和一個圖標。當選擇不同的評級時，標籤也會改變顏色。每個標籤在其他地方也單獨使用，但作為評級欄，它們共同創造新的意義。

排版
您可能知道，排版是一種排列字體的藝術，以使書面語言在顯示時清晰易讀和吸引人。字體排列包括字體、磅值、行長、行距和字母間距的選擇，以及調整字母對之間的間距。

我們支持以下字體變體 -

超輕
光
常規的
中等的
半粗體
大膽的
超粗體

您可以使用最多具有 8 個字體粗細的任何字體，並從這些別名中分配它們。雖然我們有 Metropolis、Okra 和 Roboto 用於演示，但您可以使用與您的品牌相匹配的任何字體。

顏色
Sushi 還在其調色板中提供了一組預定義的顏色。對於極其獨特的情況，請隨意使用您自己的顏色，但除此之外，我們建議您將此調色板中的顏色用於您產品的所有組件。

代碼倉庫