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

• 設計高效率：快速了解產品設計全貌（包括設計原則、風格，樣式、組件），多人協作如 Google docs 共享的方式高效。
• 協作高效率：對齊研發的實現距離單位，高還原度，及跨學科跨崗位間的高效溝通。共享的詞彙表，有用的文檔使測試更容易，並作為未來協作友好的基礎。

什麼是設計系統？

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

設計系統的前世今生

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

設計系統的構成

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

我們創建各種組件，用於構成界面，那麼關於組件：

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

閱讀文章 >>

如何搭建設計系統

1. 搭建要點

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

• 建立設計體系團隊，合適的人員和流程來確保系統的穩定發展。
• 適應性強，使其易於維護。
• 新模式的請求是如何處理的？發現錯誤的時候會怎樣？誰批准設計系統的變化？負責保持文檔更新的是誰？改變系統的 UI 模式？團隊如何了解變化？

2. 搭建步驟流程

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

步驟

以調色板為例，統一命名通過點擊 Sketch 頂部菜單欄 Plugins-Zeplin-Export Selected 可配色版的色值直接同步至 Zeplin 的 style guide。

前端研發可在 Zeplin style guide tab: Color & Text Styles 下查看，並把產品配色封裝為配色的變量保存至 storybook。

規則

設計原則：有助於塑造我們的設計方法，並協助我們在產品設計過程中評估權衡。

jared M.Spool 提出的驗證原則的方法 「6 個違反直覺的測試 」 ：

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

好的設計原則應具備：

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

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

• 材料：便利貼、鋼筆、牆、零食。
• 參与者：召集項目中的利益相關者，首席工程師、產品經理、設計師、市場營銷等。

在 10 分鐘內寫下至少需與競品區別 8 種品質貼在牆上，將類似的便利貼放在一塊做聚類。回答以下內容並讓每個人都在註釋中進行解釋。（如果我們的產品是動物/一個人/公司/電影/產品 ，那就是……又為什麼呢？）要特別注意區分產品的原因和任何描述性屬性后聚類。

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

風格指南

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

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

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

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

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

基礎構件

字體排版（Typography）規範：

首先，了解產品需要支持哪些媒介？手機、平板、電腦、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 默認中英文。

布局（Layout）規範-間距公式：

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 – 僅選擇「居中」

模式庫

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

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

• 按鈕的樣式：Background color 背景色、Border radius 圓角、Color 字體顏色、Font Size 字號、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 驅動設計。

歡迎關注作者微信公眾號：「Design Thinker」

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5註冊平台_基礎科普！用一篇文章幫你快速了解設計系統