印度外賣平臺Zomato最新推出了全新的sushi設(shè)計(jì)系統(tǒng),這不僅是一套為加速內(nèi)部設(shè)計(jì)開發(fā)的設(shè)計(jì)系統(tǒng),也讓用戶在使用app時(shí)獲得更好的體驗(yàn)。接下來就讓我們一起來看看Zomato是如何設(shè)計(jì)這套系統(tǒng)的,這套系統(tǒng)對公司的發(fā)展有什么意思。
什么是設(shè)計(jì)系統(tǒng)?
設(shè)計(jì)系統(tǒng)是由大量可重用組件組成,并結(jié)合了一定的規(guī)則,可存儲視覺設(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)有功能,但并沒有我們期望的那樣具有豐富的可擴(kuò)展性。然后我們開始研究更靈活,更強(qiáng)大的解決方案。
考慮到Zomato的發(fā)展速度,我們必須保持良好的用戶體驗(yàn)。對于我們發(fā)布的每個(gè)新功能,其目標(biāo)應(yīng)該是能夠利用盡可能多的現(xiàn)有組件,以便我們不會引入任何視覺上的不一致。無論我們是使用像素,代碼還是文字,都有適當(dāng)?shù)目梢詭椭覀兊脑O(shè)計(jì)模塊,它們不僅可以節(jié)省時(shí)間,而且可以保持我們的UI一致,從而創(chuàng)造更好的用戶體驗(yàn)。
使用Sushi設(shè)計(jì)系統(tǒng)后,無需重新思考我們在Zomato上添加的每項(xiàng)新體驗(yàn),又能使設(shè)計(jì)師,開發(fā)人員,產(chǎn)品經(jīng)理以及其他利益相關(guān)者專注于輕松地將想法轉(zhuǎn)換為實(shí)時(shí)產(chǎn)品。
如何設(shè)計(jì)這個(gè)全新的系統(tǒng)?
設(shè)計(jì)原理
在此過程中,我們牢記了一些核心原則–
以用戶為中心——我們希望確保用戶與我們產(chǎn)品之間的每一次互動都是積極的,并能解決問題,通過多個(gè)平臺與我們的品牌或產(chǎn)品建立牢固的聯(lián)系。
包容性——我們的產(chǎn)品為所有人提供服務(wù),從還在上大學(xué)的青少年到對現(xiàn)代技術(shù)不太了解的人們。我們希望設(shè)計(jì)和構(gòu)建我們的平臺,無論能力,年齡和地理位置如何,該平臺都應(yīng)盡可能多的人使用。
簡潔性——我們每次都會通過清晰,專注的體驗(yàn)來帶來愉悅和滿足。通過依靠形式,功能和流程直觀的現(xiàn)有通用設(shè)計(jì)模式,我們確保為所有用戶提供更加用戶友好的界面。
一致性——通過在整個(gè)平臺上對問題應(yīng)用相同的解決方案,我們可以建立熟悉度的用戶界面。
我們遵循了Brad Frost的Atomic Design原子設(shè)計(jì)方法,并將其映射到我們的設(shè)計(jì)系統(tǒng)中。
建立基礎(chǔ)
基礎(chǔ)是數(shù)字品牌準(zhǔn)則,該準(zhǔn)則定義了我們設(shè)計(jì)系統(tǒng)的版式,顏色,圖標(biāo),間距,陰影和信息體系結(jié)構(gòu)。所有基礎(chǔ)都是原子,分為兩個(gè)層次–
準(zhǔn)則提供了哲學(xué)上的連續(xù)性,但沒有提供任何實(shí)際的代碼,例如-我們的文本將如何截?cái)?,滾動行為,間距等,以便設(shè)計(jì)人員在創(chuàng)建新的設(shè)計(jì)模式時(shí)會參考并尊重它。
基礎(chǔ)知識包括版式樣式,顏色,圖標(biāo),圖像等方面的準(zhǔn)則,可幫助制定一致的組件。
基礎(chǔ):版式和色彩系統(tǒng)
基礎(chǔ):圖標(biāo),間距和陰影
“一個(gè)設(shè)計(jì)系統(tǒng)不應(yīng)僅僅是用戶界面組件以及一些設(shè)計(jì)理論的集合?!?/span>
組件庫
組件指的是與眾不同的用戶界面(UI)元素,這些元素在產(chǎn)品的整個(gè)開發(fā)過程中反復(fù)使用-通常是可操作的,有時(shí)只是用來傳達(dá)含義。但是,組成部分可以是分子,也可以是組織,因?yàn)閮烧咧g有很好的區(qū)分。一些示例包括按鈕,輸入,選擇,切換,列表,等級,標(biāo)簽等。
每個(gè)組件均由標(biāo)題,文字,圖像,操作按鈕和一些可選的文本/元素定義。
所有這些組件都存儲在稱為庫的共享存儲庫中,這是構(gòu)建一致的UI并加快應(yīng)用程序開發(fā)的一種好方法。UI的一致性提高了用戶對應(yīng)用程序的熟悉程度,從而在與我們的產(chǎn)品進(jìn)行交互時(shí)將用戶的困惑降至最低。
sushi組件(中級):線框圖
sushi組件(高級)—餐廳卡
模板
在定義了基礎(chǔ)之后,我們收集了所有基本組件,然后將它們用于構(gòu)建更復(fù)雜,可重用和可擴(kuò)展的代碼段,稱為模板。
方案
我們最終將在未來幾個(gè)月中為我們的設(shè)計(jì)人員推出基于我們的設(shè)計(jì)系統(tǒng)的新Zomato App和Zomato Web版本。這是我們新版本的界面-
關(guān)于設(shè)計(jì)系統(tǒng)的工具
我們開始使用Sketch構(gòu)建Sushi UI套件。因?yàn)閺哪菚r(shí)起,每個(gè)人都喜歡處理單個(gè)Sketch文件,并且僅在需要時(shí)借助云,inVision或只是導(dǎo)出它來共享它。我們并沒有高度依賴符號或組件的使用。我們只是根據(jù)需要復(fù)制了元素,并創(chuàng)建了另一個(gè)頁面,而無需使用符號來更新元素。搜索現(xiàn)有組件和模板始終是一項(xiàng)繁瑣的任務(wù)。
在Sketch中創(chuàng)建樣式和組件符號幾乎是一項(xiàng)可能的任務(wù),但是維護(hù)/使用這些符號將使設(shè)計(jì)變得困難。在探索了一些替代方案之后,我們發(fā)現(xiàn)Figma最適合我們的設(shè)計(jì)系統(tǒng)。Figma使用專用的項(xiàng)目面板,使項(xiàng)目易于使用和組織得更好。
英語原文:https://medium.com/zomato-technology/zomatos-new-sushi-design-system-d7f4f98664c5
全站高品質(zhì)素材免費(fèi)下載!