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

為什么要使用設(shè)計(jì)系統(tǒng)新翎？

如何建立設(shè)計(jì)體統(tǒng)程帕？

設(shè)計(jì)系統(tǒng)有沒有弊端住练？

有哪些相關(guān)的資源？

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

設(shè)計(jì)系統(tǒng)將產(chǎn)品團(tuán)隊(duì)圍繞著一種共同的視覺語(yǔ)言讲逛。它減少了設(shè)計(jì)負(fù)擔(dān)，加速了設(shè)計(jì)過(guò)程岭埠，其中包括與開發(fā)人員的協(xié)作溝通盏混，并在協(xié)同工作的團(tuán)隊(duì)之間架起了橋梁，將產(chǎn)品變?yōu)楝F(xiàn)實(shí)惜论。1968年许赃，在NATO軟件工程會(huì)議上，Douglas McIlroy提出了基于組件的開發(fā)作為解決這一兩難問(wèn)題的可能方案馆类⊥佳妫基于組件的開發(fā)提供了一種通過(guò)使代碼可重用來(lái)加速編程潛力的方法，從而使其更高效蹦掐，更容易擴(kuò)展技羔。這降低了工作量并提高了軟件開發(fā)的速度，使軟件能夠更好地利用現(xiàn)代計(jì)算機(jī)的強(qiáng)大功能卧抗。日常UI審核工作中藤滥，你會(huì)發(fā)現(xiàn)使用了幾十種色調(diào)不一致或形狀不同的按鈕排列嗎？在這個(gè)時(shí)應(yīng)該就會(huì)開始意識(shí)到設(shè)計(jì)的不一致性社裆，不完整性和難以維護(hù)性拙绊。它有很多名稱，也可以稱之為設(shè)計(jì)語(yǔ)言泳秀，其他標(biāo)題包括：：模塊化标沪、模塊化設(shè)計(jì)、組件設(shè)計(jì)嗜傅、設(shè)計(jì)語(yǔ)言金句、用戶界面庫(kù)。

Ella

收集了簡(jiǎn)單UI元素的許多排列吕嘀，來(lái)說(shuō)明設(shè)計(jì)債務(wù)有多深违寞。

為什么要使用設(shè)計(jì)系統(tǒng)？

1.規(guī)模—您是否正在設(shè)計(jì)具有超過(guò)300個(gè)屏幕的產(chǎn)品（或多個(gè)產(chǎn)品）偶房？您的產(chǎn)品會(huì)顯著增長(zhǎng)嗎趁曼？

2.一致性—您希望您的產(chǎn)品具有一致的品牌，外觀和體驗(yàn)嗎棕洋？您的產(chǎn)品目前有20種不同的按鈕樣式嗎挡闰？

3.效率—您是否希望您的可視化設(shè)計(jì)人員，用戶體驗(yàn)設(shè)計(jì)人員和前端開發(fā)人員更快地工作并節(jié)省時(shí)間？

4.團(tuán)隊(duì)設(shè)計(jì)—您是否有項(xiàng)目設(shè)計(jì)師或許多設(shè)計(jì)師同時(shí)在同一個(gè)項(xiàng)目上進(jìn)行大量交接摄悯？

如果對(duì)上述問(wèn)題之一回答“是赞季！”，那么設(shè)計(jì)系統(tǒng)適合我們射众。大規(guī)模工作碟摆，提高一致性和效率是創(chuàng)建和使用設(shè)計(jì)系統(tǒng)的最大好處晃财。

設(shè)計(jì)系統(tǒng)的價(jià)值：

規(guī)模設(shè)計(jì)：隨著團(tuán)隊(duì)的發(fā)展叨橱，設(shè)計(jì)師通常會(huì)專注于搜索和發(fā)現(xiàn)帳戶管理等應(yīng)用程序，這可能會(huì)導(dǎo)致一種支離破碎的視覺語(yǔ)言断盛，由于沒有通用的設(shè)計(jì)語(yǔ)言來(lái)統(tǒng)一產(chǎn)品罗洗，用戶體驗(yàn)也開始崩潰。當(dāng)缺乏設(shè)計(jì)慣例時(shí)钢猛，設(shè)計(jì)批評(píng)變得無(wú)效伙菜。要在團(tuán)隊(duì)中建立一致，必須有一個(gè)共享的真實(shí)來(lái)源—一個(gè)參考官方模式和風(fēng)格的地方命迈。

