設(shè)計(jì)系統(tǒng)是如何從多方面解決日益增長的痛點(diǎn)

這是來自于 InVision DesignBetter 站點(diǎn)的一系列設(shè)計(jì)系統(tǒng)相關(guān)的文章，希望能幫助更多人理解并運(yùn)用設(shè)計(jì)系統(tǒng)。設(shè)計(jì)系統(tǒng)讓團(tuán)隊(duì)理解并使用一種統(tǒng)一的設(shè)計(jì)語言。他可以減少你的設(shè)計(jì)負(fù)債，加速設(shè)計(jì)流程，連接產(chǎn)品設(shè)計(jì)和開發(fā)實(shí)現(xiàn)之間的鴻溝。

在 19 世紀(jì)六十年代，計(jì)算機(jī)技術(shù)的發(fā)展速度遠(yuǎn)遠(yuǎn)超過了軟件研發(fā)的速度。電腦變得更快更便宜了，而軟件研發(fā)卻仍舊十分緩慢，且很難維護(hù)，漏洞百出。這種差距，以及該如何應(yīng)對的窘境，被稱之為軟件危機(jī)[1]。

在 1968 年，NATO 軟件工程會議[2]上，Douglas McIlroy 提出了組件式開發(fā)的解決思路。組件式開發(fā)通過代碼重用來釋放軟件編程的潛能，使其更加高效并且易于擴(kuò)展。這大大降低了軟件研發(fā)的所需的人力，并且提高了研發(fā)速度，使得軟件可以更充分地利用計(jì)算機(jī)的能力。

而現(xiàn)在，50 年之后，我們正經(jīng)歷著一場相似的挑戰(zhàn)，不過這一次是在軟件設(shè)計(jì)領(lǐng)域。現(xiàn)在的設(shè)計(jì)流程已經(jīng)不能滿足軟件迭代的節(jié)奏，因?yàn)槲覀兊脑O(shè)計(jì)方式仍然處于原始地定制化地解決單個(gè)問題的處境中，不能很好地規(guī)模化。

你是否遇到過這種情況：當(dāng)你審視以往的設(shè)計(jì)稿時(shí)，發(fā)現(xiàn)自己用了很多種相似的藍(lán)色，或者是一組相近的按鈕，它們散落在你產(chǎn)品的不同角落中。此時(shí)你開始意識到，你的設(shè)計(jì)竟然如此不統(tǒng)一，如此不完整，而且如此難以維護(hù)。

在這種狀態(tài)下，想讓設(shè)計(jì)的步伐跟上開發(fā)節(jié)奏，一般公司可能會做三件事：

?招來更多人

?加快設(shè)計(jì)速度

?找到一個(gè)能一舉多得的解決方案

即使招來了更多的熟練的設(shè)計(jì)師，這種定制化作坊式的設(shè)計(jì)方式也難以規(guī)模化。因?yàn)檫@種模式本身就很慢，難以統(tǒng)一，并且隨著時(shí)間變化越來越難以維護(hù)。

設(shè)計(jì)系統(tǒng)通過“設(shè)計(jì)復(fù)用”讓設(shè)計(jì)團(tuán)隊(duì)更好更快地設(shè)計(jì)產(chǎn)品，并使規(guī)模化成為可能。這就是設(shè)計(jì)系統(tǒng)的最初出發(fā)點(diǎn)：通過一系列可以復(fù)用的設(shè)計(jì)組件，結(jié)合一定的標(biāo)準(zhǔn)規(guī)范來組裝它們，快速構(gòu)建不同的應(yīng)用。

過去 50 多年來，工程師通過這種方式成功運(yùn)轉(zhuǎn)工作流程。現(xiàn)在，設(shè)計(jì)師們也意識到了設(shè)計(jì)系統(tǒng)內(nèi)在的潛力，加入到這個(gè)行列中來。

用系統(tǒng)思維讓設(shè)計(jì)規(guī)模化

最近這段時(shí)間你可能已經(jīng)注意到“設(shè)計(jì)系統(tǒng)”在行業(yè)內(nèi)被討論得越來越熱烈。設(shè)計(jì)正在規(guī)模化，很多公司開始往設(shè)計(jì)中投入越來越多，提供更好的用戶體驗(yàn)來提升產(chǎn)品的競爭優(yōu)勢，以此吸引更多客戶，同時(shí)減少無意義的支出。

這種公司內(nèi)部一般有這么幾種特征：

?設(shè)計(jì)團(tuán)隊(duì)正在增長

?每個(gè)團(tuán)隊(duì)都有設(shè)計(jì)的參與

?無論是產(chǎn)品層面還是平臺層面，設(shè)計(jì)扮演的角色越來越重要

