工作中大家都可能遇到過，設計完成后因為某些原因突然要批量修改某一個字段文字的大小，或者某個按鈕的顏色。

領導一聲令下，苦逼的設計師就要累死累活地修改界面了，有時最后的結果可能還是改來改去改回第一版，不知道多少時間浪費在了沒有意義的重復性工作中，此時要是運用了組件進行設計，就只要簡單幾步操作就可以瞬間修改100多個界面。

組件介紹

1. 什么叫組件？

組件是通過對功能及視覺表達中元素的拆解、歸納、重組，并基于可被復用的目的，形成的規(guī)范化模塊。它就像組成完整框架的單元體（比如按鈕、導航欄、tab欄等），具有標準規(guī)范和可復用場景的基本模塊。

從字面上理解：

• 「組」：多種設計元素組合在一起。
• 「件」：由不同的個體元件組合而成。

它們作為一個獨立個體存在，可進行自由組合和替換。（如下圖）

我們日常看到的完整項目，就是由許多個組件進行搭建而成的。如下圖虎課網(wǎng)及CCTalk、大眾點評為例：

上面三張圖中的元素中任何一塊都可以稱之為組件。

2. 組件的命名

組件命名規(guī)范化，我們在給組件命名時要遵循一定的命名規(guī)范，一個好的命名規(guī)范可以方便開發(fā)和設計師查找且使用相應的組件，如下圖：

組件化設計的優(yōu)勢

1. 有助于風格統(tǒng)一

在一個項目頁面里，設計師有時候會將文字或者圖片不經意的左右移動1px-2px而不知，從而導致設計元素間距不一致。又或者是，大量重復的手動化導致細節(jié)的疏忽。組件化設計就能很好的避免這個問題。

在日常設計中，我們常常會將同一個模塊的內容應用到不同地方，如果我們每次都重新設計，每一個設計都有差異，這樣會讓整個項目的樣式都不同。如果我們應用到了組件，在不同頁面中，我們就調用組件，這樣每個頁面就不會出現(xiàn)差異化，有利于項目的設計風格統(tǒng)一。

2. 便于團隊協(xié)作（設計師與設計師之間）

在多個設計師同步進行一個項目的時候，規(guī)范化的組件設計能保持設計結果的統(tǒng)一性，避免出現(xiàn)多人多風格的現(xiàn)象。如兩個設計師進行協(xié)作設計時，彼此按照各自的操作習慣處理圓角大小，一個設計的是4px，一個設計的是6px，；兩人不同的設計習慣不僅加大了后期的溝通成本，而且需要花很多時間去修改，假如兩人使用同一個組件，同類型問題就不會出現(xiàn)，后期修改組件也更加容易。

3. 提高開發(fā)者的工作效率（設計師與開發(fā)之間）

組件化設計不僅方便設計師更高效的制作頁面，同時也能提高開發(fā)者的工作效率。既可準確定位又方便后期的維護和修改，在發(fā)現(xiàn)問題時能快速鎖定錯誤發(fā)生的位置。同時，開發(fā)者之間也能通過組件進行協(xié)作與同步，減少多余的溝通成本，提高了工作效率。

4. 便于后期修改

假如設計師需要在原來的版本上將按鈕顏色進行修改，如果組件未進行封裝，可能要耗費很多時間進行一個個單獨進行調色。組件化的優(yōu)勢就在于，幾十個或者更多的組件，你只需要選擇所需要修改的顏色即可，大大的縮短了調整優(yōu)化的時間。

既然利用組件化設計有這么多好處，那么我們趕緊一起來看看如何構建組件吧！

組件化創(chuàng)建流程

在工作中，組件化創(chuàng)建流程分為6步，如下圖：

1. 調研分析

分析相關行業(yè)競品組件的視覺風格、情感化設計，如下圖：

這里做競品分析不是為了沿用各種產品設計里的「通用方案」，要解決的核心問題不同，產生的方案也會有差異，明確需求后進行組件設計。

2. 方案設計

考慮所有場景下對組件的展示有何變化。需要融入更多自己對于人性化、創(chuàng)新細節(jié)的思考。除了設計細節(jié)方面，還要考慮周全各個交互狀態(tài)，如下圖：

如相同組件在不同場景呈現(xiàn)的交互狀態(tài)，相應的顏色、大小也會跟著發(fā)生變化。

3. 整理歸類

整理和歸類線上組件，討論補充現(xiàn)有組件能否滿足需求。并和產品溝通了解后續(xù)計劃，將組件的所有的當前以及潛在的應用場景總結出來，評估具體組件優(yōu)先級和迭代計劃，如下圖（圖為螞蟻金服組件）：

組件整理完畢后，明確優(yōu)先級后錄入到在線協(xié)作工具，將每一個組件建成一個獨立任務，像日常需求那樣，方便隨時更新。

4. 場景走查

把自己變成產品的深度用戶，將線上產品按照用戶行為路線，完整體驗走查一遍，盡可能不遺漏場景。

5. 問題分析

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

有時我們會發(fā)現(xiàn)想解決的問題無法都兼顧到，產生不了最理想的方案，這時就要對問題優(yōu)先級有個明確判斷，比如優(yōu)先考慮效率提升，美觀可以次要一點，這樣方案設計階段可以在幾種解決方案中作出最合適的決策。

