設計系統包括完整的設計價值觀和原則、設計標準、場景定義 以及一套工具包，用於搭建和組合產品與服務。

為什麼需要搭建設計系統？設計系統解決了以下問題：

1）設計高效率：快速瞭解產品設計全貌（包括設計原則、風格，樣式、組件）多人協作如Google docs共享的方式高效。

2）協作高效率：對齊研發的實現距離單位，高還原度，及跨學科跨崗位間的高效溝通。共享的詞彙表，有用的文檔使測試更容易，並作為未來協作友好的基礎。

1. 什麼是設計系統？

設計系統包括完整的設計價值觀和原則、設計標準、場景定義 以及一套工具包（UI 模式庫和代碼），用於搭建和組合產品與服務。鼓勵崗位之間的合作，減少溝通障礙。一個好的風格指南可以幫助設計人員和開發人員瞭解他們工具箱的工具，併為如何正確使用他們提供規則和最佳實踐。

2. 設計系統的前世今生

從1977年ChristopherAlexander在《A Pattern language》中首次提出模式的概念anirbnb、Salesforce 、Atlasssian、Spotify、AntDesign、Fusion Design先後對外公佈的設計系統，歷經了43年的演練。

3. 設計系統的構成

設計系統由風格指南，基礎構件，模式庫，規則組成。據不同項目，構成要素可以相應重構與取捨，但風格指南，組件庫，設計原則必不可少。搭建完成後在項目中的版本迭代若只是視覺改版則只需改風格指南。模式庫的組件是大量在UI設計師日常工作中，組件分為：按鈕卡片、圖標、導航、列表、下拉框、搜索框、表單、分頁、進度欄、彈框、加載、側邊欄等。

• 什麼是組件？組件是可以在你的設計中反覆使用的頁面元素。
• 何時創建組件？在界面設計中發現兩個頁面中出現了重複的元素時可考慮是否要將它轉換為組件。
• 如何創建組件？根據「原子設計Atomic Design」理論將組件進行原子級的結構拆分,這不是一個線性過程，而是一個思維模型。

4. 如何搭建設計系統

搭建要點：創建可維護的設計系統，要建立長遠成功的設計系統。

• 建立設計體系團隊，合適的人員和流程來確保系統的穩定發展。
• 適應性強，使其易於維護。

新模式的請求是如何處理的？發現錯誤的時候會怎樣？誰批准設計系統的變化？負責保持文檔更新的是誰？改變系統的UI模式？團隊如何瞭解變化？

搭建步驟流程：

• 共創者：UI+ UI Dev
• 創建工具：Sketch(UX設計工具) + Zeplin（團隊協作工具+ Storybook（github設計系統開源框架）
• 協作方式：設計師與研發不再是線性的瀑布式協作模式，而是共創的協作模式

步驟：（以調色板為例）

• 統一命名通過點擊Sketch頂部菜單欄Plugins-Zeplin-Export Selected可配色版的色值直接同步至Zeplin的style guide。
• 前端研發可在Zeplin style guide tab: Color & Text Styles下查看，並把產品配色封裝為配色的變量保存至storybook。

1）規則

設計原則：有助於塑造我們的設計方法，並協助我們在產品設計過程中評估權衡。jared M.Spool的提出驗證原則的方法“6個違反直覺的測試”：

• 它直接來自研究嗎？
• 它在大多數情況下是否可以幫助您說“不”？
• 它是否將您的設計與競爭對手區分開？
• 在將來的發行版中您可能會扭轉嗎？
• 您是否對該項目進行了評估？
• 它的含義是否被不斷測試？

好的設計原則應具備：

• 足夠具體以進行衡量；
• 在整個產品流程中工作；
• 激勵您的團隊創造更好的結果；
• 挑戰中等和半定結果；
• 簡單而令人難忘；
• 將您的產品與競爭對手區分開來。

定義出色的產品原則：研討會的想法。

材料：便利貼，鋼筆，牆，零食；參與者：召集項目中的利益相關者：首席工程師，產品經理，設計師，市場營銷等。在10分鐘內寫下至少需與竟品區別8種品質貼在牆上，將類似的便利貼放在一塊做聚類。回答以下內容並讓每個人都在註釋中進行解釋。（如果我們的產品是動物/一個人 /公司/電影/產品，那就是______又為什麼呢？）要特別注意區分產品的原因和任何描述性屬性後聚類。

花10分鐘描述希望產品對用戶的感覺的3-5條原則，寫下希望產品避免使用的2-3個描述符並介紹自己的原則。最後列出8–15個潛在原則，共享利益相關者，在項目中溝通磨練形成最佳內容，確定後盡一切努力貫徹在項目團隊意識中。

2）風格指南

雖然風格識別指南是相當觸覺的，設計語言指導方針更難確定。設計語言風格指導闡明一般的設計方向、哲學和方法具體項目或產品。設計師薩曼莎·沃倫(Samantha Warren)在設計 style tiles 時做出了回應，這是一款比情緒板更有形的可交付產品。

