高分經典書籍《設計系統》 第一章：標準的力量

這篇文章來自于invision出品的書籍，圍繞規劃、設計、構建和實現設計系統的實踐經歷來指導讀者，其中包含了經驗豐富的專家的真知灼見和一手經驗。我很喜歡，也分享給大家，推薦閱讀。這將會會一個系列，一共有7章，感興趣的話，持續關注吧。

書籍的知識深度是設計短文無法比的，這篇文章比較長，但建議耐心看完，假期也別忘記給自己充充電。當別人都在刷劇游戲時，你在學知識，肯定賺大了~

譯文：

去開始著手設計一個設計系統往往會讓人感到畏懼，有太多事情需要考慮——設計風格，怎樣模塊化和可適配化地進行設計，它將如何被其他團隊使用，以及如何向公司的決策者推動這個想法。到底要從哪一方面開始著手設計呢？

要解決大問題，可以將它分解成若干小問題。在進入設計流程之前，首先需要考慮好參加設計系統的成員以及團隊的協作方式。一旦找到合適的人組建團隊，你就可以開始思考系統的設計語言了，包含顏色排版，間距等等。視覺設計語言將會是UI樣式庫的基礎——一系列能被快速組裝并形成界面的組件。

現在我來分享下，如何開始一步一步設計你的設計系統吧。

誰應該參與

在你開始設計系統的工作之前，花點時間考慮一下你需要的團隊，誰需要參與。你需要的不僅僅是設計師。以下是一份清單，列舉了創建一個高效的設計系統所需要的團隊成員技能：

• 定義設計系統視覺元素的設計師
• 創建模塊化、高效代碼的前端工程師
• 確保你的系統符合WCAG等標準的可用性專家
• 能夠幫助團隊確定系統聲音和語調的內容策略師
• 幫助你了解客戶需求的用戶研究員
• 可以確保系統在所有設備上能快速載入的性能專家
• 確保設計系統符合客戶需求的產品經理
• 在整個公司內領導和調整目標的領導者

當你確保在設計系統團隊中擁有上述技能的各類人才后，請確定每個領域的負責人。這些人應該能夠確保決策得以推動。了解設計系統團隊中支撐各自領域的成員。在強有力的領導下，擁有一支由專家組成的團隊，你的下一個任務就是建立正確的團隊模式來幫助你實現目標。

1. 選擇正確的團隊模式

將人們聚集在一起合作的團隊模型與創建設計系統團隊一樣重要，在“一個設計系統的團隊模型”中，設計系統的資深人士Nathan Curtis概括了3個被許多公司使用并流行的團隊模型。

獨立式團隊模型：“霸主”管理設計系統。

△ 圖1:獨立式設計系統團隊模型—— 1人控制一切。圖片由Nathan Curtis提供。

集中式團隊模型:單個團隊將設計系統作為全職工作來維護。

△?圖2：集中式設計系統團隊模型——一個團隊管理系統。圖片由Nathan Curtis提供。

聯合式模型:來自整個公司的團隊成員聚集在一起開發系統。

△ 圖3：聯合式設計系統團隊模型——來自不同團隊的人員聚集在一起管理設計系統。圖片由Nathan Curtis提供。

上述的團隊模型都有相應的優勢和劣勢。獨立式模型固然高效且響應迅速，但一個人管理的事情太多，主負責人會成為完成諸多任務的瓶頸。另一邊，集中式模型可以很好的維護系統，但是這個團隊與客戶需求的溝通可能不如他們對用戶研究的參與那么緊密。最后，聯合式團隊模型對來自用戶需求和產品特性的需求有很好的洞察力，但這個小組可能會忙于除了構建設計系統以外的工作。

許多團隊正在從獨立式的模型轉向集中式或聯合式的模型。正如Curtis在他的文章所提及的那樣，單人管理的模式是難以擴展的，集中式或聯合式團隊模型通常更適用于擴展設計系統。

為了回應柯蒂斯的文章，我寫了關于Salesforce團隊模型的文章。當我在Salesforce的Lightning設計系統團隊任職期間，我們結合使用了集中式模型和聯合式模型。在許多和Salesforce一樣大的企業組織中，僅憑一個集中式的設計系統團隊是不夠的。由于我們涉及到非常多的關鍵參與者，而且還跨越了產品和平臺的范圍，所以需要一種更加可持續的方法。

