設(shè)計(jì)系統(tǒng)包括完整的設(shè)計(jì)價(jià)值觀和原則、設(shè)計(jì)標(biāo)準(zhǔn)、場(chǎng)景定義 以及一套工具包，用于搭建和組合產(chǎn)品與服務(wù)。

為什么需要搭建設(shè)計(jì)系統(tǒng)？設(shè)計(jì)系統(tǒng)解決了以下問(wèn)題：

1）設(shè)計(jì)高效率：快速了解產(chǎn)品設(shè)計(jì)全貌（包括設(shè)計(jì)原則、風(fēng)格，樣式、組件）多人協(xié)作如Google docs共享的方式高效。

2）協(xié)作高效率：對(duì)齊研發(fā)的實(shí)現(xiàn)距離單位，高還原度，及跨學(xué)科跨崗位間的高效溝通。共享的詞匯表，有用的文檔使測(cè)試更容易，并作為未來(lái)協(xié)作友好的基礎(chǔ)。

1. 什么是設(shè)計(jì)系統(tǒng)？

設(shè)計(jì)系統(tǒng)包括完整的設(shè)計(jì)價(jià)值觀和原則、設(shè)計(jì)標(biāo)準(zhǔn)、場(chǎng)景定義 以及一套工具包（UI 模式庫(kù)和代碼），用于搭建和組合產(chǎn)品與服務(wù)。鼓勵(lì)崗位之間的合作，減少溝通障礙。一個(gè)好的風(fēng)格指南可以幫助設(shè)計(jì)人員和開(kāi)發(fā)人員了解他們工具箱的工具，并為如何正確使用他們提供規(guī)則和最佳實(shí)踐。

2. 設(shè)計(jì)系統(tǒng)的前世今生

從1977年ChristopherAlexander在《A Pattern language》中首次提出模式的概念anirbnb、Salesforce 、Atlasssian、Spotify、AntDesign、Fusion Design先后對(duì)外公布的設(shè)計(jì)系統(tǒng)，歷經(jīng)了43年的演練。

3. 設(shè)計(jì)系統(tǒng)的構(gòu)成

設(shè)計(jì)系統(tǒng)由風(fēng)格指南，基礎(chǔ)構(gòu)件，模式庫(kù)，規(guī)則組成。據(jù)不同項(xiàng)目，構(gòu)成要素可以相應(yīng)重構(gòu)與取舍，但風(fēng)格指南，組件庫(kù)，設(shè)計(jì)原則必不可少。搭建完成后在項(xiàng)目中的版本迭代若只是視覺(jué)改版則只需改風(fēng)格指南。模式庫(kù)的組件是大量在UI設(shè)計(jì)師日常工作中，組件分為：按鈕卡片、圖標(biāo)、導(dǎo)航、列表、下拉框、搜索框、表單、分頁(yè)、進(jìn)度欄、彈框、加載、側(cè)邊欄等。

我們創(chuàng)建各種組件，用于構(gòu)成界面，那么關(guān)于組件：

• 什么是組件？組件是可以在你的設(shè)計(jì)中反復(fù)使用的頁(yè)面元素。
• 何時(shí)創(chuàng)建組件？在界面設(shè)計(jì)中發(fā)現(xiàn)兩個(gè)頁(yè)面中出現(xiàn)了重復(fù)的元素時(shí)可考慮是否要將它轉(zhuǎn)換為組件。
• 如何創(chuàng)建組件？根據(jù)「原子設(shè)計(jì)Atomic Design」理論將組件進(jìn)行原子級(jí)的結(jié)構(gòu)拆分,這不是一個(gè)線性過(guò)程，而是一個(gè)思維模型。

4. 如何搭建設(shè)計(jì)系統(tǒng)

搭建要點(diǎn)：創(chuàng)建可維護(hù)的設(shè)計(jì)系統(tǒng)，要建立長(zhǎng)遠(yuǎn)成功的設(shè)計(jì)系統(tǒng)。

• 建立設(shè)計(jì)體系團(tuán)隊(duì)，合適的人員和流程來(lái)確保系統(tǒng)的穩(wěn)定發(fā)展。
• 適應(yīng)性強(qiáng)，使其易于維護(hù)。

新模式的請(qǐng)求是如何處理的？發(fā)現(xiàn)錯(cuò)誤的時(shí)候會(huì)怎樣？誰(shuí)批準(zhǔn)設(shè)計(jì)系統(tǒng)的變化？負(fù)責(zé)保持文檔更新的是誰(shuí)？改變系統(tǒng)的UI模式？團(tuán)隊(duì)如何了解變化？

搭建步驟流程：

• 共創(chuàng)者：UI+ UI Dev
• 創(chuàng)建工具：Sketch(UX設(shè)計(jì)工具) + Zeplin（團(tuán)隊(duì)協(xié)作工具+ Storybook（github設(shè)計(jì)系統(tǒng)開(kāi)源框架）
• 協(xié)作方式：設(shè)計(jì)師與研發(fā)不再是線性的瀑布式協(xié)作模式，而是共創(chuàng)的協(xié)作模式

