這篇文章來自于 Invision 出品的書籍，圍繞規(guī)劃、設(shè)計(jì)、構(gòu)建和實(shí)現(xiàn)設(shè)計(jì)系統(tǒng)的實(shí)踐經(jīng)歷來指導(dǎo)讀者，其中包含了經(jīng)驗(yàn)豐富專家的真知灼見和一手經(jīng)驗(yàn)。我很喜歡，也分享給大家，推薦閱讀。這是一個系列，一共有 7 章，感興趣的話，持續(xù)關(guān)注吧。

20 世紀(jì) 60 年代，計(jì)算機(jī)硬件技術(shù)的升級開始超越軟件發(fā)展的速度。計(jì)算機(jī)的處理速度變得越來越快，價格也越來越便宜，但計(jì)算機(jī)軟件開發(fā)仍然處于緩慢、難以維護(hù)的境地，并且還很容易出錯。兩者之間的差距以及解決這個問題的困境被稱之為「軟件危機(jī)」。

在 1968 年的北約軟件工程會議上，道格拉斯·麥克羅伊（Douglas McIlroy）提出了基于組件開發(fā)有可能是解決「軟件危機(jī)」的方法之一?；诮M件開發(fā)是一種通過復(fù)用代碼來提高編程潛力的方法，該方法能幫助編程工作更、更易于擴(kuò)展。這樣做既能減少編程工作量又能提升軟件開發(fā)的速度，讓軟件更好地運(yùn)用現(xiàn)代計(jì)算機(jī)的力量。

在 50 年后的今天，我們又面臨著類似的挑戰(zhàn)，只不過這一次是在設(shè)計(jì)領(lǐng)域。在 UI 設(shè)計(jì)中，設(shè)計(jì)的角色是在為特定需求量身定做解決方案，所以很難去基于整個應(yīng)用進(jìn)行擴(kuò)展。

你有沒有走查過你輸出的界面，發(fā)現(xiàn)自己使用了幾十種類似的藍(lán)色，或者同一個按鈕不同的用法，將這些樣式組合對應(yīng)到你設(shè)計(jì)的每一個 UI 界面，就會意識到一套不成體系的設(shè)計(jì)是多么的難以維護(hù)。

△ 一份 UI 樣式走查收集的成果，里面羅列的十幾種類似的按鈕樣式說明之前團(tuán)隊(duì)挖的坑有多深。

在這種狀態(tài)下，設(shè)計(jì)要跟上開發(fā)的速度，公司可以選擇做以下三件事：

• 雇更多的人
• 提高設(shè)計(jì)速度
• 找到一個適用于多個問題的解決方案

通過復(fù)用設(shè)計(jì)，設(shè)計(jì)系統(tǒng)能夠幫助團(tuán)隊(duì)更好、更快地構(gòu)建產(chǎn)品——復(fù)用性使規(guī)范成為可能。這是設(shè)計(jì)系統(tǒng)的核心和價值。一個設(shè)計(jì)系統(tǒng)是一個可復(fù)用組件的合集，由清晰的規(guī)范作為指導(dǎo)，組合在一起構(gòu)建成各種的應(yīng)用程序。

50 多年來，工程師們一直在遵循著這個理念執(zhí)行工作?，F(xiàn)在是時候讓設(shè)計(jì)充分發(fā)揮其潛力加入他們了。

用系統(tǒng)思維擴(kuò)展設(shè)計(jì)

你可能已經(jīng)清楚地意識到，設(shè)計(jì)系統(tǒng)已經(jīng)成為當(dāng)今軟件行業(yè)的一個熱門話題，并且理由也很充分。很多企業(yè)投資設(shè)計(jì)系統(tǒng)，因?yàn)樗麄冋J(rèn)識到產(chǎn)品體驗(yàn)?zāi)軌驇砀偁巸?yōu)勢，不僅能吸引和留住客戶，更降低產(chǎn)品學(xué)習(xí)成本。

在重視設(shè)計(jì)系統(tǒng)的公司內(nèi)部，通常能看見這種情況：

• 設(shè)計(jì)團(tuán)隊(duì)不斷壯大。
• 設(shè)計(jì)師分布在整個公司的團(tuán)隊(duì)中，可能在多個部門。
• 設(shè)計(jì)在整個公司平臺上的各個產(chǎn)品中都起著關(guān)鍵作用。