△?圖4:我們在Salesforce中使用的一個混合式的設計系統團隊模型——由一個核心團隊和來自其他團隊的成員一起來管理和維護設計系統。

盡管Lightning設計系統有一個核心團隊，但Salesfore生態系統中的許多產品和功能領域也有一些核心貢獻者，他們來自各個業務部門并組成工作小組，提出新的想法，并要求設計系統不斷發展。用戶研究員、可用性專家、產品設計師和用戶體驗工程師與核心設計系統團隊合作，共同使用并幫助建立模塊、組件和整體設計系統。工程師完善所有的代碼，以確保系統的性能和保證上線質量。

盡管由于主負責人可能會成為團隊的瓶頸，在大多數團隊中獨立式模型不那么受歡迎，但在某些情況下它可以很好地發揮作用。米娜·馬卡姆(Mina Markham)在為希拉里·克林頓(Hillary Clinton)開發新的宣傳網站時，幾乎沒有時間去爭取任何支援。她創建了一個名為Pantsuit的設計系統，幫助很多地方的團隊加快設計和生產物料，同時保持整個競選運動品牌的一致性。獨立式模型讓Markham首先關注的是速度，第二是周期，這可能與典型企業采用的做法不一樣。

△?圖5:Pantsuit——米娜·馬卡姆(Mina Markham)創建的一個給希拉里·克林頓(Hillary Clinton)競選運動的設計系統

當你需要決定采用什么團隊模型時，請考慮你的目標。如果你想團隊能夠快速響應需求，那么最好使用獨立式團隊模型，盡管以后可能需要做一些工作，以便在其他團隊之間完全采用它。如果你希望團隊不僅能夠快速響應，并且一開始就鼓勵大家都參與進來，可以考慮集中式團隊模型。而為了獲得最大的參與感和共享權，聯合式模型是個不錯的選擇。在任何情況下請記住，設計系統是一個產品，所以要把它當做一個產品，而不是一個項目來做；你需要的是致力于維護和發展它的人。

隨著團隊和協作模型的建立，現在是時候開始你的設計系統了。就像任何新產品一樣，開啟工作的第一步是與客戶進行溝通。

2. 客戶調研

與任何產品設計的過程一樣，做研究是很重要的。誰會使用你的設計系統，怎么用？如果你的設計系統是為了配合其他團隊的工作流程而創建的，那么它將會被頻繁地使用。通過訪談用戶，你可以提前鎖定問題，定義有助于他人正確使用系統的原則，并將精力集中在最重要的事情上面。

其中一個比較少見的調研群體是你產品開源社區的成員。這類群體會出現在為客戶和合作伙伴社區提供開發者工具的組織里。如果你計劃將你的設計系統開源（成為一個潛在的大項目），那么你需要與潛在的貢獻者和消費者交流，以發現你的設計系統需要滿足哪些需求和用例。

再有就是高管、領導和管理層。了解他們的想法也很重要。你需要得到他們的支持和資助。傾聽他們的要求，并將其作為可執行的目標和指標來實現。這些要求可能是更快、更好的性能，以及提高UI質量等等。

提示：通過實踐研究，賦能構建設計規范

Isaak Hayes和Donna Chan在Clarity大會上發表了題為 "用實踐研究來賦能構建風格指南 "的精彩演講。其中提出了一系列有用的技巧，可以幫助你有效地對設計系統進行研究。通過用戶訪談，他們利用數據創建設計原則、度量標準和用戶故事。

有了從客戶訪談中得到的資料，我們可以開始進行整理。有兩種類型的界面內容清單需要進行整理和規范。

• 視覺語言（如間距、顏色和排版）的整理，這將有助于創建一個統一的視覺語言。
• 每個UI元素（如按鈕、卡片和排版）的清單，這將有助于創建一個UI組件庫。

首先我們先來關注全局視覺元素的整理。

創建視覺元素清單

當然，如果你正在為一個還不存在的產品啟動設計系統，你可以跳過這一步，直接跳到為新產品創建視覺語言那一章。

