前言
前文我們提到了流程優(yōu)化給我們的設(shè)計(jì)工作都帶來(lái)了哪些直觀影響；本文將深入細(xì)節(jié)從多角度去解析組件化的概念，幫助我們理解、構(gòu)建組件庫(kù)。
設(shè)計(jì)組件化的概念本身是從程序的開(kāi)發(fā)模式中演變而來(lái)；開(kāi)發(fā)中的工程化思維是不是也可以幫助我們高效的管理設(shè)計(jì)稿呢？產(chǎn)品的快速迭代中，原本固化的工作模式越來(lái)越不適應(yīng)環(huán)境的變化；而研究各種工具、優(yōu)化設(shè)計(jì)流程、開(kāi)放設(shè)計(jì)思維可以讓設(shè)計(jì)師有更多時(shí)間去優(yōu)化體驗(yàn)、尋求設(shè)計(jì)價(jià)值。
關(guān)于組件化可以對(duì)團(tuán)隊(duì)產(chǎn)生多大的影響，可以去我的上篇《起點(diǎn)讀書(shū)改版實(shí)戰(zhàn)》查看，組件化管理對(duì)于設(shè)計(jì)師來(lái)說(shuō)，迭代效率得到顯著提升，設(shè)計(jì)團(tuán)隊(duì)能夠主導(dǎo)產(chǎn)出的優(yōu)化結(jié)果增多。
我們?nèi)粘Ｊ褂玫?Sketch 之所以能成為目前最主流的產(chǎn)品設(shè)計(jì)工具之一，我個(gè)人認(rèn)為在于它的每一次更新，都可以多多少少解決目前設(shè)計(jì)過(guò)程中的某些痛點(diǎn)，而科學(xué)的使用這些功能會(huì)將設(shè)計(jì)師的能力最大限度發(fā)揮出來(lái)。那么如何將項(xiàng)目組件化？本文將從起點(diǎn)讀書(shū)的組件化案例中吸取核心內(nèi)容與大家分享。
理解產(chǎn)品結(jié)構(gòu)
業(yè)務(wù)屬性的不同，對(duì)于產(chǎn)品整體布局的影響也存在差異，讀書(shū)、社交、電商、新聞、視頻等品類(lèi)App都有自己獨(dú)有的組件結(jié)構(gòu)；而相同品類(lèi)下的產(chǎn)品結(jié)構(gòu)基本大同小異，以讀書(shū)類(lèi)產(chǎn)品為例，橫向?qū)Ρ?，大部分的閱讀頁(yè)、精選頁(yè)、書(shū)詳情頁(yè)結(jié)構(gòu)基本相似，唯一不同的是業(yè)務(wù)各有不同，模塊位置等有所差異，但是從組件復(fù)用性上看都存在極大相似度。
并不是各類(lèi)產(chǎn)品廠商不想做差異化，而是本身的業(yè)務(wù)屬性對(duì)于大部分用戶(hù)來(lái)說(shuō)已經(jīng)形成一條比較成熟的數(shù)據(jù)排版結(jié)構(gòu)，較大的改變會(huì)招致用戶(hù)的反感，雖然可博得部分用戶(hù)的追捧，但這樣的「創(chuàng)新」對(duì)于一個(gè)成熟產(chǎn)品而言卻是不利的，因此我們往往會(huì)把更多的差異放在組件細(xì)節(jié)上；所以理解產(chǎn)品的結(jié)構(gòu)可以幫助我們快速構(gòu)建組件庫(kù)的基本框架，在此框架基礎(chǔ)上可以對(duì)組件大致做下分類(lèi)和優(yōu)先級(jí)排序。
組件歸類(lèi)
對(duì)自己負(fù)責(zé)的產(chǎn)品結(jié)構(gòu)有所認(rèn)知后，我們就需要對(duì)產(chǎn)品結(jié)構(gòu)進(jìn)行程度上的解構(gòu)、分類(lèi)；組件 (UI層面上的) 的歸類(lèi)通常分為四種：原生組件、擴(kuò)展組件、自定義組件、封裝組件。
原生組件，顧名思義就是系統(tǒng)本身自帶的組件類(lèi)型，例如按鈕、導(dǎo)航、彈窗等等。
擴(kuò)展組件，是基于原有組件基礎(chǔ)，進(jìn)行功能擴(kuò)展，例如在導(dǎo)航欄上加下拉操作，在彈窗中加操作項(xiàng)等等。
自定義組件，所謂自定義組件就是原本系統(tǒng)中沒(méi)有，我們根據(jù)產(chǎn)品特點(diǎn)創(chuàng)造出來(lái)的特有組件。
封裝組件，是指對(duì)產(chǎn)品中經(jīng)常出現(xiàn)的一系列場(chǎng)景頁(yè)面進(jìn)行組合封裝的復(fù)雜組件。
?
這四個(gè)概念中，原生組件和擴(kuò)展組件都屬于系統(tǒng)（Android & iOS官方規(guī)范）導(dǎo)向的類(lèi)型，所以我們暫且統(tǒng)稱(chēng)為基礎(chǔ)組件；這類(lèi)組件存在于大部分App中，例如導(dǎo)航欄、工具欄、彈窗、toast、按鈕等就是基礎(chǔ)組件。
自定義組件和封裝組件，具有較強(qiáng)的產(chǎn)品功能導(dǎo)向，因此稱(chēng)為屬性組件。這類(lèi)組件跟產(chǎn)品功能有較強(qiáng)的關(guān)聯(lián)性，比如效率管理App中常用的日歷組件，視頻App常用的播放器組件，讀書(shū)App內(nèi)的推書(shū)列表組件、金融App內(nèi)的行情趨勢(shì)組件等。
做這樣的區(qū)分，可以讓我們對(duì)組件有更加充分的理解，兩個(gè)類(lèi)別的組件在構(gòu)建時(shí)也存在較大的差異，區(qū)別對(duì)待可以幫助我們更好的理解、構(gòu)建和調(diào)用；有了明確的定義，我們?cè)跇?gòu)建組件庫(kù)時(shí)就能明確類(lèi)型，合理規(guī)劃，有效的進(jìn)行搭建的前期工作。
顆粒化管理
與傳統(tǒng)窮舉法區(qū)別
窮舉法顧名思義就是將產(chǎn)品中使用的所有組件全部列舉出來(lái)，好處在于比較直觀，沒(méi)有復(fù)雜的組合邏輯、方便交接，壞處是比較難以管理、拓展性小，文件冗余、牽一發(fā)動(dòng)全身等。
顆?；芾硎菍⒔M件進(jìn)行模塊拆分再拆分，充分提高細(xì)小組件的的復(fù)用率；具體是就是將組件先拆分為具有復(fù)用性的模塊，進(jìn)一步再對(duì)復(fù)用性的模塊進(jìn)行模塊拆分，以此類(lèi)推，通常拆分到圖標(biāo)、文字等單一元素時(shí)已經(jīng)是最小顆粒了；如果需要調(diào)整其中某一模塊時(shí)，只需進(jìn)行獨(dú)立調(diào)整，就可讓全局隨之響應(yīng)，而其他模塊不會(huì)受其影響。這種管理方式的優(yōu)點(diǎn)諸多不一一贅述，缺點(diǎn)在于這樣的組件擁有一定的復(fù)雜度，理解需要花費(fèi)一點(diǎn)精力。
從組件結(jié)構(gòu)角度來(lái)看基礎(chǔ)組件結(jié)構(gòu)表現(xiàn)單一，但是表現(xiàn)形式與內(nèi)容多樣，所以通常會(huì)多以顆?；鳛闃?gòu)建首選；屬性組件表現(xiàn)形式復(fù)雜還存在許多嵌套關(guān)系，但是表現(xiàn)形式與內(nèi)容單一，所以通常會(huì)以顆?；透F舉法混合作為構(gòu)建方式；從類(lèi)別與布局的關(guān)系上可以看出，顆?；墙M件庫(kù)構(gòu)建不可或缺的一個(gè)重要環(huán)節(jié)。
結(jié)構(gòu)細(xì)分
結(jié)構(gòu)細(xì)分其實(shí)就是將本身獨(dú)立的組件進(jìn)行打散、細(xì)化、整合、重組，過(guò)程中我們對(duì)特定位置的常用組件進(jìn)行模塊整個(gè)，使每個(gè)模塊都可以獨(dú)立變化替換，這種多嵌套組合式的細(xì)分可以讓組件最終展現(xiàn)出來(lái)的樣式以幾何倍數(shù)量增長(zhǎng)，這是窮舉法完全無(wú)法達(dá)到的構(gòu)建方式。
通常拆分后的布局可分為兩個(gè)場(chǎng)景來(lái)表現(xiàn)，第一個(gè)場(chǎng)景是組件庫(kù)可實(shí)現(xiàn)的細(xì)分結(jié)構(gòu)，如位置、尺寸、顏色、字體樣式、圖標(biāo)等；第二個(gè)場(chǎng)景是在設(shè)計(jì)稿中進(jìn)行的細(xì)分，通常指圖片、文案。
位置、尺寸的結(jié)構(gòu)細(xì)分：起點(diǎn)讀書(shū)擁有近百種導(dǎo)航欄的樣式，但是從布局結(jié)構(gòu)上來(lái)看，大致可拆分為狀態(tài)欄、背景、左操作項(xiàng)(左組合)，中間展示項(xiàng)(中組合)，右操作項(xiàng)(右組合)這五個(gè)模塊，每個(gè)模塊可以獨(dú)立產(chǎn)生新的樣式或向下細(xì)分新模塊以適應(yīng)新的產(chǎn)品需求；不過(guò)這里有兩個(gè)注意點(diǎn)，一般模塊拆解到按鈕、圖標(biāo)等最細(xì)顆粒后通常不會(huì)再進(jìn)行拆分，并且拆分模塊不建議層級(jí)超過(guò)4個(gè)層級(jí)。
顏色與字體樣式：可通過(guò) Sketch 自帶的 Layer Styles 和 Text Styles 進(jìn)行管理，也可通過(guò) Craft Manager 來(lái)管理。
圖標(biāo)：作為最常用的基本單位，出現(xiàn)頻率較高，因此在建立時(shí)需要有一定的秩序規(guī)律，繪制好整齊排布在組件庫(kù)的特點(diǎn)位置就可以。
圖片與文案：通常在設(shè)計(jì)稿鋪設(shè)階段才會(huì)使用，可以通過(guò) Sketch 自帶的素材管理功能 「Data」來(lái)管理，當(dāng)然我們依然可以用 Craft Manager 來(lái)管理這些素材。
響應(yīng)式布局
這個(gè)功能以前只能借助第三方插件來(lái)得以實(shí)現(xiàn)，不過(guò)后來(lái) Sketch 官方也提供了 Resizing 的功能，從基礎(chǔ)結(jié)構(gòu)來(lái)看僅有6個(gè)選項(xiàng)，但是我們可以通過(guò)不同的組合來(lái)實(shí)現(xiàn)更多基礎(chǔ)適配方式，而在此基礎(chǔ)上還可以搭配一些嵌套規(guī)則來(lái)實(shí)現(xiàn)更多的適配效果。
具體我們稍作一下解釋?zhuān)八膫€(gè)從圖標(biāo)就可以看出分別是固左、固右、固頂、固底，后兩個(gè)分為為固高、固寬；對(duì)一個(gè)元素設(shè)置了固左、固寬后，執(zhí)行左右拉伸操作時(shí)設(shè)置的元素就有了左對(duì)齊的適配效果；對(duì)一個(gè)元素設(shè)置了固頂、固底后，執(zhí)行上下拉伸操作時(shí)設(shè)置的元素就有了固定間距的適配效果；除此以為也有一些組合是相沖的，比如設(shè)置了固左、固右后，是不能再這種固寬的，這兩個(gè)也是一種相反的效果。
嵌套的運(yùn)用也稍作一下解釋?zhuān)驗(yàn)榛静僮饕呀?jīng)比較清楚了，我們看（實(shí)例1）就能明白。
如果一個(gè)組件需要同時(shí)支持上下左右同時(shí)拉伸時(shí)，設(shè)置項(xiàng)就相對(duì)復(fù)雜了一些，這里我們還是來(lái)通過(guò)實(shí)例來(lái)認(rèn)知一下概念，如下圖（實(shí)例2）
因?yàn)檫\(yùn)用了顆粒化的管理方式，所以基本上每一個(gè)前臺(tái)展示的最終組件都會(huì)含有嵌套組件模塊，我們?cè)诖罱ńM件時(shí)如果把這些適配也一并考慮進(jìn)去，不管對(duì)于開(kāi)發(fā)還是對(duì)于其他同事的理解都有比較大的幫助，當(dāng)然如果你所在的公司是通過(guò) Sketch 交付設(shè)計(jì)稿，那么這項(xiàng)操作會(huì)讓你的開(kāi)發(fā)小伙伴對(duì)你肅然起敬，因?yàn)檫@會(huì)減少很多為適配而花費(fèi)的精力。
如何命名
上面提到的組件歸類(lèi)、顆?；夹枰鳛榛A(chǔ)，細(xì)分后的模塊如何查找、區(qū)分，設(shè)計(jì)稿如何調(diào)用組件，這些都離不開(kāi)合理的命名引導(dǎo)。因此命名可以說(shuō)是構(gòu)建組件庫(kù)非常重要的一個(gè)環(huán)節(jié)，合理的命名會(huì)讓整個(gè)組件庫(kù)布局條理清晰、結(jié)構(gòu)縝密，實(shí)際使用時(shí)能夠幫助我們快速定位。
如果按層級(jí)的方式做區(qū)分的話，命名通常分為二大類(lèi)：
1. 組件分類(lèi)名：通常指組件的準(zhǔn)確名稱(chēng)，如導(dǎo)航、工具欄、彈窗、按鈕等。（為方便大家參考，此處附上一張對(duì)照表）
2. 組件的的細(xì)分模塊命名：這類(lèi)模塊目前沒(méi)有標(biāo)準(zhǔn)所參考，但是我們可通過(guò)一些最容易理解的特征來(lái)區(qū)分，比如位置、數(shù)目、形狀、顏色、情感（積極操作、消極操作）等作為命名依據(jù)，如果一個(gè)模塊同時(shí)保有這些特征，可以在構(gòu)建初期就定好層級(jí)的優(yōu)先級(jí)。
此處以導(dǎo)航欄為例，畫(huà)圈部分的命名為「導(dǎo)航/白色/_資源/左組合/1圖標(biāo)」，「/」是 Sketch 區(qū)層級(jí)用的符號(hào)，「_」純粹是為了讓資源能夠在列表內(nèi)置頂使用的一個(gè)小技巧，如果是此模塊下的元素只需對(duì)「左組合」后面的信息做調(diào)整就行。
雖然從工程化角度來(lái)看，這種方式會(huì)顯得不夠嚴(yán)謹(jǐn)，但從使用、理解角度出發(fā)，這個(gè)方法相對(duì)高效，還易上手快速形成認(rèn)知。
實(shí)際使用流程
組件庫(kù)經(jīng)過(guò)一系列的操作搭建完成后，那么后續(xù)，我們?nèi)绾瓮ㄟ^(guò)它來(lái)運(yùn)作，我們通過(guò)上圖可以有個(gè)直觀的了解：
1. 區(qū)分組件類(lèi)別，并在此類(lèi)別區(qū)進(jìn)行操作
2. 進(jìn)行組件布局，模塊搭建
3. 布局同時(shí)不要忘記設(shè)置Resizing
4. 對(duì)命名再進(jìn)行一次梳理
5. 保存
6. 設(shè)計(jì)稿更新調(diào)用
7. 模塊拼合，選取需要用的樣式
8. 調(diào)整文案、圖片、圖標(biāo)等
9. 完成
而參與項(xiàng)目合作的其他同學(xué)只需要執(zhí)行第6~8條就可以了。
結(jié)語(yǔ)
通過(guò)組件化的建立，我們讓設(shè)計(jì)內(nèi)部的產(chǎn)出有了統(tǒng)一標(biāo)準(zhǔn)，也與開(kāi)發(fā)者之間搭起了一段新的橋梁；從設(shè)計(jì)稿到組件庫(kù)，之后組件庫(kù)到設(shè)計(jì)規(guī)范，再?gòu)脑O(shè)計(jì)規(guī)范到展示程序，最終展示程序影響到設(shè)計(jì)還原，我們通過(guò)優(yōu)化深入將這四個(gè)之前關(guān)系并不明朗的概念重新改造結(jié)合，形成新的閉環(huán)。
通過(guò)新形成的閉環(huán)，與技術(shù)部合作建立出了符合開(kāi)發(fā)者維度的組件化管理模式（起點(diǎn)讀書(shū)組件展示程序）；對(duì)于設(shè)計(jì)團(tuán)隊(duì)來(lái)說(shuō)，迭代效率得到顯著提升，設(shè)計(jì)團(tuán)隊(duì)能夠主導(dǎo)產(chǎn)出的優(yōu)化結(jié)果增多，對(duì)于開(kāi)發(fā)團(tuán)隊(duì)來(lái)說(shuō)，減少工作量的同時(shí)還原一致性也得到了保障；當(dāng)然組件庫(kù)的意義遠(yuǎn)不止于此，我們還會(huì)繼續(xù)優(yōu)化、迭代，只求做到更好。