步驟：（以調(diào)色板為例）

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

1）規(guī)則

設(shè)計(jì)原則：有助于塑造我們的設(shè)計(jì)方法，并協(xié)助我們?cè)诋a(chǎn)品設(shè)計(jì)過(guò)程中評(píng)估權(quán)衡。jared M.Spool的提出驗(yàn)證原則的方法“6個(gè)違反直覺(jué)的測(cè)試”：

• 它直接來(lái)自研究嗎？
• 它在大多數(shù)情況下是否可以幫助您說(shuō)“不”？
• 它是否將您的設(shè)計(jì)與競(jìng)爭(zhēng)對(duì)手區(qū)分開(kāi)？
• 在將來(lái)的發(fā)行版中您可能會(huì)扭轉(zhuǎn)嗎？
• 您是否對(duì)該項(xiàng)目進(jìn)行了評(píng)估？
• 它的含義是否被不斷測(cè)試？

好的設(shè)計(jì)原則應(yīng)具備：

• 足夠具體以進(jìn)行衡量；
• 在整個(gè)產(chǎn)品流程中工作；
• 激勵(lì)您的團(tuán)隊(duì)創(chuàng)造更好的結(jié)果；
• 挑戰(zhàn)中等和半定結(jié)果；
• 簡(jiǎn)單而令人難忘；
• 將您的產(chǎn)品與競(jìng)爭(zhēng)對(duì)手區(qū)分開(kāi)來(lái)。

定義出色的產(chǎn)品原則：研討會(huì)的想法。

材料：便利貼，鋼筆，墻，零食；參與者：召集項(xiàng)目中的利益相關(guān)者：首席工程師，產(chǎn)品經(jīng)理，設(shè)計(jì)師，市場(chǎng)營(yíng)銷等。在10分鐘內(nèi)寫(xiě)下至少需與竟品區(qū)別8種品質(zhì)貼在墻上，將類似的便利貼放在一塊做聚類。回答以下內(nèi)容并讓每個(gè)人都在注釋中進(jìn)行解釋。（如果我們的產(chǎn)品是動(dòng)物/一個(gè)人 /公司/電影/產(chǎn)品，那就是______又為什么呢？）要特別注意區(qū)分產(chǎn)品的原因和任何描述性屬性后聚類。

花10分鐘描述希望產(chǎn)品對(duì)用戶的感覺(jué)的3-5條原則，寫(xiě)下希望產(chǎn)品避免使用的2-3個(gè)描述符并介紹自己的原則。最后列出8–15個(gè)潛在原則，共享利益相關(guān)者，在項(xiàng)目中溝通磨練形成最佳內(nèi)容，確定后盡一切努力貫徹在項(xiàng)目團(tuán)隊(duì)意識(shí)中。

2）風(fēng)格指南

雖然風(fēng)格識(shí)別指南是相當(dāng)觸覺(jué)的，設(shè)計(jì)語(yǔ)言指導(dǎo)方針更難確定。設(shè)計(jì)語(yǔ)言風(fēng)格指導(dǎo)闡明一般的設(shè)計(jì)方向、哲學(xué)和方法具體項(xiàng)目或產(chǎn)品。設(shè)計(jì)師薩曼莎·沃倫(Samantha Warren)在設(shè)計(jì) style tiles 時(shí)做出了回應(yīng)，這是一款比情緒板更有形的可交付產(chǎn)品。

在視覺(jué)設(shè)計(jì)語(yǔ)言中，發(fā)散視覺(jué)風(fēng)格推薦 The 20 second gut test 方法論。這個(gè)練習(xí)使涉眾在早期接觸到各種美學(xué)，通過(guò)品味差異有助于達(dá)成一些共同的審美價(jià)值。視覺(jué)設(shè)計(jì)師可抓住這些洞察開(kāi)始將這些美學(xué)價(jià)值轉(zhuǎn)化為項(xiàng)目的視覺(jué)方向。

在項(xiàng)目啟動(dòng)一部分會(huì)議上，向涉眾每20秒/個(gè)，展示20個(gè)相關(guān)網(wǎng)站，選擇特定于行業(yè)的站點(diǎn)及視覺(jué)上有趣的站點(diǎn)，為了增加可信度將網(wǎng)站logo改為項(xiàng)目logo。

對(duì)每個(gè)網(wǎng)站每人投票范圍1-10，得分1表示“如果這是我們的網(wǎng)站，我就辭職”。得分10“如果這是我們的網(wǎng)站，我一定會(huì)欣喜如狂”。發(fā)起者考慮參與者感興趣的視覺(jué)屬性，比如：排版，顏色，密度，布局，插畫(huà)風(fēng)格和總體氛圍。

快速將分?jǐn)?shù)加起來(lái)，聚類結(jié)果。談?wù)摰梅肿畹偷?個(gè)網(wǎng)站，得分最高的5個(gè)網(wǎng)站及爭(zhēng)議最大的網(wǎng)站。發(fā)起者應(yīng)該解釋參與者為什么會(huì)被某個(gè)特定的網(wǎng)站吸引或排斥，并與團(tuán)隊(duì)一起解決意見(jiàn)上的分歧。