如果你是設(shè)計(jì)師，那么前面所說對設(shè)計(jì)的投資聽起來可能會令你很興奮，但其實(shí)也帶來很多挑戰(zhàn)。當(dāng)一個應(yīng)用由不同的團(tuán)隊(duì)負(fù)責(zé)迭代各自模塊的時候，你將如何跨平臺設(shè)計(jì)一致的 UI？又如何使所有團(tuán)隊(duì)能夠進(jìn)行快速迭代？當(dāng)團(tuán)隊(duì)的設(shè)計(jì)師設(shè)計(jì)出新的獨(dú)立樣式時，你又將如何處理這種不可避免的設(shè)計(jì)需求？

要了解如何應(yīng)對上述的挑戰(zhàn)，我們要先了解什么是設(shè)計(jì)系統(tǒng)。設(shè)計(jì)系統(tǒng)將個體和整體兩個概念各自的優(yōu)點(diǎn)結(jié)合在一起。

1. 標(biāo)準(zhǔn)

擁有 MAC 用戶界面的技術(shù)知識是產(chǎn)品設(shè)計(jì)的關(guān)鍵因素，但了解用戶界面背后的理論，才能夠幫助你創(chuàng)造出色的產(chǎn)品。——蘋果人機(jī)交互指南

為了設(shè)計(jì)卓越的用戶體驗(yàn)，不僅要了解設(shè)計(jì)系統(tǒng)背后的內(nèi)容，還要了解其設(shè)計(jì)的原因。我們一般會通過建立和遵守標(biāo)準(zhǔn)來達(dá)成共識，這樣做能消除主觀性和歧義性，保證產(chǎn)品團(tuán)隊(duì)內(nèi)部不會出現(xiàn)摩擦和混亂。

這套標(biāo)準(zhǔn)的內(nèi)容涵蓋了設(shè)計(jì)和開發(fā)。例如對命名約定、無障礙標(biāo)準(zhǔn)和文件結(jié)構(gòu)等等，幫助團(tuán)隊(duì)達(dá)成共識，減少出錯。

視覺語言是設(shè)計(jì)標(biāo)準(zhǔn)的核心部分。定義顏色、形狀、類型、圖標(biāo)、布局和動效的樣式和用法對于創(chuàng)建品牌一致的用戶體驗(yàn)至關(guān)重要。系統(tǒng)中的每個組件都包含這些元素，它們在表達(dá)品牌特性中扮演著不可或缺的角色。

沒有標(biāo)準(zhǔn)，決策時就會無據(jù)可依。這不僅不能擴(kuò)展設(shè)計(jì)，還會造成復(fù)雜、差勁的用戶體驗(yàn)。

超越平臺

視覺語言可以不局限于單一平臺，可以在 Web，iOS，Android 和其他平臺上延續(xù)。將規(guī)范文檔展示在設(shè)計(jì)系統(tǒng)網(wǎng)站的醒目位置，能夠幫助系統(tǒng)開發(fā)者了解組件的樣式和交互模式。例如，Google 的 Material Design 就深入到其產(chǎn)品視覺語言的各個層面。

2. 組件

組件是系統(tǒng)中復(fù)用代碼的一部分，它們充當(dāng)應(yīng)用程序界面的基礎(chǔ)。組件的復(fù)雜性各不相同。將組件簡化為單個功能（如按鈕或下拉菜單）可以增加其靈活性，使其更易于復(fù)用。復(fù)雜的組件，如特定類型數(shù)據(jù)的圖表，可以很好地滿足其應(yīng)用場景，但是這種復(fù)雜性限制它的使用場景數(shù)量。組件的復(fù)用性越高，需要維護(hù)的次數(shù)就越少，規(guī)模也就越簡單。

基于組件的開發(fā)通過復(fù)用代碼來減少技術(shù)開銷。建立標(biāo)準(zhǔn)規(guī)范了這些組件的用途、樣式和用法。兩者結(jié)合在一起，就相當(dāng)于為你的產(chǎn)品團(tuán)隊(duì)配備了一個清晰的系統(tǒng)，讓他們了解到為什么和怎么做。

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

讓我們詳細(xì)看看設(shè)計(jì)系統(tǒng)如何幫助你解決一直以來的痛苦。

1. 擴(kuò)展式設(shè)計(jì)

