編輯導(dǎo)語：設(shè)計(jì)系統(tǒng)的搭建于大企業(yè)而言，可以有效提效降本。但是小團(tuán)隊(duì)有必要建立設(shè)計(jì)體系嗎？答案可能是否定的。那么當(dāng)團(tuán)隊(duì)面臨業(yè)務(wù)多、資源不足等問題時(shí)，又該如何解決呢？本文作者進(jìn)行了總結(jié)，一起來看一下吧。

當(dāng)然沒必要！

第一，小團(tuán)隊(duì)沒資源（人力+時(shí)間）。

第二，完善設(shè)計(jì)體系的維護(hù)成本遠(yuǎn)遠(yuǎn)大于提效降低的成本。

但是產(chǎn)品又面臨業(yè)務(wù)多，資源不足；組件混亂，設(shè)計(jì)一致性差，經(jīng)常重復(fù)造輪子；設(shè)計(jì)沒有時(shí)間理解業(yè)務(wù)，用戶體驗(yàn)差等問題。

01

如何解決這些問題呢？

我們可以量體裁衣，做一個(gè)適合當(dāng)前業(yè)務(wù)的設(shè)計(jì)體系，同時(shí)可以根據(jù)投入的人力和時(shí)間確定優(yōu)先級，分散在平時(shí)沒需求時(shí)設(shè)計(jì)。

如何建立一個(gè)適合業(yè)務(wù)的設(shè)計(jì)體系呢？我們可借鑒雙鉆模型的設(shè)計(jì)思路來進(jìn)行指導(dǎo)，主要從以下四步進(jìn)行：

1. 發(fā)現(xiàn)問題：梳理產(chǎn)品目前痛點(diǎn)

在業(yè)務(wù)初期，大多產(chǎn)品都是采用小步快跑的策略，因此在用戶體驗(yàn)、視覺上投入精力較少，當(dāng)業(yè)務(wù)線越來越多時(shí)，就會出現(xiàn)很多問題。

比如我之前負(fù)責(zé)的產(chǎn)品，業(yè)務(wù)線較為復(fù)雜，包括基金平臺、移民平臺、生活服務(wù)平臺、客戶管理、電子簽應(yīng)用等；同時(shí)設(shè)計(jì)師與PD的比例是1:4，每位設(shè)計(jì)師都身兼多條業(yè)務(wù)線，多個(gè)項(xiàng)目同期需要構(gòu)建、優(yōu)化，人力資源完全不足。

同時(shí)在敏捷開發(fā)下，設(shè)計(jì)完全沒有時(shí)間去梳理業(yè)務(wù)，考慮如何去提升界面可用性，如何去提升用戶體驗(yàn)。

還有公司業(yè)務(wù)整合后，各平臺風(fēng)格各異，樣式雜，多個(gè)系統(tǒng)交互不統(tǒng)一，給用戶造成了一定的困擾，也讓其對我們的專業(yè)性存疑。

當(dāng)問題越來越明顯，我們就必須想辦法將其解決，不然等他越滾越大，就更沒有辦法了。于是我們對產(chǎn)品問題進(jìn)行梳理，概括為：

1）外驅(qū)-業(yè)務(wù)訴求

1. 業(yè)務(wù)反饋操作流程繁瑣；
2. 員工操作效率低、任務(wù)完成率低、平臺使用率低；
3. 銷售流動(dòng)性大，新人宣導(dǎo)成本高。

2）內(nèi)驅(qū)-產(chǎn)研訴求

1. 各平臺視覺風(fēng)格不一致；
2. 各平臺交互體驗(yàn)不一致；
3. 各平臺相同模塊文案描述不一致；
4. 產(chǎn)品沒有統(tǒng)一的設(shè)計(jì)原則；
5. 沒有自己的設(shè)計(jì)規(guī)范和組件庫，都是直接用的element/antdesgin等開放的組件庫和規(guī)范；
6. 經(jīng)常重復(fù)造輪子，不同平臺，相同功能都需要重新設(shè)計(jì)和開發(fā)一次；
7. 設(shè)計(jì)還原度低，前端沒時(shí)間做視覺的修復(fù)；
8. 設(shè)計(jì)價(jià)值低，一直在做0-1創(chuàng)建的事情，沒有精力去了解業(yè)務(wù)、沒有時(shí)間去優(yōu)化界面，提升體驗(yàn)。

