鑽石舞台

前言：色彩作為設計體系落地的第一步，在上一篇中已有粗淺的闡述過程方法。在這一篇開始前先講一下設計系統的定義、發展與組成。主要內容會講通過按鈕來理清設計系統當中所包含的元素之間的關係與應用。

✦設計系統定義

設計系統目前還沒有完全統一的標準定義，相對比較主流的定義是明確標準指導的可重用組件的集合，組件根據標準指導可以組裝在一起以構建任意數量的應用程序。

。

✦設計系統的發展

近年來設計系統發展迅速，除了本身所處的互聯網領域外，還有像老牌金融企業高盛集團（Goldman Sachs）也建立了自己的Design at Goldman Sachs，以及傳統公共服務領域英國政府的GOV.UK Design System。這種多領域的應用，已經足夠說明這種模式或者說復用性的帶來組織效率提升與產出協作的標準化規模化的有效。

。

✦設計系統的組成

那麼相對主流的設計系統包括五個部分：品牌本身（簡介/設計原則/價值觀）、內容策略（用詞/詞彙表/文案風格）、基礎部分（顏色/字體/圖標/布局）、組件部分（通用/布局/導航/錄入/展示/反饋）、設計模式（全局性規則）。

。那麼今天將試圖通過通用組件按鈕為例，來理清設計系統中關鍵要素之間的關係。

。

✦01.什麼是組件？✦

先補充一下基礎概念，從什麼是組件開始，首先澄清一下組件、控件兩者的含義與區別。

組件的通識解釋是：對數據和方法的簡單封裝。強調高復用性，映射所對應現實中機械的構件概念。而它是可以沒有「外型」的。

控件是被可視化表達的組件，它具備組件復用性的同時，還有具體的「外型」。可以說UI層面所表現的都可稱為控件，而組件所包含範圍更廣。

。當然可以以各式各樣的房子為例來粗略比喻，理解組件是如何構成一個成品的。各式各樣的房子通過磚、瓦、門、窗這些基本構件組合，而這些構件本身又是由自然元素構成（元素=原子的統稱）。

組件分為設計組件（基於設計工具：Figma組件、Sketch組件）與代碼組件（基於開發平台：Web組件、iOS組件、Android組件）

。

✦02.基礎組件包含什麼？✦

以按鈕組件為例：解構構成組件的基礎元素，按鈕組件的構成包含以下兩個部分，這兩個部分通過歸類的方式，歸成三類基礎元素。先看以下兩個部分

按鈕背景Button-Background：顏色（primary）、形狀（border-radius:0px）、尺寸（medium）、陰影【Z軸空間】（box-shadow:none）、狀態（normal）

文字Font：顏色（text-color）、大小（font-size:14px）、內部間距【相對背景平面坐標XYZ】（padding/shadow）

構成組件底層的三類基礎元素(原子)

通常在大部分設計文章介紹設計時往往以形、色、字、構、質來解構UI的底層。但很少有進一步闡述這5個元素的關係。其實在進一步梳理的過程中，5個元素可以歸類成3個元素，分別是顏色、符號與位置，它們的屬性就涵蓋了顏色（語義、狀態）、符號（形狀、文字、圖標）、位置（平面間距與空間陰影）。

「符號概念補充：為什麼要引用符號學中的符號（具有代表意義的標識），對形狀、字體與圖標進行統一歸類？符號的定義：是被認為攜帶意義的感知。意義必須用符號才能表達，符號的用途是表達意義。它是由字母、數字、圖符以及它們的任意組合來指稱概念形式的統稱。是人類意識活動中信息交流溝通與表達的載體。」

理清三類基礎元素的關係

在對形狀文字圖標統一歸類符號之後，顏色、符號、位置，三者關係便非常清晰明了，顏色（光）對符號進行修飾從而使得符號能夠傳遞不同的語義與狀態。符號作為一個實體對象，那麼便存在相對的平面亦或空間的位置，也就是它與其他物體的距離，以及相對平面高度。在日常設計當中，無時無刻不在處理他們三者的關係。

基礎元素(原子)之間的屬性組合關係

那麼可以先看，元素屬性相互組合，可以用語義修飾形狀文字與層級，同樣符號本身也會通過顏色與層級來表現同狀態。符號之間設置間距，從而形成一個有秩序的分布狀態。可以看下圖它們的組合關係是多樣的。

。

基礎元素(原子)常見的屬性值

再進一步設置或者拆解常用的屬性值，定義實際應用中的使用規則。

。

✦03.屬性值組合與組件組合✦

通過系列的拆解，那麼再回頭看之前的那個按鈕的屬性值。它在css樣式中的組合起來的樣子。同樣可以通過固定變量名的方式，修改屬性值來完成多主題適配。

。

具體應用：屬性值組合關係

按照屬性值進行歸類，通過窮舉的方式可以得到不同屬性值之間相互組合後，下圖舉例它們的其中的一種組合關係。相互交叉組合便能形成一套完整的全量按鈕組件，當然在用設計軟件製作的時候並不是每一種都需要組合出來，但是它們之間存在的組合關係是明確。

具體應用：舉例常見不同類型按鈕的搭配組合場景

講到這裡基本上按鈕組件就已經差不多了，具體的細節在實際應用中還會存在很多其他的情況。

✦04.組件原則與價值✦

不論是設計系統亦或是組件，都是遵循的復用性DRY原則：不要寫重複的代碼。這雖然是面向對象編程中的基本原則，但是組件庫作為設計與前端的一項基礎設施，本身是與開發強綁定的協作模式，都是以降低系統內部複雜度為目的，復用性DRY原則同樣適用於設計。

組件或者復用性本身要解決的就是重複製造輪子的問題，以此達到產出的標準化與規模化快速搭建迭代的質量與效率提升。

（水了個結尾，主要是這篇文字太多。有點違背可視化圖文表達，「視圖」教會你的初衷，後續在單獨開一個原則、價值、維護的坑詳細說吧）

來源參考：

什麼是設計系統 - 構建一致、簡單和優美的協作體驗https://rpdc.xiaohongshu.com/course_detail/5

A comprehensive guide to design systemshttps://www.invisionapp.com/inside-design/guide-to-design-systems/