本篇文章介紹設(shè)計(jì)體系的發(fā)展及構(gòu)建等內(nèi)容。建立一個(gè)完整的設(shè)計(jì)體系需要一個(gè)漫長(zhǎng)的過程，要能持續(xù)地進(jìn)行系統(tǒng)性的規(guī)劃并執(zhí)行。接下來，我們看看作者對(duì)此的分享。

數(shù)字化時(shí)代，設(shè)計(jì)體系已成為許多公司和組織實(shí)現(xiàn)一致和可持續(xù)品牌形象的重要工具。設(shè)計(jì)體系不僅可以使設(shè)計(jì)過程更加高效，還可以提高設(shè)計(jì)質(zhì)量和用戶體驗(yàn)，從而幫助公司在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。

在設(shè)計(jì)領(lǐng)域，設(shè)計(jì)體系是指由設(shè)計(jì)原則、指南、組件庫(kù)等多種元素組成的系統(tǒng)性方法，旨在確保設(shè)計(jì)在不同媒介和平臺(tái)上保持一致性。

設(shè)計(jì)體系不僅規(guī)范了視覺層面，還包括用戶交互、信息架構(gòu)、內(nèi)容策略等多個(gè)方面。因此，建立一個(gè)完整的設(shè)計(jì)體系需要進(jìn)行系統(tǒng)性的規(guī)劃和執(zhí)行。

本文將追溯設(shè)計(jì)體系的發(fā)展，介紹建立設(shè)計(jì)體系的步驟和最佳實(shí)踐，并分享一些成功案例和實(shí)用建議，以幫助我們?cè)诮⑦m合自己的設(shè)計(jì)體系時(shí)更加得心應(yīng)手。

一、概述

阿拉 . 霍爾馬托娃在他的著作《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》中對(duì)設(shè)計(jì)體系做了明確的定義：

“設(shè)計(jì)體系是為了實(shí)現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式與共享實(shí)踐?！?/p>

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

一個(gè)設(shè)計(jì)體系是一個(gè)不斷發(fā)展的生態(tài)系統(tǒng)，一個(gè)有效的設(shè)計(jì)體系，勢(shì)必是經(jīng)過一個(gè)個(gè)真實(shí)的場(chǎng)景驗(yàn)證。在一次次的應(yīng)用中打磨，才筑成了今日模樣，它不僅是一套組件庫(kù)，或是一組顏色版，亦或只是一個(gè)設(shè)計(jì)規(guī)范指南。

它是整個(gè)產(chǎn)品設(shè)計(jì)體驗(yàn)和所塑造品牌氛圍的指導(dǎo)，蘊(yùn)藏著產(chǎn)品獨(dú)樹一格的性格底色。或溫婉內(nèi)秀，或熱辣奔放，各有千秋不盡相同。

設(shè)計(jì)體系的好處早就耳熟能詳：

• 團(tuán)隊(duì)在設(shè)計(jì)系統(tǒng)上的共識(shí)有助于團(tuán)隊(duì)成員從宏觀到微觀都有一致的價(jià)值觀，從而做出更為一致的設(shè)計(jì)決策。
• 統(tǒng)一的流程模塊、交互規(guī)則和組件庫(kù)讓設(shè)計(jì)風(fēng)格更為連貫統(tǒng)一，避免團(tuán)隊(duì)內(nèi)的重復(fù)性勞動(dòng)，提升團(tuán)隊(duì)協(xié)作效率。
• 預(yù)構(gòu)建的組件往往已經(jīng)經(jīng)過測(cè)試，已經(jīng)明確了大多數(shù)的用例和邊緣情況，這可以讓更新迭代更為順暢。

總之，建立設(shè)計(jì)體系，可以降本增效，減少團(tuán)隊(duì)在基礎(chǔ)工作上花費(fèi)的時(shí)間，把精力釋放出來，更專注于用戶的體驗(yàn)和產(chǎn)品的價(jià)值。Draw less，Think more，Do Less，Get More。

二、發(fā)展大事件

1. “模式”的出現(xiàn)

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

他在書中寫道：

“每種模式都描述了一個(gè)在我們的環(huán)境中反復(fù)出現(xiàn)的問題，以及關(guān)于這個(gè)問題解決方案的核心思想?！?/p>

并在書中描述了253種模式。在亞歷山大的描述中可以看出，“模式”是一種用于解決特定設(shè)計(jì)問題的，能復(fù)現(xiàn)、可復(fù)用的方案。

2. 蘋果HIG-設(shè)計(jì)指南文檔

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

書中說“視覺一致性的目的是為用戶構(gòu)建一個(gè)可信賴的環(huán)境，一致性讓用戶對(duì)新的程序更易上手”，“培養(yǎng)使用習(xí)慣可以讓用戶降低使用成本”等。

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

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

