為什么需要搭建設(shè)計系統(tǒng)？設(shè)計系統(tǒng)解決了以下問題：
- 設(shè)計高效率：快速了解產(chǎn)品設(shè)計全貌（包括設(shè)計原則、風格，樣式、組件），多人協(xié)作如 Google docs 共享的方式高效。
- 協(xié)作高效率：對齊研發(fā)的實現(xiàn)距離單位，高還原度，及跨學科跨崗位間的高效溝通。共享的詞匯表，有用的文檔使測試更容易，并作為未來協(xié)作友好的基礎(chǔ)。
設(shè)計系統(tǒng)包括完整的設(shè)計價值觀和原則、設(shè)計標準、場景定義以及一套工具包（UI 模式庫和代碼），用于搭建和組合產(chǎn)品與服務(wù)。鼓勵崗位之間的合作，減少溝通障礙。一個好的風格指南可以幫助設(shè)計人員和開發(fā)人員了解他們工具箱的工具，并為如何正確使用他們提供規(guī)則和最佳實踐。
從 1977 年 Christopher Alexander 在《A Pattern language》中首次提出模式的概念，anirbnb、Salesforce、Atlasssian、Spotify、AntDesign、Fusion Design 先后對外公布設(shè)計系統(tǒng)，歷經(jīng)了 43 年的演練。
設(shè)計系統(tǒng)由風格指南、基礎(chǔ)構(gòu)件、模式庫、規(guī)則組成。據(jù)不同項目，構(gòu)成要素可以相應(yīng)重構(gòu)與取舍，但風格指南、組件庫、設(shè)計原則必不可少。搭建完成后在項目中的版本迭代若只是視覺改版則只需改風格指南。模式庫的組件分為：按鈕卡片、圖標、導(dǎo)航、列表、下拉框、搜索框、表單、分頁、進度欄、彈框、加載、側(cè)邊欄等。
我們創(chuàng)建各種組件，用于構(gòu)成界面，那么關(guān)于組件：
- 什么是組件？組件是可以在你的設(shè)計中反復(fù)使用的頁面元素。
- 何時創(chuàng)建組件？在界面設(shè)計中發(fā)現(xiàn)兩個頁面中出現(xiàn)了重復(fù)的元素時，可考慮是否要將它轉(zhuǎn)換為組件。
- 如何創(chuàng)建組件？根據(jù)「原子設(shè)計Atomic Design」理論將組件進行原子級的結(jié)構(gòu)拆分，這不是一個線性過程，而是一個思維模型。
1. 搭建要點
創(chuàng)建可維護的設(shè)計系統(tǒng)，要建立長遠成功的設(shè)計系統(tǒng)：
- 建立設(shè)計體系團隊，合適的人員和流程來確保系統(tǒng)的穩(wěn)定發(fā)展。
- 適應(yīng)性強，使其易于維護。
- 新模式的請求是如何處理的？發(fā)現(xiàn)錯誤的時候會怎樣？誰批準設(shè)計系統(tǒng)的變化？負責保持文檔更新的是誰？改變系統(tǒng)的 UI 模式？團隊如何了解變化？
2. 搭建步驟流程
- 共創(chuàng)者：UI + UI Dev
- 創(chuàng)建工具：Sketch（UX設(shè)計工具）+ Zeplin（團隊協(xié)作工具 + Storybook，github設(shè)計系統(tǒng)開源框架）
- 協(xié)作方式：設(shè)計師與研發(fā)不再是線性的瀑布式協(xié)作模式，而是共創(chuàng)的協(xié)作模式。
步驟
以調(diào)色板為例，統(tǒng)一命名通過點擊 Sketch 頂部菜單欄 Plugins-Zeplin-Export Selected 可配色版的色值直接同步至 Zeplin 的 style guide。
前端研發(fā)可在 Zeplin style guide tab: Color & Text Styles 下查看，并把產(chǎn)品配色封裝為配色的變量保存至 storybook。
規(guī)則
設(shè)計原則：有助于塑造我們的設(shè)計方法，并協(xié)助我們在產(chǎn)品設(shè)計過程中評估權(quán)衡。
jared M.Spool 提出的驗證原則的方法 「6 個違反直覺的測試 」 ：
- 它直接來自研究嗎？
- 它在大多數(shù)情況下是否可以幫助您說「不」？
- 它是否將您的設(shè)計與競爭對手區(qū)分開？
- 在將來的發(fā)行版中您可能會扭轉(zhuǎn)嗎？
- 您是否對該項目進行了評估？
- 它的含義是否被不斷測試？
好的設(shè)計原則應(yīng)具備：
- 足夠具體以進行衡量
- 在整個產(chǎn)品流程中工作
- 激勵您的團隊創(chuàng)造更好的結(jié)果
- 挑戰(zhàn)中等和半定結(jié)果
- 簡單而令人難忘
- 將您的產(chǎn)品與競爭對手區(qū)分開來
定義出色的產(chǎn)品原則：研討會的想法。
- 材料：便利貼、鋼筆、墻、零食。
- 參與者：召集項目中的利益相關(guān)者，首席工程師、產(chǎn)品經(jīng)理、設(shè)計師、市場營銷等。
在 10 分鐘內(nèi)寫下至少需與競品區(qū)別 8 種品質(zhì)貼在墻上，將類似的便利貼放在一塊做聚類。回答以下內(nèi)容并讓每個人都在注釋中進行解釋。（如果我們的產(chǎn)品是動物/一個人/公司/電影/產(chǎn)品 ，那就是……又為什么呢？）要特別注意區(qū)分產(chǎn)品的原因和任何描述性屬性后聚類。
花 10 分鐘描述希望產(chǎn)品對用戶的感覺的 3-5 條原則，寫下希望產(chǎn)品避免使用的 2-3 個描述符并介紹自己的原則，最后列出 8–15 個潛在原則。共享利益相關(guān)者，在項目中溝通磨練形成最佳內(nèi)容，確定后盡一切努力貫徹在項目團隊意識中。
風格指南
雖然風格識別指南是相當觸覺的，設(shè)計語言指導(dǎo)方針更難確定。設(shè)計語言風格指導(dǎo)闡明一般的設(shè)計方向、哲學和方法具體項目或產(chǎn)品。設(shè)計師薩曼莎·沃倫（Samantha Warren）在設(shè)計 style tiles 時做出了回應(yīng)，這是一款比情緒板更有形的可交付產(chǎn)品。
在視覺設(shè)計語言中，發(fā)散視覺風格推薦 The 20 second gut test 方法論。這個練習使涉眾在早期接觸到各種美學，通過品味差異有助于達成一些共同的審美價值。視覺設(shè)計師可抓住這些洞察開始將這些美學價值轉(zhuǎn)化為項目的視覺方向。
在項目啟動一部分會議上，向涉眾每 20 秒/個，展示 20 個相關(guān)網(wǎng)站，選擇特定于行業(yè)的站點及視覺上有趣的站點。為了增加可信度將網(wǎng)站 logo 改為項目 logo。
對每個網(wǎng)站每人投票范圍 1-10，得分 1 表示「如果這是我們的網(wǎng)站，我就辭職」。得分 10「如果這是我們的網(wǎng)站，我一定會欣喜如狂」。發(fā)起者考慮參與者感興趣的視覺屬性，比如：排版、顏色、密度、布局、插畫風格和總體氛圍。
快速將分數(shù)加起來，聚類結(jié)果。談?wù)摰梅肿畹偷?5 個網(wǎng)站，得分最高的 5 個網(wǎng)站及爭議最大的網(wǎng)站。發(fā)起者應(yīng)該解釋參與者為什么會被某個特定的網(wǎng)站吸引或排斥，并與團隊一起解決意見上的分歧。
基礎(chǔ)構(gòu)件
字體排版（Typography）規(guī)范：
首先，了解產(chǎn)品需要支持哪些媒介？手機、平板、電腦、HMI車載屏等，其次，需要考慮如何定義 Font-Color，F(xiàn)ont-Size & Line-Height，F(xiàn)ont-Size，F(xiàn)ont-Family。
- Font-Color：關(guān)于安全色，如何保證文字的可閱讀性，常常用的 3 個閱讀色 #333333，#666666，#999999，可以通過該網(wǎng)站測試字體色與背景色的對比度是否能夠保證可讀性。
- Font-Size & Line-Height：字號大小和行高的定義從用戶特質(zhì)（年齡特征、工作環(huán)境）及可閱讀性來思考。（比如用戶視力程度如何？是比較年輕的還是比較年長的？工作環(huán)境的光線如何？）
- Font-Size：考慮字重級字體的粗細使用 regular，medium，bold 的使用與定義，字重的定義主要通過對比增加設(shè)計的層次與韻律。css 支持字重與系統(tǒng)的字重，如 light，regular，medium，bold，bolder 會有差別，具體與研發(fā)調(diào)整再定義。
- Font-Family：在項目上，了解大部分的用戶使用系統(tǒng)及使用人群，方便系統(tǒng)快速識別。整個產(chǎn)品除了 logo 是 VI 字體，其余為 web 默認中英文。
布局（Layout）規(guī)范-間距公式：
8 的倍數(shù)在 Sketch 里建立運用刪格系統(tǒng)，基于 1366*768 空間最大化利用 y=8+8*n n>0（eg：8、16、24、32、64px）。對于諸如列表，表格，卡片，表格等常見內(nèi)容區(qū)域存在一個或多個部分和面板組成的系統(tǒng)，這些部分共同協(xié)作以創(chuàng)建一致的視覺布局。
帶側(cè)邊欄的≦1440像素屏幕的草圖布局計算：
- 畫邊寬度 – 邊欄寬度 = 內(nèi)容區(qū)域
- 內(nèi)容區(qū)域 – 邊距*2 = 總寬度
- 邊欄寬度 + 邊距 = 偏移
帶側(cè)邊欄的≦1440像素示例計算：
- 1440px – 80px = 1360px
- 1360px – 50px * 2 = 1260px
- 80px + 50px = 130px
無側(cè)邊欄的≦1440像素屏幕的草圖布局計算：
- 畫邊寬度 = 內(nèi)容區(qū)域
- 內(nèi)容區(qū)域 – 邊距*2 = 總寬度
- 偏移 = 0 – 僅選擇「居中」
帶側(cè)邊欄的≦1440像素示例計算：
- 1440px – 80px = 1360px
- 1440px – 50px * 2 = 1340px
- 偏移 = 0 – 僅選擇「居中」
模式庫
原子設(shè)計方法論，組件的建立中，重點聊聊原子設(shè)計，原子設(shè)計方法論由五個不同的階段共同工作，以創(chuàng)建界面設(shè)計系統(tǒng)深思熟慮的，等級分明的方式。
原子Atoms，界面的基本元素，設(shè)計時需要考慮：
- 按鈕的樣式：Background color 背景色、Border radius 圓角、Color 字體顏色、Font Size 字號、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
- 可擴展性：是否固定 padding 值，據(jù)內(nèi)容保持固定內(nèi)邊距自適應(yīng)，或文字+圖標擴展形式。
一個好的設(shè)計系統(tǒng)需要設(shè)計師與研發(fā)工程師共同協(xié)作，建立統(tǒng)一認知的設(shè)計價值觀，風格指南梳理設(shè)計原則，構(gòu)建完善的組件庫，協(xié)調(diào)研發(fā)規(guī)則與協(xié)作流程，立足于創(chuàng)建可維護的長遠設(shè)計系統(tǒng)；谖磥淼脑O(shè)計系統(tǒng)，創(chuàng)建適應(yīng)性的，智能的，能夠感知上下文并自動結(jié)合，從而減少工作負荷，AI 驅(qū)動設(shè)計。
承擔因您的行為而導(dǎo)致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。