本篇文章介紹設計體系的發展及構建等內容。建立一個完整的設計體系需要一個漫長的過程，要能持續地進行系統性的規劃并執行。接下來，我們看看作者對此的分享。

數字化時代，設計體系已成為許多公司和組織實現一致和可持續品牌形象的重要工具。設計體系不僅可以使設計過程更加高效，還可以提高設計質量和用戶體驗，從而幫助公司在激烈的市場競爭中脫穎而出。

在設計領域，設計體系是指由設計原則、指南、組件庫等多種元素組成的系統性方法，旨在確保設計在不同媒介和平臺上保持一致性。

設計體系不僅規范了視覺層面，還包括用戶交互、信息架構、內容策略等多個方面。因此，建立一個完整的設計體系需要進行系統性的規劃和執行。

本文將追溯設計體系的發展，介紹建立設計體系的步驟和最佳實踐，并分享一些成功案例和實用建議，以幫助我們在建立適合自己的設計體系時更加得心應手。

一、概述

阿拉 . 霍爾馬托娃在他的著作《設計體系：數字產品設計的系統化方法》中對設計體系做了明確的定義：

“設計體系是為了實現數字產品的目的而組織起來的一套相互關聯的模式與共享實踐?！?/p>

模式是指界面中那些重要的要素，比如用戶流程、交互方式、按鈕、文本框、圖標、色彩、排版、文案等等；實踐則指我們要如何創建、捕獲、共享和使用這些模式，尤其是在多人協作時的創建、使用的方法。

一個設計體系是一個不斷發展的生態系統，一個有效的設計體系，勢必是經過一個個真實的場景驗證。在一次次的應用中打磨，才筑成了今日模樣，它不僅是一套組件庫，或是一組顏色版，亦或只是一個設計規范指南。

它是整個產品設計體驗和所塑造品牌氛圍的指導，蘊藏著產品獨樹一格的性格底色?；驕赝駜刃?，或熱辣奔放，各有千秋不盡相同。

設計體系的好處早就耳熟能詳：

• 團隊在設計系統上的共識有助于團隊成員從宏觀到微觀都有一致的價值觀，從而做出更為一致的設計決策。
• 統一的流程模塊、交互規則和組件庫讓設計風格更為連貫統一，避免團隊內的重復性勞動，提升團隊協作效率。
• 預構建的組件往往已經經過測試，已經明確了大多數的用例和邊緣情況，這可以讓更新迭代更為順暢。

總之，建立設計體系，可以降本增效，減少團隊在基礎工作上花費的時間，把精力釋放出來，更專注于用戶的體驗和產品的價值。Draw less，Think more，Do Less，Get More。

二、發展大事件

1. “模式”的出現

早在上個世紀70年代，建筑師克里斯托弗 . 亞歷山大（ChristopherAlexander）在他的開創性著作《建筑模式語言》（A Pattern Language: Towns, Buildings, Construction ）和《建筑的永恒之道》（The Timeless Way of Building）中提出了環境和建筑向我們傳遞感受的方式并不局限于主觀情緒，還可以是某種特定模式產生的結果。

他在書中寫道：

“每種模式都描述了一個在我們的環境中反復出現的問題，以及關于這個問題解決方案的核心思想?！?/p>

并在書中描述了253種模式。在亞歷山大的描述中可以看出，“模式”是一種用于解決特定設計問題的，能復現、可復用的方案。

2. 蘋果HIG-設計指南文檔

1987年蘋果發布了第一款彩屏電腦，同時也發布了第一部人機界面指南（HIG），彼時的HIG是一本厚厚的說明指南書。盡管此時計算機時代才剛剛起步，這本書中的基本原則依舊適用。

書中說“視覺一致性的目的是為用戶構建一個可信賴的環境，一致性讓用戶對新的程序更易上手”，“培養使用習慣可以讓用戶降低使用成本”等。

這些歷久彌新的原則便是設計中的“道”，始終指引著一批又一批的設計者們。

3. 門戶巨頭雅虎的YUI框架

時間來到2006年，雅虎將YahooDesignLibrary升級成YahooLibrary框架，簡稱“YUI”。

對比之前的設計文檔，此時的設計師和工程師們已經結構化的對圖形界面進行設計，并通過文檔的形式做“線上”“線下”的規范。

對比之前的規范文檔，這種框架顯然靈活性更強，也能更及時的更新和同步。

4. 原子設計

原子設計（Atomic Design）是由Brad Frost在2013年提出的一種前端設計方法論，它借用了化學中的原子概念，將界面設計元素分解成更小的組件，以建立可擴展、可重用和一致的設計系統。