1. 整理視覺元素

當我們開始整理的時候，最好查看一下CSS，對應上述視覺清單里面所有元素進行整理。使用類似CSS Stats這樣的工具來看看你的產品樣式表有多少規則和屬性。更重要的是，它還會顯示你有多少種獨特的元素、字體和字號。它還有統計圖，可以看到間距和大小值的數量。這是一個很好的方法，可以讓你很方便地對樣式進行精簡。

譯者注：CSS Stats工具的地址https://cssstats.com/

△?圖6:使用CSS Stats發現Facebook有38種獨特的文本顏色

如果你在Sketch中整理樣式規范，可以使用sketchup - style - inventory插件來整合所有顏色、文本樣式和符號。它還提供了合并相似樣式的能力。（彩云注：inventory這個插件原來挺好用，但作者太忙，好長時間沒更新了，貌似最高只能支持到sketch49）

2. 創建視覺設計語言

必須承認，作為一個藝術院校畢業的學生，設計系統中的視覺設計語言是我最喜歡的部分。我喜歡思考色彩理論、排版和布局，這些都是任何設計系統的核心。如果將設計系統的每個組件拆開，我們會發現這些基本元素構成了它的視覺設計語言：

• 顏色
• 排版（大小、字間距、字體等）
• 間距（邊距，填充，定位坐標，邊框間距）
• 圖像（圖標、插圖）

根據需求，你還可以加入以下內容，進一步規范用戶體驗：

• 視覺形式（深度、層級、陰影、圓角、紋理）
• 動畫
• 聲音

以按鈕這個簡單的組件為例，分析這些設計元素在其中扮演的角色。一個按鈕通常會包含背景顏色，文字的樣式，以及間距。在文字旁邊可能會有一個圖標用于創建視覺提示。在邊緣上的描邊可以作為簡單的裝飾，甚至可以在邊角處做圓角。最后，懸停在按鈕上或點擊按鈕可以觸發動畫或聲音作為反饋給用戶。雖然一個按鈕看似簡單，但也需要通過一系列的設計決策才能讓它生動地展現出來。

△?圖7：Buzzfeed Solid設計系統中的各種按鈕。按鈕組件應用于點擊事件或鏈接，有以下幾種類別：主要、次要、透明、反色、白色、禁用、帶圖標、社交分享按鈕、小型按鈕、帶圖標的小型按鈕，以及可以根據自己的需要著色的自定義按鈕。

3. 設計標簽

在深入探討視覺設計標準之前，我想先討論一下設計標簽。設計標簽是設計系統實現原子化的基礎。簡單來說，設計標簽是一系列樣式參數被梳理和歸納后的語義化命名，用于抽象出你要管理的設計屬性。由于所有設計標簽都存儲在同一個地方，可以更輕松地實現一致性，同時減輕管理設計系統的負擔。

如：SPACING_MEDIUM: 1rem

在設計標簽中，你可以存儲顏色、間距、尺寸、動畫時長等數據，并將其分發到各個平臺。

△?圖8:Lightning設計系統中關于圓角設計標簽的例子

4. 顏色

你為設計系統選擇的顏色不僅僅是品牌的延伸，UI使用的顏色更多是用來傳達以下信息：

• 反饋——錯誤和成功的狀態
• 信息——圖表和導航元素
• 層次——通過色彩和排版顯示結構和主次

一個設計系統中常見的顏色包括1-3種代表品牌的主色調。如果這些顏色都不能很好的作為鏈接和按鈕的顏色，那么你最好有另外一個顏色去代替。在鏈接和按鈕背景中使用相同的顏色是個好主意，因為這樣可以讓用戶更容易識別可交互的元素。

此外你還需要中性色用于UI背景和邊框，通常是灰色。最后，你要有一系列如錯誤、警告和成功等狀態的顏色。將這些顏色組合起來，看看它們在一起顯示的效果如何，然后根據需要進行完善。

△?圖9:Carbon設計系統中的色板和對應的標簽

較大的設計系統有時會給對象和產品添加顏色。例如，在Salesforce，我們對聯系人、銷售交易或組織等模塊都有設計對應顏色。我們也有針對產品的顏色，如銷售云、營銷云、分析云等。對于你的用戶，顏色能成為一個很好的導航工具。

