設(shè)計教程

如何利用ui組件提高設(shè)計效率?

3909

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

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

組件介紹

1. 什么叫組件？

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

從字面上理解：

「組」：多種設(shè)計元素組合在一起。

「件」：由不同的個體元件組合而成。

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

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

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

2. 組件的命名

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

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

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

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

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

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

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

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

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

4. 便于后期修改

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

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

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

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

1. 調(diào)研分析

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

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

2. 方案設(shè)計

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

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

3. 整理歸類

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

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

4. 場景走查

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

5. 問題分析

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

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

6. 效果驗證

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

sketch實操講解

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

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

創(chuàng)建組件

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

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

可以直接編輯里面的文字

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

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

2. 組件的嵌套

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

組件的一次嵌套

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

icon顏色的替換

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

icon內(nèi)容的替換

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

組件的二次嵌套

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

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

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

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

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

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

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

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

1、Pin to Edge：就是將元素與組上、下、左、右的距離進(jìn)行固定。

2、Fix Size：對自身的寬高進(jìn)行固定，防止拉伸變形。

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

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

組件庫

1. 什么是組件庫

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

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

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

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

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