隨著團(tuán)隊(duì)的成長，設(shè)計(jì)師通常會將注意力集中在應(yīng)用程序的獨(dú)立功能區(qū)域，如搜索和發(fā)現(xiàn)、帳戶管理等。這就會導(dǎo)致設(shè)計(jì)碎片化，就像是一座設(shè)計(jì)的巴別塔，每個設(shè)計(jì)師都將他們的設(shè)計(jì)語言往上添。當(dāng)設(shè)計(jì)師單獨(dú)而不是系統(tǒng)地去解決問題時，就會發(fā)生這種情況。

沒有通用設(shè)計(jì)語言統(tǒng)一產(chǎn)品和設(shè)計(jì)，用戶體驗(yàn)就會開始崩潰。當(dāng)缺乏設(shè)計(jì)規(guī)范時，設(shè)計(jì)討論就變得毫無用處。為了使團(tuán)隊(duì)內(nèi)部保持一致，必須要有一個共享的來源——可供參考的官方樣式庫。

大多數(shù)情況下的樣式庫都是靜態(tài)的內(nèi)容，例如設(shè)計(jì)模版。但是靜態(tài)的參考幾乎立刻就會過時。這就是為什么有的團(tuán)隊(duì)會建造像 Shopify’s Polaris 站點(diǎn)這樣的網(wǎng)站——一個設(shè)計(jì)系統(tǒng)站點(diǎn)，用該設(shè)計(jì)系統(tǒng)構(gòu)建而成，記錄系統(tǒng)的所有方面，包括組件、指南和交互最佳使用場景。因?yàn)樗桥c系統(tǒng)一起構(gòu)建的，所以它能夠保持其永遠(yuǎn)是的。

對于產(chǎn)品團(tuán)隊(duì)而言，內(nèi)部設(shè)計(jì)系統(tǒng)站點(diǎn)是最佳、最易訪問的共享來源。它提供了一個引力，使團(tuán)隊(duì)成員保持一致和同步。

2. 管理你的債務(wù)

隨著應(yīng)用程序和團(tuán)隊(duì)的時間積累，會慢慢形成債務(wù)。這種債務(wù)不是金融債務(wù)，而是技術(shù)和設(shè)計(jì)債務(wù)。這些債務(wù)是因?yàn)榻鉀Q獨(dú)立問題獲得的。設(shè)計(jì)債務(wù)由大量不可復(fù)用和不一致的樣式和慣例組成，而維護(hù)它們是不可能完成的任務(wù)。隨著時間的推移，這些債務(wù)的累積會成為減緩增長的巨大負(fù)擔(dān)。

創(chuàng)造行為本身并不會產(chǎn)生債務(wù)——就像花錢本身并不會產(chǎn)生金融債務(wù)一樣。但使用設(shè)計(jì)系統(tǒng)將使你的設(shè)計(jì)和代碼保持足夠簡潔，同時仍然允許你進(jìn)行升級和迭代。

3. 一致的設(shè)計(jì)

一致且重復(fù)使用的標(biāo)準(zhǔn)化組件，使你應(yīng)用程序的易用性大大提升。標(biāo)準(zhǔn)化的組件還能讓設(shè)計(jì)師花更少的時間關(guān)注樣式，花更多的時間專注于提升用戶體驗(yàn)。

4. 更快的原型

在設(shè)計(jì)系統(tǒng)下工作，你可以像玩樂高一樣快速拼湊流程和交互，構(gòu)建無數(shù)的原型和方案進(jìn)行快速驗(yàn)證，從而幫助團(tuán)隊(duì)快速獲得數(shù)據(jù)和結(jié)論。

5. 提高可用性

頁面樣式的不一致會影響產(chǎn)品的可用性，當(dāng) CSS 因?yàn)閿?shù)不清的不一致樣式元素和交互增加時，頁面加載時間也會加長，這會導(dǎo)致很糟糕的用戶體驗(yàn)。它還可能產(chǎn)生沖突的 CSS 和 JavaScript，從而可能破壞你的應(yīng)用程序。通過使用設(shè)計(jì)程序，通過構(gòu)建一個整體的組件庫（而不是每頁）來避免這些沖突，從而花費(fèi)更少的時間來保證產(chǎn)品質(zhì)量。

6. 建立可訪問性程序

可訪問性在組件級別就可以實(shí)現(xiàn)，針對殘疾人士、網(wǎng)速較慢和老舊的計(jì)算機(jī)上進(jìn)行優(yōu)化。這是一個建立易用性程序很好的方法， 在第 3 章「構(gòu)建設(shè)計(jì)系統(tǒng)」中，Katie Sylor-Miller 解釋了設(shè)計(jì)系統(tǒng)如何幫助你改善產(chǎn)品的可用性，并保證遵守你所在國家/地區(qū)的法律。

