編輯導語：設計系統的搭建於大企業而言，可以有效提效降本。但是小團隊有必要建立設計體系嗎？答案可能是否定的。那麼當團隊面臨業務多、資源不足等問題時，又該如何解決呢？本文作者進行了總結，一起來看一下吧。
當然沒必要！
第一，小團隊沒資源（人力+時間）。
第二，完善設計體系的維護成本遠遠大於提效降低的成本。
但是產品又面臨業務多，資源不足；組件混亂，設計一致性差，經常重複造輪子；設計沒有時間理解業務，用户體驗差等問題。
01 如何解決這些問題呢？
我們可以量體裁衣，做一個適合當前業務的設計體系，同時可以根據投入的人力和時間確定優先級，分散在平時沒需求時設計。
如何建立一個適合業務的設計體系呢？我們可借鑑雙鑽模型的設計思路來進行指導，主要從以下四步進行：
在業務初期，大多產品都是採用小步快跑的策略，因此在用户體驗、視覺上投入精力較少，當業務線越來越多時，就會出現很多問題。
比如我之前負責的產品，業務線較為複雜，包括基金平台、移民平台、生活服務平台、客户管理、電子籤應用等；同時設計師與PD的比例是1:4，每位設計師都身兼多條業務線，多個項目同期需要構建、優化，人力資源完全不足。
同時在敏捷開發下，設計完全沒有時間去梳理業務，考慮如何去提升界面可用性，如何去提升用户體驗。
還有公司業務整合後，各平台風格各異，樣式雜，多個系統交互不統一，給用户造成了一定的困擾，也讓其對我們的專業性存疑。
當問題越來越明顯，我們就必須想辦法將其解決，不然等他越滾越大，就更沒有辦法了。於是我們對產品問題進行梳理，概括為：
1）外驅-業務訴求
- 業務反饋操作流程繁瑣；
- 員工操作效率低、任務完成率低、平台使用率低；
- 銷售流動性大，新人宣導成本高。
2）內驅-產研訴求
- 各平台視覺風格不一致；
- 各平台交互體驗不一致；
- 各平台相同模塊文案描述不一致；
- 產品沒有統一的設計原則；
- 沒有自己的設計規範和組件庫，都是直接用的element/antdesgin等開放的組件庫和規範；
- 經常重複造輪子，不同平台，相同功能都需要重新設計和開發一次；
- 設計還原度低，前端沒時間做視覺的修復；
- 設計價值低，一直在做0-1創建的事情，沒有精力去了解業務、沒有時間去優化界面，提升體驗。
定位問題的流程比較簡單，只需要找產品或者領導瞭解未來半年/一年的業務規劃即可。
通過溝通大致瞭解到，未來半年我們的規劃仍然是設計新功能（先保證有，可用），等業務線搭建完善後，在系統進行優化。
因此我們基本就定位好，先解決產研訴求，然後在去解決業務訴求，只有這樣我們才能從基礎的事務中解脱，去做更有價值的事情。
回到產研訴求，通過梳理我們概括為：
- 對各平台視覺交互，進行優化和統一；
- 提高協作效率；
- 提升界面還原度；
- 提高組件的複用效率。
起初我以為只要沉澱組件庫、設計規範就能解決問題，最後發現只能解決一部分UI協作和複用的問題，並不能解決根本問題。
於是我開始向身邊的朋友請教，一個朋友告訴我，可以用設計系統解決這個問題，但是設計系統太龐大，本身需要很多資源，你們人太少根本沒辦法做。
於是我開始瞭解什麼是設計系統，開始看市面上關於設計系統的文章、書籍。《設計體系》這本書推薦大家看看，書中和我們系統拆解了建立設計體系的方法：
1）設計體系的基礎：模式與實踐
“模式指的是界面中那些重複的要素：用户流程、交互方式、按鈕、文本框、圖標、配色、排版、文案，等等。”
“實踐則是我們如何創建、捕獲、共享和使用這些模式，尤其是在團隊協作時做這些事情的方法。”
2）建立和維護設計體系的實際步驟和實用技術
主要包括規劃任務、編寫界面清單、建立模式庫、創建、記錄、發展和維護設計模式等。
因此，我們只要製作好設計模式、實踐方法就能夠很好的解決我們的問題，由於資源較少，我們不可能像大廠一樣有專門的團隊來維護設計系統，因此我們需要讓每個設計、前端、產品、技術都能夠參與進來，建立適合業務的設計系統。
4. 有效的解決方案：建立適合業務的設計體系找到解決方案了，我們繼續針對模式和實踐進一步拆分為任務：
1）模式：將界面系統化
- 定義設計指導原則；
- 定義可複用的設計模式並將其標準化；
- 建立模式庫；
- 建立主設計文件，收集最新的模式；
- 重構代碼和前端框架，以支持模塊化的方法。
2）共享的實踐：建立共享的流程和治理
- 通過溝通、協作、結對子、培訓等方法，建立知識共享的流程；
- 在整個公司推廣模式庫，鼓勵大家使用；
- 面向所有部門推廣共享的設計語言；
- 在入職培訓中引入對設計體系的介紹。
根據這些任務，我們在分析哪些是需要做的，我們如何去做？
對於中小公司，前端框架一般都是基於Ant design或者Element進行，因此組件庫直接下載資源即可。
- 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
另外，針對常見的表格、篩選、表單、彈窗、登錄註冊流程、可複用的用户操作流程、交互方式等設計模式，分別定義他們應用規則、交互流程、有多少變體、每個變體的實際應用場景等。
製作完後，可以發起一個會議，在整個公司進行宣講，這樣一個基礎的設計體系，就能夠解決協作、效率等問題。
02如果你的公司，對於視覺、用户滿意度、產品可用性要求較高時，在上述任務的基礎上，我們還需要制定適合業務的設計原則、建立適合的設計風格、建立感知性模式。
具體流程如下：
- 風格探索，界面優化；
- 確定產品設計原則；
- 基於開源組件，根據自己的風格進行優化，製作基礎的組件庫；
- 梳理優化模塊；
- 建立通用設計模式庫；
- 完善設計規範。
關於風格探索，大家去看我之前寫的一篇文章《如何提升B端界面的精緻度，做到這兩點就夠了！》。
第一，要知道什麼是好的設計，多拆解國內外優化的B端產品。
第二，多在工作中實踐，有時間多做ABC方案，鍛鍊自己的方案設計能力，多踩一些坑，時刻保持學習能力，慢慢就成長了。
關於界面優化，我們根據定義的風格將關鍵界面進行優化即可，比如列表頁、表單頁，通過ABC方案和產品進行討論，選出一個最適合當前產品的風格。雖然這裏一句話概括了，但是對於剛轉行的朋友不是那麼容易，以後有時間細聊。
2. 確定產品設計原則設計原則就像做人的原則一樣，有原則的人他有他的思想，指導他什麼事情能做，什麼事情不能做，什麼事情應該做。
比如儒學的《三綱八目》，所謂三綱，“明德、親民、止於至善”，所謂八目，“格物、致知、誠意、正心、修身、齊家、治國、平天下”，它鑄造了一代又一代中國知識分子的人格心理。
比如《曾國藩教子十法》，“一省、二靜、三勤、四和、五誠、六學、七明、八挺、九趣、十恆”十個角度，去教育他的子女。
設計也是一樣，如果你的產品沒有設計原則，那麼我們的設計就主要依靠設計師的經驗和參考，大家常常説的離開競品和參考就不知道如何設計就是這個原因。
如何確定產品設計原則呢？大家可以詳細去看看《設計體系》《簡約至上》這兩本書，也可以看我之前的文章《沒有競品參考就不知道如何設計，什麼情況？》裏面也詳細和大家分享瞭如何構建自己的設計原則。
通過上兩步界面風格我們已經確定、設計原則也已經確定了，我們基礎組件的樣式也就基本確定了，這時候就需要將原來開源的組件庫進行優化。
開源組件庫內容往往較多，我們不用全部都拿來優化，我們只需要做我們有的組件，和交互狀態，後期有新增時，在慢慢添加就可以了。
比如Ant design的Input組件，官方提供了這麼多樣式，我們不可能都能用上，我們選擇好尺寸，複製出對應的狀態，然後在對其進行優化。
另外，Arco Design的組件庫樣式相對好看很多，大家可以直接下載它的組件，進行樣式修改。需要注意的是，必須遵循公司使用框架的結構，只能進行樣式的更改。
再次強調這裏不需要將框架的內容全部拔下來，把輸入框、選擇器、搜索框～等常用的交互狀態做好就行，用不上的，比如大中小的尺寸，我們沒必要去做。
4. 梳理優化模塊基礎組件優化好之後，我們就需要梳理產品中，那麼模塊需要優化，這裏大家需要將各個平台進行走查，可以從客户反饋、可用性、一致性、視覺感受等角度去排查，然後建立優化排期框架。
其實在上面我們已經建立了一個簡單的交互模式庫，但是由於時間關係可能思考不充分，因此這時候我們可以在之前交互設計模式的基礎上進行調研，進一步優化。
比如我之前在做表單設計模式時的一些基礎分析《如何提高B端表單操作效率，這裏有7個技巧！》。
具體如何建立通用的設計模式庫，一篇文章講不清楚，後面我會將這些模塊逐一的和大家分享。
6. 完善設計規範當模式庫製作好後，之前的交互流程、組件樣式等有些不太合適，因此這時候我們就需要將之前的規範進行調整，優化、並制定好後期的維護規則。
劃重點
TED用户體驗架構師説：“做正確的設計，而非一致性的設計。優先考慮的應當是把頁面本身做到最好。為此我們不斷地改進頁面，以期達到最佳效果。不應該用教條式的一致性和已有的模式去驅動設計決策”
在優化和維護的過程中，大家不要以為有了設計體系，就輕鬆了，大家都拖拖組件、複用模式就行了。我們做這個的初衷是為了把我們從基礎的需求中解脱出來，讓我們有時間、有空間去為用户創造更大的價值。
我們做設計也不能為了一致而一致，也不能因為某個新模塊，模式庫裏面沒有合適的，你非要往以前的基礎上靠，本來做設計體系為了解放生產力的，創造更大的價值，最後反而困住了自己的雙手。
另外，設計體系、模式庫也不能讓不好的設計變好，同志仍需努力～
設計系統相關文章：
- ToB新視角：小程序生態評估方法探索：https://mp.weixin.qq.com/s/bnLGxxmut1S1BdziOv1jtw
- 「 複雜系統如何設計」論B端產品的體系化構建：https://mp.weixin.qq.com/s/bC5s4jmXN3kkhltZlkq75g
- Pixel-解決規模化業務增長的設計系統建立和實踐：https://mp.weixin.qq.com/s/ylsfgUJk3D2gcDeMHiplHw
- 混合雲場景下“監”的設計模型及規則（上）：https://mp.weixin.qq.com/s/l-wlTanidhkjwCma1bw0ag
- 談談B端用户幫助體系的搭建：https://mp.weixin.qq.com/s/2XKnfqSIUtWGh8RvIRSf6A
- 高效設計體系搭建之如何利其器：https://www.yuque.com/fengzhengkk/emds43/xomnet#JPnRO
- toB設計系統 – 在平平淡淡中開花結果：https://mp.weixin.qq.com/s/3u7P4lKCpBSK826Kn_azWg
- “管”視角下的設計思維和策略（中）：https://mp.weixin.qq.com/s/v5t3Z2DY6iuy4ND3ufFoiA
- B 類產品文案指南：https://www.woshipm.com/copy/4612854.html
- 羣核設計系統Manycore Design——平台解決方案：https://www.yuque.com/meifangmia/zwcdgs/giu0e
- Ke.Design：從服務出發，打造生長·包容·聯接的設計系統：https://mp.weixin.qq.com/s/vKveeKNYcZ14vzXuMtBMrw
- B端組件庫“新”解：https://mp.weixin.qq.com/s/oy_IVmwha2eIQ7U-2-gWjQ
- 在整理設計規範中變強：https://zhuanlan.zhihu.com/p/27701550
- 出海場景下做體驗設計的體系化探索：https://mp.weixin.qq.com/s/LAAVUFaWMuNGHNTcGZW-1Q
- 深度薦讀|有贊CEO白鴉的內部培訓《產品設計原則》（含完整音頻）：https://mp.weixin.qq.com/s/yqhir39BPJGlnXqE4IytiQ
- 騰訊文檔-構建科學有效的色彩系統：https://isux.tencent.com/articles/tencentdocs-colors.html
- Design Token 應用指南——設計篇：https://mp.weixin.qq.com/s/eg_hP8o3oEAAVwAxmqhvGw
- 汽車行業 – 移動輸入組件 – 設計沉澱：https://mp.weixin.qq.com/s/HIOCTQsvurJqObhhyGkkmw
- 發揮設計中台能力-平台化搜索設計：https://mp.weixin.qq.com/s/s3vgWOTD5tsqbUrw4uebjg
作者：風箏KK，公眾號：設計早8點
本文由 @風箏KK 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Pexels，基於CC0協議