作者：ZYUN（20190401）
預(yù)計(jì)閱讀時(shí)長：15m 08s（5268 字粟矿；12 圖）
摘要：主要記錄設(shè)計(jì)系統(tǒng)的創(chuàng)建過程、具體內(nèi)容和實(shí)際應(yīng)用婚苹，以及其中的不足與反思它抱。
規(guī)劃
重點(diǎn)內(nèi)容
在對(duì)我們的產(chǎn)品、設(shè)計(jì)和開發(fā)流程陕习、團(tuán)隊(duì)協(xié)作等方面的具體情況進(jìn)行分析霎褐，并列出相應(yīng)痛點(diǎn)之后，我開始構(gòu)思我們的設(shè)計(jì)系統(tǒng)的內(nèi)容该镣。
針對(duì)第一篇中提到的痛點(diǎn)冻璃，我的解決思路集中在以下幾點(diǎn)：
- 建立基礎(chǔ)樣式庫、組件庫损合，以便高效復(fù)用省艳、統(tǒng)一修改、多人協(xié)作塌忽，進(jìn)而提高設(shè)計(jì)效率拍埠，解決視覺風(fēng)格、交互方式不一致的問題土居。
- 將我們團(tuán)隊(duì)協(xié)作的特點(diǎn)考慮在內(nèi)枣购，在組件庫中加入標(biāo)注、交互說明擦耀、流程圖連接線等小工具棉圈，以便在視覺稿上直接、快速補(bǔ)充交互細(xì)節(jié)眷蜓。
- 從現(xiàn)有產(chǎn)品中提取出高復(fù)用的界面作為模板頁面分瘾，以便直接調(diào)用、填充數(shù)據(jù)吁系，快速完成簡單頁面的設(shè)計(jì)德召。
- 創(chuàng)建設(shè)計(jì)文檔統(tǒng)一模板，以標(biāo)準(zhǔn)化的方式更新汽纤、維護(hù)設(shè)計(jì)文檔上岗。
- 以共享文檔的方式制定、記錄關(guān)鍵元素蕴坪、交互行為肴掷、功能流程的設(shè)計(jì)規(guī)范敬锐。
- 創(chuàng)建交互自查表，以便在各個(gè)環(huán)節(jié)快速進(jìn)行查漏補(bǔ)缺呆瞻。
指導(dǎo)原則
如前文所述台夺，我們的產(chǎn)品都是基于網(wǎng)頁的數(shù)據(jù)密集型產(chǎn)品，業(yè)務(wù)繁復(fù)痴脾，功能龐雜颤介。因此，我希望我們的設(shè)計(jì)系統(tǒng)能以簡潔實(shí)用為創(chuàng)建原則明郭，以內(nèi)容的可讀性和頁面的加載時(shí)間為首要考慮因素买窟。譬如，使用清晰干凈的配色薯定，避免分散用戶對(duì)內(nèi)容的注意力始绍，從而提高信息獲取效率；譬如话侄，優(yōu)先使用系統(tǒng)默認(rèn)的界面字體亏推，避免因加載字體而影響頁面加載速度。
創(chuàng)建
STEP 1：設(shè)計(jì)元素清查
對(duì)很多產(chǎn)品來說年堆，設(shè)計(jì)元素清查這一步可能會(huì)耗費(fèi)大量的時(shí)間吞杭，因?yàn)樗麄冃枰獙?duì)產(chǎn)品中所有的界面逐一清查，從中提煉出可復(fù)用的界面組成要素变丧。
而我們的后臺(tái)產(chǎn)品中絕大部分的組件都是系統(tǒng)組件芽狗，自定義的業(yè)務(wù)組件相對(duì)較少。并且在這里痒蓬，我打算只創(chuàng)建適用于所有后臺(tái)產(chǎn)品童擎、所有項(xiàng)目都可調(diào)用的組件庫，各個(gè)后臺(tái)獨(dú)有的攻晒、特定的業(yè)務(wù)組件可在設(shè)計(jì)的過程中逐步創(chuàng)建本地組件顾复。
因此，這里的設(shè)計(jì)元素清查就相對(duì)簡單一點(diǎn)鲁捏。
1）我先以其他在線設(shè)計(jì)系統(tǒng)為參考芯砸，列出所有基礎(chǔ)視覺要素（如配色、字體等等）和可能的系統(tǒng)組件類型（如按鈕给梅、輸入框等等）假丧。
2）以近期最完善、最全面的一個(gè)后臺(tái)產(chǎn)品為準(zhǔn)动羽，將其中對(duì)應(yīng)的元素進(jìn)行整理包帚、歸類。
3）將其他后臺(tái)產(chǎn)品中的設(shè)計(jì)元素與第二點(diǎn)中整理好的設(shè)計(jì)元素進(jìn)行對(duì)照曹质，了解當(dāng)前存在不一致的地方婴噩，并去除冗余的元素，增添缺少的必要元素羽德。
STEP 2：創(chuàng)建組件庫
1. 站在后臺(tái)產(chǎn)品設(shè)計(jì)的整體層面几莽，理解所有設(shè)計(jì)元素的設(shè)計(jì)原則和使用方式，以便以統(tǒng)一的標(biāo)準(zhǔn)對(duì)這些元素進(jìn)行梳理宅静。
例如章蚣，我們現(xiàn)有的后臺(tái)產(chǎn)品中分別有以橙色、紅色姨夹、藍(lán)色等為主色的多種配色纤垂。
那首先，我需要對(duì)這些配色的使用背景進(jìn)行了解：它們都是依據(jù)我們 C 端產(chǎn)品的視覺風(fēng)格制定的磷账，而 C 端產(chǎn)品又幾經(jīng)視覺改版峭沦，所以在 C 端產(chǎn)品不同視覺風(fēng)格期間設(shè)計(jì)開發(fā)的后臺(tái)就有了不同的配色。
然后逃糟，依據(jù)之前定下的指導(dǎo)原則吼鱼，我們的界面用色需要以簡潔實(shí)用、清晰干凈為準(zhǔn)則绰咽。
此外菇肃，紅色在后臺(tái)管理系統(tǒng)的設(shè)計(jì)中通常用作功能色，以突出危險(xiǎn)信號(hào)取募、錯(cuò)誤提示琐谤，如果同時(shí)作為主色，則容易產(chǎn)生混淆玩敏，導(dǎo)致無法準(zhǔn)確傳達(dá)信息斗忌、提供清晰反饋。而藍(lán)色則比較清新聊品，傳遞出的情緒相對(duì)穩(wěn)定飞蹂、可靠、友好翻屈。
因此陈哑，綜合以上幾點(diǎn)，我最終采用了藍(lán)色作為主色伸眶。
類似地惊窖，我們現(xiàn)有的后臺(tái)產(chǎn)品中有多種類型的布局，全屏展示的厘贼、固定內(nèi)容區(qū)域?qū)挾却怪本又械慕缇啤㈨憫?yīng)式的、靜態(tài)的等等嘴秸。這種情況下毁欣，我需要先去了解這些布局的使用背景庇谆、設(shè)計(jì)原則、開發(fā)實(shí)現(xiàn)方式等等凭疮，再結(jié)合我們現(xiàn)在的使用情況饭耳，綜合選取合適的布局作為最終布局。
2. 先對(duì)基礎(chǔ)的視覺風(fēng)格與樣式規(guī)則進(jìn)行統(tǒng)一定義执解，包括配色寞肖、字體排版、圖標(biāo)衰腌、間距新蟆、插畫等。
3. 根據(jù)確定下來的視覺風(fēng)格和樣式規(guī)則右蕊，對(duì)具體的交互元素進(jìn)行調(diào)整琼稻、統(tǒng)一，包括外觀樣式饶囚、交互細(xì)節(jié)等欣簇。
例如，對(duì)于按鈕坯约，會(huì)調(diào)整按鈕的配色熊咽、圓角、文本標(biāo)簽的字體闹丐、按鈕內(nèi)元素的間距等横殴，再根據(jù)使用情況確定幾種通用尺寸、補(bǔ)齊各種交互狀態(tài)（如卿拴，默認(rèn)衫仑、懸停、點(diǎn)擊堕花、禁用等）文狱。
4. 命名方式
- 樣式、組件的命名方式可參考 CSS 的語義命名法缘挽。語義化命名即通過「用途」對(duì)元素進(jìn)行定義描述瞄崇，而不是通過具體的表現(xiàn)樣式（如顏色、位置等）壕曼。
例如苏研，主色可命名為「color_primary」，而不是結(jié)構(gòu)化命名「color_blue」腮郊。這樣命名的好處摹蘑，一是有利于我們后續(xù)的更新維護(hù)，當(dāng)我們修改主色為紅色時(shí)轧飞，我們只需要更改 color_primary 的色值衅鹿，不需要修改命名撒踪；二是可以避免命名沖突，主色藍(lán)色和信息色藍(lán)色可分別命名為 color_primary 和 color_info大渤；三是方便與開發(fā)工程師協(xié)作糠涛，保證設(shè)計(jì)師和程序員之間使用同一套語言進(jìn)行溝通。
- 在 Sketch 中兼犯，我們通過命名對(duì)組件進(jìn)行組織，合理的命名可以保證組件庫條理清晰集漾，易于理解切黔，方便設(shè)計(jì)師快速識(shí)別、調(diào)用具篇。
1）在命名中使用符號(hào)「/」區(qū)分層級(jí)纬霞。
2）組件一級(jí)分類的命名，可按我們上文所列系統(tǒng)組件的名稱進(jìn)行命名驱显。例如诗芜， Button、Input 等等埃疫。
但是伏恐，為防止一級(jí)分類列表太長或某些分類包含層級(jí)太深的子分類，我在這里做了一些調(diào)整栓霜。對(duì)于子分類層級(jí)不多的組件翠桦，我會(huì)在前面加一個(gè)層級(jí)，即系統(tǒng)組件的大分類胳蛮。例如销凑，Modal、Message仅炊、Popconfirm斗幼、Alert 等等屬于反饋類的組件都?xì)w為 Feedback。
3）組件子分類的命名抚垄，通惩闪可按狀態(tài)（例如，默認(rèn)呆馁、禁用渠羞、已選、未選智哀、開次询、關(guān)）、尺寸（例如瓷叫，大屯吊、兴脱病）、情感（例如盒卸，危險(xiǎn)骗爆、警告、成功蔽介、失斦丁）、位置虹蓄、數(shù)目等等特征進(jìn)行命名犀呼。
此外，由于組件可能包含這些特征中的一個(gè)或多個(gè)類型薇组，所以需要先定好一致的特征優(yōu)先級(jí)外臂。例如，「Buttons / Danger / Small / Hover」就是按「組件名稱 / 情感 / 尺寸 / 狀態(tài)」的順序依次命名律胀。
STEP 3：制定設(shè)計(jì)約定
對(duì)后臺(tái)產(chǎn)品中高復(fù)用的交互方式或功能流程進(jìn)行提煉宋光、總結(jié)，并以在線文檔的形式進(jìn)行記錄炭菌、共享罪佳。
例如，一般情況下黑低，數(shù)據(jù)表格的批量操作交互為：批量操作按鈕默認(rèn)不可用菇民；選中表格中批量操作相關(guān)的項(xiàng)目后，按鈕呈現(xiàn)可用狀態(tài)投储；點(diǎn)擊批量操作按鈕第练，彈出 Popconfirm 進(jìn)行操作確認(rèn)。
將通用的交互流程提煉出來玛荞，作為設(shè)計(jì)師和開發(fā)工程師之間的約定娇掏，則不需要每次都進(jìn)行標(biāo)注、溝通勋眯，可減少重復(fù)工作婴梧，大大提高協(xié)作效率。
STEP 4：創(chuàng)建設(shè)計(jì)文件模板
基于我們的設(shè)計(jì)客蹋、協(xié)作流程特點(diǎn)塞蹭，創(chuàng)建統(tǒng)一的設(shè)計(jì)文件模板，以標(biāo)準(zhǔn)化的方式更新讶坯、維護(hù)設(shè)計(jì)文檔番电，解放出更多的時(shí)間、精力用于設(shè)計(jì)思考。模板包含以下內(nèi)容：
- 提供模板頁面漱办，可直接復(fù)制这刷、填充數(shù)據(jù)，快速完成簡單娩井、常見頁面的設(shè)計(jì)
- 對(duì)所用組件庫的內(nèi)容暇屋、調(diào)用方法進(jìn)行說明
- 對(duì)頁面命名方式，更新日志的記錄方法等作統(tǒng)一規(guī)定
STEP 5：編寫記錄文檔
我在語雀上對(duì)我們的設(shè)計(jì)系統(tǒng)進(jìn)行記錄洞辣，包括所有模式和組件的設(shè)計(jì)指南咐刨、設(shè)計(jì)系統(tǒng)的更新記錄、設(shè)計(jì)源文件等等扬霜，相當(dāng)于設(shè)計(jì)系統(tǒng)的使用手冊定鸟，同時(shí)也可作為我們設(shè)計(jì)、開發(fā)時(shí)的快速參考畜挥。
語雀文檔提供了文檔大綱和文檔內(nèi)跳轉(zhuǎn)等功能，可直接定位到特定內(nèi)容婴谱，方便我們進(jìn)行快速查詢和導(dǎo)航蟹但。另外，語雀文檔也支持分享谭羔、協(xié)作华糖、在線評(píng)論，我們的團(tuán)隊(duì)成員都可以隨時(shí)訪問瘟裸，進(jìn)行反饋或者編輯客叉，共同參與設(shè)計(jì)系統(tǒng)的維護(hù)和完善。
內(nèi)容介紹
1. 組件庫的內(nèi)容主要包含 3 個(gè)部分：
- Foundations 基礎(chǔ)樣式
這部分屬于感知性的設(shè)計(jì)模式话告，即界面中的非實(shí)體組成要素兼搏。包括圖標(biāo)、顏色沙郭、字體排版佛呻、插畫、布局等核心視覺要素的樣式定義和使用指南病线，相當(dāng)于使用此系統(tǒng)進(jìn)行設(shè)計(jì)的產(chǎn)品的「品牌指南」吓著。 - Components 組件
這部分屬于功能性的設(shè)計(jì)模式，即界面的實(shí)體組成要素送挑。包括所有可在全局范圍內(nèi)復(fù)用的元素绑莺，共有四個(gè)部分，分別為 Navigation 導(dǎo)航惕耕、Data Entry 數(shù)據(jù)輸入纺裁、Data Display 數(shù)據(jù)展示、Feedback 反饋司澎。 - Patterns 模式
這部分是從當(dāng)前后臺(tái)產(chǎn)品中提煉出來的高復(fù)用的交互行為对扶、功能流程等內(nèi)容区赵。目前僅包括「設(shè)計(jì)約定」和「交互自查表」。
2. 除了組件庫浪南，目前設(shè)計(jì)系統(tǒng)中還提供了部分可用的設(shè)計(jì)資源笼才。包括 Sketch UI 組件庫和后臺(tái)產(chǎn)品設(shè)計(jì) Sketch 模板。
Sketch UI 組件庫中提供了 116 種字體樣式定義络凿，25 種顏色樣式定義骡送，68 種圖層樣式定義，可直接在文件中調(diào)用絮记；此外摔踱，還提供了 7 大類 44 小類元件，所有 symbol 支持直接復(fù)用怨愤、覆寫派敷，并且布局支持響應(yīng)式、可按需更改尺寸撰洗。
具體使用方法及其他說明可在 Sketch 文件中查看篮愉。
后臺(tái)產(chǎn)品設(shè)計(jì) Sketch 模板中共提供了 54 個(gè)常用模板頁面，可直接復(fù)制差导、覆寫试躏，快速完成常見頁面的設(shè)計(jì)。
具體使用方法及其他說明可在 Sketch 文件中查看设褐。
應(yīng)用
在團(tuán)隊(duì)中推動(dòng)
在設(shè)計(jì)系統(tǒng)第一個(gè)版本的構(gòu)建完成之后颠蕴，我首先在我們 UI 小組內(nèi)進(jìn)行了展示，分享了設(shè)計(jì)系統(tǒng)的整個(gè)探索過程和個(gè)人思考助析，然后分享給我們的開發(fā)工程師小組犀被，最后是我們的產(chǎn)品小組。
在將設(shè)計(jì)系統(tǒng)應(yīng)用到實(shí)際工作之前外冀，我需要向我們的團(tuán)隊(duì)展示現(xiàn)有的問題弱判、創(chuàng)建一套標(biāo)準(zhǔn)統(tǒng)一的設(shè)計(jì)體系的必要性，以及它如何能為我們的產(chǎn)品和團(tuán)隊(duì)增值锥惋，從而在設(shè)計(jì)系統(tǒng)的構(gòu)建和應(yīng)用上達(dá)成共識(shí)昌腰。
共享和應(yīng)用
設(shè)計(jì)方面
由于我是唯一參與后臺(tái)產(chǎn)品設(shè)計(jì)的設(shè)計(jì)師，所以組件庫暫未進(jìn)行共享和協(xié)作膀跌。我將 Sketch UI 組件庫文件添加為 Library遭商，并已在我們的新后臺(tái)產(chǎn)品設(shè)計(jì)中進(jìn)行調(diào)用。數(shù)據(jù)敏感原因捅伤，無法在這里展示真實(shí)的應(yīng)用界面劫流。
開發(fā)方面
目前，我們的線上組件庫仍在開發(fā)中。
迭代與維護(hù)
到目前為止祠汇，我們的設(shè)計(jì)系統(tǒng)還未進(jìn)行第二個(gè)版本的迭代仍秤。
反思總結(jié)
不足與問題
通過對(duì)此次設(shè)計(jì)系統(tǒng)的探索過程進(jìn)行回顧、反思可很，我總結(jié)出以下幾點(diǎn)不足和問題诗力。
如上文提到的，在對(duì)樣式我抠、組件進(jìn)行命名時(shí)苇本，使用語義命名法是更好的。但是菜拓，這一點(diǎn)我是經(jīng)過后來的學(xué)習(xí)才發(fā)現(xiàn)的瓣窄，起初創(chuàng)建組件庫時(shí)仍采用了結(jié)構(gòu)化的命名方式。
在樣式庫中定義了過多的文本樣式纳鼎、圖層樣式俺夕。實(shí)際上，根據(jù)我們后臺(tái)產(chǎn)品的特點(diǎn)贱鄙，有些用途單一或邊緣的樣式可不進(jìn)行定義劝贸，否則將導(dǎo)致樣式庫過于復(fù)雜，造成不必要的樣式浪費(fèi)贰逾。
例如悬荣，在某個(gè)后臺(tái)產(chǎn)品某個(gè)特定界面菠秒，為了某種視覺效果而設(shè)置的特殊字體樣式疙剑，無需定義為共享字體樣式。這種樣式只在特定場景里使用践叠，并不會(huì)在其他地方進(jìn)行復(fù)用言缤。-
除以上具體問題外，我們面臨的最大問題是禁灼，后臺(tái)產(chǎn)品新舊版本的迭代問題管挟。
- 為保證正常的產(chǎn)品工作進(jìn)程不中斷，我們的組件庫是在邊完成現(xiàn)階段業(yè)務(wù)需求的情況下邊進(jìn)行設(shè)計(jì)弄捕、開發(fā)的僻孝，所以組件庫的最終完成度比較不可控。
- 組件庫設(shè)計(jì)完成后守谓，新項(xiàng)目便開始使用組件庫進(jìn)行設(shè)計(jì)穿铆，但此時(shí)線上組件庫仍未開發(fā)完成，設(shè)計(jì)與開發(fā)之間的對(duì)接流程仍是之前的模式斋荞，這對(duì)于開發(fā)工程師來說荞雏，無疑又增大了工作量，他們需要根據(jù)新的標(biāo)注進(jìn)行開發(fā)。
- 線上組件庫開發(fā)完成后凤优，面對(duì)這么多已有的后臺(tái)產(chǎn)品悦陋，我們應(yīng)該如何逐步完成這么大體量的更新修改？這也是我們正在思考和規(guī)劃的筑辨。
當(dāng)然俺驶，不管是設(shè)計(jì)系統(tǒng)本身還是此次探索過程，都還存在很多其他的不足挖垛，未來也許還會(huì)面臨各式各樣新的挑戰(zhàn)痒钝，我將不斷嘗試不斷學(xué)習(xí)，期待能和我們的團(tuán)隊(duì)一起努力痢毒，使我們的設(shè)計(jì)系統(tǒng)送矩、工作流程、產(chǎn)品設(shè)計(jì)質(zhì)量都日趨完善哪替。
設(shè)計(jì)系統(tǒng)并不是我們的最終目標(biāo)
如果我們暫時(shí)沒有足夠的資源和精力去創(chuàng)建設(shè)計(jì)系統(tǒng)栋荸，或者我們并不確定自定義化的設(shè)計(jì)系統(tǒng)能如何為我們的團(tuán)隊(duì)增值，那么我們也可以利用現(xiàn)有的開源設(shè)計(jì)系統(tǒng)等資源去解決問題凭舶。
而當(dāng)問題已經(jīng)嚴(yán)重到需要通過創(chuàng)建一個(gè)自定義化的設(shè)計(jì)系統(tǒng)加以解決時(shí)晌块，我們也可以依據(jù)實(shí)際情況、有針對(duì)性地對(duì)設(shè)計(jì)系統(tǒng)的創(chuàng)建和實(shí)踐進(jìn)行規(guī)劃帅霜。
畢竟匆背，創(chuàng)建一個(gè)完美的設(shè)計(jì)系統(tǒng)并不是我們的目標(biāo)。
我們的目標(biāo)是優(yōu)化工作流程身冀，提高產(chǎn)品迭代效率钝尸，改善產(chǎn)品設(shè)計(jì)的一致性問題，提升產(chǎn)品體驗(yàn)搂根。而隨著業(yè)務(wù)需求的變化和產(chǎn)品復(fù)雜度的提升珍促，我們的解決方案將不斷變化、更新剩愧。
因此猪叙，設(shè)計(jì)系統(tǒng)本身的構(gòu)建也是動(dòng)態(tài)的、無止境的仁卷，它應(yīng)該始終效力于設(shè)計(jì)工作的規(guī)范與優(yōu)化穴翩，而不是成為枷鎖。
相關(guān)鏈接：
后臺(tái)產(chǎn)品設(shè)計(jì)體系的創(chuàng)建過程回顧一：創(chuàng)建背景
后臺(tái)產(chǎn)品設(shè)計(jì)體系的創(chuàng)建過程回顧三：工具與資源分享
SDS 的記錄文檔（語雀）
設(shè)計(jì)約定記錄文檔（語雀）
SDS 的記錄文檔（Gitbook）
源文件下載（騰訊微云）