如果你是一個(gè)設(shè)計(jì)師，這種對設(shè)計(jì)的投入應(yīng)該會讓你很興奮，但這也伴隨著一些挑戰(zhàn)。你如何保證這么多團(tuán)隊(duì)這么多產(chǎn)品在設(shè)計(jì)上保持統(tǒng)一？你如何保證這么多團(tuán)隊(duì)可以同時(shí)快速迭代？有一部分設(shè)計(jì)師不可避免地要設(shè)計(jì)一些定制化的東西，這一部分東西你將如何維護(hù)呢？

為了理解設(shè)計(jì)系統(tǒng)如何面對并解決這些挑戰(zhàn)，我們有必要先理解設(shè)計(jì)系統(tǒng)是什么？設(shè)計(jì)系統(tǒng)其實(shí)是將標(biāo)準(zhǔn)規(guī)范和組件這兩個(gè)概念的優(yōu)勢結(jié)合起來，形成一個(gè)更加強(qiáng)大的東西。

標(biāo)準(zhǔn)規(guī)范

了解 Macintosh 用戶界面的技術(shù)知識在產(chǎn)品設(shè)計(jì)中至關(guān)重要，但是理解用戶界面背后的理論能夠幫助你創(chuàng)造令人驚艷的產(chǎn)品。

                                                                         ——蘋果人機(jī)交互指南

理解一個(gè)系統(tǒng)的設(shè)計(jì)背后是什么，同時(shí)理解為什么，對于構(gòu)建驚人的用戶體驗(yàn)是極其重要的。定義和遵循標(biāo)準(zhǔn)規(guī)范能夠幫我們更好地理解它，因?yàn)樗鼤饔^臆斷和模糊不清的東西，讓我們的團(tuán)隊(duì)協(xié)作阻力和困惑更小。

在設(shè)計(jì)和開發(fā)中都要遵循標(biāo)準(zhǔn)規(guī)范。當(dāng)我們將一些東西，比如命名方式、無障礙可訪問性要求、文件結(jié)構(gòu)都標(biāo)準(zhǔn)化，那么團(tuán)隊(duì)合作就更加緊密一致，并且能減少錯(cuò)誤。

視覺語言是設(shè)計(jì)標(biāo)準(zhǔn)規(guī)范的核心部分。定義好顏色、形狀、文字、圖標(biāo)、間距和動(dòng)畫的樣式，可以幫助你創(chuàng)造更加一致的品牌感和用戶體驗(yàn)。再由這些元素組合成設(shè)計(jì)系統(tǒng)中的組件，它們會在傳達(dá)品牌的個(gè)性時(shí)起到十分重要的作用。

沒有標(biāo)準(zhǔn)規(guī)范，決策將變得武斷且難以評判。這樣會導(dǎo)致設(shè)計(jì)沒法規(guī)模化，也讓用戶體驗(yàn)變得支離破碎。

提示：跨平臺特性

你的設(shè)計(jì)語言應(yīng)該是能夠跨平臺的，保持在 web、iOS、Android 和 email 上的表現(xiàn)一致性。在你的設(shè)計(jì)系統(tǒng)中顯著的位置展示它們，并給出詳細(xì)的文檔，這可以幫助其他成員了解組件應(yīng)該長什么樣，具有什么樣的行為。舉個(gè)例子，谷歌的 Material Design 就深入介紹了他們設(shè)計(jì)語言[3]的方方面面。

組件

組件是設(shè)計(jì)系統(tǒng)中可復(fù)用的代碼，也是組成用戶界面的基本元素。組件的復(fù)雜度不盡相同。當(dāng)一個(gè)組件功能最小化時(shí)，比如一個(gè)按鈕組件或一個(gè)下拉菜單組件，可以讓設(shè)計(jì)系統(tǒng)變得更加靈活，復(fù)用程度更高。而一些復(fù)雜的組件，比如說用于展示特定數(shù)據(jù)的表格，只適用于一些特定場景，而這些場景是有限的。因此，組件可復(fù)用性越高，后期維護(hù)的工作量就越小，設(shè)計(jì)系統(tǒng)也就更易于規(guī)模化。

組件式開發(fā)通過代碼復(fù)用來減少開銷，而標(biāo)準(zhǔn)規(guī)范管理組件的設(shè)計(jì)目的、樣式和用法。這樣，你就可以用一個(gè)系統(tǒng)來輔助團(tuán)隊(duì)協(xié)作，并讓所有成員更清晰地理解要做的是什么以及為什么要這么做。

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

讓我們來詳細(xì)地了解一下設(shè)計(jì)系統(tǒng)是如何從多方面解決日益增長的痛點(diǎn)的。

讓設(shè)計(jì)規(guī)模化