6. 效果驗證

通過用戶調研、數(shù)據(jù)分析的反饋結果，看看組件是否達到效果，如果不理想則進一步分析原因，迭代改進設計方案。

sketch實操講解

1. 組件的基礎使用方法

要是你掌握sketch組件的話，整體UI（100多頁）中的導航背景換個顏色只是秒秒鐘解決的事情。

創(chuàng)建組件

其實sketch組件的創(chuàng)建很簡單的，只需要點一下就可以啦，那么創(chuàng)建完組件有什么用呢？

可以拖拽進行復制使用，或是直接在組件庫里面調出

可以直接編輯里面的文字

還可以統(tǒng)一對組件調整背景顏色

雙擊nav進入組件庫，對nav組件背景顏色進行調整，頁面中運用到的nav組件其背景顏色會統(tǒng)一進行更改（再也不怕領導對UI界面整體調整顏色啦）。

2. 組件的嵌套

大家應該會有很多疑問什么是組件的嵌套呢？組件的嵌套就是組件套組件。

組件的一次嵌套

舉個例子：之前創(chuàng)建了nav組件，然后可以在nav組件中將左邊的icon再進行創(chuàng)建組件為子組件，這樣就形成了嵌套關系（一次嵌套）。

icon顏色的替換

將組件庫中的menu組件復制一個調整其顏色為紅色（顏色隨意，方便觀察所以選為紅色）命名為Red，然后返回page頁面選中nav組件，你就會發(fā)現(xiàn)在symbol中menu選項里出現(xiàn)了Red組件，點擊Red組件，那么icon將換顏色啦。

icon內容的替換

將組件庫中的menu組件進行復制，將里面圖形換為 < 形狀并命名為Back，同樣在page頁面中選中nav組件你就會發(fā)現(xiàn)在symbol中的menu選項里有Back組件并將其選中，那么icon將換Back啦。

組件的二次嵌套

在上文一次嵌套中再進行嵌套，就是組件的二次嵌套，也就是組件套組件套組件。作用非常強大，上文介紹的一次嵌套只能改icon的內容或顏色。二次嵌套可以在改內容的同時也可以改顏色。

繼續(xù)上文進行操作，nav組件（父），menu組件（子），back組件（子）。

在menu組件上畫一個等大的矩形填充灰色進行創(chuàng)建組件命名為color/gray，復制一個color組件放在back組件上。

并對menu組件和back組件右鍵建立蒙版

對color組件進行多次復制分別填充不同顏色并進行命名。

返回page頁面中選中nav組件，你將會發(fā)現(xiàn)icon的內容及顏色可以同時更改

自適應工具——Rasizing

接下來一起來了解一下自適應工具——Rasizing，當我們選中一個元素時（這個元素必須在一個組內或是在組件內）sketch右側會出現(xiàn)上圖的功能區(qū)

• Pin to Edge：就是將元素與組上、下、左、右的距離進行固定。
• Fix Size：對自身的寬高進行固定，防止拉伸變形。

這個很好理解，大家多試試就清楚啦，我們還是用之前的案例進行演示。

如上圖所以將左側icon固定上、左、寬、高，中間的文字劇中對齊固定上，右邊的icon固定，這樣就形成了自適應的組件。

組件庫

1. 什么是組件庫

通過對界面元素進行拆解、歸納與重組，從而創(chuàng)建出了規(guī)范化的組件。在項目中逐層創(chuàng)建可復用的UI組件元素，對多個組件進行整合與相互調用，統(tǒng)一管理后，便形成了組件庫。

Sketch官方團隊對于組件庫功能是這樣詮釋的：

一個Library（組件庫）本質上就是一個普通的Sketch文件，其中的Symbols（組件）可以被其他Sketch文件調用。如果你編輯了Library當中的Symbols，那么調用了該Library的其他Sketch文件便會收到更新通知，你可以對變更進行預覽、對比和確認，使這些Sketch文件所調用的Symbols自動更新至最新版本。

通過這種統(tǒng)一管理和調用的機制，能夠提升界面元素的一致性，加強整體項目的可維護性。在單人項目中，組件庫有助于消滅重復勞動，提升設計效率；多人項目中，組件庫有助于提升UI設計方案的一致性。

2. 哪些大廠在使用組件庫

• Apple UIDesign Resources：https://developer.apple.com/design/resources/
• 螞蟻金服設計規(guī)范：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

感悟

• 盡可能將設計與開發(fā)中的元素獨立化，以可被復用為目的，形成規(guī)范化的組件。
• 將組件多維度組合從而構建出整個設計方案的工作思路就是組件思維。
• 組件化設計會考慮很多設計的細節(jié)，在前期也會有較大的整理成本，在設計中，我們要善于總結組件，根據(jù)項目實際情況及時更新調整組件庫，邊制作邊完善。

零基礎想要了解如何系統(tǒng)學習UI設計，請關注微信公眾號：笑爺聊設計；
與我聯(lián)系，備注：知乎，免費送你全套UI視頻教程和軟件；
我是笑爺，希望遇見那個行動派的你。

總結

以上是生活随笔為你收集整理的如何用vs做界面_5分钟改完100个界面？高手都在用这个方法做设计！的全部內容，希望文章能夠幫你解決所遇到的問題。

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