因為工作內容，最近2年一直在探索如何打造一個高度靈活性的設計規范體系，在能夠維持自身設計積累的基礎之上，也能夠配合項目需要快速的產出高質量的定制化交付件。偶然之間看到了這本書，看過之后感覺很有啟發，就利用業余的時間翻譯成中文，希望對大家有幫助。

一、簡介

1. 本書的內容

隨著互聯網的快速發展并且變得越來越復雜，將網站設計看作成靜態頁面集合的角度已經變得站不住腳了，很多的設計師已經開始以一種更系統化的方式來思考如何設計。

然而，并非所有的設計系統都同樣有效。有些可以帶來流暢的用戶體驗，另一些則是胡亂拼湊的設計。有些設計系統能夠激勵團隊持續完善，另一些則會被忽視掉。有些設計系統會隨著時間的推移而變得更好，更有凝聚力和運行良好；另一些則會變得更糟和臃腫。

一個運作良好、經久不衰的設計系統的關鍵品質是什么？這個問題引起了我的極大興趣，我花了大量的時間研究和思考這個問題。我的研究和思想的結論為這本書奠定了基礎。根據不同規模的公司的經驗和設計系統的經驗，我嘗試探索能夠創造一個高效的設計系統的關鍵因素，從而增強團隊有能力創造出偉大的數字產品。在本書中，我將分享我工作中的一些方法。我希望這些方法也能夠對你的工作有幫助。

2. 本書的目標人群

本書主要面向于嘗試將設計系統的思想整合到他們組織的文化中的中小型產品團隊。產品團隊中的每個人都可從書中受益，尤其是視覺和交互設計師、用戶體驗從業者和前端開發人員。

3. 本書的討論范圍

本書闡述了以我做為一名交互和視覺設計師的經歷提出的設計系統觀點。我不涉及其他相關領域，如信息架構、內容策略或設計研究。同樣，這不是一本技術書。盡管會有大量與前端實踐直接相關的討論，但你不會看到任何代碼示例或對開發工具和技術的深入分析。

這是一本設計書，但不是要講述設計什么。它也不是試圖創建一個設計數字產品的全面指南。1它是關于如何以更加系統化的方式處理設計過程，并確保你的設計系統有助于實現你的產品目的的同時符合你的團隊的文化。

4. 本書的內容結構

這本書包含兩部分。

第一部分：基礎

在第一部分中，我們將討論設計系統的基礎——patterns 和 practices（做法）。設計模式是界面的可重復的、可重用的部分，從具體和功能（如按鈕和文本字段）到表述性更強的部分（如圖像樣式、顏色和版式）。模式是相互關聯的，它們共同構成了產品界面的語言。Shared practices（做法）是我們通過遵循一組準則，或者維持模式庫，指導如何創造、獲取、共享和應用這些 patterns。

第二部分：過程

設計系統不可能一夜之間就建立起來，它會隨著你的產品而逐漸發展。但是，我們可以遵循某些原則和做法，以確保設計系統朝著正確的方向發展，并為我們提供對設計系統在一定程度上的把控能力。本書的第二部分重點介紹了建立和維護設計系統的所需要的具體步驟和技術，包括： 安排工作計劃；梳理界面清單；建立 pattern library 模式庫；創建、記錄、優化和維護設計模式。

5. 術語

在我們深入討論這個主題之前，讓我們先確定我們將在整本書中使用的術語。

模式或設計模式

我使用 pattern 這個詞來指界面中任何重復的、可重用的部分（例如按鈕、文本字段、圖標樣式、顏色和版式、重復用戶流程、交互行為），pattern 可以被應用和修改用途來解決特定的設計問題，滿足用戶的需求，或者喚起用戶的情感。在整本書中，我將 pattern 分為了與行為相關的功能模式 functional patterns，以及與品牌和美學相關的感知模式 perceptual patterns。

功能模式或模塊

這兩個術語在整本書中可以互換使用，指用于構成用戶頁面整體的具體單元，例如按鈕、標題、表單元素、菜單。

感性模式或風格

這些是描述性較強而不太具體的設計模式，通常用于強調某種審美風格和增強與產品的情感關聯。例如，圖標樣式或顏色以及版式。

