黃昱芳的推薦清單

組件設計是通過對功能及視覺表達中元素的拆解、歸納、重組；并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。組件庫幫助我們節省因重復設計產生的工作時間，讓我們更專注于用戶體驗和對產品的創新。

一、項目組件庫創建背景

我們在工作中經常會遇到這樣的工作場景：

• 設計師A：設計師B,把你xx項目的設計稿發我下，我要用里面的一個組件。
• 設計師A：設計師C,為什么你的設計稿里的顏色和我的不一致，到底以哪個為主？
• 設計師C：去問下主管以哪個為主。
• 產品部負責人：主管，為什么所有項目組件都不統一？
• 產品經理：這次需求跟上次沒有多大變化，很多組件都可以復用，為什么設計師評估的時間那么長？
• 前端工程師A：為什么每次給的設計稿樣式，顏色，組件都不同，我又得寫新的樣式表，2天肯定完不成。
• 開發工程師B：怎么又改組件？功能還沒做好
• ……

這樣的對話場景太常見，大家在相互推卸責任，產品抱怨設計師設計進度太慢，設計師抱怨前期沒有溝通好，開發抱怨工作量增加，設計師不專業等等。這一系列的問題不斷的重復出現，迫使我們去尋找解決方案。

二、什么是組件庫

組件設計是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。

三、組件庫創建的意義

1. 保持視覺風格統一

一個產品必然有其固有的品牌基調和品牌傾向性，不同的設計樣式會給產品帶來不同的調性，為了保持產品視覺風格統一，設計師應該建立組件庫，制定設計規范，統一設計樣式。

2. 保持交互一致性

交互的一致性，可以減少用戶學習成本培養用戶習慣，讓產品擁有良好的用戶體驗。比如一個日期的選擇組件，在整個產品中應該就一種交互方式，如果一會是滾動，一會是下拉，會讓用戶操作起來比較煩躁。

3. 便于多設計師協作，也便于修改

每個設計師的想法不同，設計出來的樣式自然也不同，組件化設計可以解決多位設計相互協作的問題，節省項目時間，而且要修改，不用牽扯全局，修改組件即可。

4. 滿足不同場景需求

將組件視為一個獨立的產品，從多維度，多場景輸出組件的方案和組合標準，在組件設計過程中，我們進行更完整全面的思考，產出更能靈活適應不同場景的方案。

5. 便于多個項目后續迭代升級

新產品上線后，還需要不斷的去完善，在迭代過程中可能會新增其他功能，就需要在現有組件上進行補充升級。

四、組件庫創建流程

1. 組件清單

主要是整理和歸類線上組件，按照公司現有產品的交互路徑一步步操作，梳理項目，羅列清單。和產品或者需求方討論未來會有哪些新業務，現有的組件是否能夠滿足需求，是否需要補充設計方案。

清單整理完畢后，將每一個組件建成一個獨立任務，像日常需求那樣，方便隨時更新、復用。

2. 場景整理

把自己變成產品的深度用戶，把現有線上產品完整體驗一遍，繪制用戶行為路徑，并和需求方溝通了解后續計劃，將組件的所有的當前/潛在應用場景總結出來，盡可能不遺漏場景。

比如一個分享的組件使用的場景：

1. 用戶主動點擊分享；
2. 截圖分享；
3. 得到結果或完成任務時分享；
4. 打開APP時出彈層提示分享。

3. 競品調研

針對所要設計的組件，尋找行業相關競品，并分析競品的設計風格、設計亮點、設計趨勢，最后得出自己的設計總結并輸出。
例如：

4. 體驗分析

分析線上已有組件的體驗現狀如何，每類場景下需要解決的核心問題是什么，無法兼顧時如何取舍。

例如：

訂單的組件：

把組件拆解成多個區域如下：

商品信息組件：

商品所支付金額組件：

風險提示組件：

支付方式組件：

思考支付方式的場景：

無微信支付只有余額支付且余額為0：

無微信支付只有余額支付余額支付錢充足：

有微信支付有余額支付余額支付為0：

有微信支付有余額支付支付金額充足：

支付金額組件擴展：

分析：目前線上商品信息組件排版有些擁擠，對此做如下優化：

5. 方案設計

多維度去思考組件所使用的場景和一些交互狀態，考慮組件對所有場景的適應，設計一套符合自己產品特色的組件并含有多種設計方案。
設計組件時需要注意的要點：

1. 組件命名以及排列要有規則，方便團隊成員查找對應的組件；
2. 組件之間的元素是可以相互替換的，例如文字的顏色，按鈕的顏色都可以根據場景不同選擇對應的方案，圖標可以根據場景替換對應的顏色或者其他圖標等等；
3. 組件應包含：默認狀態、交互狀態、用戶體驗。

例如：

6. 整合組件

將所設計的組件進行整合，便擁有了一個團隊的組件庫啦！

五、意見收集

通過上面的創建流程的講解，一個設計組件庫基本建立完成了，到底是否適合產品使用呢，我們還需要進行內部討論，聽取各方的反饋意見，進行增刪改查，然后就可以正式使用。

隨著各項目不斷的更新迭代，我們也會發現很多新的問題出現，所以設計組件庫也需要像產品一樣定期更新。可以定期對設計團隊、產品經理、開發團隊等相關同事進行意見收集，問問他們現階段遇到的一些問題和相關建議，然后把這些反饋收集起來進行篩選判斷，及時更新組件庫。

小結

組件庫幫助我們節省因重復設計產生的工作時間，讓我們更專注于用戶體驗和對產品的創新。當然組件庫的創建還需要不斷的積累和更新，需要團隊共同努力完成。作為設計師的我們，還有很多需要去學習的地方，讓我們一起努力吧！

本文由 @xuanruiyu 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。