3）基礎(chǔ)構(gòu)件

字體排版規(guī)范：

首先，了解產(chǎn)品需要支持哪些媒介：手機(jī)/平板/電腦/HMI車載屏等，其次，需要考慮如何定義Font-Color，Font-Size&Line-Height，F(xiàn)ont-Size，Font-Family

• Font-Color：關(guān)于安全色，如何保證文字的可閱讀性，常常用的3個(gè)閱讀色#333333#666666，#999999，可以通過(guò)該網(wǎng)站測(cè)試字體色與背景色的對(duì)比度是否能夠保證可讀性。
• Font-Size&Line-Height：字號(hào)大小和行高的定義從用戶特質(zhì)（年齡特征、工作環(huán)境）及可閱讀性來(lái)思考。（比如用戶視力程度如何？是比較年輕的還是比較年長(zhǎng)的？工作環(huán)境的光線如何？）
• Font-Size：考慮字重級(jí)字體的粗細(xì)使用regular,medium,bold的使用與定義，字重的定義主要通過(guò)對(duì)比增加設(shè)計(jì)的層次與韻律。css支持字重與系統(tǒng)的字重如主light，regular，medium，bold，bolder會(huì)有差別，具體與研發(fā)調(diào)整再定義。
• Font-Family：在項(xiàng)目上，了解大部分的用戶使用系統(tǒng)及使用人群，方便系統(tǒng)快速識(shí)別。整個(gè)產(chǎn)品除了logo是vi字體，其余為web默認(rèn)中英文。

布局規(guī)范：

間距公式：

8 的倍數(shù)在 Sketch 里建立運(yùn)用刪格系統(tǒng)基于1366*768空間最大化利用y=8+8*n n>0 (eg：8,16,24,32,64px)對(duì)于諸如列表，表格，卡片，表格等常見(jiàn)內(nèi)容區(qū)域存在一個(gè)或多個(gè)部分和面板組成的系統(tǒng)，這些部分共同協(xié)作以創(chuàng)建一致的視覺(jué)布局。

帶側(cè)邊欄的≦1440像素屏幕的草圖布局計(jì)算：

• 畫(huà)邊寬度 – 邊欄寬度 =內(nèi)容區(qū)域
• 內(nèi)容區(qū)域- 邊距*2 =總寬度
• 邊欄寬度+邊距 = 偏移

帶側(cè)邊欄的≦1440像素示例計(jì)算：

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

無(wú)側(cè)邊欄的≦1440像素屏幕的草圖布局計(jì)算：

• 畫(huà)邊寬度 =內(nèi)容區(qū)域
• 內(nèi)容區(qū)域-邊距*2=總寬度
• 偏移 = 0 – 僅選擇“居中”

帶側(cè)邊欄的≦1440像素示例計(jì)算：

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

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

4）模式庫(kù)

原子設(shè)計(jì)方法論：

組件的建立中，重點(diǎn)聊聊原子設(shè)計(jì)，原子設(shè)計(jì)方法論由五個(gè)不同的階段共同工作，以創(chuàng)建界面設(shè)計(jì)系統(tǒng)深思熟慮的，等級(jí)分明的方式。

原子Atoms：界面的基本元素，設(shè)計(jì)時(shí)需要考慮：

按鈕的樣式：

• Background color背景色
• Border radius圓角
• Color字體顏色
• FontSize字號(hào)
• Font-weight字重
• Font-family字體
• Padding內(nèi)邊距
• Margin外邊距
• Box-shadow陰影

交互狀態(tài)：

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

大小層次：

• Small
• Medium
• Large

按鈕的層次：

• Primary
• Secondary
• Thirdly

可擴(kuò)展性：

是否固定padding值，據(jù)內(nèi)容保持固定內(nèi)邊距自適應(yīng)，或文字+圖標(biāo)擴(kuò)展形式。

一個(gè)好的設(shè)計(jì)系統(tǒng)需要設(shè)計(jì)師與研發(fā)工程師共同協(xié)作，建立統(tǒng)一認(rèn)知的設(shè)計(jì)價(jià)值觀，風(fēng)格指南梳理設(shè)計(jì)原則，構(gòu)建完善的組件庫(kù)，協(xié)調(diào)研發(fā)規(guī)則與協(xié)作流程，立足于創(chuàng)建可維護(hù)的長(zhǎng)遠(yuǎn)成功設(shè)計(jì)系統(tǒng)?；谖磥?lái)的設(shè)計(jì)系統(tǒng)，創(chuàng)建適應(yīng)性的，智能的能夠感知上下文并自動(dòng)結(jié)合，從而減少工作負(fù)荷，AI驅(qū)動(dòng)設(shè)計(jì)。

本文作者：Emilychen；公眾號(hào)：Design Thinker，UIUX設(shè)計(jì)師，從業(yè)6年+，關(guān)注設(shè)計(jì)思維及實(shí)踐，核心宗旨：設(shè)計(jì)思維驅(qū)動(dòng)下的設(shè)計(jì)沉淀。

本文由 @Emily 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。