模式語言或設計語言

一套相互關聯、可共享的設計模式構成了產品界面的語言。模式語言結合了功能模式和感知模式，同時包含了具有于平臺特征的模式（比如漢堡包菜單）、行業領域模式（比如電子商務網站、金融軟件或社交應用程序的特定模塊）、UX（用戶體驗）和 引導模式（persuasive patterns），以及其他眾多影響元素結合在一起產品的用戶界面中。

設計系統或系統

目前在互聯網領域中還沒有「設計系統」的標準定義，人們對該術語有多種不同的理解——有時與「樣式指南」和「模式庫」互換使用。在本書中，設計系統指的是一套關聯的模式 connected patterns 和共享的做法 practices，一致地組織起來，為數字產品的目的服務。

模式庫和樣式指南

模式庫是能夠按照設計模式和使用指南的作用將其獲取、收集和共享的工具。創建模式庫是（良好）設計做法 design parctice 的案例。傳統的理解上，樣式指南側重于樣式風格，例如圖標樣式、顏色和版式，而模式庫包含更多類型的模式集。

設計系統洞察力

這本書是以現實世界的產品的實際見解為基礎的。其中的大多數產品是從我在 FutureLearn 工作的經歷中獲得的，FutureLearn 是英國的一家中等規模的從事開放式教育公司。我在公司的三年中從事設計師的崗位，從而有機會觀察和打造一個設計系統是如何從最初的概念發展到一個成熟的系統。

為了能夠在設計系統方面有更深度和多樣性研究，我還密切關注了其他五家不同規模和采用不同設計方法的公司：Airbnb、Atlassian、Eurostar、Sipgate 和 TED。在過去的18個月里，我一直在采訪他們的團隊成員，從而直觀的理解這些團隊在隨著系統的發展所面臨的挑戰。以下是愿意分享他們對設計系統方面見解的公司。

• Airbnb：在2016的采訪中，RoyStanfield（首席交互設計師）給了我很多關于 Airbnb 的 Design Language System 的細節。DLS 的亮點在于嚴密， patterns 的定義和用法明確，使用規則（rules）需要嚴格遵循。為實現這一目標該小組采用了需求 practices 工具。他們在采用新模式、整合新模式 patterns 的速度以及保持藝術方向與工程同步方面仍有一些挑戰。
• Atlassian：2016年的11月份 Jürgen Spangl（設計主管），James Bryant（首席設計師）和 Kevin Coffey（設計經理）分享了他們對 ADG（Atlassian Design Guidelines）觀點。雖然有一個專門負責管理 patterns 的團隊，但他們也提供了一個可以共同打造的開源模型。公司里的每個人不僅被允許能看到，而且公司積極地鼓勵大家為這個系統做出貢獻。這個模型的挑戰是在給人們提供足夠的貢獻自由度的同時，確保設計系統保持在可管理和策劃之間找到平衡。
• Eurostar：2016年的8月份和9月份以及2017年3月份，Dan Jackson（解決方案架構師）非常坦誠的交流了他們在 Eurostar 所做的事情。在撰寫本書時，團隊正在構建他們的第一個模式庫。他們最初遇到了一些挑戰，特別是在確定項目的優先次序和鼓勵團隊中的每個人做出貢獻方面。一年后，他們獲得了分配一個專門小組的資源，該小組目前正在負責該系統的工作。
• Sipgate：2016年8月份和11月份的交流中，Tobias Ritterbach（經驗所有者）和 Mathias Wegener（網絡開發工程師）都給了我很多關于他們在的工作中的見解。sipgate 模式庫建立于2015年，但一年之后，團隊發現由于產品團隊之間缺乏溝通而導致加入了太多的組件。最近，他們正在開發一個新的模式庫，以實現在多個產品網站上統一設計語言的目標。
• TED：2016年的8月和9月，Michael McWatters（UX架構師）、Aaron Weyenberg（UX主管）和 Joe Bartlett（前端開發人員）在討論中發表了意見。在眾多人支持的 TED.com，設計系統是由幾個UX設計師和前端開發人員組成的小團隊負責。團隊對他們的 patterns 理解有著深刻的共識，這些模式 patterns 以一種簡單的方式整理出來。到目前為止，他們還沒有覺得有必要建立一個全面的模式庫。

