印度外賣平臺Zomato最新推出了全新的sushi設(shè)計系統(tǒng)，這不僅是一套為加速內(nèi)部設(shè)計開發(fā)的設(shè)計系統(tǒng)，也讓用戶在使用app時獲得更好的體驗。接下來就讓我們一起來看看Zomato是如何設(shè)計這套系統(tǒng)的，這套系統(tǒng)對公司的發(fā)展有什么意思。

什么是設(shè)計系統(tǒng)？

設(shè)計系統(tǒng)是由大量可重用組件組成，并結(jié)合了一定的規(guī)則，可存儲視覺設(shè)計信息（例如顏色或間距），并使我們能夠快速構(gòu)建一致的應(yīng)用。

為什么要建立Sushi設(shè)計系統(tǒng)？

Zomato的第一個設(shè)計系統(tǒng)創(chuàng)建于2017年。其設(shè)計目的是增強現(xiàn)有功能，但并沒有我們期望的那樣具有豐富的可擴展性。然后我們開始研究更靈活，更強大的解決方案。

考慮到Zomato的發(fā)展速度，我們必須保持良好的用戶體驗。對于我們發(fā)布的每個新功能，其目標應(yīng)該是能夠利用盡可能多的現(xiàn)有組件，以便我們不會引入任何視覺上的不一致。無論我們是使用像素，代碼還是文字，都有適當?shù)目梢詭椭覀兊脑O(shè)計模塊，它們不僅可以節(jié)省時間，而且可以保持我們的UI一致，從而創(chuàng)造更好的用戶體驗。

使用Sushi設(shè)計系統(tǒng)后，無需重新思考我們在Zomato上添加的每項新體驗，又能使設(shè)計師，開發(fā)人員，產(chǎn)品經(jīng)理以及其他利益相關(guān)者專注于輕松地將想法轉(zhuǎn)換為實時產(chǎn)品。

如何設(shè)計這個全新的系統(tǒng)？

設(shè)計原理

在此過程中，我們牢記了一些核心原則–

• 以用戶為中心——我們希望確保用戶與我們產(chǎn)品之間的每一次互動都是積極的，并能解決問題，通過多個平臺與我們的品牌或產(chǎn)品建立牢固的聯(lián)系。

• 包容性——我們的產(chǎn)品為所有人提供服務(wù)，從還在上大學的青少年到對現(xiàn)代技術(shù)不太了解的人們。我們希望設(shè)計和構(gòu)建我們的平臺，無論能力，年齡和地理位置如何，該平臺都應(yīng)盡可能多的人使用。

• 簡潔性——我們每次都會通過清晰，專注的體驗來帶來愉悅和滿足。通過依靠形式，功能和流程直觀的現(xiàn)有通用設(shè)計模式，我們確保為所有用戶提供更加用戶友好的界面。

• 一致性——通過在整個平臺上對問題應(yīng)用相同的解決方案，我們可以建立熟悉度的用戶界面。

我們遵循了Brad Frost的Atomic Design原子設(shè)計方法，并將其映射到我們的設(shè)計系統(tǒng)中。

建立基礎(chǔ)

基礎(chǔ)是數(shù)字品牌準則，該準則定義了我們設(shè)計系統(tǒng)的版式，顏色，圖標，間距，陰影和信息體系結(jié)構(gòu)。所有基礎(chǔ)都是原子，分為兩個層次–

準則提供了哲學上的連續(xù)性，但沒有提供任何實際的代碼，例如-我們的文本將如何截斷，滾動行為，間距等，以便設(shè)計人員在創(chuàng)建新的設(shè)計模式時會參考并尊重它。

基礎(chǔ)知識包括版式樣式，顏色，圖標，圖像等方面的準則，可幫助制定一致的組件。

基礎(chǔ)：版式和色彩系統(tǒng)

基礎(chǔ)：圖標，間距和陰影

“一個設(shè)計系統(tǒng)不應(yīng)僅僅是用戶界面組件以及一些設(shè)計理論的集合。”

組件庫

組件指的是與眾不同的用戶界面（UI）元素，這些元素在產(chǎn)品的整個開發(fā)過程中反復使用-通常是可操作的，有時只是用來傳達含義。但是，組成部分可以是分子，也可以是組織，因為兩者之間有很好的區(qū)分。一些示例包括按鈕，輸入，選擇，切換，列表，等級，標簽等。

每個組件均由標題，文字，圖像，操作按鈕和一些可選的文本/元素定義。

所有這些組件都存儲在稱為庫的共享存儲庫中，這是構(gòu)建一致的UI并加快應(yīng)用程序開發(fā)的一種好方法。UI的一致性提高了用戶對應(yīng)用程序的熟悉程度，從而在與我們的產(chǎn)品進行交互時將用戶的困惑降至最低。

sushi組件（中級）：線框圖

sushi組件（高級）—餐廳卡

模板

在定義了基礎(chǔ)之后，我們收集了所有基本組件，然后將它們用于構(gòu)建更復雜，可重用和可擴展的代碼段，稱為模板。

方案

我們最終將在未來幾個月中為我們的設(shè)計人員推出基于我們的設(shè)計系統(tǒng)的新Zomato App和Zomato Web版本。這是我們新版本的界面-

關(guān)于設(shè)計系統(tǒng)的工具

我們開始使用Sketch構(gòu)建Sushi UI套件。因為從那時起，每個人都喜歡處理單個Sketch文件，并且僅在需要時借助云，inVision或只是導出它來共享它。我們并沒有高度依賴符號或組件的使用。我們只是根據(jù)需要復制了元素，并創(chuàng)建了另一個頁面，而無需使用符號來更新元素。搜索現(xiàn)有組件和模板始終是一項繁瑣的任務(wù)。

在Sketch中創(chuàng)建樣式和組件符號幾乎是一項可能的任務(wù)，但是維護/使用這些符號將使設(shè)計變得困難。在探索了一些替代方案之后，我們發(fā)現(xiàn)Figma最適合我們的設(shè)計系統(tǒng)。Figma使用專用的項目面板，使項目易于使用和組織得更好。

英語原文：https://medium.com/zomato-technology/zomatos-new-sushi-design-system-d7f4f98664c5