UED交互組件庫

組件設計是經過對功能及視覺表達中元素的拆解、概括、重組；並基於可被複用的目的，造成規範化的組件，經過多維度組合來構建整個設計方案，將這些組件整理在一塊兒，便造成組件庫。組件庫幫助咱們節省因重複設計產生的工做時間，讓咱們更專一於用戶體驗和對產品的創新。

1、項目組件庫建立背景

咱們在工做中常常會遇到這樣的工做場景：
設計A：設計師B,把你xx項目的設計稿發我下，我要用裏面的一個組件。
設計D：設計師C,爲何你的設計稿裏的顏色和個人不一致，到底以哪一個爲主？
產品經理A：爲何全部項目組件都不統一？
產品經理B：此次需求跟上次沒有多大變化，不少組件均可以複用，爲何評估的時間那麼長？
開發A：爲何每次給的設計稿樣式，顏色，組件都不一樣，我又得寫新的樣式表，2天確定完不成。
開發B：怎麼又改組件？功能還沒作好
……
這樣的對話場景太常見，你們在相互推卸責任，產品抱怨設計師設計進度太慢，設計師抱怨前期沒有溝通好，開發抱怨工做量增長，設計師不專業等等。這一系列的問題不斷的重複出現，迫使咱們去尋找解決方案。

2、什麼是組件庫

組件庫就是界面設計經常使用控件或元素的集合，從某種意義上說，交互設計線框圖的組件庫比視覺設計階段的UI組件庫價值更高。UI設計階段，不一樣產品、不一樣項目的經常使用組件即便有共通之處，也必定是不徹底相同的。而在交互設計的線框圖階段，一個優秀的組件庫能夠同時在許多項目中發光發熱。

一個好的組件庫，衡量標準主要包括靈活性、複用性、全面性。靈活性指一個組件的字段、icon、配色都應該能夠靈活改寫，以應對多樣化的需求。複用性指對於通用組件，應當是能夠在不一樣項目間複用的。全面性則指一套組件庫應當覆蓋儘量多的經常使用元素。

組件化的初衷並不是提升一致性、利於團隊合做這些高大上的目的，而是人類進步的第一輩子產力——「懶」。消滅重複勞動是提升效率的主要途徑，勤勞如小蜜蜂的設計師也不例外，那麼組件化就是不管交互仍是UI設計中咱們不得不思考的問題。

雖然以前老是強調你們不要過度關注工具，對交互設計師而言，業務目標、流程和信息架構上的思考纔是咱們的核心價值所在。但這不表明工具就不須要思考和積累，一把更鋒利的工具才能幫助咱們把有限的時間和精力放在上面所說的核心思考上，而不是淪爲埋頭畫圖的線框仔。

3、組件庫建立的意義

1. 保持視覺風格統一

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

2. 保持交互一致性

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

3. 便於多設計師協做，也便於修改

每一個設計師的想法不一樣，設計出來的樣式天然也不一樣，組件化設計能夠解決多位設計相互協做的問題，節省項目時間，並且要修改，不用牽扯全局，修改組件便可。

4. 與視覺設計無縫銜接：

Sketch爲交互設計和視覺設計階段的無縫銜接提供了最好的平臺，交互組件庫能夠直接交付視覺設計師進行視覺設計，造成真正的UI組件庫（UI Kit）。

5. 有助於造成設計規範：

當UI組件庫造成後，「設計規範的積澱」——這個貫穿交互和UI設計管理工做中的老大難問題，就已經解決了一大半了，通過評審確認的UI組件庫能夠直接做爲視覺設計規範的一部分。

6. 利於團隊合做：

不管是交互設計組件庫仍是UI組件庫，通過整理和完善，在項目或者團隊中推行開來，對項目內，或者不一樣項目間設計成果的一致性、合做效率都大有裨益，也有助於讓整個品牌造成有效的辨識度。

7. 知足不一樣場景需求

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

8. 便於多個項目後續迭代升級

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

4、組件庫建立流程

1. 組件清單

主要是整理和歸類線上組件，按照公司現有產品的交互路徑一步步操做，梳理項目，羅列清單。和產品或者需求方討論將來會有哪些新業務，現有的組件是否可以知足需求，是否須要補充設計方案。 清單整理完畢後，將每個組件建成一個獨立任務，像平常需求那樣，方便隨時更新、複用。

2. 場景整理

把本身變成產品的深度用戶，把現有線上產品完總體驗一遍，繪製用戶行爲路徑，並和需求方溝通了解後續計劃，將組件的全部的當前/潛在應用場景總結出來，儘量不遺漏場景。

好比一個高級搜索組件使用的場景：
輸入框輸入關鍵字進行模糊搜索，出現的聯想選項能夠用上下箭頭進行選擇，按下回車鍵，內容區域展現加載狀態
輸入框輸入關鍵字鼠標懸停右側下拉展現所有篩選條件，模糊搜索的關鍵字在下拉中展現，並和其餘查詢條件聯查，tab鍵能夠切換下拉中的篩選條件，按下enter鍵收起高級搜索，內容展現加載狀態
點擊重置，清空全部查詢條件，並刷新查詢內容，不收起查詢條件；手動清空單個查詢條件，查詢內容區域不刷新，清空最後一個查詢條件是，查詢內容刷新，不收起高級搜索

3. 體驗分析

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

例如表單的組件：

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

輸入框：

選擇器：

時間選擇器：

開關：

多選：

單選：

文本域：

按鈕：

思考按鈕在點擊保存表單時的交互場景：

還沒填寫完表單信息不能保存提交的時候：

填寫完成後還未提交的時候：

鼠標懸停在保存按鈕上還未點擊的時候：

鼠標點擊保存按鈕還未鬆開鼠標的時候：

點擊保存後系統正在保存等待中的時候：

4. 方案設計

多維度去思考組件所使用的場景和一些交互狀態，考慮組件對全部場景的適應，設計一套符合本身產品特點的組件並含有多種設計方案。

設計組件時須要注意的要點：

• 組件命名以及排列要有規則，方便團隊成員查找對應的組件；
• 組件之間的元素是能夠相互替換的，例如文字的顏色，按鈕的顏色均可以根據場景不一樣選擇對應的方案，圖標能夠根據場景替換對應的顏色或者其餘圖標等等；
• 組件應包含：默認狀態、交互狀態、用戶體驗。
• 將所設計的組件進行整合，便擁有了一個團隊的組件庫啦！

5、意見收集

經過上面的建立流程的講解，一個設計組件庫基本創建完成了，究竟是否適合產品使用呢，咱們還須要進行內部討論，聽取各方的反饋意見，進行增刪改查，而後就能夠正式使用。

隨着各項目不斷的更新迭代，咱們也會發現不少新的問題出現，因此設計組件庫也須要像產品同樣按期更新。能夠按期對設計團隊、產品經理、開發團隊等相關同事進行意見收集，問問他們現階段遇到的一些問題和相關建議，而後把這些反饋收集起來進行篩選判斷，及時更新組件庫。

小結

組件庫幫助咱們節省因重複設計產生的工做時間，讓咱們更專一於用戶體驗和對產品的創新。固然組件庫的建立還須要不斷的積累和更新，須要團隊共同努力完成。做爲設計師的咱們，還有不少須要去學習的地方，讓咱們一塊兒努力吧！