△?圖10：Salesforce中模塊使用的顏色

為了保證產品可用性，使用顏色進行區分也會有局限性，因為色盲的人可能無法辨別某些差異。

提示：檢查顏色對比度

這里有一個檢查各種顏色對比度的工具供你使用，以確保所有在你產品上使用的顏色具備可用性，一定要檢查背景和文字顏色搭配的對比度。

http://www.webaxe.org/color-contrast-tools/

根據于你對色板精細度的要求，你可能會希望包含一系列的色階，需要與白色混合的輔助顏色以及與黑色混合的陰影顏色。有時你可能會用其他顏色代替白色或黑色，以避免顏色變灰，比如用橙色來使黃色變暗，這樣就不會出現棕色。

這些顏色的變化讓設計師有了選擇。但要注意的是，太多的選擇會導致與主設計不一致的情況出現。保持色調、陰影和中性調色板的精簡，以防止被濫用，同時又能保持靈活性。當你發現需要的時候，你可以隨時在色板范圍內增加更多的顏色。

△?圖11:Pivota的UI設計規范選擇用他們的設計標簽給出廣泛的顏色色調和陰影。雖然我個人更傾向于給出一組精簡的色值范圍就足夠了（如在Sass設計規范中看到的），但有些設計系統喜歡提供更多的選擇。仔細考慮哪種方法更合適自身，因為你需要平衡創意自由和規范一致性等問題。

5. 字體

字體和字重

你所選擇的字體會深深影響你的品牌和用戶體驗，所以需要選擇一個易讀性的系統字體。一般常見的系統字體，如Helvetica、Times New Roman或Verdana是一個很好的選擇，因為用戶對它們非常熟悉。一些公司更喜歡定制的網頁字體去體現他們的品牌，但是用的時候需要特別注意性能問題。

我工作過的大多數設計系統只包括兩種字體：標題和正文都用一種字體，代碼用monospace字體。有時標題還會額外多加一種字體，與正文字體相得益彰。大多數設計系統沒有必要再多，除非你的系統支持多個品牌。保持數量精簡的字體，不僅是排版設計的最佳實踐，還可以防止過度使用網頁字體帶來的性能問題。

△ 圖12:谷歌Roboto字體，顯示著不同的字重

現在流行使用非常細的字體，但是要注意可讀性的問題。如果你想使用輕或細的字重樣式，盡量在較大的字號情況下使用。

字體比例

在選擇字體的大小時，需要考慮可讀性。在大多數情況下，16px的字體大小相當好用。這是大多數瀏覽器的默認字體大小，對大多數人來說，它相當容易閱讀。我喜歡使用16px，因為它符合蘋果和谷歌使用的基于4為單位的指標（已經逐漸成為標準方法）。我建議將此作為你的基準，盡管我會在基于CSS的系統中使用它的相對格式，如1rem。

你可以使用比例標尺為標題或其他元素提供更大或更小的字體大小。比例標尺是一組數字，其中你有一個基數，使用一個比率來生成下一個數字。你不斷地將比率應用到新的數字上，從而得到下一個數字。

△圖13:比例標尺工具能幫助你找到合適自己的基準。它甚至提供了的Sass需要的功能，為你添加成套的設計標簽。

當你設計字體范圍時，一定要考慮到它如何應對各種屏幕尺寸以保持可讀性。你不會希望你的標題在移動設備上被放得很大。而對于其他大得多的顯示器，你有足夠的空間來提升尺寸。常見的方法是在大屏幕上放大標題。你也可以使用視窗單位，根據屏幕大小的百分比來縮放字體。

專業提示：響應式排版

人們使用很多方法來創建響應式排版。最近比較值得一查的是帶有CSS Poly Sizing的Fluid方法。Zell Liew的《響應式網頁排版規則》涵蓋了需要了解的基本原理和系統。

行間距

CSS中的行距或行高可以提升排版的可讀性和美感。雖然最佳的行高會根據字體和行長的不同而有所變化，但一般的經驗法則是領先于字體大小的1.4–1.5倍。W3C Web Accessibility Initiative建議使用1.5。

