一、什么是UI組件

UI設計組件（UI KIT），直譯過來就是用戶界面成套元件，是界面設計常用控件或元件，[組]是設計元素的組合方式，[件]由不同的元件組成。

?

---

二、好的組件化特點

1.通用性

意味著足夠基礎和常見且不帶業務屬性，參與設計的每個人都應該知道這個組件的功能及目的，同時具備一定的拓展性

2.重點

要求元件的組合需要靈活，可以在不同場景下可以通過相互組合來快速構建交互框架原型圖，并根據不同頁面結構的變化來適應新的業務需求。

3.選擇性

適用于多個業務或產品，在設計過程和研發過程中都可以高頻轉換

---

三、組件化在工作中的價值

1.保證產品體驗的一致性

對于一個包含業務系統的大型復雜產品，每個獨立的業務系統雖然在功能上有一定區別，但整體的用戶體驗需要滿足基本的一致性。

2.提升設計師的效率

在需求量巨大且需求來自不同的業務線時，需要逐一替換頁面及組件，造成大量重復勞動，并且在評估需求及溝通可能存在不斷的細節調優，因此對于設計師而言，組件的高頻能大大提高設計效率，使設計師更多的將精力集中于理解和解決用戶的實際問題。

3.提升產品研發團隊的效率

通過場景及普通需求直接按規范進行設計和研發，減少上下游對同一頁面及組件使用方式的不同理解而產生多余的溝通成本。

4.利于沉淀設計規范

組件本身的設計和使用方式可以直接作為交互和視覺規范的一部分，按照統一的設計規范來確定需要使用的顏色，組件樣式，組合方式以及頁面結構，可以快速構建一個或多個產品的交互框架。

---

四、如何打造一個UI組件庫

1.遵循設計原則

21條可用性原則

?

2.打造配色方案

一個有效的組件庫需要滿足通用性，替代性，像配色方案就應該能被靈活自定義。

以網易七魚為例，設置了1種主色，4種輔助色和6種中性色來構造一致的外觀感受。

·主色：選擇藍色系來傳達智能服務，信任可靠，技術創新的品牌形象。?

·輔助色：除了品牌主色調藍色，在輔助色中也存在一樣的藍色，那是因為藍色是泛用性較廣的色系，用于產品中的主操作按鈕，文字按鈕或圖標等；紅色喚起注意并昭示危險，因此一般使用適當的操作和錯誤提示；黃色則常用于警示信息，提示用戶操作可能帶來的風險及后果；綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導。

·中性色：一般采用黑灰色調來展示產品的文本信息，背景和邊框色，用作表現層次結構。

?*組件庫重建之初無法一應俱全，是需要后續不斷的維護與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點就是從身邊的業務場景出發，從最基本，最簡單，最小的元素入手。

3.制定分類目錄

我們根據當下現有的業務場景和對往后一段時期的業務發展方向進行規劃，將組件庫的組件類型分為通用組件和業務組件。一般業務組件庫是不對外的（畢竟使用場景特殊也有限，放出參考意義不大），所以在FishDesign官網只能看到通用組件部分。

·通用組件：只使用范圍廣，擴大頻次高，可重復使用多個業務且不包含業務邏輯。某些導航欄，toast，彈窗等。

·業務組件：這類組件對比通用組件而言最大的特點就是包含了一系列業務屬性，跟產品功能有重疊的關聯性，因此影響到使用范圍可能僅限于1~2個業務系統或特殊場景，且復用頻次不高。

如何確定通用組件中的子分類：

1.?競品學習與研究，窮舉該部分產品類型中的組件類型。

2. 遍歷自己所負責的產品內已有的業務場景，提取并整理業務場景中所用到的組件。

3.?將同時整理好的兩部分組件進行篩選去重，保留高頻通用的部分。同樣是拖放篩選組件，由于具有統一的規范和組件，可能導致的后果就是在同一產品不同業務系統的相同場景下，使用的組件從樣式到交互方式都交替。我們要做的就是對這部分在類似業務場景中使用了多種表達形式的組件做合并去重，然后通過設計組內審來圈定最后通用組件的范圍。

4.?基于組件的屬性和使用場景，對圈定的組件范圍進行歸類。

由上述步驟，我們將通用組件繼續細分為五個子類別：基礎組件，導航，數據錄入，數據展示，操作反饋。

1.基礎組件：即按鈕，圖標等，相較于其他組件的使用場景更通用，或其他組件在實現時依賴了這些組件來實現的組件類別。

2.導航：即導航菜單，標簽，面包屑等，可以幫助用戶產品系統內部快速找到所在頁面層級或位置的組件類別。

3.數據錄入：即輸入框，選擇器，表單等，支持用戶將數據信息錄入到系統的組件類別。

4.數據展示：即圖表，表格，氣泡卡片等，將錄入到系統的數據信息展示出來的組件類別。

5.操作反饋：即初始，Alert，Toast等，在用戶操作前后，使系統狀態得以合理的反饋的組件類別

總結

以上是生活随笔為你收集整理的UI组件介绍（for设计师）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。