組件相信大家都不陌生，作為官方的一個(gè)功能，已經(jīng)存在很久了，不知道大家是不是還停留在只會(huì)搭建單個(gè)組件，不會(huì)組合使用的境地，我最近在項(xiàng)目中也在做這個(gè)組件，接下來(lái)我會(huì)通過(guò)落地項(xiàng)目和實(shí)際案例，跟大家分享一下組件的邏輯和制作思路。

理解組件的邏輯

我們先來(lái)簡(jiǎn)單了解一下原子設(shè)計(jì)理論（鏈接在文章末尾）：分為原子、分子、組織、模板、頁(yè)面。

我們來(lái)重點(diǎn)關(guān)注以下四個(gè)：原子、分子、組織和模式（分解后）。

△圖片來(lái)自原子設(shè)計(jì)理論文章

對(duì)于不熟悉原子理論設(shè)計(jì)的人，請(qǐng)閱讀這篇文章：

今年非常流行的原子設(shè)計(jì)理論給大家做了全面的總結(jié)！

近年來(lái)，Style Guide逐漸發(fā)展成為一套架構(gòu)嚴(yán)謹(jǐn)、規(guī)則統(tǒng)一的框架體系，產(chǎn)品性能的設(shè)計(jì)可以逐步實(shí)現(xiàn)模塊化操作，從而大大提高設(shè)計(jì)效率。

閱讀文章 >>

1. Atom

原子可以稱為元素，是用戶界面的基本組成部分（不可進(jìn)一步分解），例如表格文本，圖形，圖標(biāo)，分割線等。

2. 分子

小部件由按一定順序和空間排列的原子組成。例如導(dǎo)航欄、標(biāo)簽、列表等。

3.組織

大組件是由原子（元素）和分子（小組件）按照一定的順序和空間排列而成的。例如：列表流、入口模塊、瀑布流等。

4. 風(fēng)格

樣式分為文本樣式和圖形樣式，它們作用于原子，與原子配合使用。它們通常用于更改文本屬性（字體粗細(xì)、顏色、大小、間距等）和圖形屬性（顏色、描邊、投影等）。在其他文章中，樣式以原子的形式出現(xiàn)，但我在這里將它們分開，因?yàn)闃邮皆诤竺娴慕M件解釋中非常重要。

摘要：組織（大型組件）可以同時(shí)包含分子（小型組件）、原子（元素）和樣式?；蛘咚鼈兛梢灾话肿?，這取決于您如何設(shè)置組件模塊。案例研究將對(duì)此進(jìn)行解釋。

組件命名

組件的命名邏輯為：////Atom，命名從大到小。

例如：（曾祖父/祖父/父親/兒子）有點(diǎn)滑稽，但相對(duì)生動(dòng)。

接口的完整組件命名：XX類別/XX模塊/XX組件/組件狀態(tài)

例如：塊塊（類別）/專家列表（模塊）/按鈕（組件）/已關(guān)注（狀態(tài)）這里的斜線“/”用來(lái)區(qū)分父子關(guān)系，也根據(jù)思維導(dǎo)圖的邏輯關(guān)系，包含嵌套關(guān)系。

實(shí)用解釋

在講解之前我們先來(lái)了解一下響應(yīng)式布局的一些設(shè)置

這里的設(shè)置是固定邊緣（固定左、固定右、固定上、固定下），固定大?。ü潭ǜ叨?、固定寬度），最后的預(yù)覽是一個(gè)小動(dòng)畫，演示了我們?cè)O(shè)置完前兩個(gè)屬性后的效果。

在創(chuàng)建組件的時(shí)候我們可以選擇性的指定不同的方向?qū)傩?，指定屬性之后組件內(nèi)容的增加或者減少會(huì)按照設(shè)置的方向改變組件的寬高，只能有一個(gè)屬性或者沒(méi)有屬性。

情況1

