工作中大家都可能遇到過，設(shè)計(jì)完成后因?yàn)槟承┰蛲蝗灰啃薷哪骋粋€(gè)字段文字的大小，或者某個(gè)按鈕的顏色。

領(lǐng)導(dǎo)一聲令下，苦逼的設(shè)計(jì)師就要累死累活地修改界面了，有時(shí)最后的結(jié)果可能還是改來改去改回第一版，不知道多少時(shí)間浪費(fèi)在了沒有意義的重復(fù)性工作中，此時(shí)要是運(yùn)用了組件進(jìn)行設(shè)計(jì)，就只要簡(jiǎn)單幾步操作就可以瞬間修改100多個(gè)界面。

組件介紹

1. 什么叫組件？

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

從字面上理解：

• 「組」：多種設(shè)計(jì)元素組合在一起。
• 「件」：由不同的個(gè)體元件組合而成。

它們作為一個(gè)獨(dú)立個(gè)體存在，可進(jìn)行自由組合和替換。（如下圖）

我們?nèi)粘？吹降耐暾?xiàng)目，就是由許多個(gè)組件進(jìn)行搭建而成的。如下圖虎課網(wǎng)及CCTalk、大眾點(diǎn)評(píng)為例：

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

2. 組件的命名

組件命名規(guī)范化，我們?cè)诮o組件命名時(shí)要遵循一定的命名規(guī)范，一個(gè)好的命名規(guī)范可以方便開發(fā)和設(shè)計(jì)師查找且使用相應(yīng)的組件，如下圖：

組件化設(shè)計(jì)的優(yōu)勢(shì)

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

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

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

2. 便于團(tuán)隊(duì)協(xié)作（設(shè)計(jì)師與設(shè)計(jì)師之間）

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

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

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

4. 便于后期修改

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

既然利用組件化設(shè)計(jì)有這么多好處，那么我們趕緊一起來看看如何構(gòu)建組件吧！

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

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

1. 調(diào)研分析

分析相關(guān)行業(yè)競(jìng)品組件的視覺風(fēng)格、情感化設(shè)計(jì)，如下圖：

這里做競(jìng)品分析不是為了沿用各種產(chǎn)品設(shè)計(jì)里的「通用方案」，要解決的核心問題不同，產(chǎn)生的方案也會(huì)有差異，明確需求后得出組件設(shè)計(jì)。

2. 方案設(shè)計(jì)

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

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

3. 整理歸類

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

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

4. 場(chǎng)景走查

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

5. 問題分析

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

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

6. 效果驗(yàn)證

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

sketch實(shí)操講解

1. 組件的基礎(chǔ)使用方法

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

創(chuàng)建組件

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

可以拖拽進(jìn)行復(fù)制使用，或是直接在組件庫里面調(diào)出

可以直接編輯里面的文字

還可以統(tǒng)一對(duì)組件調(diào)整背景顏色

雙擊nav進(jìn)入組件庫，對(duì)nav組件背景顏色進(jìn)行調(diào)整，頁面中運(yùn)用到的nav組件其背景顏色會(huì)統(tǒng)一進(jìn)行更改（再也不怕領(lǐng)導(dǎo)對(duì)UI界面整體調(diào)整顏色啦）。

2. 組件的嵌套

大家應(yīng)該會(huì)有很多疑問什么是組件的嵌套呢？組件的嵌套就是組件套組件。

組件的一次嵌套

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

icon顏色的替換

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

icon內(nèi)容的替換

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

組件的二次嵌套

在上文一次嵌套中再進(jìn)行嵌套，就是組件的二次嵌套，也就是組件套組件套組件。作用非常強(qiáng)大，上文介紹的一次嵌套只能改icon的內(nèi)容或顏色。二次嵌套可以在改內(nèi)容的同時(shí)也可以改顏色。

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

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

并對(duì)menu組件和back組件右鍵建立蒙版

對(duì)color組件進(jìn)行多次復(fù)制分別填充不同顏色并進(jìn)行命名。

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

自適應(yīng)工具——Rasizing

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

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

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

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

組件庫

1. 什么是組件庫

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

Sketch官方團(tuán)隊(duì)是這樣詮釋組件庫功能的：

一個(gè)Library（組件庫）本質(zhì)上就是一個(gè)普通的Sketch文件，其中的Symbols（組件）可以被其他Sketch文件調(diào)用。如果你編輯了Library當(dāng)中的Symbols，那么調(diào)用了該Library的其他Sketch文件便會(huì)收到更新通知，你可以對(duì)變更進(jìn)行預(yù)覽、對(duì)比和確認(rèn)，使這些Sketch文件所調(diào)用的Symbols自動(dòng)更新至最新版本。

看起來有點(diǎn)不明白，那么我們可以這樣來理解：

組件與組件庫的關(guān)系，類似于樂高積木的搭建，多個(gè)顆粒度最小的元素可以組成一個(gè)顆粒較大的控件?；A(chǔ)組件如同積木中的最小顆粒，圖標(biāo)、文字、顏色等基礎(chǔ)內(nèi)容被歸檔在這里，組件庫如同多個(gè)小積木互相組合而搭建起來的摩天大樓。設(shè)計(jì)師通過對(duì)多個(gè)組件進(jìn)行不同的搭建，可以將其制作成各種更加復(fù)雜的組件庫。

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

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

• Apple UI Design Resources：https://developer.apple.com/design/resources/
• 螞蟻金服設(shè)計(jì)規(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

總結(jié)

• 盡可能將設(shè)計(jì)與開發(fā)中的元素獨(dú)立化，以可被復(fù)用為目的，使其具備完整的局部功能，形成規(guī)范化的組件。
• 將組件多維度組合從而構(gòu)建出整個(gè)設(shè)計(jì)方案的工作思路就是組件思維。
• 組件化設(shè)計(jì)會(huì)考慮很多設(shè)計(jì)的細(xì)節(jié)，在前期也會(huì)有較大的整理成本，在設(shè)計(jì)中，我們要善于總結(jié)組件，根據(jù)項(xiàng)目實(shí)際情況調(diào)整組件庫，邊制作邊完善。