二、設計系統

在網絡社區中，「設計系統」沒有一個標準的定義，人們以不同的方式使用這個術語。在本章中，我們將定義什么是設計系統以及它由什么組成。

設計系統是一組相互關聯的模式和共享的做法 practices，它們以一致的方式組織起來，為數字產品的目的服務。模式是我們為創建用戶界面而重復組合的元素：諸如用戶流程、交互方式、按鈕、文本字段、圖標、顏色、版式、顯微拷貝。實踐是我們如何選擇創建、獲取、共享和使用這些模式，這一點在團隊協作中尤為重要。

看看這兩個不相關產品的截圖。一個來自 Thomson Reuters 用于交易和市場分析的名為 Eikon 應用程序；另一個來自開放式教育社交學習網站 FutureLearn。

△ 左邊是Thomson Reuters的 Eikon，右邊是FutureLearn

在每個示例中，這些模式一起工作以實現不同的用途。對于 Thomson Reuters，它目的是數據處理、實用、快速掃描和多任務處理；對于 FutureLearn，它目的是讓用戶深思熟慮的閱讀、非正式的學習、反思以及以及結識志同道合的人。產品的用途決定了它所采用的設計模式。

Thomson Reuters 的布局是基于面板和掛件，允許用戶執行多任務。緊湊的設計，以適合展示大量的信息在屏幕上。密度是通過選擇狹小的間距、緊湊的控制方式、靈活的布局和排版，例如更小字體和相對較小的標題。而與之相反，FutureLearn 的布局要寬敞得多。每個屏幕通常都集中在一個任務上，例如閱讀文章、參與討論或完成互動練習。頁面的布局大多是單列，有高對比度的排版：包含大個頭的標題，粗大的控件，以及大量的留白空間。

設計模式的選擇受多種因素的影響。其中一些來自產品所屬的領域，以及其核心功能：功能模式。例如，要使用交易和市場分析軟件，您需要習慣任務欄、數據字段和網格、圖表和數據可視化工具。對于在線學習網站，可以是文章、視頻、討論區、進度指標和互動活動。一個電子商務網站很可能包括一個產品展示，列表篩選，購物車和購物結算。

產品的道德觀（或品牌，取決于你對品牌的定義）也形成了模式，這些模式共同塑造了一個產品是如何被感知的；在本書中，我將把它們稱為感知模式 perceptual。我指的是聲音的聲調，排版和顏色的選擇，圖標的樣式，間距和布局，指定的形狀，交互方式，動效和聲效。去除感知模式，你感覺不出同類型、功能相似的產品之間有什么差異 。

盡管 HipChat 和 Slack 有著相似的用途和功能，但它們感覺很不一樣，主要是源于產品界面中傳達了品牌的形象 。

模式還受平臺共識的影響。由于特定于平臺的設計語言，產品需要有明顯的 web 的樣子或 app 的樣子。例如 iOS平臺的產品的與 Android 在操作方式和使用感受上會有很大的差異。

在創造數字產品時，是由很多種模式共同影響的 。這就是為什么設計起來很難。模式需要互動、相連的同時，還仍然可以無縫地一起工作。讓我們深入研究下。

1.?Design Patterns

設計模式的概念是建筑師克里斯托弗·亞歷山大（Christopher Alexander）在他的開創性著作「永恒的建筑方式以及設計模式」（The Time Way Of Build And A Pattern Language）中提出的。貫穿全書的的一個問題是為什么有些地方感覺如此生機勃勃并且感覺很棒，而有些地方卻感到沉悶和死氣沉沉。亞歷山大認為，地方和建筑帶給我們的感覺不僅僅是因為主觀情緒。同時是某些有形的和特定的模式的結果。即使是普通人也可以借鑒和使用它們來創造人性化的建筑。

模式是一種可重復使用的解決方案，并且可應用于解決設計問題。

Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem.（每個模式都描述了在我們的環境中反復出現的問題，然后描述了該問題核心解決方案。）——Christopher Alexander，《A Pattern Language》