管理你的債務(wù)：隨著應(yīng)用程序及其團(tuán)隊(duì)的老化贩绕，他們會(huì)構(gòu)建債務(wù)。不是金融債務(wù)壶愤，而是技術(shù)和設(shè)計(jì)債務(wù)淑倾。設(shè)計(jì)債務(wù)由過(guò)多的不可重用和不一致的風(fēng)格和慣例組成，隨著時(shí)間的推移征椒，這種債務(wù)的積累成為減緩增長(zhǎng)的重要因素娇哆。但是，使用設(shè)計(jì)系統(tǒng)可以通過(guò)降低設(shè)計(jì)和代碼開銷來(lái)保持預(yù)算勃救，同時(shí)仍然允許您擴(kuò)展和改進(jìn)應(yīng)用程序碍讨。

設(shè)計(jì)一致：標(biāo)準(zhǔn)化組件使用一致且重復(fù)地創(chuàng)建更可預(yù)測(cè)且易于理解的應(yīng)用程序。標(biāo)準(zhǔn)化組件還使設(shè)計(jì)人員可以將更少的時(shí)間花在注重風(fēng)格上蒙秒，而將更多時(shí)間用于開發(fā)更好的用戶勃黍。

原型更快：在現(xiàn)有的設(shè)計(jì)系統(tǒng)中允許設(shè)計(jì)師將組件進(jìn)行交互拼接，并且效率很高速度也很快晕讲，可以構(gòu)建無(wú)數(shù)的原型和變體進(jìn)行實(shí)驗(yàn)溉躲，幫助團(tuán)隊(duì)快速獲得洞察力和數(shù)據(jù)。

更快的迭代：無(wú)論是改進(jìn)UI的樣式還是技術(shù)在實(shí)現(xiàn)的時(shí)候益兄，使用設(shè)計(jì)系統(tǒng)都可以減少數(shù)百行代碼到少量字符的工作量锻梳。這使得迭代快速而輕松，提高工作效率净捅。

提高可用性：不同的樣式會(huì)妨礙可用性疑枯。當(dāng)無(wú)數(shù)獨(dú)特界面元素及其交互的CSS增加時(shí)，認(rèn)知負(fù)荷和頁(yè)面權(quán)重也會(huì)增加蛔六。這會(huì)帶來(lái)糟糕的用戶體驗(yàn)荆永。還有可能CSS和JavaScript沖突废亭，可能界面會(huì)崩潰。通過(guò)使用設(shè)計(jì)系統(tǒng)具钥，可以通過(guò)構(gòu)建整體的組件庫(kù)而不是更新整個(gè)頁(yè)面來(lái)避免這些沖突豆村，可以在短時(shí)間內(nèi)保證頁(yè)面的質(zhì)量。

建立可訪問(wèn)性：通過(guò)優(yōu)化骂删，慢速的網(wǎng)絡(luò)或老版本的可訪問(wèn)性掌动，可以在組件級(jí)實(shí)現(xiàn)可訪問(wèn)性。幫助提高產(chǎn)品的可訪問(wèn)性并符合您所在國(guó)家/地區(qū)的法律宁玫。

如何建立設(shè)計(jì)系統(tǒng)粗恢？

建立自己的設(shè)計(jì)系統(tǒng)設(shè)計(jì)師首先要設(shè)計(jì)風(fēng)格，如何設(shè)計(jì)模塊化和可擴(kuò)展性欧瘪，如何將其用于其他團(tuán)隊(duì)眷射，如何將想法準(zhǔn)確的傳達(dá)給Leader。要確認(rèn)好從哪里開始佛掖。

其次要考慮到誰(shuí)需要參與設(shè)計(jì)系統(tǒng)的創(chuàng)建以及團(tuán)隊(duì)如何協(xié)同工作妖碉。人員確定下來(lái)后就可以開始考慮系統(tǒng)的設(shè)計(jì)語(yǔ)言，包括顏色芥被，排版欧宜，間距等等。設(shè)計(jì)師的可視化設(shè)計(jì)語(yǔ)言將成為UI庫(kù)的基礎(chǔ)—一系列可以快速組裝以創(chuàng)建界面的組件撕彤。

1. 誰(shuí)應(yīng)該參與鱼鸠？

設(shè)計(jì)師（定義系統(tǒng)的可視元素）

前端開發(fā)人員（創(chuàng)建模塊化，高效的代碼）

用戶調(diào)研人員（幫助了解客戶真正的 需求）

運(yùn)維工程師（可以確保您的系統(tǒng)在所有設(shè)備上快速加載）