隨著團(tuán)隊(duì)增長，每個(gè)設(shè)計(jì)師都專注于自己的一畝三分地，比如我只負(fù)責(zé)搜索，你只負(fù)責(zé)發(fā)現(xiàn)頁，他只負(fù)責(zé)賬號管理，等等。這就會導(dǎo)致設(shè)計(jì)語言支離破碎，就像是一個(gè)設(shè)計(jì)的通天塔，每個(gè)設(shè)計(jì)師都講著不同的語言——設(shè)計(jì)師各自解決各自的問題，沒有系統(tǒng)性思考。

沒有共同的設(shè)計(jì)語言來約束產(chǎn)品，設(shè)計(jì)流程和用戶體驗(yàn)就變得不統(tǒng)一。當(dāng)團(tuán)隊(duì)沒有形成統(tǒng)一的設(shè)計(jì)慣例，設(shè)計(jì)評判也變得不夠高效。想要在團(tuán)隊(duì)內(nèi)形成統(tǒng)一的慣例，就必須要有一個(gè)共享的庫，來存放公共的設(shè)計(jì)模式和樣式。

一般來說這是一些靜態(tài)文件，比如說一些示例元素，但是這種方式很容易過時(shí)。所以，很多團(tuán)隊(duì)會采用 Shopify Polaris[4]這種方式，系統(tǒng)性地展示包含組件、設(shè)計(jì)規(guī)范和設(shè)計(jì)最佳實(shí)踐，而且這個(gè)系統(tǒng)是動(dòng)態(tài)的，跟隨業(yè)務(wù)隨時(shí)更新的。

內(nèi)部的設(shè)計(jì)系統(tǒng)站點(diǎn)可以保證團(tuán)隊(duì)所有人都擁有一份統(tǒng)一的設(shè)計(jì)數(shù)據(jù)源，并及時(shí)保持同步。

管理設(shè)計(jì)負(fù)債

隨著團(tuán)隊(duì)和產(chǎn)品增長，會有很多負(fù)債。這里所說的負(fù)債，不是指金錢上的，而是指設(shè)計(jì)和技術(shù)上的負(fù)債。當(dāng)我們?yōu)橐恍┒唐谀康淖鲈O(shè)計(jì)時(shí)，就會出現(xiàn)設(shè)計(jì)負(fù)債。大量豐富的不可復(fù)用的和不統(tǒng)一的樣式或模式，就形成了設(shè)計(jì)負(fù)債，并導(dǎo)致設(shè)計(jì)系統(tǒng)的維護(hù)變成不可能的任務(wù)。隨著時(shí)間流逝，這種負(fù)債積累起來，讓我們在前進(jìn)的道路上的負(fù)擔(dān)越來越重。

設(shè)計(jì)創(chuàng)造并不一定會產(chǎn)生負(fù)債，就像花錢不會恒定產(chǎn)生金融負(fù)債一樣。但是設(shè)計(jì)系統(tǒng)可以讓你的設(shè)計(jì)工作更加有計(jì)劃性，不會產(chǎn)生太多設(shè)計(jì)或代碼上的負(fù)債，同時(shí)也讓你的設(shè)計(jì)模式持續(xù)增長，有效促進(jìn)產(chǎn)品迭代。

保障設(shè)計(jì)統(tǒng)一性

一致可復(fù)用的標(biāo)準(zhǔn)化組件可以讓產(chǎn)品設(shè)計(jì)變得更加統(tǒng)一，更容易理解，且更加可預(yù)測。同時(shí)，標(biāo)準(zhǔn)化組件也讓設(shè)計(jì)師更多地專注于如何構(gòu)建更好的用戶體驗(yàn)，而不是糾結(jié)于樣式的調(diào)整。

快速構(gòu)建原型

基于設(shè)計(jì)系統(tǒng)，可以快速地構(gòu)建界面、交互和流程，就像搭樂高積木一樣。這可以讓你快速構(gòu)建一些產(chǎn)品原型或?qū)嶒?yàn)性的功能，來進(jìn)行測試以快速驗(yàn)證想法。

快速迭代

不管是樣式迭代還是用戶體驗(yàn)改進(jìn)，使用設(shè)計(jì)系統(tǒng)都可以減輕工作量。以前可能要更改幾百行代碼，現(xiàn)在只需要改動(dòng)幾行就可以了，迭代更加快捷無痛，可以快速靈活地探索產(chǎn)品方向。

提高可用性

不夠一致的界面會妨礙產(chǎn)品可用性。當(dāng)無數(shù)各自獨(dú)立的元素和交互形式組合在一起，頁面越來越重，造成明顯的加載延遲，這將會導(dǎo)致極其糟糕的用戶體驗(yàn)。同時(shí)，這些代碼會產(chǎn)生潛在的沖突，讓你的產(chǎn)品變得脆弱。使用設(shè)計(jì)系統(tǒng)之后，我們可以使用統(tǒng)一的全局的組件庫，而不再是獨(dú)立分散的組件，來避免這種潛在沖突，保證產(chǎn)品質(zhì)量。