（譯者注：美國殘疾人法案于 1990 年 7 月通過并簽署，其中有規(guī)定網(wǎng)站的可用性必須遵守《美國殘疾人法》（ADA）的相關(guān)內(nèi)容。）

設(shè)計(jì)系統(tǒng)的誤區(qū)

即使有上述說的這些好處，在團(tuán)隊(duì)內(nèi)部推行一個設(shè)計(jì)系統(tǒng)的時候，仍然很難說服團(tuán)隊(duì)成員。設(shè)計(jì)師可能會感到局限或束縛，但通常這些被感知到的弱點(diǎn)正是設(shè)計(jì)系統(tǒng)的最大優(yōu)勢。

讓我們來揭穿那些你在推行設(shè)計(jì)系統(tǒng)時經(jīng)常會遇到的誤區(qū)吧。

誤區(qū)1：過于局限

誤區(qū)：負(fù)責(zé)深入獨(dú)立業(yè)務(wù)的設(shè)計(jì)師看到的設(shè)計(jì)標(biāo)準(zhǔn)可能會與其他需求的不一樣，因此，他們會認(rèn)為通用的設(shè)計(jì)系統(tǒng)過于局限，可能無法滿足某些特定業(yè)務(wù)的需求。

現(xiàn)實(shí)：設(shè)計(jì)師通常會設(shè)計(jì)出自定義的解決方案以滿足應(yīng)用中的獨(dú)立的業(yè)務(wù)，從而增加了設(shè)計(jì)和技術(shù)的負(fù)擔(dān)。而使用設(shè)計(jì)系統(tǒng)，這些被設(shè)計(jì)的新解決方案可以被反饋到設(shè)計(jì)系統(tǒng)里面，使每個人都可以使用這些改進(jìn)方案。

誤區(qū)2：缺乏創(chuàng)造力

誤區(qū)：如果設(shè)計(jì)師被限制在一個設(shè)計(jì)系統(tǒng)下做設(shè)計(jì)，那么他將不能去自由地探索設(shè)計(jì)風(fēng)格。前端的工作通常包含著各種樣式風(fēng)格的更新。對應(yīng)用程序的風(fēng)格進(jìn)行改版通常不是一個小任務(wù)。這也可能是一個很大的風(fēng)險(xiǎn)，因?yàn)閺氖逻@項(xiàng)工作會移除一部分的舊資源，可能會對可用性產(chǎn)生負(fù)面影響。

現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)的組成部分是相互關(guān)聯(lián)的，這意味著當(dāng)一個位置進(jìn)行更改時，這項(xiàng)更改會在整個系統(tǒng)中同步，這使得系統(tǒng)內(nèi)的樣式更新工作變得輕而易舉，但影響卻大得多。以前是幾周甚至幾月的工作量，現(xiàn)在可以在一個下午就能完成。

誤區(qū)3：一勞永逸

誤區(qū)：設(shè)計(jì)和構(gòu)建完設(shè)計(jì)系統(tǒng)后，工作就完成了。

現(xiàn)實(shí)：設(shè)計(jì)系統(tǒng)是有生命的，這意味著需要不斷對其進(jìn)行維護(hù)和改進(jìn)。但是由于應(yīng)用是由設(shè)計(jì)系統(tǒng)的復(fù)用性組件提供支持的，因此該應(yīng)用會自動同步設(shè)計(jì)系統(tǒng)的改進(jìn)內(nèi)容，從而減少維護(hù)應(yīng)用程序的工作量。這就是設(shè)計(jì)系統(tǒng)提供的擴(kuò)展能力。

總結(jié)

設(shè)計(jì)系統(tǒng)不是一時流行的方法，也不是未經(jīng)檢驗(yàn)的假設(shè)。為了讓設(shè)計(jì)找到與技術(shù)的快速發(fā)展相匹配的同等方案，基于組件的設(shè)計(jì)和開發(fā)是一種行之有效的可靠解決方案。

現(xiàn)在你已經(jīng)了解了創(chuàng)建設(shè)計(jì)系統(tǒng)的真正價值，讓我們在下一章中深入探討實(shí)際的設(shè)計(jì)過程吧。

文章來源：優(yōu)設(shè)    作者：彩云譯設(shè)計(jì)