產(chǎn)品經(jīng)理（確保系統(tǒng)符合客戶需求）

設(shè)計(jì)總監(jiān)（支持并協(xié)調(diào)整個(gè)產(chǎn)品生態(tài)鏈的愿景）

Ella

2. 采訪客戶

與任何產(chǎn)品設(shè)計(jì)過(guò)程一樣羹铅，進(jìn)行研究非常重要 蚀狰。你的設(shè)計(jì)系統(tǒng)將會(huì)更頻繁地使用。通過(guò)采訪用戶职员，您可以提前查明問(wèn)題麻蹋，定義有助于他人正確使用系統(tǒng)的原則精力集中在重要的事情上。

通過(guò)實(shí)踐研究建立賦權(quán)風(fēng)格指南

通過(guò)客戶訪談獲得的見解焊切，是時(shí)候進(jìn)行盤點(diǎn)了扮授。要?jiǎng)?chuàng)建兩種類型的接口清單：

(1)視覺屬性（例如間距，顏色和排版）的清單专肪，這將有助于創(chuàng)建編碼的視覺語(yǔ)言刹勃。

(2)每個(gè)UI元素的清單（例如按鈕，卡片和模態(tài)）嚎尤，這將有助于創(chuàng)建組件的UI庫(kù)荔仁。

3. 創(chuàng)建可視化設(shè)計(jì)語(yǔ)言

（1）顏色

（2）排版（大小，前導(dǎo)，字體等）

（3）間距（邊距乏梁，填充次洼，定位坐標(biāo)，邊框間距）

（4）圖像（圖標(biāo)遇骑，插圖）

（5）視覺形式（深度卖毁，高度，陰影落萎，圓角亥啦，紋理）

（6）運(yùn)動(dòng)

（7）聲音

Ella

考慮每個(gè)設(shè)計(jì)元素在一個(gè)簡(jiǎn)單的組件（如按鈕）中扮演的角色。

顏色

為設(shè)計(jì)系統(tǒng)選擇的顏色不僅僅是您品牌的延伸模暗。UI使用顏色來(lái)傳達(dá)：

（1）反饋：錯(cuò)誤和成功狀態(tài)

（2）信息：圖表禁悠，圖形和尋路元素

（3）層次結(jié)構(gòu)：通過(guò)顏色和排版顯示結(jié)構(gòu)化順序

設(shè)計(jì)系統(tǒng)中的常見顏色包括代表你品牌的1-3種原色念祭，如果沒有采用這個(gè)3個(gè)顏色兑宇，那么可能還有一個(gè)額外的顏色。對(duì)鏈接和按鈕背景使用相同的顏色是個(gè)好方法粱坤，因?yàn)樗褂脩舾菀鬃R(shí)別交互元素隶糕。最后將獲得錯(cuò)誤警告和成功等狀態(tài)的顏色。將這些顏色分組以查看它們?nèi)绾螀f(xié)同工作站玄。

Ella

檢查顏色對(duì)比度

有多種顏色對(duì)比務(wù)必檢查背景和文本顏色配對(duì)的對(duì)比度枚驻。

Ella

字體

選擇的字體對(duì)您的品牌和用戶體驗(yàn)都有很大影響，但是有些公司喜歡自定義一些字體用來(lái)更好的反映其平臺(tái)株旷，但是要注意特別使用再登，因?yàn)榧嫒菘赡軙?huì)受到影響。

Ella

了解模塊化規(guī)模

詳細(xì)了解模塊化比例晾剖，以創(chuàng)建更有意義的排版锉矢。

Ella

進(jìn)行視覺審核

當(dāng)我們開始采用庫(kù)存之前，需要進(jìn)行視覺上的審核與CSS樣式的確認(rèn)齿尽，屬性沽损、聲明、選擇器的確認(rèn)循头。確認(rèn)有多少獨(dú)特的顏色绵估，字體大小和字體系列。顯示間距和尺寸值的條形圖卡骂。查看合并或調(diào)整的好辦法国裳。

Ella

弊端？

太有限了：很有可能無(wú)法滿足其他領(lǐng)域的特殊需求全跨。

失去創(chuàng)造力：如果設(shè)計(jì)師被限制使用設(shè)計(jì)系統(tǒng)缝左，那么設(shè)計(jì)師將不再自由探索風(fēng)格。

詳情也可參考：https://www.designbetter.co/

非特殊說(shuō)明，本文版權(quán)歸原作者所有盒使，轉(zhuǎn)載請(qǐng)注明出處