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