2. 定位問題：確定當(dāng)前急需解決的問題

定位問題的流程比較簡單，只需要找產(chǎn)品或者領(lǐng)導(dǎo)了解未來半年/一年的業(yè)務(wù)規(guī)劃即可。

通過溝通大致了解到，未來半年我們的規(guī)劃仍然是設(shè)計(jì)新功能（先保證有，可用），等業(yè)務(wù)線搭建完善后，在系統(tǒng)進(jìn)行優(yōu)化。

因此我們基本就定位好，先解決產(chǎn)研訴求，然后在去解決業(yè)務(wù)訴求，只有這樣我們才能從基礎(chǔ)的事務(wù)中解脫，去做更有價(jià)值的事情。

回到產(chǎn)研訴求，通過梳理我們概括為：

1. 對各平臺視覺交互，進(jìn)行優(yōu)化和統(tǒng)一；
2. 提高協(xié)作效率；
3. 提升界面還原度；
4. 提高組件的復(fù)用效率。

3. 尋找解決方案：建立設(shè)計(jì)體系

起初我以為只要沉淀組件庫、設(shè)計(jì)規(guī)范就能解決問題，最后發(fā)現(xiàn)只能解決一部分UI協(xié)作和復(fù)用的問題，并不能解決根本問題。

于是我開始向身邊的朋友請教，一個(gè)朋友告訴我，可以用設(shè)計(jì)系統(tǒng)解決這個(gè)問題，但是設(shè)計(jì)系統(tǒng)太龐大，本身需要很多資源，你們?nèi)颂俑緵]辦法做。

于是我開始了解什么是設(shè)計(jì)系統(tǒng)，開始看市面上關(guān)于設(shè)計(jì)系統(tǒng)的文章、書籍?！对O(shè)計(jì)體系》這本書推薦大家看看，書中和我們系統(tǒng)拆解了建立設(shè)計(jì)體系的方法：

1）設(shè)計(jì)體系的基礎(chǔ)：模式與實(shí)踐

“模式指的是界面中那些重復(fù)的要素：用戶流程、交互方式、按鈕、文本框、圖標(biāo)、配色、排版、文案，等等?！?/p>

“實(shí)踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團(tuán)隊(duì)協(xié)作時(shí)做這些事情的方法。”

2）建立和維護(hù)設(shè)計(jì)體系的實(shí)際步驟和實(shí)用技術(shù)

主要包括規(guī)劃任務(wù)、編寫界面清單、建立模式庫、創(chuàng)建、記錄、發(fā)展和維護(hù)設(shè)計(jì)模式等。

因此，我們只要制作好設(shè)計(jì)模式、實(shí)踐方法就能夠很好的解決我們的問題，由于資源較少，我們不可能像大廠一樣有專門的團(tuán)隊(duì)來維護(hù)設(shè)計(jì)系統(tǒng)，因此我們需要讓每個(gè)設(shè)計(jì)、前端、產(chǎn)品、技術(shù)都能夠參與進(jìn)來，建立適合業(yè)務(wù)的設(shè)計(jì)系統(tǒng)。

4. 有效的解決方案：建立適合業(yè)務(wù)的設(shè)計(jì)體系

找到解決方案了，我們繼續(xù)針對模式和實(shí)踐進(jìn)一步拆分為任務(wù)：

1）模式：將界面系統(tǒng)化

• 定義設(shè)計(jì)指導(dǎo)原則；
• 定義可復(fù)用的設(shè)計(jì)模式并將其標(biāo)準(zhǔn)化；
• 建立模式庫；
• 建立主設(shè)計(jì)文件，收集最新的模式；
• 重構(gòu)代碼和前端框架，以支持模塊化的方法。

2）共享的實(shí)踐：建立共享的流程和治理