段落中的行距至少為半個空格，并且段落間距至少為行距的1.5倍。——Web內容無障礙指南2.0

這也使你行高的數值變得更有規律，但你不需要去計算它。即使在沒有度量單位的情況下定義行高，瀏覽器也會幫你完成這些復雜的計算。對于標題的行高，根據字體將其規范化。在大多數情況下，我發現1.25或1.125的數值非常好。

△圖15: Tachyons（譯者注：一款 css 框架）也用1.5作為正文，1.25作為標題。

6. 間距和尺寸

使用合理的間距和尺寸有利于設計系統看起來更有節奏感。這意味著你需要選擇基于規范和比例的單位。通過計算比率的方式得出的間距和尺寸，使設計系統更容易維護，布局也更合理。

當我設計一個Android應用的時候，我研究了谷歌的設計規范。我注意到一個規范，即元素之間使用8dp，外槽使用16dp。這讓我打破了之前使用10作為基準單位的習慣，因為我發現4作為基準單位的效果更好。

基于4的單位規范作為推薦單位越來越受歡迎，原因有很多。首先iOS和Android都使用和推薦被4整除或倍數的單位。標準的圖標大小格式（大多數操作系統都在使用）往往是基于4的（16、24、32等）單位，這樣它們更容易縮放。瀏覽器的默認字體大小通常是16。當所有的系統元素都使用了這個標準的時候，能讓你的產品看起來更整齊和規范，響應式的適配效果也會更好。

△圖16.谷歌的Android設計規范，學習這些規范讓我成為了一個更好的移動設備設計師。

對于水平間距，以8為基準的單位相當好用。你可以使margin和padding與字體大小相等或成比例。但對于垂直間距，我傾向于使用基于12的單位尺寸。由之前所說的1.5行高（默認字體大小為16px）計算后，得出了24這個數字。

偶爾你可能不得不打破這個規則。如果你在某些元素上加了1px的描邊，這個描邊就會破壞原本的規范方式，所以你可能需要使用padding或margin去減去這個數量。因此請根據實際情況去打破這個規則。

有時你希望某個元素隨著頁面空間放大或縮小，那么除非必要，應該盡量不設置它的寬度和高度。讓元素的尺寸隨著頁面空間的變化進行適配，以輕松地實現響應式設計。

7. 圖片

文件格式

對于圖標和插畫，我發現使用矢量格式(SVG)更符合可擴展式和響應式設計的效果。偶爾你需要使用到攝影作品，那么就要用類似JPG或PNG這樣的柵格化圖像格式。

對于大多數照片、插圖和圖表，你可以讓圖像100%顯示在容器內。基于頁面主動適配高度，而不需要限定它，這最適合響應式布局。如果你不希望圖片寬度達到全寬(例如半寬、三分之一或四分之一)，你也可以為圖片設定一些預設寬度并固定好尺寸，這樣圖像就可以縮放到更小的屏幕。

圖標設計

在繪制你的圖標之前，先圍繞它們提出你的設計規則。它們是填充還是描邊？線條粗細是多少？它們會使用1種以上的顏色嗎？它們會是什么尺寸？是否有外部包裹元素？

△ 圖17: Oracle Alta 描述的圖標樣式規范，如透視、間距和顏色。

你可以為不同的圖標類型設計不同的樣式。例如通用和操作類的圖標（如通知或設置圖標）可能是單色的，而導航圖標可能是多色、更有創意的。明確的準則將使你的圖標保持統一和規范。

△?圖18. 蘋果展示了其生態系統中的不同圖標類型：應用圖標、工具圖標以及它使用顏色時的規范。

插圖

插圖是為你的產品增添品牌特色的好方法。你可以將其用于空狀態、加載屏幕、彈窗和其他吸引用戶視覺興趣的組件。Shopify花了很大力氣為其平臺的所有空狀態頁面設計獨特的插圖，從而傳達強烈的品牌形象。

△?圖19:Shopify的缺省頁面插畫設計

和圖標一樣，插畫的設計規范同樣十分重要。

△?圖20:Al Power的插圖設計規范。

8. 視覺形象