知識(shí)點(diǎn)：固定到邊緣、固定大小、賦予方向?qū)傩?/p>

難點(diǎn)：側(cè)邊固定設(shè)置不正確，拉伸也會(huì)隨之改變；固定高寬沒(méi)設(shè)置好，拉伸會(huì)變形

案例 2

知識(shí)點(diǎn)：標(biāo)簽替換、固定間距、文字換行、設(shè)置控件、無(wú)控件設(shè)置

難點(diǎn)：組件命名不一致，無(wú)法替換；未設(shè)置組件方向?qū)傩?，?nèi)容不會(huì)移動(dòng)

案例 3

知識(shí)點(diǎn)：邏輯、分組和分配方向?qū)傩?/p>

難點(diǎn)：組件邏輯、方向?qū)傩栽O(shè)置

組件化的好處

1. 統(tǒng)一

對(duì)于業(yè)務(wù)線較多的軟件，往往會(huì)有多名設(shè)計(jì)師共同完成整個(gè)產(chǎn)品的設(shè)計(jì)，不同業(yè)務(wù)線的設(shè)計(jì)師必須嚴(yán)格遵循統(tǒng)一的規(guī)范和組件sketch控件庫(kù)，以提高整個(gè)產(chǎn)品的視覺(jué)統(tǒng)一性和交互規(guī)則。

2. 效率

在組件創(chuàng)建初期就考慮組件邏輯，為每個(gè)狀態(tài)做好準(zhǔn)備?？焖偈褂媒M件構(gòu)建完整頁(yè)面，替換原子和分子元素。提高設(shè)計(jì)團(tuán)隊(duì)的效率

3.靈活性

在組件中設(shè)置智能布局，可以靈活地手動(dòng)改變組件控件的高度和寬度，也可以根據(jù)內(nèi)容的多少自動(dòng)調(diào)整。

4. 重復(fù)使用

組件必須經(jīng)常復(fù)用，通過(guò)建立完整的組件庫(kù)，在以后的更新迭代中，可以直接修改復(fù)用的組件。

設(shè)計(jì)團(tuán)隊(duì)難免會(huì)有人員來(lái)來(lái)去去，即使有成員離開或加入，也能通過(guò)設(shè)計(jì)規(guī)范和組件庫(kù)快速銜接工作。復(fù)用組件避免新設(shè)計(jì)師對(duì)設(shè)計(jì)產(chǎn)生不同的認(rèn)知，增加溝通成本。在做背心包或者同業(yè)務(wù)的產(chǎn)品時(shí)，通過(guò)頁(yè)面結(jié)構(gòu)的復(fù)用、統(tǒng)一的視覺(jué)規(guī)范和交互邏輯，讓用戶感知到是同一系列的產(chǎn)品（如阿里巴巴、騰訊等），提升產(chǎn)品品牌感。

5. 組件化對(duì)開發(fā)也非常有利

組件化開發(fā)就是按照功能、業(yè)務(wù)線來(lái)劃分代碼sketch控件庫(kù)，開發(fā)者可以將任意的 HTML 代碼封裝成組件，只要場(chǎng)景復(fù)用性高，邏輯關(guān)系梳理清楚即可。（這點(diǎn)和設(shè)計(jì)組件是一樣的）

減少軟件包大小

創(chuàng)建通用的公共功能組件和各個(gè)業(yè)務(wù)復(fù)用的組件，方便調(diào)用和修改，避免導(dǎo)航欄框架相同，也避免不同業(yè)務(wù)重寫開發(fā)代碼浪費(fèi)app資源（這個(gè)對(duì)應(yīng)前面提到的分子部分，輸入框、日歷、表單等通用的公共功能組件）

提高工作效率，降低開發(fā)成本

可以通過(guò)更換不同的組件來(lái)快速完成任務(wù)需求，同時(shí)保持界面不變。

后期維護(hù)方便

