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