視覺形象，又或者叫UI材質，與背景圖像、漸變和紋理、陰影和層級、圓角和邊框有關。這些視覺特質有助于強調和裝飾元素，以增加視覺層次和美感。無論如何，所有的這些視覺元素都需要標準化的指導。Google出色地展示了縱深和高程如何與組件分層一起工作（圖21）

△?圖21.通過z-indexes和陰影實現的Google材質設計中的縱深示例。

9. 動畫和聲音

當你定義視覺規范的時候，第一時間可能不會想到動畫和聲音。但動畫和聲音會對產品的使用體驗產生很大影響。你會希望把這些也系統化，以保證一致性。我個人對這項領域并不精通，但是有一些很好的例子。

△?圖22. IBM的動畫準則借鑒了他們豐富的產品和技術歷史。

△?圖23.雖然在視覺上沒有特別驚艷，但Microsoft將聲音API也加入到了他們開發指南里面。

10. 創建用戶界面庫

在我們整理視覺語言之前，我們會查看元素的視覺質量，比如顏色、間距和排版。現在我們需要對UI界面的實質部分進行整理，例如按鈕，卡片，列表、表單等部分。視覺語言庫關注的是視覺方法和元素在整體視覺層次下的效果，而用戶界面庫關注的是UI界面的實際組件。

縱觀所有設計元素以及它們在設計系統中所扮演的角色。盤點產品的所有界面元素，看看你到底需要解決多少設計債務，以及哪些元素是最常用的。溫馨提示，這個步驟可能會令人抓狂，因為大多數公司的UI界面里都存在著大量不一致的元素。

創建盤點清單，只需打開企業的所有產品，截取所有按鈕，表格，各種字體，圖像的圖片，然后將其收集在PPT或整個團隊可以看到的大黑板上。

你可以通過打印輸出或截圖來實現。聚集你的團隊成員（第二章所述）。讓他們通過共享演示或動手和你一起整理這個清單。這樣做的目的是收集正在使用的所有不同的組件，并對它們進行分類和合并。

提示：設計債務

如果你有高管或工程師對設計系統的必要性持懷疑態度，向他們展示你整理的清單，會成為有力的溝通工具。

有些人喜歡將清單的內容劃分為元素，組件，模塊，實用工具等。原子設計理論作為這種思路的例子，是一個很好的概念模型。但是歸根結底，所有的內容基本上都不會超出這個范疇，所以你可以按上述的劃分貼上標簽。總的來說，我看到的大多數設計系統一般這樣劃分：

• 元素（又稱基本元素，或原子）--這些都是小的、獨立的組件，如按鈕和圖標。
• 組件（又稱分子，或模塊）--這些通常是由小組件組裝成一個較大的組件，如搜索表單（包括一個表單輸入，一個按鈕，甚至還有搜索圖標）。
• 模塊（又稱組織）--這些是用戶界面的一個區域，就像側板導航。
• 布局--內容在頁面上的布局方式(比如頭部區域，然后是側邊欄和主要內容區域，然后是頁腳)

△?圖24:在《In From Pages to Patterns : An Exercise for Everyone》一書中，Charlotte Jackson介紹了進行UI盤點的方法。

在完成清單之后，你可以合并和刪除不需要的部分（可以在電子表格里面，如果你想更直接點，甚至可以直接在代碼層面進行重構）。同時記錄下組件是什么，什么時候使用它。這將成為你的UI庫（又叫樣式庫、組件庫，取決于你的團隊喜歡怎么稱呼它）。

△?圖25:美國政府機構18F有一個我最喜歡的UI庫：美國網頁設計標準。

大部分設計系統文檔包含組件的名稱、描述、實例和代碼。除此之外可能還會展示代碼、發布歷史、示例等，最重要的是能夠展示你的團隊完成工作所需要的內容。

△?圖26:來自Lonely Planet的Rizao組件庫

總結

打造一個設計系統不僅僅能幫助你團隊的產品更緊跟用戶體驗，而且還建立了一條溝通設計和開發的橋梁。通過創建一個由設計標簽定義的通用視覺語言，以及一系列在組件庫中的組件和樣式分類，都極大地改善設計師和開發人員之間的溝通，之后你對UI的編輯和更新都將更可控、靈活和全面。

歡迎關注譯者的微信公眾號：「彩云譯設計」