模式語言包含253種建筑設計模式，大到城市的布局和道路系統，小到民居室內的光線和家具。

同樣，在新建頁面時，我們使用設計模式來解決常見問題：我們使用選項卡將內容分成幾個部分，并指出當前選擇了哪個選項；我們使用下拉列表顯示的選項列表來響應用戶的請求。

△ 圖例Bootstrap的模式，Bootstrap是一個響應式的前端開發框架

我們使用模式來提供反饋， 展示流程中還剩多少步，允許人們與其他人互動，查看和選擇項目。設計模式可以激發和鼓勵用戶，使任務更容易，創造一種成就感或滿足用戶的控制感。

△ 在UI Patterns上的一個很棒的案例「recognition over recall」

很多已完成和熟悉的設計模式 。它們利用人們的心理模型，使設計能夠直觀地被理解。那些要求用戶首先接受然后通過學習才能夠使用的新模式是很少的。使產品有別于競爭對手的不是它使用的模式的新穎性，而是這些模式是如何執行和應用的，以及它們如何相互關聯以達到設計目的。一套相互關聯的模式構成了產品界面的設計語言。

當我們開發一個產品的時候，就會隨之產生設計語言。我們并不總是指導設計語言是什么。有時候，有效而有趣的設計是建立在直覺的基礎上的，我們很難準確地闡明它們是如何工作的，以及為什么會起作用。設計師和開發人員可能本能地知道這一點，但直覺并不總是可靠的或發散的。設計師 Dan Mall 在他的文章「設計系統研究」中指出，設計系統的主要目標之一是「拓展創意方向」。如果你需要讓一群人始終如一地、可靠地、連貫地遵循一個創意方向，那么就需要把模式整理出來并且團隊共享。

當你清晰地表達出你的設計語言時，它就具有了可操作性和可重復性。你開始接近帶著系統性思維做設計的階段。例如，與其討論可以做那些調整從而能夠讓一個選項更加突出 ，你可以使用一組不同等級視覺沖擊力的促銷模塊。湯姆奧斯本（Tom Osborne）的視覺響度指南（visual loudness guide）是一個如何系統地處理按鈕和鏈接的例子。它們不是單獨列出，而是作為一個套件呈現，并且根據每個元素的視覺沖擊力會相應的擁有一個「響度」值。

△ 湯姆奧斯本（Tom Osborne）的視覺響度指南（The visual loudness guide）

當表達你的設計語言時，你需要擁有對設計系統有更多的控制權利。你可以用更深刻的方式來影響它，而不是做一些小的調整。如果您發現了設計的微調會對用戶體驗產生積極影響，那么你不僅可以應用在這里，更可以將其應用于整個系統的模式中。與其花幾個小時設計一個下拉列表，你可以花時間與用戶和領域專家在一起，首要明確的是系統中是否需要一個下拉菜單。當設計語言成為共享知識時，您可以不再關注模式本身，而是更多地關注用戶。

在整本書中，我們將討論很多關于數字產品的模式語言的表達、共享和文檔化。因此，我們將研究兩種設計模式：功能部分和情感部分。功能模式具體表現為用戶界面中具體的模塊，例如按鈕、標題、表單元素、菜單。情感模式是一種展現和傳達產品個性風格的視覺表達方式，如顏色和版式、圖標、形狀和動畫。

參照語言的語法，功能模式有點像名詞或動詞——它們是界面的具體的、可操作的部分；而情感模式類似于形容詞——它們是描述性的。例如，按鈕是具有明確功能的模塊，允許用戶提交操作。但是按鈕標簽中的排版樣式、它的形狀、背景色、邊距、交互狀態和動效都是屬于樣式的范疇，而不是模塊；它們描述按鈕長什么樣子。從前端的角度來看，模塊總是基于 HTML語言，感知模式通常是 CSS屬性。

設計系統還包含許多其他類型的模式：用戶流（例如表單提交的流程中，其中包含了錯誤和成功消息的狀態頁面）、面向領域的設計模式（比如 EdTech系統的學習模式和電子商務模式和引導用戶體驗模式）。這本書的重點是功能模式和情感模式，功能模式和情感模式是設計系統的核心組成部分。