• 通過溝通、協(xié)作、結(jié)對子、培訓(xùn)等方法，建立知識共享的流程；
• 在整個(gè)公司推廣模式庫，鼓勵(lì)大家使用；
• 面向所有部門推廣共享的設(shè)計(jì)語言；
• 在入職培訓(xùn)中引入對設(shè)計(jì)體系的介紹。

根據(jù)這些任務(wù)，我們在分析哪些是需要做的，我們?nèi)绾稳プ觯?/p>

對于中小公司，前端框架一般都是基于Ant design或者Element進(jìn)行，因此組件庫直接下載資源即可。

• Ant Design 資源：https://ant.design/docs/resources-cn
• Element figma資源：https://www.figma.com/file/DBpNb9iADyxEJpgDCNIRNT/Element-UI-Kit-2.15.7-(Community)?node-id=686%3A149
• Arco Design figma資源：https://www.figma.com/file/xcwQO53J0OGZ0nKDs5Swrh/Arco-Design-System?node-id=8253%3A44145

另外，針對常見的表格、篩選、表單、彈窗、登錄注冊流程、可復(fù)用的用戶操作流程、交互方式等設(shè)計(jì)模式，分別定義他們應(yīng)用規(guī)則、交互流程、有多少變體、每個(gè)變體的實(shí)際應(yīng)用場景等。

制作完后，可以發(fā)起一個(gè)會議，在整個(gè)公司進(jìn)行宣講，這樣一個(gè)基礎(chǔ)的設(shè)計(jì)體系，就能夠解決協(xié)作、效率等問題。

02

如果你的公司，對于視覺、用戶滿意度、產(chǎn)品可用性要求較高時(shí)，在上述任務(wù)的基礎(chǔ)上，我們還需要制定適合業(yè)務(wù)的設(shè)計(jì)原則、建立適合的設(shè)計(jì)風(fēng)格、建立感知性模式。

具體流程如下：

1. 風(fēng)格探索，界面優(yōu)化；
2. 確定產(chǎn)品設(shè)計(jì)原則；
3. 基于開源組件，根據(jù)自己的風(fēng)格進(jìn)行優(yōu)化，制作基礎(chǔ)的組件庫；
4. 梳理優(yōu)化模塊；
5. 建立通用設(shè)計(jì)模式庫；
6. 完善設(shè)計(jì)規(guī)范。

1. 風(fēng)格探索，界面優(yōu)化

關(guān)于風(fēng)格探索，大家去看我之前寫的一篇文章《如何提升B端界面的精致度，做到這兩點(diǎn)就夠了！》。

第一，要知道什么是好的設(shè)計(jì)，多拆解國內(nèi)外優(yōu)化的B端產(chǎn)品。

第二，多在工作中實(shí)踐，有時(shí)間多做ABC方案，鍛煉自己的方案設(shè)計(jì)能力，多踩一些坑，時(shí)刻保持學(xué)習(xí)能力，慢慢就成長了。

關(guān)于界面優(yōu)化，我們根據(jù)定義的風(fēng)格將關(guān)鍵界面進(jìn)行優(yōu)化即可，比如列表頁、表單頁，通過ABC方案和產(chǎn)品進(jìn)行討論，選出一個(gè)最適合當(dāng)前產(chǎn)品的風(fēng)格。雖然這里一句話概括了，但是對于剛轉(zhuǎn)行的朋友不是那么容易，以后有時(shí)間細(xì)聊。

2. 確定產(chǎn)品設(shè)計(jì)原則

設(shè)計(jì)原則就像做人的原則一樣，有原則的人他有他的思想，指導(dǎo)他什么事情能做，什么事情不能做，什么事情應(yīng)該做。

比如儒學(xué)的《三綱八目》，所謂三綱，“明德、親民、止于至善”，所謂八目，“格物、致知、誠意、正心、修身、齊家、治國、平天下”，它鑄造了一代又一代中國知識分子的人格心理。

比如《曾國藩教子十法》，“一省、二靜、三勤、四和、五誠、六學(xué)、七明、八挺、九趣、十恒”十個(gè)角度，去教育他的子女。