原子是一種最基本的構件，代表著設計系統中不可再分割的最小組件，例如按鈕、文本字段等。原子可以通過組合成為更大的”分子”，例如搜索欄、注冊表單等。

多個分子可以進一步組合形成更復雜的”有機體”，例如導航欄、文章列表等。最后，不同的有機體組合在一起形成完整的界面。

5. 依托系統的設計體系：Apple HIG 和 Google Material Design

在移動互聯網時代，Apple和Google已成為兩個極具代表性的巨頭。Apple的設計指南被稱為HIG（Human Interface Guidelines），Google的設計指南則被稱為MD（Material Design）。

這兩份指南被奉為行業圣經，是UX設計從業人員繞不開的存在。

2014年夏天的Google I/O 大會上，Google 發布了一門全新的設計語言Material Design。 做為一門跨平臺和終端的設計語言，谷歌將它應用到Android、Chrome OS 和網頁等所有平臺上。

MD設計體系，不僅包含了完整的設計指南和設計原則，還提供了豐富的設計資源和代碼庫，能夠幫助設計師和開發者快速地開發和發布高質量的應用程序和網站。

MD設計體系具有高度的適應性，可以在各種屏幕大小和設備上實現一致性的用戶體驗，在移動互聯網時代得到了廣泛的應用和認可。

6. 服務商化的設計體系

近些年，框架化的設計體系可謂遍地開花，2015的AntDesign，2017出現的AtlassianDesign、CarbonDesign，2020的TDesign等等設計體系大量涌現。設計體系的態度逐漸從“跟我學著做”走向了“用我的資源”。

框架化的設計系統將影響力和價值進一步擴大到組織外部，一定得依托一個對外開放的技術平臺，把自己變成一個 UI Library。

研發框架的完善，設計體系的靈活定制化，以及資源工具的完備，已經讓生態化的設計體系成為一體化定制的解決方案。

設計體系的發展經歷了從系統化管理到數字化設計、從基于模式到用戶體驗、從面向用戶到數據驅動的演變過程。

這些發展趨勢不僅反映了設計體系的不斷完善和演變，也為設計師和設計團隊提供了更多的設計資源和工具，來應對不斷變化的設計需求和挑戰。設計體系的未來，也將會繼續向智能化、個性化、可持續化等方向發展。

三、設計體系的構成

根據不同的業務目標和使用場景，設計體系的構成也會有所不同。

比較經典常規的構成是3個部分：

• 設計價值觀與原則
• 設計指南
• 組件庫和工具包

1. 設計原則

1）設計原則與價值觀

價值觀是信念是愿景是核心意識形態，就像是北極星一樣永遠指引著方向。而依據價值觀和愿景所制定的設計原則則是設計體系的靈魂，是團隊理解什么是“好設計”的共識指南和一致標準。

AntDesign的價值觀是“自然、確定性、意義感和生長性”，在設計模式模塊拆解的設計原則比如“直截了當”“及時反映”等緊扣著用戶端對組件的確定性；“簡化交互”、“巧用過渡”等，則是自然價值的外顯。

2）什么是好的設計原則

好的設計原則一定是實用可操作、貼切、并且有觀點的，而非假大空的華麗詞藻堆砌。

早期的MD在開篇就表達了自己的期望：希望在多終端平臺擁有統一和諧的使用體驗?！安馁|即隱喻”（Material is the metaphor）、“醒目，圖像，刻意”（Bold, graphic, intentional）“有意義的動效”（Motion provides meaning）是它的設計原則 。

基于這些原則，我們來看看它做了什么：

• 為了適應各異的屏幕尺寸，放棄了立體且復雜的擬物設計語言，采用“卡片”這種最靈活的組件作為基石，并向印刷品的視覺效果傾斜。
• 為了適配不同的像素密度，以dp作為基礎尺寸單位。
• 為了適應各異的輸入方式，強調了“隱喻”作為操作提示的意義。

2. 設計指南

由于價值觀和使用場景的差異，不同的設計指南結構和重點也不盡相同。比較典型的設計指南可以分成三個大類：

• 風格樣式指南
• 模式指南
• 內容指南

1）風格樣式指南

風格樣式指南是指視覺表現層的語言模式，以及這些要素在界面中的組合及使用方式。如配色、布局、字體、圖標樣式、動效、間距柵格、陰影、暗黑模式等等。

風格樣式是讓產品脫穎而出的強大力量。

一方面不同的樣式直觀的表達了不同的品牌氛圍，傳遞品牌形象。另一方面，風格樣式滲透在系統的各個部分，它們可以將系統的不同部分連接起來，讓用戶感受到模塊之間的統一性。

AtlassianDesignSystem指南中基礎部分將可用性，顏色，圖標，插畫，LOGO，空間和字體進行了定義。