時(shí)間來到2006年，雅虎將YahooDesignLibrary升級(jí)成YahooLibrary框架，簡(jiǎn)稱“YUI”。

對(duì)比之前的設(shè)計(jì)文檔，此時(shí)的設(shè)計(jì)師和工程師們已經(jīng)結(jié)構(gòu)化的對(duì)圖形界面進(jìn)行設(shè)計(jì)，并通過文檔的形式做“線上”“線下”的規(guī)范。

對(duì)比之前的規(guī)范文檔，這種框架顯然靈活性更強(qiáng)，也能更及時(shí)的更新和同步。

4. 原子設(shè)計(jì)

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

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

多個(gè)分子可以進(jìn)一步組合形成更復(fù)雜的”有機(jī)體”，例如導(dǎo)航欄、文章列表等。最后，不同的有機(jī)體組合在一起形成完整的界面。

5. 依托系統(tǒng)的設(shè)計(jì)體系：Apple HIG 和 Google Material Design

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，Apple和Google已成為兩個(gè)極具代表性的巨頭。Apple的設(shè)計(jì)指南被稱為HIG（Human Interface Guidelines），Google的設(shè)計(jì)指南則被稱為MD（Material Design）。

這兩份指南被奉為行業(yè)圣經(jīng)，是UX設(shè)計(jì)從業(yè)人員繞不開的存在。

2014年夏天的Google I/O 大會(huì)上，Google 發(fā)布了一門全新的設(shè)計(jì)語言Material Design。 做為一門跨平臺(tái)和終端的設(shè)計(jì)語言，谷歌將它應(yīng)用到Android、Chrome OS 和網(wǎng)頁(yè)等所有平臺(tái)上。

MD設(shè)計(jì)體系，不僅包含了完整的設(shè)計(jì)指南和設(shè)計(jì)原則，還提供了豐富的設(shè)計(jì)資源和代碼庫(kù)，能夠幫助設(shè)計(jì)師和開發(fā)者快速地開發(fā)和發(fā)布高質(zhì)量的應(yīng)用程序和網(wǎng)站。

MD設(shè)計(jì)體系具有高度的適應(yīng)性，可以在各種屏幕大小和設(shè)備上實(shí)現(xiàn)一致性的用戶體驗(yàn)，在移動(dòng)互聯(lián)網(wǎng)時(shí)代得到了廣泛的應(yīng)用和認(rèn)可。

6. 服務(wù)商化的設(shè)計(jì)體系

近些年，框架化的設(shè)計(jì)體系可謂遍地開花，2015的AntDesign，2017出現(xiàn)的AtlassianDesign、CarbonDesign，2020的TDesign等等設(shè)計(jì)體系大量涌現(xiàn)。設(shè)計(jì)體系的態(tài)度逐漸從“跟我學(xué)著做”走向了“用我的資源”。

框架化的設(shè)計(jì)系統(tǒng)將影響力和價(jià)值進(jìn)一步擴(kuò)大到組織外部，一定得依托一個(gè)對(duì)外開放的技術(shù)平臺(tái)，把自己變成一個(gè) UI Library。

研發(fā)框架的完善，設(shè)計(jì)體系的靈活定制化，以及資源工具的完備，已經(jīng)讓生態(tài)化的設(shè)計(jì)體系成為一體化定制的解決方案。

設(shè)計(jì)體系的發(fā)展經(jīng)歷了從系統(tǒng)化管理到數(shù)字化設(shè)計(jì)、從基于模式到用戶體驗(yàn)、從面向用戶到數(shù)據(jù)驅(qū)動(dòng)的演變過程。

這些發(fā)展趨勢(shì)不僅反映了設(shè)計(jì)體系的不斷完善和演變，也為設(shè)計(jì)師和設(shè)計(jì)團(tuán)隊(duì)提供了更多的設(shè)計(jì)資源和工具，來應(yīng)對(duì)不斷變化的設(shè)計(jì)需求和挑戰(zhàn)。設(shè)計(jì)體系的未來，也將會(huì)繼續(xù)向智能化、個(gè)性化、可持續(xù)化等方向發(fā)展。

三、設(shè)計(jì)體系的構(gòu)成

根據(jù)不同的業(yè)務(wù)目標(biāo)和使用場(chǎng)景，設(shè)計(jì)體系的構(gòu)成也會(huì)有所不同。

比較經(jīng)典常規(guī)的構(gòu)成是3個(gè)部分：

• 設(shè)計(jì)價(jià)值觀與原則
• 設(shè)計(jì)指南
• 組件庫(kù)和工具包

1. 設(shè)計(jì)原則

1）設(shè)計(jì)原則與價(jià)值觀

