前幾天在公司內(nèi)部跟大家分享了一個(gè)主題：如何建立交互設(shè)計(jì)控件庫(kù)隅俘。當(dāng)時(shí)HR發(fā)這個(gè)報(bào)名郵件的時(shí)候牙瓢，馬上就有同學(xué)過來說：既然要分享這個(gè)主題，說明你已經(jīng)建完了阅羹，那你的源文件發(fā)我一份勺疼，我直接用，不就完事了嗎灯蝴？另外有人說：控件庫(kù)這個(gè)東西我們項(xiàng)目組也是老早想建了恢口，但是涉及到很多小的點(diǎn)，突然一下子不是從哪里開始穷躁。 那今天的內(nèi)容耕肩，就是針對(duì)這些問題，講講為什么要自己建问潭，以及怎么建猿诸，建完之后怎么落地。今天的主要內(nèi)容不是停留在axure里面控件庫(kù)狡忙，而是跟視覺梳虽、開發(fā)協(xié)作，實(shí)現(xiàn)一個(gè)代碼化的控件庫(kù)灾茁，也就是說窜觉，開發(fā)寫代碼的時(shí)候就可以直接拖出來用的 一個(gè)模塊。
核心內(nèi)容
我們知道封裝的目的是為了“復(fù)用”北专，用低成本換取高回報(bào)禀挫。所以要封裝的對(duì)象肯定是個(gè) 明確目的、然后能復(fù)用的拓颓，粒度很小的基本元素语婴，比如說標(biāo)題欄、搜索結(jié)果、文章等砰左。這些模塊可以用在很多地方匿醒，需要用的時(shí)候直接拖就行了。找出這些需求缠导，再將它代碼化廉羔，實(shí)現(xiàn)出來。是不是聽起來就很美好酬核？但是這個(gè)前期過程是非常虐心的 蜜另。下面來講講如何封裝，怎么去識(shí)別哪些控件是值得封裝的 嫡意？
流程
跟平時(shí)做項(xiàng)目一樣举瑰，建控件庫(kù)也涉及到搜集需求--設(shè)計(jì)-到開發(fā)落地這樣一個(gè)流程，建完之后再不斷迭代蔬螟，要保持組件庫(kù)的更新此迅，從而保證對(duì)于項(xiàng)目的支撐。在搜集需求階段旧巾，交互設(shè)計(jì)師需要去識(shí)別哪些是適合封裝的耸序，再進(jìn)行歸納。我們先看怎么識(shí)別鲁猩。
1.1坎怪、識(shí)別可重用的元素
我們以一個(gè)頁面為單位，比如說這個(gè)云閱讀書架的首頁廓握，看一下界面上沒法再繼續(xù)劃分的部件搅窿，比如說搜索、添加隙券、書籍封面男应、書籍名稱、書籍閱讀進(jìn)度 或者下面的按鈕娱仔，這些都可以劃分為元素沐飘。 那么，哪些是可重用的元素呢 牲迫？因?yàn)榭芍赜貌庞幸饬x對(duì)吧耐朴，不能重用的就相當(dāng)于再寫一個(gè)，就沒必要封裝了盹憎。對(duì)于可重用這個(gè)問題隔箍，我們就很有必要了解一下開發(fā)的視角，看他們?cè)趯?shí)現(xiàn)的時(shí)候是如何布局的脚乡。
以這個(gè)頁面為例，就是一個(gè)書籍列表頁面。在開發(fā)眼里奶稠，它就是劃分為這樣的三個(gè)模塊：最頂部的標(biāo)題欄俯艰、最下面的tabbar、剩下的留給中間的listview ?锌订。再看另外一個(gè)界面的例子竹握，這是我們的一個(gè)文章正文，當(dāng)頁面從上往下滑的時(shí)候辆飘，下面的工具欄會(huì)消失啦辐，這個(gè)過程中，布局跟上個(gè)頁面就有區(qū)別蜈项，他涉及到一個(gè)層的概念芹关。工具欄所在的層就和文章正文不在同一個(gè)層內(nèi)。
在了解開發(fā)同學(xué)的視角后紧卒，能幫助我們把出這些可重用的元素侥衬，像文本、按鈕跑芳、鏈接轴总、復(fù)選框找出來，或者是他們的組合博个，并且在設(shè)計(jì)過程中可以重用怀樟。以上這個(gè)過程其實(shí)是一個(gè)窮舉、發(fā)散的過程盆佣，旨在結(jié)構(gòu)分析往堡，找出共通性及可變性。
1.2罪塔、歸納整理
發(fā)散完成之后投蝉，要收，進(jìn)行歸納整理征堪。這個(gè)時(shí)候就將前期整理的元素進(jìn)行分門別類瘩缆，大致分為這些類。這個(gè)分類過程也很重要佃蚜。就我們?cè)崎喿x里書籍一樣庸娱，要符合用戶的預(yù)知，不能把一本盜墓筆記放到都市言情里面谐算。所以說這個(gè)分類也要符合其它設(shè)計(jì)師和開發(fā)的預(yù)期熟尉，一般都會(huì)用系統(tǒng)的規(guī)范的命名和分類方法，如果有相類似的洲脂，再備注一下所用的地方斤儿。比如說下面光列表就有好幾個(gè)剧包，有文章、有書籍往果、有專題的疆液。在后面?zhèn)渥⒁幌戮涂梢粤恕Ｕ碇笊轮@個(gè)應(yīng)該怎么用堕油？怎么落地 ?舉幾個(gè)例子你就了解了。
以彈層為例肮之，我們要找出現(xiàn)在哪些地方有彈層掉缺，有哪幾種形式，分別有什么用處戈擒。比如說眶明，把云閱讀里面的所有彈層給整理出來，最后總結(jié)歸納成幾種形式峦甩。比如說頁面當(dāng)中的赘来。#分別講一遍。#理完這些是不夠的凯傲，我們需要小范圍評(píng)審犬辰，交互組內(nèi)過一遍，跟開發(fā)過一遍冰单，這個(gè)過程其實(shí)是比較快的幌缝。沒有問題之后，提交給視覺诫欠，視覺再細(xì)化形成規(guī)范涵卵，細(xì)到尺寸多少，標(biāo)題描述字號(hào)多少荒叼。操作鍵 字號(hào)色值多少轿偎。甚至這當(dāng)中有哪些是衍生的樣式，也給標(biāo)示出來被廓，所謂衍生坏晦，就是你在代碼實(shí)現(xiàn)出來后，如果下次要復(fù)到衍生樣式嫁乘，你把原有微調(diào)一下就可以了昆婿，就說 ?最上面這個(gè)活動(dòng)，有的時(shí)候編輯或者運(yùn)營(yíng)是沒有配圖的蜓斧。展現(xiàn)形式上不同仓蛆，但我們模塊化之后，開發(fā)可以把他當(dāng)同一樣?xùn)|西來處理挎春，就是把這個(gè)組件的代碼里面的 圖片去掉就可以了~
所以說看疙，哪些組件滿足封裝需求豆拨？
*新的變動(dòng)只需衍生類別，頂多微幅調(diào)整能庆，架構(gòu)基本不動(dòng)-- 封裝變化
*一個(gè)物件不用處理多種變化—高內(nèi)聚
*控件之間關(guān)系更清楚辽装，可免不必要的牽連—松耦合
搜集需求以后，我們就得進(jìn)行設(shè)計(jì)和開發(fā)相味，這個(gè)流程跟在項(xiàng)目過程中是一樣的。反復(fù)的迭代殉挽。在此過程中可能有的兩個(gè)矛盾點(diǎn)：
2.1丰涉、標(biāo)準(zhǔn)VS創(chuàng)新
再炫酷的功能，都要先注冊(cè)登錄斯碌。而這個(gè)模塊無法激起設(shè)計(jì)師創(chuàng)造“前所未有”這種成就感一死。但是如果不去做的話，開發(fā)就會(huì)面對(duì)一些未知的問題傻唾。
所以說投慈，不管對(duì)于開發(fā)還是設(shè)計(jì)， “重用”是最優(yōu)先考慮的事情
2.2冠骄、整體產(chǎn)品的一致性VS業(yè)務(wù)的個(gè)性化需求
完整的產(chǎn)品總是第一位的伪煤，任何的個(gè)性都是基于此的標(biāo)準(zhǔn)下凸顯個(gè)性。放任和有節(jié)奏的控制所產(chǎn)生的結(jié)果不同凛辣，這是我們對(duì)一致性問題進(jìn)行設(shè)計(jì)的真正目的抱既。
