品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
組件設計是通過對功能及視覺表達中元素的拆解、歸納、重組；并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。組件庫幫助我們節省因重復設計產生的工作時間，讓我們更專注于用戶體驗和對產品的創新。
一、項目組件庫創建背景
我們在工作中經常會遇到這樣的工作場景：
- 設計師A：設計師B,把你xx項目的設計稿發我下，我要用里面的一個組件。
- 設計師A：設計師C,為什么你的設計稿里的顏色和我的不一致，到底以哪個為主？
- 設計師C：去問下主管以哪個為主。
- 產品部負責人：主管，為什么所有項目組件都不統一？
- 產品經理：這次需求跟上次沒有多大變化，很多組件都可以復用，為什么設計師評估的時間那么長？
- 前端工程師A：為什么每次給的設計稿樣式，顏色，組件都不同，我又得寫新的樣式表，2天肯定完不成。
- 開發工程師B：怎么又改組件？功能還沒做好
- ……
這樣的對話場景太常見，大家在相互推卸責任，產品抱怨設計師設計進度太慢，設計師抱怨前期沒有溝通好，開發抱怨工作量增加，設計師不專業等等。這一系列的問題不斷的重復出現，迫使我們去尋找解決方案。
二、什么是組件庫
組件設計是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成規范化的組件，通過多維度組合來構建整個設計方案，將這些組件整理在一起，便形成組件庫。
三、組件庫創建的意義
1. 保持視覺風格統一
一個產品必然有其固有的品牌基調和品牌傾向性，不同的設計樣式會給產品帶來不同的調性，為了保持產品視覺風格統一，設計師應該建立組件庫，制定設計規范，統一設計樣式。
2. 保持交互一致性
交互的一致性，可以減少用戶學習成本培養用戶習慣，讓產品擁有良好的用戶體驗。比如一個日期的選擇組件，在整個產品中應該就一種交互方式，如果一會是滾動，一會是下拉，會讓用戶操作起來比較煩躁。
3. 便于多設計師協作，也便于修改
每個設計師的想法不同，設計出來的樣式自然也不同，組件化設計可以解決多位設計相互協作的問題，節省項目時間，而且要修改，不用牽扯全局，修改組件即可。
4. 滿足不同場景需求
將組件視為一個獨立的產品，從多維度，多場景輸出組件的方案和組合標準，在組件設計過程中，我們進行更完整全面的思考，產出更能靈活適應不同場景的方案。
5. 便于多個項目后續迭代升級
新產品上線后，還需要不斷的去完善，在迭代過程中可能會新增其他功能，就需要在現有組件上進行補充升級。
四、組件庫創建流程
1. 組件清單
主要是整理和歸類線上組件，按照公司現有產品的交互路徑一步步操作，梳理項目，羅列清單。和產品或者需求方討論未來會有哪些新業務，現有的組件是否能夠滿足需求，是否需要補充設計方案。
清單整理完畢后，將每一個組件建成一個獨立任務，像日常需求那樣，方便隨時更新、復用。
2. 場景整理
把自己變成產品的深度用戶，把現有線上產品完整體驗一遍，繪制用戶行為路徑，并和需求方溝通了解后續計劃，將組件的所有的當前/潛在應用場景總結出來，盡可能不遺漏場景。
比如一個分享的組件使用的場景：
- 用戶主動點擊分享；
- 截圖分享；
- 得到結果或完成任務時分享；
- 打開APP時出彈層提示分享。
3. 競品調研
針對所要設計的組件，尋找行業相關競品，并分析競品的設計風格、設計亮點、設計趨勢，最后得出自己的設計總結并輸出。
例如：
4. 體驗分析
分析線上已有組件的體驗現狀如何，每類場景下需要解決的核心問題是什么，無法兼顧時如何取舍。
例如：
訂單的組件：
把組件拆解成多個區域如下：
商品信息組件：
商品所支付金額組件：
風險提示組件：
支付方式組件：
思考支付方式的場景：
無微信支付只有余額支付且余額為0：
無微信支付只有余額支付余額支付錢充足：
有微信支付有余額支付余額支付為0：
有微信支付有余額支付支付金額充足：
支付金額組件擴展：
分析：目前線上商品信息組件排版有些擁擠，對此做如下優化：
5. 方案設計
多維度去思考組件所使用的場景和一些交互狀態，考慮組件對所有場景的適應，設計一套符合自己產品特色的組件并含有多種設計方案。
設計組件時需要注意的要點：
- 組件命名以及排列要有規則，方便團隊成員查找對應的組件；
- 組件之間的元素是可以相互替換的，例如文字的顏色，按鈕的顏色都可以根據場景不同選擇對應的方案，圖標可以根據場景替換對應的顏色或者其他圖標等等；
- 組件應包含：默認狀態、交互狀態、用戶體驗。
例如：
6. 整合組件
將所設計的組件進行整合，便擁有了一個團隊的組件庫啦！
五、意見收集
通過上面的創建流程的講解，一個設計組件庫基本建立完成了，到底是否適合產品使用呢，我們還需要進行內部討論，聽取各方的反饋意見，進行增刪改查，然后就可以正式使用。
隨著各項目不斷的更新迭代，我們也會發現很多新的問題出現，所以設計組件庫也需要像產品一樣定期更新。可以定期對設計團隊、產品經理、開發團隊等相關同事進行意見收集，問問他們現階段遇到的一些問題和相關建議，然后把這些反饋收集起來進行篩選判斷，及時更新組件庫。
小結
組件庫幫助我們節省因重復設計產生的工作時間，讓我們更專注于用戶體驗和對產品的創新。當然組件庫的創建還需要不斷的積累和更新，需要團隊共同努力完成。作為設計師的我們，還有很多需要去學習的地方，讓我們一起努力吧！
本文由 @xuanruiyu 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。