價(jià)值觀是信念是愿景是核心意識(shí)形態(tài)，就像是北極星一樣永遠(yuǎn)指引著方向。而依據(jù)價(jià)值觀和愿景所制定的設(shè)計(jì)原則則是設(shè)計(jì)體系的靈魂，是團(tuán)隊(duì)理解什么是“好設(shè)計(jì)”的共識(shí)指南和一致標(biāo)準(zhǔn)。

AntDesign的價(jià)值觀是“自然、確定性、意義感和生長(zhǎng)性”，在設(shè)計(jì)模式模塊拆解的設(shè)計(jì)原則比如“直截了當(dāng)”“及時(shí)反映”等緊扣著用戶端對(duì)組件的確定性；“簡(jiǎn)化交互”、“巧用過渡”等，則是自然價(jià)值的外顯。

2）什么是好的設(shè)計(jì)原則

好的設(shè)計(jì)原則一定是實(shí)用可操作、貼切、并且有觀點(diǎn)的，而非假大空的華麗詞藻堆砌。

早期的MD在開篇就表達(dá)了自己的期望：希望在多終端平臺(tái)擁有統(tǒng)一和諧的使用體驗(yàn)。“材質(zhì)即隱喻”（Material is the metaphor）、“醒目，圖像，刻意”（Bold, graphic, intentional）“有意義的動(dòng)效”（Motion provides meaning）是它的設(shè)計(jì)原則 。

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

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

2. 設(shè)計(jì)指南

由于價(jià)值觀和使用場(chǎng)景的差異，不同的設(shè)計(jì)指南結(jié)構(gòu)和重點(diǎn)也不盡相同。比較典型的設(shè)計(jì)指南可以分成三個(gè)大類：

• 風(fēng)格樣式指南
• 模式指南
• 內(nèi)容指南

1）風(fēng)格樣式指南

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

風(fēng)格樣式是讓產(chǎn)品脫穎而出的強(qiáng)大力量。

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

AtlassianDesignSystem指南中基礎(chǔ)部分將可用性，顏色，圖標(biāo)，插畫，LOGO，空間和字體進(jìn)行了定義。

2）模式指南

模式是界面中的有形構(gòu)件。它們的目的是讓用戶能完成某種行為或者激勵(lì)用戶完成某種行為的物理體現(xiàn)。它們的執(zhí)行、內(nèi)容、交互、視覺表現(xiàn)可能會(huì)變化，但所對(duì)應(yīng)的行為應(yīng)是相對(duì)穩(wěn)定的。

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

蘋果HIG將模式和操作行為對(duì)應(yīng)，分為拖放、數(shù)據(jù)輸入、反饋、文件管理、全屏顯示、啟動(dòng)、直播觀看App、載入、管理賬戶、管理通知、模態(tài)化等等，全方位概括了跨平臺(tái)的各種使用行為。

著眼于企業(yè)級(jí)業(yè)務(wù)產(chǎn)品的設(shè)計(jì)體系-AntDesign則將模式劃分為反饋、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、數(shù)據(jù)格式、文案、按鈕、數(shù)據(jù)列表。為企業(yè)產(chǎn)品中反復(fù)出現(xiàn)的設(shè)計(jì)問題提供通用的解決方案。

3）內(nèi)容指南

通常包括：文案語氣語法、聲音、數(shù)據(jù)可視化、插畫庫(kù)等等。有些系統(tǒng)會(huì)把內(nèi)容的某些部分放在風(fēng)格樣式指南中。

AntDesign將數(shù)據(jù)可視化、動(dòng)效、圖形化內(nèi)容單獨(dú)做了規(guī)范和說明，并提供了相對(duì)應(yīng)的工具。

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

3. 組件庫(kù)和資源工具包

組件庫(kù)是包含可復(fù)用組件和元素的資源合集，是非常重要的設(shè)計(jì)資產(chǎn)。設(shè)計(jì)組件庫(kù)在設(shè)計(jì)過程中起到了提供一致性、提高效率、增強(qiáng)可維護(hù)性、促進(jìn)協(xié)作和提升用戶體驗(yàn)的重要作用。

通過建立和使用設(shè)計(jì)組件庫(kù)，設(shè)計(jì)團(tuán)隊(duì)能夠更好地管理和應(yīng)對(duì)設(shè)計(jì)需求，提高設(shè)計(jì)質(zhì)量和工作效率。

設(shè)計(jì)資源包是指一組設(shè)計(jì)相關(guān)的資源文件和工具，它們用于輔助設(shè)計(jì)師進(jìn)行設(shè)計(jì)工作和項(xiàng)目開發(fā)。為設(shè)計(jì)師提供了豐富的素材、工具和規(guī)范，能夠加快設(shè)計(jì)速度、保持一致性、支持多平臺(tái)設(shè)計(jì)，并促進(jìn)團(tuán)隊(duì)協(xié)作。

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