當然，重點不只是模式本身，而是它們是如何進化、共享、相互關聯和使用的。

2. 共享語言

共享語言是協作的基礎。如果你在團隊中工作，你的設計語言需要分享給其他參與產品設計的人員。沒有共享語言的話，大家就不能有效地在一起協作——因為每個人對于他們想要達到的目標都會有不同的思維模式。讓我們回到按鈕這里案例。即使是界面中這樣一個基本的組件也可能有不同的理解。按鈕到底是什么？是一個可以點擊的線框區域嗎？頁面上可以鏈接到某個地方的交互元素？允許用戶將表單數據提交的元素？

AbbyCovert 在她的書「理清亂麻」（How to Make Sense of Any Mess）中建議，在考慮界面設計之前，首先應該先建立一種共享語言，共享語言是通過討論、審查和記錄我們的語言決策逐步建立的。這個想法既可以用來描述高層次的概念，也可以用于日常談論設計決策的語言。擁有共享語言意味著我們有相同的方法來命名界面元素和定義設計模式，或者在設計文件和前端架構中使用相同的名稱。

即使這樣也可能不夠。有時，一個群體中的人自認擁有相同的詞匯并表達性地使用就算是達成了共識。但他們在理解上仍然保持著根本的差異。例如，在項目中使用「場景（Scenario）」這個術語一年后，您可能會發現不同的人以完全不同的方式解釋它。這不僅是為了需要共享語言——我們還需要發展一套共享語言的使用方法。僅僅對按鈕達成一個共識是不夠的。人們還必須知道為什么用按鈕以及如何使用按鈕，在什么情況下需要一個按鈕，以及需要按鈕達成什么目的而服務。

假設我們在界面中使用一個名為「Sequence」的元素。通過將其表示為「序列」，我們的目標是向用戶傳達使用的步驟應該按照怎樣的特定的順序來查看。

△「Sequence」模塊舉例

理想情況下，參與產品研發的每個人都應該知道這個元素是什么：它的名稱和用途，為什么這樣設計，以及如何和何時使用它。這種共享知識越強，正確使用元素的機會就越大。設計師和前端開發人員應該擁有這些知識，也會對其他崗位（內容、營銷、產品管理）并且有一些想法的人有所幫助。

每個人都應該知道這個元素的名字叫「序列」，而不是「向導控制」或「幻想泡泡」。如果設計人員將其稱為「花哨泡沫」，開發人員將其稱為「向導控件」，并且用戶將其解釋為一組可選選項卡，那么你會意識到您的語言失效了。為什么用戶說明很重要？我們可以一起回憶下唐·諾曼的開創性工作——「日常事物的作品（The Design of Everyday Things）」，他在書中談到了系統映像（界面）和用戶模型（用戶通過與界面交互形成的對界面的感知）之間的鴻溝。如果用戶的交互心理模型不符合設計團隊提供的系統映像，系統的通過出乎意料的行為不斷的挑戰用戶。有效的設計語言則可以在系統映像和（假設的）用戶模型之間的搭建一座溝通的橋梁。

隨著您的語言變得更加豐富和復雜，您需要一種有效的方法來捕獲和共享它。在當今的網絡上，模式庫是支持設計系統的良好實踐的關鍵示例之一。

三、設計系統

1. 模式庫及其局限性

設計系統不僅包括模式，而且包括創建、捕獲、共享和發展這些模式的技術和實踐。模式庫是收集、存儲和共享設計模式的工具，以及如何使用它們的原則和指南。雖然最近將模式庫發布到網絡上是主流方式，但以各種形式文檔以及多種形式的共享設計模式已經存在了很長一段時間。

帕拉迪奧（Palladio）的「建筑四書」（ The Four Books of Architecture）于1570在威尼斯出版，是最重要和最有影響力的建筑書籍之一。它也是最早的系統文檔示例之一。帕拉迪奧從古羅馬建筑中汲取靈感，并提出了設計和建造建筑物的規則和詞匯，包含了原則和模式，并詳細地說明和解釋了它們是如何工作的。

樓梯類型：螺旋樓梯、橢圓形樓梯和直道樓梯。帕拉迪奧描述了如何和何時使用每種類型，例如，螺旋樓梯適用于「非常有限的位置，因為他們占用的空間比直樓梯少，但更難上去。」

