工作中大家都可能遇到過，設計完成後因為某些原因突然要批量修改某一個字段文字的大小，或者某個按鈕的顏色。
領導一聲令下，苦逼的設計師就要累死累活地修改界面了，有時最後的結果可能還是改來改去改回第一版，不知道多少時間浪費在了沒有意義的重複性工作中，此時要是運用了組件進行設計，就只要簡單幾步操作就可以瞬間修改100多個界面。
組件介紹
1. 什麼叫組件？
組件是通過對功能及視覺表達中元素的拆解、歸納、重組，並基於可被複用的目的，形成的規範化模塊。它就像組成完整框架的單元體（比如按鈕、導航欄、tab欄等），具有標準規範和可複用場景的基本模塊。
從字面上理解：
- 「組」：多種設計元素組合在一起。
- 「件」：由不同的個體元件組合而成。
它們作為一個獨立個體存在，可進行自由組合和替換。（如下圖）
我們日常看到的完整項目，就是由許多個組件進行搭建而成的。如下圖虎課網及CCTalk、大眾點評為例：
上面三張圖中的元素中任何一塊都可以稱之為組件。
2. 組件的命名
組件命名規範化，我們在給組件命名時要遵循一定的命名規範，一個好的命名規範可以方便開發和設計師查找且使用相應的組件，如下圖：
組件化設計的優勢
1. 有助於風格統一
在一個項目頁面裡，設計師有時候會將文字或者圖片不經意的左右移動1px-2px而不知，從而導致設計元素間距不一致。又或者是，大量重複的手動化導致細節的疏忽。組件化設計就能很好的避免這個問題。
在日常設計中，我們常常會將同一個模塊的內容應用到不同地方，如果我們每次都重新設計，每一個設計都有差異，這樣會讓整個項目的樣式都不同。如果我們應用到了組件，在不同頁面中，我們就調用組件，這樣每個頁面就不會出現差異化，有利於項目的設計風格統一。
2. 便於團隊協作（設計師與設計師之間）
在多個設計師同步進行一個項目的時候，規範化的組件設計能保持設計結果的統一性，避免出現多人多風格的現象。如兩個設計師進行協作設計時，彼此按照各自的操作習慣處理圓角大小，一個設計的是4px，一個設計的是6px，；兩人不同的設計習慣不僅加大了後期的溝通成本，而且需要花很多時間去修改，假如兩人使用同一個組件，同類型問題就不會出現，後期修改組件也更加容易。
3. 提高開發者的工作效率（設計師與開發之間）
組件化設計不僅方便設計師更高效的製作頁面，同時也能提高開發者的工作效率。既可準確定位又方便後期的維護和修改，在發現問題時能快速鎖定錯誤發生的位置。同時，開發者之間也能通過組件進行協作與同步，減少多餘的溝通成本，提高了工作效率。
4. 便於後期修改
假如設計師需要在原來的版本上將按鈕顏色進行修改，如果組件未進行封裝，可能要耗費很多時間進行一個個單獨進行調色。組件化的優勢就在於，幾十個或者更多的組件，你只需要選擇所需要修改的顏色即可，大大的縮短了調整優化的時間。
既然利用組件化設計有這麼多好處，那麼我們趕緊一起來看看如何構建組件吧！
組件化創建流程
在工作中，組件化創建流程分為6步，如下圖：
1. 調研分析
分析相關行業競品組件的視覺風格、情感化設計，如下圖：
這裡做競品分析不是為了沿用各種產品設計裡的「通用方案」，要解決的核心問題不同，產生的方案也會有差異，明確需求後得出組件設計。
2. 方案設計
考慮所有場景下對組件的展示有何變化。需要融入更多自己對於人性化、創新細節的思考。除了設計細節方面，各個交互狀態儘可能考慮周全，如下圖：
如相同組件在不同場景呈現的交互狀態，相應的顏色、大小也會跟著發生變化。
3. 整理歸類
整理和歸類線上組件，討論補充現有組件能否滿足需求。並和產品溝通了解後續計劃，將組件的所有的當前以及潛在的應用場景總結出來，評估具體組件優先級和迭代計劃，如下圖（圖為螞蟻金服組件）：
組件整理完畢後，明確優先級後錄入到在線協作工具，將每一個組件建成一個獨立任務，像日常需求那樣，方便隨時更新。
4. 場景走查
把自己變成產品的深度用戶，將線上產品按照用戶行為路線，完整體驗走查一遍，儘可能不遺漏場景。
5. 問題分析
分析線上已有組件的體驗現狀如何，每類場景下需要解決的核心問題是什麼，無法兼顧時如何取捨。
有時我們會發現想解決的問題無法都兼顧到，產生不了最理想的方案，這時就要對問題優先級有個明確判斷，比如優先考慮效率提升，美觀可以次要一點，這樣方案設計階段可以在幾種解決方案中作出最合適的決策。
6. 效果驗證
通過用戶調研、數據分析的反饋結果，看看組件是否達到效果，如果不理想則進一步分析原因，迭代改進設計方案。
sketch實操講解
1. 組件的基礎使用方法
要是你掌握sketch組件的話，整體UI（100多頁）中的導航背景換個顏色只是秒秒鐘解決的事情。
創建組件
其實sketch組件的創建很簡單的，只需要點一下就可以啦，那麼創建完組件有什麼用呢？
可以拖拽進行復制使用，或是直接在組件庫裡面調出
可以直接編輯裡面的文字
還可以統一對組件調整背景顏色
雙擊nav進入組件庫，對nav組件背景顏色進行調整，頁面中運用到的nav組件其背景顏色會統一進行更改（再也不怕領導對UI界面整體調整顏色啦）。
2. 組件的嵌套
大家應該會有很多疑問什麼是組件的嵌套呢？組件的嵌套就是組件套組件。
組件的一次嵌套
舉個例子：之前創建了nav組件，然後可以在nav組件中將左邊的icon再進行創建組件為子組件，這樣就形成了嵌套關係（一次嵌套）。
icon顏色的替換
將組件庫中的menu組件複製一個調整其顏色為紅色（顏色隨意，方便觀察所以選為紅色）命名為Red，然後返回page頁面選中nav組件，你就會發現在symbol中menu選項裡出現了Red組件，點擊Red組件，那麼icon將換顏色啦。
icon內容的替換
將組件庫中的menu組件進行復制，將裡面圖形換為 < 形狀並命名為Back，同樣在page頁面中選中nav組件你就會發現在symbol中的menu選項裡有Back組件並將其選中，那麼icon將換Back啦。
組件的二次嵌套
在上文一次嵌套中再進行嵌套，就是組件的二次嵌套，也就是組件套組件套組件。作用非常強大，上文介紹的一次嵌套只能改icon的內容或顏色。二次嵌套可以在改內容的同時也可以改顏色。
繼續上文進行操作，nav組件（父），menu組件（子），back組件（子）。
在menu組件上畫一個等大的矩形填充灰色進行創建組件命名為color/gray，複製一個color組件放在back組件上。
並對menu組件和back組件右鍵建立蒙版
對color組件進行多次複製分別填充不同顏色並進行命名。
返回page頁面中選中nav組件，你將會發現icon的內容及顏色可以同時更改
自適應工具——Rasizing
接下來一起來了解一下自適應工具——Rasizing，當我們選中一個元素時（這個元素必須在一個組內或是在組件內）sketch右側會出現上圖的功能區，
- Pin to Edge：就是將元素與組上、下、左、右的距離進行固定。
- Fix Size：對自身的寬高進行固定，防止拉伸變形。
這個很好理解，大家多試試就清楚啦，我們還是用之前的案例進行演示。
如上圖所以將左側icon固定上、左、寬、高，中間的文字劇中對齊固定上，右邊的icon固定，這樣就形成了自適應的組件。
組件庫
1. 什麼是組件庫
通過對界面元素進行拆解、歸納與重組，從而創建出了規範化的組件。在項目中逐層創建可複用的UI組件元素，對多個組件進行整合與相互調用，統一管理後，便形成了組件庫。
Sketch官方團隊是這樣詮釋組件庫功能的：
一個Library（組件庫）本質上就是一個普通的Sketch文件，其中的Symbols（組件）可以被其他Sketch文件調用。如果你編輯了Library當中的Symbols，那麼調用了該Library的其他Sketch文件便會收到更新通知，你可以對變更進行預覽、對比和確認，使這些Sketch文件所調用的Symbols自動更新至最新版本。
看起來有點不明白，那麼我們可以這樣來理解：
組件與組件庫的關係，類似於樂高積木的搭建，多個顆粒度最小的元素可以組成一個顆粒較大的控件。基礎組件如同積木中的最小顆粒，圖標、文字、顏色等基礎內容被歸檔在這裡，組件庫如同多個小積木互相組合而搭建起來的摩天大樓。設計師通過對多個組件進行不同的搭建，可以將其製作成各種更加複雜的組件庫。
通過這種統一管理和調用的機制，能夠提升界面元素的一致性，加強整體項目的可維護性。在單人項目中，組件庫有助於消滅重複勞動，提升設計效率；多人項目中，組件庫有助於提升UI設計方案的一致性。
2. 哪些大廠在使用組件庫
- Apple UI Design Resources：https://developer.apple.com/design/resources/
- 螞蟻金服設計規範：https://ant.design/docs/react/introduce-cn
- Mand Mobile 滴滴：https://didi.github.io/mand-mobile/#/zh-CN/home
- WeUI 微信：https://github.com/weui/weui-design
- Element 餓了麼：https://element.eleme.cn/#/zh-CN
總結
- 儘可能將設計與開發中的元素獨立化，以可被複用為目的，使其具備完整的局部功能，形成規範化的組件。
- 將組件多維度組合從而構建出整個設計方案的工作思路就是組件思維。
- 組件化設計會考慮很多設計的細節，在前期也會有較大的整理成本，在設計中，我們要善於總結組件，根據項目實際情況調整組件庫，邊製作邊完善。
相關推薦