四、如何構(gòu)建設(shè)計(jì)體系

市面已經(jīng)有很多成熟方便的設(shè)計(jì)體系可供使用和參考，但如果想要適配自己設(shè)定的設(shè)計(jì)目標(biāo)，適配自己的業(yè)務(wù)場(chǎng)景，就需要定制自己的設(shè)計(jì)體系。

比如PC端，移動(dòng)端，大屏、收費(fèi)電子屏等每一種場(chǎng)景對(duì)應(yīng)的設(shè)計(jì)體系都會(huì)有所不同。

定制構(gòu)建設(shè)計(jì)體系可以參考以下流程：

1. 明確設(shè)計(jì)目標(biāo)

在建立設(shè)計(jì)體系之前，需要明確設(shè)計(jì)的目標(biāo)。例如，你可能想要提高產(chǎn)品的用戶體驗(yàn)，減少設(shè)計(jì)開發(fā)的時(shí)間和成本，或者想要統(tǒng)一產(chǎn)品品牌形象。

明確目標(biāo)有助于確定設(shè)計(jì)體系需要包括哪些元素和資源，以及如何衡量設(shè)計(jì)體系的成功。

2. 收集和分析資料

在建立設(shè)計(jì)體系之前，需要進(jìn)行資料收集和分析。

這包括：

• 收集并分析現(xiàn)有的設(shè)計(jì)資料，例如品牌標(biāo)識(shí)、圖標(biāo)、顏色、字體、布局方式、交互方式等。
• 確定關(guān)鍵行為——調(diào)查和分析關(guān)鍵用戶需求和行為，以確定設(shè)計(jì)體系需要支持哪些用戶場(chǎng)景和使用情境，以及如何優(yōu)化用戶體驗(yàn)。

3. 定義設(shè)計(jì)原則和準(zhǔn)則

設(shè)計(jì)原則和準(zhǔn)則是設(shè)計(jì)體系的核心元素之一，可以指導(dǎo)設(shè)計(jì)師和開發(fā)人員在設(shè)計(jì)和開發(fā)過程中保持一致性和高質(zhì)量的標(biāo)準(zhǔn)。

設(shè)計(jì)原則是關(guān)于設(shè)計(jì)哲學(xué)和思想的基本原則，如簡(jiǎn)潔、一致、可用、易學(xué)等。

以下是幾個(gè)常用設(shè)計(jì)體系的設(shè)計(jì)原則，可供我們?cè)诮⒆约旱脑O(shè)計(jì)體系時(shí)參考。

4. 建立設(shè)計(jì)指南和組件庫(kù)

設(shè)計(jì)體系通常包括一套設(shè)計(jì)指南和組件資源庫(kù)做為設(shè)計(jì)資產(chǎn)。

Ant Design是企業(yè)級(jí)設(shè)計(jì)體系解決方案比較細(xì)致全面的一個(gè)，我將它的設(shè)計(jì)指南和組件庫(kù)分類邏輯進(jìn)行了梳理，可以做為自己做指南和組件庫(kù)的分類邏輯參考。

Ant設(shè)計(jì)指南分類邏輯：

Ant Design組件庫(kù)分類：

5. 測(cè)試和優(yōu)化設(shè)計(jì)體系

設(shè)計(jì)體系的建立不是一蹴而就的，建立設(shè)計(jì)體系后，需要對(duì)其進(jìn)行測(cè)試和優(yōu)化。

這包括：

• 在真實(shí)的用戶場(chǎng)景下測(cè)試設(shè)計(jì)體系的可用性和一致性，如通過用戶調(diào)查、用戶反饋等方式。
• 不斷跟蹤和分析用戶反饋和使用數(shù)據(jù)，以確定設(shè)計(jì)體系的成功和優(yōu)化方向。
• 隨著業(yè)務(wù)和技術(shù)的變化，不斷更新和完善設(shè)計(jì)體系。

建立設(shè)計(jì)體系是一個(gè)漫長(zhǎng)而持續(xù)的過程，需要不斷地調(diào)整和改進(jìn)。通過執(zhí)行以上步驟，你可以建立一個(gè)系統(tǒng)化的設(shè)計(jì)體系，為產(chǎn)品和品牌的長(zhǎng)期發(fā)展提供持續(xù)支持和保障。

五、常用設(shè)計(jì)體系盤點(diǎn)

國(guó)內(nèi)：

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

國(guó)外：

• Ios人機(jī)交互規(guī)范
• Material Design
• AtlassianDesign
• IBM CarbonDesign
• Microsoft Flunt Design