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

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

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

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

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

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

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

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

設(shè)計(jì)原理

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

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

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

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

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

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

建立基礎(chǔ)

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

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

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

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

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

“一個(gè)設(shè)計(jì)系統(tǒng)不應(yīng)僅僅是用戶界面組件以及一些設(shè)計(jì)理論的集合?！?/span>

組件庫(kù)

組件指的是與眾不同的用戶界面（UI）元素，這些元素在產(chǎn)品的整個(gè)開(kāi)發(fā)過(guò)程中反復(fù)使用-通常是可操作的，有時(shí)只是用來(lái)傳達(dá)含義。但是，組成部分可以是分子，也可以是組織，因?yàn)閮烧咧g有很好的區(qū)分。一些示例包括按鈕，輸入，選擇，切換，列表，等級(jí)，標(biāo)簽等。

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

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

sushi組件（中級(jí)）：線框圖

sushi組件（高級(jí)）—餐廳卡

模板

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

方案

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

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

我們開(kāi)始使用Sketch構(gòu)建Sushi UI套件。因?yàn)閺哪菚r(shí)起，每個(gè)人都喜歡處理單個(gè)Sketch文件，并且僅在需要時(shí)借助云，inVision或只是導(dǎo)出它來(lái)共享它。我們并沒(méi)有高度依賴符號(hào)或組件的使用。我們只是根據(jù)需要復(fù)制了元素，并創(chuàng)建了另一個(gè)頁(yè)面，而無(wú)需使用符號(hào)來(lái)更新元素。搜索現(xiàn)有組件和模板始終是一項(xiàng)繁瑣的任務(wù)。

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

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