在現代平面設計中，從早期的排版和網格系統到包豪斯設計原則，設計系統也存在了很長的時間了。在過去的幾十年里，公司以品牌手冊的形式記錄了他們的視覺身份，于1975年發布的「美國宇航局圖形標準手冊」就是其中一個比較著名的例子。

△ 美國宇航局圖形標準手冊中指導原則

在網絡上，模式庫最初是擴展的品牌標識文檔，側重于標志處理、企業價值和品牌風格，如版式和用色規范。然后擴展到包括用戶界面，以及使用指南。Yahoo 的模式庫是早期界面模式的案例之一。

△ Yahoo的模式庫

對于不像雅虎那樣有足夠資源的公司來說，模式庫通常會使用 PDF 或 wiki，這意味著它是靜態的，很難跟上時代的發展。當今許多設計師和開發人員的愿望是建立讓設計模式更動態或「實時」的模式庫，以及用于生成模式庫的實時代碼。是實時的風格指南或模式庫，而不僅僅是一個參考文檔——它是用于為數字產品創建界面的可靠工作模式。

△ MailChimp是網絡上早期動態模式庫的案例之一

2. 模式庫的局限性

模式庫有時被認為可以與設計系統互換。但即使是最全面、最有生命力的模式庫也不是系統本身。模式庫是一個有助于使設計系統更有效的工具。

模式庫不能保證更有凝聚力和一致性的設計。它可能有助于糾正小的不一致或使代碼庫更加健壯，但僅憑一個工具將對用戶體驗幾乎沒有影響。沒有模式庫可以修復糟糕的設計。即使有了模式仍然可能被設計得很糟糕，被誤用或者以一種和整體不一致的方式組合在一起。正如 TED 的 UX架構師 MichaelMcWatters 在一次采訪中指出的那樣：「即使是 SquareSpace 模板也可能被草率的設計思想所破壞。」相反，即使沒有完整的模式庫，也可以創建具有一致用戶體驗的產品（我們將在TED設計系統示例中的第6章中看到這一點）。

一個實時的模式庫與更好的協作有關。然而，您可能最終會遇到這樣一種情況，即只有一小部分人使用它，或者由于團隊之間缺乏溝通，可能會有太多的沒有關聯模式。當更新時，模式庫是共享語言的術語表。但這并不意味著沒有解釋的余地。圍繞解釋的討論通常是模式庫成敗的關鍵。

另一方面，模式庫有時被指責為扼殺創造力，導致網站看起來很相似。但是，模式庫反映了它背后的設計系統。如果您的系統從根本上是嚴格限制的，模式庫可以展示和強調剛性。如果它允許大量的創造性實驗，一個好的模式庫可以使實驗更容易展開。

現在可以找到越來越多的自動化工具和樣式指南生成器，因此可以比過去更快地建立一個組件庫。但是，如果沒有一個將模式和實踐結合在一起的一致設計系統的基礎，其影響將是有限的。當使用模式庫來是由基于完善的設計語言基礎時，它就成為一個強大的設計和協作工具。在此之前，它將是一個網頁上的模塊集合。

3. 怎樣才能形成一個有效的設計體系？

設計系統的有效性可以通過不同環節的協同工作，以幫助實現產品的目的的順暢程度來衡量。例如，「FutureLearn」的目的是「激勵每個人可以隨時隨地的終身學習」。我們可以問，界面的設計語言如何有效地幫助我們實現這一點，以及團隊的實踐有多有效？如果界面令人困惑，人們沒有實現他們的目標，那么設計語言就沒有效果。如果由于每次必須從頭開始創建模式而需要花費太長的時間來構建站點的新區域，那么我們知道我們的可以通過實踐加以改進。當設計系統將設計過程中的成本效益與用戶體驗相對于產品目的的效率和滿意度結合起來時，就可以認為是有效的。

4. 共同目的