2）模式指南

模式是界面中的有形構件。它們的目的是讓用戶能完成某種行為或者激勵用戶完成某種行為的物理體現。它們的執行、內容、交互、視覺表現可能會變化，但所對應的行為應是相對穩定的。

不同的定位讓模式指南的劃分有明顯區別。

蘋果HIG將模式和操作行為對應，分為拖放、數據輸入、反饋、文件管理、全屏顯示、啟動、直播觀看App、載入、管理賬戶、管理通知、模態化等等，全方位概括了跨平臺的各種使用行為。

著眼于企業級業務產品的設計體系-AntDesign則將模式劃分為反饋、導航、數據錄入、數據展示、數據格式、文案、按鈕、數據列表。為企業產品中反復出現的設計問題提供通用的解決方案。

3）內容指南

通常包括：文案語氣語法、聲音、數據可視化、插畫庫等等。有些系統會把內容的某些部分放在風格樣式指南中。

AntDesign將數據可視化、動效、圖形化內容單獨做了規范和說明，并提供了相對應的工具。

AtlassianDesign 則將包容性語言，語言和語法，詞匯，聲音和語氣，寫作方式，寫作風格做了詳細說明。

3. 組件庫和資源工具包

組件庫是包含可復用組件和元素的資源合集，是非常重要的設計資產。設計組件庫在設計過程中起到了提供一致性、提高效率、增強可維護性、促進協作和提升用戶體驗的重要作用。

通過建立和使用設計組件庫，設計團隊能夠更好地管理和應對設計需求，提高設計質量和工作效率。

設計資源包是指一組設計相關的資源文件和工具，它們用于輔助設計師進行設計工作和項目開發。為設計師提供了豐富的素材、工具和規范，能夠加快設計速度、保持一致性、支持多平臺設計，并促進團隊協作。

AntDesign和TDesign為設計師提供多種設計工具的組件資源包，確保使用方便。ATLASSIANDesign則提供了色彩工具、字體、LOGO庫、插畫庫等資源的下載入口。

四、如何構建設計體系

市面已經有很多成熟方便的設計體系可供使用和參考，但如果想要適配自己設定的設計目標，適配自己的業務場景，就需要定制自己的設計體系。

比如PC端，移動端，大屏、收費電子屏等每一種場景對應的設計體系都會有所不同。

定制構建設計體系可以參考以下流程：

1. 明確設計目標

在建立設計體系之前，需要明確設計的目標。例如，你可能想要提高產品的用戶體驗，減少設計開發的時間和成本，或者想要統一產品品牌形象。

明確目標有助于確定設計體系需要包括哪些元素和資源，以及如何衡量設計體系的成功。

2. 收集和分析資料

在建立設計體系之前，需要進行資料收集和分析。

這包括：

• 收集并分析現有的設計資料，例如品牌標識、圖標、顏色、字體、布局方式、交互方式等。
• 確定關鍵行為——調查和分析關鍵用戶需求和行為，以確定設計體系需要支持哪些用戶場景和使用情境，以及如何優化用戶體驗。

3. 定義設計原則和準則

設計原則和準則是設計體系的核心元素之一，可以指導設計師和開發人員在設計和開發過程中保持一致性和高質量的標準。

設計原則是關于設計哲學和思想的基本原則，如簡潔、一致、可用、易學等。

以下是幾個常用設計體系的設計原則，可供我們在建立自己的設計體系時參考。

4. 建立設計指南和組件庫

設計體系通常包括一套設計指南和組件資源庫做為設計資產。

Ant Design是企業級設計體系解決方案比較細致全面的一個，我將它的設計指南和組件庫分類邏輯進行了梳理，可以做為自己做指南和組件庫的分類邏輯參考。

Ant設計指南分類邏輯：

Ant Design組件庫分類：

5. 測試和優化設計體系

設計體系的建立不是一蹴而就的，建立設計體系后，需要對其進行測試和優化。

這包括：

• 在真實的用戶場景下測試設計體系的可用性和一致性，如通過用戶調查、用戶反饋等方式。
• 不斷跟蹤和分析用戶反饋和使用數據，以確定設計體系的成功和優化方向。
• 隨著業務和技術的變化，不斷更新和完善設計體系。

建立設計體系是一個漫長而持續的過程，需要不斷地調整和改進。通過執行以上步驟，你可以建立一個系統化的設計體系，為產品和品牌的長期發展提供持續支持和保障。

五、常用設計體系盤點

國內：

• 螞蟻AntDesign
• 騰訊TDesign
• 頭條ArcoDesign

國外：

• Ios人機交互規范
• Material Design
• AtlassianDesign
• IBM CarbonDesign
• Microsoft Flunt Design