在視覺設計語言中，發散視覺風格推薦 The 20 second gut test 方法論。這個練習使涉眾在早期接觸到各種美學，通過品味差異有助於達成一些共同的審美價值。視覺設計師可抓住這些洞察開始將這些美學價值轉化為項目的視覺方向。

在項目啟動一部分會議上，向涉眾每20秒/個，展示20個相關網站，選擇特定於行業的站點及視覺上有趣的站點，為了增加可信度將網站logo改為項目logo。

對每個網站每人投票範圍1-10，得分1表示“如果這是我們的網站，我就辭職”。得分10“如果這是我們的網站，我一定會欣喜如狂”。發起者考慮參與者感興趣的視覺屬性，比如：排版，顏色，密度，佈局，插畫風格和總體氛圍。

快速將分數加起來，聚類結果。談論得分最低的5個網站，得分最高的5個網站及爭議最大的網站。發起者應該解釋參與者為什麼會被某個特定的網站吸引或排斥，並與團隊一起解決意見上的分歧。

3）基礎構件

字體排版規範：

首先，瞭解產品需要支持哪些媒介：手機/平板/電腦/HMI車載屏等，其次，需要考慮如何定義Font-Color，Font-Size&Line-Height，Font-Size，Font-Family

• Font-Color：關於安全色，如何保證文字的可閱讀性，常常用的3個閱讀色#333333#666666，#999999，可以通過該網站測試字體色與背景色的對比度是否能夠保證可讀性。
• Font-Size&Line-Height：字號大小和行高的定義從用戶特質（年齡特徵、工作環境）及可閱讀性來思考。（比如用戶視力程度如何？是比較年輕的還是比較年長的？工作環境的光線如何？）
• Font-Size：考慮字重級字體的粗細使用regular,medium,bold的使用與定義，字重的定義主要通過對比增加設計的層次與韻律。css支持字重與系統的字重如主light，regular，medium，bold，bolder會有差別，具體與研發調整再定義。
• Font-Family：在項目上，瞭解大部分的用戶使用系統及使用人群，方便系統快速識別。整個產品除了logo是vi字體，其餘為web默認中英文。

佈局規範：

間距公式：

8 的倍數在 Sketch 裡建立運用刪格系統基於1366*768空間最大化利用y=8+8*n n>0 (eg：8,16,24,32,64px)對於諸如列表，表格，卡片，表格等常見內容區域存在一個或多個部分和麵板組成的系統，這些部分共同協作以創建一致的視覺佈局。

帶側邊欄的≦1440像素屏幕的草圖佈局計算：

• 畫邊寬度 – 邊欄寬度 =內容區域
• 內容區域- 邊距*2 =總寬度
• 邊欄寬度+邊距 = 偏移

帶側邊欄的≦1440像素示例計算：

• 1440px – 80px = 1360px
• 1360px – 50px * 2 = 1260px
• 80px + 50px = 130px

無側邊欄的≦1440像素屏幕的草圖佈局計算：

• 畫邊寬度 =內容區域
• 內容區域-邊距*2=總寬度
• 偏移 = 0 – 僅選擇“居中”

帶側邊欄的≦1440像素示例計算：

• 1440px- 80px = 1360px
• 1440px- 50px * 2 = 1340px

偏移 = 0 – 僅選擇“居中”

4）模式庫

原子設計方法論：

組件的建立中，重點聊聊原子設計，原子設計方法論由五個不同的階段共同工作，以創建界面設計系統深思熟慮的，等級分明的方式。

原子Atoms：界面的基本元素，設計時需要考慮：

按鈕的樣式：

• Background color背景色
• Border radius圓角
• Color字體顏色
• FontSize字號
• Font-weight字重
• Font-family字體
• Padding內邊距
• Margin外邊距
• Box-shadow陰影

交互狀態：

• Button/Primary/Default
• Button/Primary/Hover
• Button/Primary/Pressed
• Button/Primary/Disabled
• Button/Primary/Loading

大小層次：

• Small
• Medium
• Large

按鈕的層次：

• Primary
• Secondary
• Thirdly

可擴展性：

是否固定padding值，據內容保持固定內邊距自適應，或文字+圖標擴展形式。

一個好的設計系統需要設計師與研發工程師共同協作，建立統一認知的設計價值觀，風格指南梳理設計原則，構建完善的組件庫，協調研發規則與協作流程，立足於創建可維護的長遠成功設計系統。基於未來的設計系統，創建適應性的，智能的能夠感知上下文並自動結合，從而減少工作負荷，AI驅動設計。

本文作者：Emilychen；公眾號：Design Thinker，UIUX設計師，從業6年+，關注設計思維及實踐，核心宗旨：設計思維驅動下的設計沉澱。

本文由 @Emily 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。

閱讀更多 人人都是產品經理 的文章

關鍵字: 國創上頭條 設計 Google文檔