設(shè)計(jì)也是一樣，如果你的產(chǎn)品沒有設(shè)計(jì)原則，那么我們的設(shè)計(jì)就主要依靠設(shè)計(jì)師的經(jīng)驗(yàn)和參考，大家常常說的離開競品和參考就不知道如何設(shè)計(jì)就是這個(gè)原因。

如何確定產(chǎn)品設(shè)計(jì)原則呢？大家可以詳細(xì)去看看《設(shè)計(jì)體系》《簡約至上》這兩本書，也可以看我之前的文章《沒有競品參考就不知道如何設(shè)計(jì)，什么情況？》里面也詳細(xì)和大家分享了如何構(gòu)建自己的設(shè)計(jì)原則。

3. 基于開源組件，根據(jù)自己的風(fēng)格進(jìn)行優(yōu)化，制作基礎(chǔ)的組件庫

通過上兩步界面風(fēng)格我們已經(jīng)確定、設(shè)計(jì)原則也已經(jīng)確定了，我們基礎(chǔ)組件的樣式也就基本確定了，這時(shí)候就需要將原來開源的組件庫進(jìn)行優(yōu)化。

開源組件庫內(nèi)容往往較多，我們不用全部都拿來優(yōu)化，我們只需要做我們有的組件，和交互狀態(tài)，后期有新增時(shí)，在慢慢添加就可以了。

比如Ant design的Input組件，官方提供了這么多樣式，我們不可能都能用上，我們選擇好尺寸，復(fù)制出對應(yīng)的狀態(tài)，然后在對其進(jìn)行優(yōu)化。

另外，Arco Design的組件庫樣式相對好看很多，大家可以直接下載它的組件，進(jìn)行樣式修改。需要注意的是，必須遵循公司使用框架的結(jié)構(gòu)，只能進(jìn)行樣式的更改。

再次強(qiáng)調(diào)這里不需要將框架的內(nèi)容全部拔下來，把輸入框、選擇器、搜索框～等常用的交互狀態(tài)做好就行，用不上的，比如大中小的尺寸，我們沒必要去做。

4. 梳理優(yōu)化模塊

基礎(chǔ)組件優(yōu)化好之后，我們就需要梳理產(chǎn)品中，那么模塊需要優(yōu)化，這里大家需要將各個(gè)平臺進(jìn)行走查，可以從客戶反饋、可用性、一致性、視覺感受等角度去排查，然后建立優(yōu)化排期框架。

5. 建立通用設(shè)計(jì)模式庫

其實(shí)在上面我們已經(jīng)建立了一個(gè)簡單的交互模式庫，但是由于時(shí)間關(guān)系可能思考不充分，因此這時(shí)候我們可以在之前交互設(shè)計(jì)模式的基礎(chǔ)上進(jìn)行調(diào)研，進(jìn)一步優(yōu)化。

比如我之前在做表單設(shè)計(jì)模式時(shí)的一些基礎(chǔ)分析《如何提高B端表單操作效率，這里有7個(gè)技巧！》。

具體如何建立通用的設(shè)計(jì)模式庫，一篇文章講不清楚，后面我會將這些模塊逐一的和大家分享。

6. 完善設(shè)計(jì)規(guī)范

當(dāng)模式庫制作好后，之前的交互流程、組件樣式等有些不太合適，因此這時(shí)候我們就需要將之前的規(guī)范進(jìn)行調(diào)整，優(yōu)化、并制定好后期的維護(hù)規(guī)則。

劃重點(diǎn)

TED用戶體驗(yàn)架構(gòu)師說：“做正確的設(shè)計(jì)，而非一致性的設(shè)計(jì)。優(yōu)先考慮的應(yīng)當(dāng)是把頁面本身做到最好。為此我們不斷地改進(jìn)頁面，以期達(dá)到最佳效果。不應(yīng)該用教條式的一致性和已有的模式去驅(qū)動(dòng)設(shè)計(jì)決策”

在優(yōu)化和維護(hù)的過程中，大家不要以為有了設(shè)計(jì)體系，就輕松了，大家都拖拖組件、復(fù)用模式就行了。我們做這個(gè)的初衷是為了把我們從基礎(chǔ)的需求中解脫出來，讓我們有時(shí)間、有空間去為用戶創(chuàng)造更大的價(jià)值。