在「系統中的思考（Thinking in System）」一書中，DonellaMeadors 解釋說，系統所具有的最重要的特性之一是它們是如何連接和組織的：子系統被聚合成更大的系統，而這些系統又構成了更大的系統的一部分。細胞是肝臟的一部分，而肝臟又是構成器官的一部分，器官又是構成整個你身體的一部分。沒有一個系統是孤立存在的。您的設計系統可以包含一個較小的子系統：控制頁面布局的編輯規則；或者，在某些縮放 logo 的制定方法。同時，它也是可以是更大系統的一部分：您的產品、您的團隊、您的公司文化。

△ 美國惠特尼藝術博物館的標志，一個「動態W」，是在其設計系統中的一個簡單但有標志性的適應性系統。W 回應周圍的藝術品和文字，允許一個巨大范圍的靈活布局的可能性。

在高效的系統中，我們看到子系統是連接在一起并朝著一個共同的目標：設計方法反映在前端體系結構中；設計模式遵循指導原則；模式語言在設計、代碼和模式庫中是一致的。我們從這些系統的運作方式中看到了和諧：它們的工作流程更有效率，它們產生的用戶體驗也更有意義和連貫。

5. 發現問題

裂痕是很容易看到。一個支離破碎的設計系統導致了一個支離破碎的用戶體驗，充滿了相互矛盾的信息。我們希望注冊賬號來訂閱資訊，我們也想讓用戶體驗我們的最新產品。我們希望他們通過這些步驟取得進步，但我們也需要確保他們對每個知識點進行打分。「Sequence」用于在頁面的一個區域內瀏覽每一步驟的內容；在另一個頁面中，它突然變成一個選項卡導航。該界面充滿了各種相同顏色的陰影和同一按鈕的多個版本。團隊的生產力也受到了影響：因為代碼亂的一團糟，改動一個細節費時費力不討好。設計師們把時間花在為相同的問題提供調整頁面修改解決方案，而不是理解和解決真正的用戶需求。

我們如何消除裂痕，使我們的設計系統更有效呢？通過理解設計系統是什么以及它是如何工作的。我們將首先從在新產品中設計語言是如何演變的。下面以一個虛構的十分鐘食譜網站為例。

案例，一個十分鐘的菜譜網站

想象一下，我們正在創建一個網站，與喜歡健康食品但又不想花很多時間做飯的人分享食譜。在開始提前準備好系統性思維以及定義好設計模式，然后我們從哪里開始呢？在我們開始之前，讓我們先做一些假設。我們對烹飪的領域有所了解，并且已經做了足夠的研究來指導我們的設計決策。所以我們想做的不是找出經驗應該是什么，而是看看我們如何為這個新的網站建立設計系統。

6. 目的和價值

我們首先要做的事情之一就是試圖了解我們的用戶是誰，他們的目標、需求和動機。從簡起見，我們定義他們是忙碌的專業人士，他們的目標是得到一個美味，健康的膳食，但又怕麻煩以及太花費時間做飯。我們有很多方法可以幫助他們實現這個目標：把他們和廚師對接起來，把食物送到他們家門口，建立一個交流工具。但是我們想通過一個十分鐘食譜的網站來做到這一點。

如果我們要用一句話來表達這一目的，就應該是這樣的：激勵和讓人們有能力在10分鐘內就能做出美味的健康食品。這個目標是產品的核心，它應該為設計和開發決策提供信息。團隊應該主動意識到并相信到這個目標，而不應該強迫接受。

另一個重要的因素是，我們試圖通過網站描繪的價值觀和精神想傳遞出來的價值觀。對我們來說，它可以是簡單的健康食品和用常見的食材就可以嘗試一下。而其他烹飪網站，是高級烹飪和掌握烹飪技能。

7. 設計原則

為了確保我們所做的每一件事都清楚地表達了產品的目的，我們需要建立一些基本原則和價值觀。他們可能會被非正式地討論或寫成宣言——重要的是，參與產品開發的人認同這些價值觀，并致力于這些價值觀。

例如，每個人在10分鐘烹飪食譜網站團隊理解時間的價值。驅動他們的是有時間限制的食譜，因此，他們都努力使網站上的交互方式快捷，簡單，快速和順暢。這一原則不僅體現在設計模式上，而且還體現在站點的性能、語音的聲調，甚至團隊的運作方式表達上。