由于整個(gè)頁(yè)面都是由組件組成的，當(dāng)測(cè)試出現(xiàn)問(wèn)題的時(shí)候，可以定位問(wèn)題所在，快速找到對(duì)應(yīng)的組件進(jìn)行修改或者移除。

在團(tuán)隊(duì)開發(fā)中，組件化的好處在于便于協(xié)作開發(fā)（比如多人協(xié)作完成一個(gè)項(xiàng)目時(shí)，可以保證項(xiàng)目的統(tǒng)一性），團(tuán)隊(duì)中每個(gè)人都發(fā)揮自己的所長(zhǎng)去維護(hù)各自業(yè)務(wù)模塊的組件，這對(duì)于APP來(lái)說(shuō)也是一個(gè)不斷打磨的過(guò)程。

組件的擴(kuò)展使用1.組件工具與團(tuán)隊(duì)協(xié)作

藍(lán)湖標(biāo)準(zhǔn)云

目前，Blue Lake標(biāo)準(zhǔn)云被廣泛應(yīng)用于團(tuán)隊(duì)協(xié)作。

優(yōu)點(diǎn)：輕松上傳、拖拽，方便組織標(biāo)準(zhǔn)化組件，自動(dòng)同步更新

缺點(diǎn)：不同人上傳組件時(shí)，同步較慢，拖到新文件時(shí)部分樣式會(huì)丟失，10人以上需要收費(fèi)。

云

個(gè)人認(rèn)為在團(tuán)隊(duì)配合上比藍(lán)湖強(qiáng)。

優(yōu)點(diǎn)：可以多人協(xié)作處理一個(gè)文檔，可以查看文件的歷史版本，可以追溯，可以及時(shí)更新組件（右上角有提示）

缺點(diǎn)：個(gè)人費(fèi)用相對(duì)較貴，對(duì)大型設(shè)計(jì)師團(tuán)隊(duì)不太友好（當(dāng)然巨頭公司例外）

2. 插圖組件

就像頁(yè)面組件一樣，您可以替換組件元素來(lái)改變角色形狀，背景等。您可以快速將組件組合成不同的插畫場(chǎng)景。

插圖組件庫(kù)

下載鏈接：

這位大神制作的矢量插圖素材不僅高度自由可修改，而且可以免費(fèi)用于商業(yè)使用！

不懂手繪，但想做插畫風(fēng)格？

閱讀文章 >>

阿里海兔插畫組件庫(kù)

下載鏈接：

阿里巴巴又推出免費(fèi)工具！插畫設(shè)計(jì)變得像搭積木一樣簡(jiǎn)單！

HiTu 目前以平面設(shè)計(jì)素材形式呈現(xiàn)，采用 ETCG 方法設(shè)計(jì)（ETCG 代表案例、模板、組件和全局樣式），并包含構(gòu)圖、色彩、含義??等一系列設(shè)計(jì)準(zhǔn)則，幫助設(shè)計(jì)師快速、優(yōu)雅地完成平面設(shè)計(jì)需求，讓每個(gè)人都能成為插畫師。

閱讀文章 >>

總結(jié)

組件思維、組件能力逐漸成為設(shè)計(jì)師不可或缺的能力，對(duì)于團(tuán)隊(duì)來(lái)說(shuō)，提高效率，減少設(shè)計(jì)師的溝通成本，提高項(xiàng)目的統(tǒng)一性，設(shè)計(jì)團(tuán)隊(duì)可以花更多的時(shí)間打磨產(chǎn)品細(xì)節(jié)，對(duì)于開發(fā)來(lái)說(shuō)，減少工作量，保證還原的一致性，對(duì)于公司來(lái)說(shuō)，節(jié)省時(shí)間和人力成本，組件庫(kù)要學(xué)會(huì)應(yīng)用在更多的地方，期待你的發(fā)現(xiàn)，我現(xiàn)在也要開始做組件了，記得點(diǎn)贊哦~

如有侵權(quán)請(qǐng)聯(lián)系刪除！