我們做設(shè)計(jì)也不能為了一致而一致，也不能因?yàn)槟硞€(gè)新模塊，模式庫里面沒有合適的，你非要往以前的基礎(chǔ)上靠，本來做設(shè)計(jì)體系為了解放生產(chǎn)力的，創(chuàng)造更大的價(jià)值，最后反而困住了自己的雙手。

另外，設(shè)計(jì)體系、模式庫也不能讓不好的設(shè)計(jì)變好，同志仍需努力～

設(shè)計(jì)系統(tǒng)相關(guān)文章：

• ToB新視角：小程序生態(tài)評估方法探索：https://mp.weixin.qq.com/s/bnLGxxmut1S1BdziOv1jtw
• 「 復(fù)雜系統(tǒng)如何設(shè)計(jì)」論B端產(chǎn)品的體系化構(gòu)建：https://mp.weixin.qq.com/s/bC5s4jmXN3kkhltZlkq75g
• Pixel-解決規(guī)模化業(yè)務(wù)增長的設(shè)計(jì)系統(tǒng)建立和實(shí)踐：https://mp.weixin.qq.com/s/ylsfgUJk3D2gcDeMHiplHw
• 混合云場景下“監(jiān)”的設(shè)計(jì)模型及規(guī)則（上）：https://mp.weixin.qq.com/s/l-wlTanidhkjwCma1bw0ag
• 談?wù)凚端用戶幫助體系的搭建：https://mp.weixin.qq.com/s/2XKnfqSIUtWGh8RvIRSf6A
• 高效設(shè)計(jì)體系搭建之如何利其器：https://www.yuque.com/fengzhengkk/emds43/xomnet#JPnRO
• toB設(shè)計(jì)系統(tǒng) – 在平平淡淡中開花結(jié)果：https://mp.weixin.qq.com/s/3u7P4lKCpBSK826Kn_azWg
• “管”視角下的設(shè)計(jì)思維和策略（中）：https://mp.weixin.qq.com/s/v5t3Z2DY6iuy4ND3ufFoiA
• B 類產(chǎn)品文案指南：http://m.codemsi.com/copy/4612854.html
• 群核設(shè)計(jì)系統(tǒng)Manycore Design——平臺解決方案：https://www.yuque.com/meifangmia/zwcdgs/giu0e
• Ke.Design：從服務(wù)出發(fā)，打造生長·包容·聯(lián)接的設(shè)計(jì)系統(tǒng)：https://mp.weixin.qq.com/s/vKveeKNYcZ14vzXuMtBMrw
• B端組件庫“新”解：https://mp.weixin.qq.com/s/oy_IVmwha2eIQ7U-2-gWjQ
• 在整理設(shè)計(jì)規(guī)范中變強(qiáng)：https://zhuanlan.zhihu.com/p/27701550
• 出海場景下做體驗(yàn)設(shè)計(jì)的體系化探索：https://mp.weixin.qq.com/s/LAAVUFaWMuNGHNTcGZW-1Q
• 深度薦讀|有贊CEO白鴉的內(nèi)部培訓(xùn)《產(chǎn)品設(shè)計(jì)原則》（含完整音頻）：https://mp.weixin.qq.com/s/yqhir39BPJGlnXqE4IytiQ
• 騰訊文檔-構(gòu)建科學(xué)有效的色彩系統(tǒng)：https://isux.tencent.com/articles/tencentdocs-colors.html
• Design Token 應(yīng)用指南——設(shè)計(jì)篇：https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw
• 汽車行業(yè) – 移動(dòng)輸入組件 – 設(shè)計(jì)沉淀：https://mp.weixin.qq.com/s/HIOCTQsvurJqObhhyGkkmw
• 發(fā)揮設(shè)計(jì)中臺能力-平臺化搜索設(shè)計(jì)：https://mp.weixin.qq.com/s/s3vgWOTD5tsqbUrw4uebjg

作者：風(fēng)箏KK，公眾號：設(shè)計(jì)早8點(diǎn)

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

題圖來自Pexels，基于CC0協(xié)議