這些原則可能不一定是官方的，甚至不一定寫下來。但是，團隊中需要達成一致共識的是保持每個人的努力和優先事項保持同步是關鍵所在。它還可以幫助決策：從哪一個特性首先構建和使用哪種方法，輸出用戶體驗流程，或者按鈕應該是什么樣子，以及字體的選擇。

8. 行為和功能模式

我們會找出能夠鼓勵或有助于我們的用戶一些關鍵操作，以幫助他們實現他們的目標。

• 我們希望人們總是選擇健康的家庭烹飪食物，而不是快餐或微波食品。這意味著我們的飯菜需要比微波食物看起來美味、健康和誘人。非常上鏡而且很美味，但看起來很容易做的的食物有助于實現這一目標。
• 我們希望人們能在十分鐘內就能取得作出好作品。這意味著我們需要在簡單的幾步將食譜展示完畢。這些步驟應當簡短、明確和重點突出。也許我們可以在每一步上都有一個計時器，以確保我們遵守十分鐘的承諾。
• 我們希望鼓勵人們隨心所欲，讓,他們感覺他們可以隨時就可以開始。從開始你已經擁有了所有的資料，而不是需要你去買昂貴的配料才能開始。就用戶界面而言，可以輕松勾選帶有略縮圖并且成分標簽達到這一點。
• 最后，我們希望鼓勵人們具有創造性和自發性，并享受樂趣。顯示哪些成分是可選的，哪些成分可以被替換。展示令人意想不到的組合并讓人么樂于嘗試。

當然，隨之網站的進展，設計細節也會發生變化，但是那些關鍵的行為將保持不變。這些行為體現在核心功能模塊和網站的交互方式上：成分縮略圖，食譜卡，步驟序列，計時器。

9. 美學與知覺模式

大約在同一時間，我們需要弄清楚希望使用十分鐘烹飪食譜網站的人感知到什么。給人感覺簡單而樸實的，還是迷人而復雜的？是認真嚴肅的還是讓人愉悅的？大膽還是沉悶？功能派的還是情感派？個性的審美偏好是什么，我們想通過頁面傳達出什么樣的價值觀？我們需要開始考慮品牌。

我們熱衷于健康食品，所以我們希望它通過網站傳達出來。也許它會有一種有機的，溫暖的，健康的感覺。我們也相信烹飪不需要很多的計劃和準備；它可以是自發的和有趣的，而且你可以在十分鐘的時間內進行試驗和創新。

在這一點上，我們可能會把一些相關的素材手機到情緒板中，并開始嘗試視覺效果，直到有正確的品牌感覺為止。13一旦我們做到了這一點，我們就可以定義核心視覺品牌元素，如版式、調色板、音調，以及增強品牌識別度的特征；例如，插圖、圖像樣式、特定形狀、獨特的交互方式，它們抓住了我們服務的本質，以最佳方式呈現內容。

假設我們想出了一個溫暖的，土色的調色板，手工繪制的圖標，注重可讀性的排版，健康食品的高質量攝影，以及一些簡單的界面元素和控制。這些風格將成為我們的感知模式。

10. 共享語言

在這個過程中，我們將通過選擇引用某些領域概念來做出設計語言決策。什么是「食譜」？我們所說的「步驟」是什么意思？是什么使「令人愉快的簡單」的互動方式？我們選擇的詞語會影響團隊的思維方式。間接地，他們影響到設計出來的樣子。

首先，模式和語言選擇會議比較隨意一些共享給團隊。但隨著我們的團隊和產品的不斷發展，語言也會發展。最終，我們將需要一種更結構化的方法來捕獲、共享和組織我們的設計詞匯表。

現在我們已經用通過一個虛構的站點案例簡單地體驗了一遍設計過程，下一步，我們可以利用現實世界的數字產品和公司的例子來看系統是如何演變的。

原版電子書購買地址：https://www.smashingmagazine.com/design-systems-book/

圖片素材作者：Alexandra Zutto

「解讀Design System」

• 《超詳細的「Design Systems」讀書筆記》
• 《像做產品一樣對Design System進行前期規劃》
• 《如何規避 Design System 架構設計中的邏輯陷阱？》