01
介紹設(shè)計系統(tǒng)
在20世紀60年代屁商，計算機技術(shù)開始超越軟件編程的速度烟很。計算機變得更快，更便宜，但軟件開發(fā)仍然緩慢雾袱，難以維護恤筛，并且容易出錯。這種差距芹橡，以及如何處理它的困境毒坛，被稱為“?
。
1968年林说，在北約軟件工程大會上粘驰，道格拉斯麥克羅伊提出了基于組件的開發(fā)作為解決這一兩難問題的可能方案∈雒矗基于組件的開發(fā)提供了一種通過使代碼可重用來加速編程潛力的方法，從而使其更高效愕掏，更容易擴展度秘。這降低了工作量并提高了軟件開發(fā)的速度，使軟件能夠更好地利用現(xiàn)代計算機的強大功能饵撑。
現(xiàn)在剑梳，50年后，我們遇到了類似的挑戰(zhàn)滑潘，但這次是在設(shè)計上垢乙。設(shè)計正在努力擴展其支持的應(yīng)用程序，因為設(shè)計仍然是為個別問題量身定制的解決方案语卤。
您是否曾進行過UI審核追逮，發(fā)現(xiàn)您使用了幾十種類似的藍色色調(diào)或同一按鈕的排列？將您的應(yīng)用程序中的每個UI都加倍粹舵，您就會開始意識到您的設(shè)計已經(jīng)變得不一致钮孵，不完整和難以維護。
圖1. UI審計收集了簡單UI元素的許多排列眼滤，以說明您的團隊的設(shè)計債務(wù)有多深巴席。
對于這種狀態(tài)下的設(shè)計來跟上開發(fā)速度，公司可以做三件事之一：
雇用更多的人
設(shè)計更快
創(chuàng)建適用于多個問題的解決方案
即使有更多的手工作更快诅需，現(xiàn)實是定制設(shè)計根本無法擴展漾唉。定制設(shè)計緩慢，不一致堰塌，并且隨著時間的推移越來越難以維護赵刑。
設(shè)計系統(tǒng)使團隊能夠更快地構(gòu)建更好的產(chǎn)品，使設(shè)計可重用 - 可重用性使得規(guī)模成為可能蔫仙。這是設(shè)計系統(tǒng)的核心和主要價值料睛。設(shè)計系統(tǒng)是可重復(fù)使用組件的集合，由明確的標準指導，可以組裝在一起構(gòu)建任意數(shù)量的應(yīng)用程序恤煞。
50多年來屎勘，工程師已將其工作付諸實施。現(xiàn)在是設(shè)計實現(xiàn)其全部潛力并加入它們的時候了居扒。
通過系統(tǒng)思考擴展設(shè)計
你可能很清楚概漱，設(shè)計系統(tǒng)現(xiàn)在已經(jīng)成為軟件行業(yè)的一個熱門話題，而且有充分的理由喜喂。D?esign正在縮放瓤摧。許多企業(yè)正在投資設(shè)計，因為他們認識到他們產(chǎn)品的客戶體驗提供了競爭優(yōu)勢玉吁，吸引并留住了客戶照弥，并降低了支持成本。
以下是投資設(shè)計的公司內(nèi)部通常的情況：
設(shè)計團隊正在成長
設(shè)計嵌入整個公司的團隊中进副，可能在多個地點
設(shè)計在所有平臺上的所有產(chǎn)品中都發(fā)揮著關(guān)鍵作用
如果你是一名設(shè)計師这揣，這種設(shè)計投資可能聽起來令人興奮，但隨之而來的卻是很多挑戰(zhàn)影斑。當許多團隊擁有您產(chǎn)品的各個部分時给赞，您將如何在平臺上設(shè)計一致的UI？您將如何授權(quán)所有這些團隊快速迭代矫户？您將如何保持不可避免的設(shè)計債務(wù)片迅，這將使許多設(shè)計師創(chuàng)造新的和量身定制的設(shè)計？
要了解創(chuàng)建設(shè)計系統(tǒng)如何應(yīng)對這些挑戰(zhàn)皆辽，我們必須了解設(shè)計系統(tǒng)是什么柑蛇。設(shè)計系統(tǒng)將2個概念與個人優(yōu)點相結(jié)合，使其比單獨的部分更強大膳汪。
標準
掌握Macintosh用戶界面的技術(shù)知識是產(chǎn)品設(shè)計的關(guān)鍵因素唯蝶，但了解用戶界面背后的理論可以幫助您創(chuàng)建出色的產(chǎn)品。
MACINTOSH HIG
蘋果
不僅要了解系統(tǒng)設(shè)計背后的原因遗嗽，還要了解原因粘我，這對于創(chuàng)建卓越的用戶體驗至關(guān)重要。定義和遵守標準是我們?nèi)绾蝿?chuàng)造這種理解痹换。這樣做可以消除經(jīng)常在產(chǎn)品團隊中產(chǎn)生摩擦和混淆的主觀性和模糊性征字。
標準包括設(shè)計和開發(fā)。標準化命名約定娇豫，可訪問性要求和文件結(jié)構(gòu)等內(nèi)容將有助于團隊一致地工作并防止錯誤匙姜。
視覺語言是您設(shè)計標準的核心部分。定義顏色冯痢，形狀氮昧，類型框杜，圖標，空間和運動的目的和風格對于創(chuàng)建品牌一致和一致的用戶體驗至關(guān)重要袖肥。系統(tǒng)中的每個組件都包含這些元素咪辱，它們在表達品牌個性方面發(fā)揮著不可或缺的作用。
沒有標準椎组，決策就變得武斷油狂，難以批判。這不僅不會擴展寸癌，而且會產(chǎn)生不一致且令人沮喪的用戶體驗专筷。
創(chuàng)見平臺
您的視覺語言可以超越平臺，在Web蒸苇，iOS磷蛹，Android和電子郵件中創(chuàng)建連續(xù)性。在您的設(shè)計系統(tǒng)網(wǎng)站的顯眼位置記錄并顯示您的視覺語言溪烤。這將有助于系統(tǒng)貢獻者了解組件的外觀和行為方式弦聂。
例如，Google的Material Design深入探討了他們視覺語言的各個方面氛什。看看他們的顏色頁面。
要讓他們遵守指導方針并不難匪凉，很難讓他們就指導方針達成一致意見枪眉。
洛瑞卡普蘭
ATLASSIAN的
Lori Kaplan是開創(chuàng)性的Macintosh人機界面指南（HIG）的合著者，講述了它們的創(chuàng)建以及對設(shè)計人員和開發(fā)人員的影響再层。
組件
組件是系統(tǒng)中可重用代碼的一部分贸铜，它們充當應(yīng)用程序界面的構(gòu)建塊。組件的復(fù)雜程度聂受。將組件簡化為單個功能（如按鈕或下拉菜單）可提高靈活性蒿秦，使其更具可重用性。更復(fù)雜的組件（如特定類型數(shù)據(jù)的表）可以很好地滿足其用例蛋济，但這種復(fù)雜性限制了適用方案的數(shù)量棍鳖。組件的可重用性越高，您需要維護的越少碗旅，規(guī)模就越容易渡处。
在第3章：構(gòu)建設(shè)計系統(tǒng)中了解有關(guān)構(gòu)建組件的更多信息。
基于組件的開發(fā)通過使代碼可重用來減少技術(shù)開銷祟辟。標準管理這些組件的用途医瘫，樣式和用法。在一起旧困，您可以為您的產(chǎn)品團隊配備一個易于使用的系統(tǒng)醇份，并為您提供一個明確將其與原因相關(guān)聯(lián)的理解稼锅。
設(shè)計系統(tǒng)的價值
讓我們詳細了解設(shè)計系統(tǒng)可以成為您日益增長的痛苦的急需止痛藥的多種方式。
規(guī)模設(shè)計
隨著團隊的發(fā)展僚纷，設(shè)計師通常會專注于搜索和發(fā)現(xiàn)矩距，帳戶管理等應(yīng)用程序的離散區(qū)域。這可能會導致一種支離破碎的視覺語言 - 就像設(shè)計中的巴別塔一樣 - 每個設(shè)計師都會說出自己的語言畔濒。當設(shè)計師單獨而非系統(tǒng)地解決問題時剩晴，就會發(fā)生這種情
由于沒有通用的設(shè)計語言來統(tǒng)一產(chǎn)品，用戶體驗也開始崩潰侵状，設(shè)計過程也是如此赞弥。當缺乏設(shè)計慣例時，設(shè)計批評變得無效趣兄。要在團隊中創(chuàng)建一致绽左，必須有一個共享的真實來源 - 一個參考官方模式和風格的地方。
大多數(shù)情況下艇潭，這是靜態(tài)工件拼窥，例如設(shè)計模擬，但靜態(tài)引用幾乎會立即過時蹋凝。這就是為什么團隊建造像Shopify的Polaris站點這樣的紀念碑- 一個用系統(tǒng)構(gòu)建的設(shè)計系統(tǒng)站點鲁纠，它記錄了系統(tǒng)的所有方面，包括組件鳍寂，指南和UX最佳實踐改含。而且因為它是用系統(tǒng)構(gòu)建的，所以它始終是最新的迄汛。
內(nèi)部設(shè)計系統(tǒng)站點是產(chǎn)品團隊最好捍壤，最容易獲得的事實來源。它提供了引力鞍爱，使團隊成員保持一致并保持同步鹃觉。
管理你的債務(wù)
隨著申請及其團隊的年齡增長，他們會建立債務(wù)睹逃。不是金融債務(wù)盗扇，而是技術(shù)和設(shè)計債務(wù)。債務(wù)是通過短期建設(shè)獲得的沉填。設(shè)計債務(wù)由過多的不可重用和不一致的風格和慣例組成粱玲，而利益是維持它們的不可能完成的任務(wù)。隨著時間的推移拜轨，這種債務(wù)的積累成為減緩增長的重要因素抽减。
創(chuàng)造行為本身并不會產(chǎn)生債務(wù) - 就像花錢并不會產(chǎn)生金融債務(wù)一樣。但是使用設(shè)計系統(tǒng)可以通過降低設(shè)計和代碼開銷來保持預(yù)算橄碾，同時仍然允許您擴展和改進應(yīng)用程序卵沉。
設(shè)計一致
標準化組件使用一致且重復(fù)地創(chuàng)建更可預(yù)測且易于理解的應(yīng)用程序颠锉。標準化組件還使設(shè)計人員可以將更少的時間花在注重風格上，而花更多時間來開發(fā)更好的用戶體
原型更快
在現(xiàn)有設(shè)計系統(tǒng)中工作允許您將流動和交互拼接在一起史汗，就像從垃圾箱中拉出樂高積木一樣快琼掠。這使您可以構(gòu)建無數(shù)的原型和變體進行實驗，幫助您的團隊快速獲得洞察力和數(shù)據(jù)停撞。
更快地迭代
無論是改進UI的樣式還是將UX更改為流瓷蛙，使用設(shè)計系統(tǒng)都可以減少數(shù)百行代碼到少量字符的工作量。這使得迭代快速而輕松戈毒，實驗速度更快艰猬。
提高可用性
不一致的接口約定會妨礙可用性。當無數(shù)獨特界面元素及其交互的CSS增加時埋市，認知負荷和頁面權(quán)重也會增加冠桃。這會帶來糟糕的用戶體驗。它還可能會創(chuàng)建沖突的CSS和JavaScript道宅，可能會破壞您的應(yīng)用食听。通過使用設(shè)計系統(tǒng)，您可以通過構(gòu)建整體的組件庫而不是每頁來避免這些沖突污茵，這意味著您將花費更少的時間進行質(zhì)量保證樱报。
建立可訪問性
通過優(yōu)化殘疾人，慢速Internet或舊計算機上的可訪問性泞当，可以在組件級實現(xiàn)可訪問性肃弟。這是一個簡單易用的勝利。在第3章“構(gòu)建您的設(shè)計系統(tǒng)”中零蓉，Katie Sylor-Miller解釋了設(shè)計系統(tǒng)如何幫助您提高產(chǎn)品的可訪問性并符合您所在國家/地區(qū)的法律。
InVision設(shè)計系統(tǒng)經(jīng)理
大規(guī)模創(chuàng)造更好的產(chǎn)品 - 在每個屏幕上提供一致的體驗
設(shè)計系統(tǒng)的神話
即使有了它們的所有好處穷缤，創(chuàng)建設(shè)計系統(tǒng)的支持仍然可以在內(nèi)部進行敌蜂。設(shè)計師可能感到有限或受限制，但這些感知的弱點往往是設(shè)計系統(tǒng)的最大優(yōu)勢津肛。
當你出售創(chuàng)建設(shè)計系統(tǒng)的想法時章喉，讓我們揭穿你會聽到的常見神話。
神話1：太有限了
神話：嵌入應(yīng)用程序離散區(qū)域的設(shè)計師可以看到可能與其他領(lǐng)域不同的品質(zhì)身坐。因此秸脱，普遍系統(tǒng)被認為過于局限，可能無法滿足這些特定領(lǐng)域的需求部蛇。
現(xiàn)實：設(shè)計師通常最終會創(chuàng)建自定義解決方案來改善應(yīng)用程序的離散區(qū)域摊唇，從而增加設(shè)計和技術(shù)債務(wù)。通過設(shè)計系統(tǒng)涯鲁，可以創(chuàng)建新的解決方案并將其反饋到系統(tǒng)中巷查，從而使每個人都可以使用這些改進有序。
神話2：失去創(chuàng)造力
神話：如果設(shè)計師被限制使用設(shè)計系統(tǒng)，那么設(shè)計師將不再自由探索風格岛请。前端積壓通常充滿了設(shè)計風格的更新旭寿。發(fā)展應(yīng)用程序的視覺風格通常不是一項小任務(wù)。這也可能是一個很大的風險崇败，因為它會從新功能工作中移除資源盅称，并可能對可用性產(chǎn)生負面影響。
現(xiàn)實：設(shè)計系統(tǒng)的組件是相互依賴的后室。這意味著當在一個位置進行更改時缩膝，更改將在整個系統(tǒng)中繼承。這使得系統(tǒng)內(nèi)的樣式更新變得微不足道咧擂，但影響更大逞盆。曾經(jīng)幾周 - 如果不是幾個月的工作，現(xiàn)在可以在一個下午完成松申。
神話3：一個完成
神話：設(shè)計和構(gòu)建設(shè)計系統(tǒng)后云芦，工作就完成了。
現(xiàn)實：設(shè)計系統(tǒng)是生活贸桶，意味著需要不斷維護和改進舅逸。但是，由于應(yīng)用程序由系統(tǒng)的可重用組件提供支持皇筛，因此應(yīng)用程序會自動繼承系統(tǒng)的改進琉历，從而降低維護應(yīng)用程序的工作量。這是設(shè)計系統(tǒng)提供的縮放功能水醋。
結(jié)論
很多原始愿景都是關(guān)于視覺識別......我們開始明白它必須是一個具有非常強大的交互設(shè)計基礎(chǔ)的系統(tǒng)旗笔。
RICH FULCHER
谷歌
設(shè)計系統(tǒng)不是一種時尚甚至是未經(jīng)測試的假設(shè)。為了找到滿足技術(shù)快速發(fā)展所需的規(guī)模拄踪，基于組件的設(shè)計和開發(fā)是一種經(jīng)過驗證的可靠解決方案蝇恶。
既然您已經(jīng)看到了創(chuàng)建設(shè)計系統(tǒng)的真正價值，那么讓我們在下一章深入探討實際的設(shè)計過程惶桐。