提升無障礙可訪問性

有了設(shè)計(jì)系統(tǒng)，我們可以在組件層面優(yōu)化無障礙可訪問性，來幫助殘障人士或網(wǎng)絡(luò)、設(shè)備不好的人獲得更好的使用體驗(yàn)，這也是一種易用性的提升。在第三節(jié)《構(gòu)建你的設(shè)計(jì)系統(tǒng)》中，Katie Sylor-Miller 將解釋設(shè)計(jì)系統(tǒng)如何依照當(dāng)?shù)胤蓙硖岣邿o障礙可訪問性。

設(shè)計(jì)系統(tǒng)迷思

盡管設(shè)計(jì)系統(tǒng)有這么多好處，很多團(tuán)隊(duì)在引進(jìn)設(shè)計(jì)系統(tǒng)時(shí)也會發(fā)現(xiàn)這是一件極難推進(jìn)的事。設(shè)計(jì)師會感覺自己被束縛被限制，但通常這些容易被感知的缺點(diǎn)反而是設(shè)計(jì)系統(tǒng)最大的優(yōu)勢。

讓我們來一一解開這些在推廣設(shè)計(jì)系統(tǒng)時(shí)常常聽到的迷思吧。

迷思 1：限制性太大

迷思：負(fù)責(zé)單一模塊的設(shè)計(jì)師常常會認(rèn)為這一模塊的設(shè)計(jì)應(yīng)該與其他模塊不同。正因?yàn)榇耍粋€(gè)通用的系統(tǒng)常常會被認(rèn)為具有太多限制并且不能很好地滿足一些特定模塊的需求。

現(xiàn)實(shí)：設(shè)計(jì)師常常會為某一個(gè)特定模塊想出一些獨(dú)特的方案，長此以往就欠下很多設(shè)計(jì)負(fù)債。而有了設(shè)計(jì)系統(tǒng)，我們也可以創(chuàng)建一些新的設(shè)計(jì)模式來解決問題，這些設(shè)計(jì)模式同時(shí)反哺設(shè)計(jì)系統(tǒng)，適用于更多的模塊。

迷思 2：讓設(shè)計(jì)缺乏創(chuàng)造性

迷思：如果設(shè)計(jì)師被設(shè)計(jì)系統(tǒng)所束縛，就沒有太多發(fā)揮的余地了。前端的積壓任務(wù)中將充滿著設(shè)計(jì)樣式更新的任務(wù)。設(shè)計(jì)樣式迭代不算是小事，而且有著很大的風(fēng)險(xiǎn)，很多新的特性代碼會被不小心移除，也會對產(chǎn)品可用性產(chǎn)生負(fù)面影響。

現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)內(nèi)的組件是相互依賴的，這意味著當(dāng)你改動(dòng)一個(gè)地方其它使用到這個(gè)組件的地方都會同步更新，你的“創(chuàng)造”會及時(shí)同步。這使得設(shè)計(jì)系統(tǒng)內(nèi)的樣式更新變得很容易做到，以前可能需要幾星期做完的工作，現(xiàn)在只需要一個(gè)下午就搞定了。

迷思 3：設(shè)計(jì)系統(tǒng)是一次性的

迷思：設(shè)計(jì)系統(tǒng)一旦構(gòu)建好，就算是完成了。

現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)是動(dòng)態(tài)的、變化的，它需要跟隨產(chǎn)品需求不斷維護(hù)和進(jìn)化。你的產(chǎn)品是構(gòu)建于由可復(fù)用組件組成的設(shè)計(jì)系統(tǒng)之上的，因此設(shè)計(jì)系統(tǒng)的更新會自動(dòng)同步于你的產(chǎn)品，這樣就可以花費(fèi)更少的時(shí)間來維護(hù)產(chǎn)品更新，而是轉(zhuǎn)移到設(shè)計(jì)系統(tǒng)之上，也就更加容易規(guī)模化。

總結(jié)

設(shè)計(jì)系統(tǒng)并不是一時(shí)的風(fēng)尚或者假說。當(dāng)我們想要規(guī)模化設(shè)計(jì)流程來適應(yīng)快速迭代的產(chǎn)品節(jié)奏時(shí)，就會發(fā)現(xiàn)這種基于組件的設(shè)計(jì)和開發(fā)模式是一種十分可靠的解決方案。

作者：Marco Suarez

原文：https://www.designbetter.co/design-systems-handbook/introducing-design-systems

翻譯：Juuun

References

[1] 軟件危機(jī): 

https://en.wikipedia.org/wiki/Software_crisis
[2]NATO軟件工程會議：

http://homepages.cs.ncl.ac.uk/brian.randell/NATO/nato1968.PDF 

[3] 設(shè)計(jì)語言: 

https://material.io/guidelines/style/color.html

[4] Shopify Polaris: https://polaris.shopify.com/