學(xué)會(huì)復(fù)用思維，再也不怕PM改需求了！
“殺一個(gè)程序員不需要用槍，讓改三次需求就行了?！?/strong>
這句話絕對(duì)算得上碼農(nóng)界的至理名言。你以為客戶改個(gè)需求，就像加幾根香菜那么簡(jiǎn)單？人家吃了不合口，要你把咖喱味換成孜然味，把羊肉片再切薄一點(diǎn)，這盤菜等于重炒啊……
而隨著H5行業(yè)的蓬勃發(fā)展，現(xiàn)在世上還有一個(gè)新的工種——H5設(shè)計(jì)師，平面、動(dòng)效、交互、測(cè)試統(tǒng)統(tǒng)都做！
這話對(duì)H5設(shè)計(jì)師同樣適用：
“殺一個(gè)H5設(shè)計(jì)師不需要用槍，讓改三次需求就行了?！?/strong>
這里該有個(gè)滑動(dòng)提示——哦。
游戲最好有個(gè)排行榜——你怎么不早說？你怎么不早說？
這設(shè)計(jì)看起來不夠高大上啊——換套設(shè)計(jì)，很多邏輯要重做啊親！
有什么方法可以循環(huán)利用你的設(shè)計(jì)素材，節(jié)省你大量的時(shí)間嗎？
接下來，談一談如何利用iH5的“小模塊”功能，實(shí)現(xiàn)Web素材、功能的復(fù)用。
【工具】
www.iH5.cn（3.0版本）
一、小模塊是什么？
首先，在編輯器的菜單欄找到“小模塊”。
你會(huì)看到很多現(xiàn)成的動(dòng)效素材，向上滑動(dòng)的操作提示等；一些獨(dú)立的交互元件，側(cè)拉菜單、下拉菜單、開關(guān)、日期選擇器等；還有一些實(shí)時(shí)的動(dòng)態(tài)元件，比如數(shù)據(jù)圖表。
具體怎么用呢？
1、動(dòng)效素材類
H5的互動(dòng)性很強(qiáng)，所以設(shè)計(jì)師經(jīng)常得在頁面中放一些操作提示，點(diǎn)擊、滑動(dòng)、長按等等，引導(dǎo)用戶進(jìn)行正確的操作。但如果每次你都要翻素材庫，甚至重新設(shè)計(jì)一次，也太浪費(fèi)時(shí)間了！
現(xiàn)在，你可以直接點(diǎn)擊對(duì)應(yīng)的小模塊，調(diào)整一下位置就能給頁面加上說明。
常用組件：文本、矢量圖（SVG）、圖片、時(shí)間軸、軌跡、動(dòng)效
溫馨提示：部分機(jī)型的屏幕底部，會(huì)被菜單導(dǎo)航遮擋；因此千萬不要把按鈕、操作提示這些比較重要的頁面元素，擺放在比較低的位置。
2、交互設(shè)計(jì)類
隨著微信小程序、谷歌小程序等概念的興起，現(xiàn)在的H5變得越來越重度化，已經(jīng)不再是簡(jiǎn)單的營銷廣告了。你總有一天會(huì)被叫去設(shè)計(jì)H5網(wǎng)頁程序，如果要避免不停改圖、切圖、導(dǎo)圖，可以怎么做？
▲左為修改后的小模塊，右為原始效果
▲設(shè)置小模塊與外界的交互行為
如圖，你可以直接添加一個(gè)導(dǎo)航菜單的小模塊，就能任意設(shè)置菜單項(xiàng)的名稱、顏色、數(shù)量等等。不怕客戶改需求，蹭蹭幾下就能修改整體的設(shè)計(jì)風(fēng)格。
常用組件：文本、矢量圖（SVG）、時(shí)間軸、軌跡、數(shù)組、F（x）函數(shù)
溫馨提示：雖然小模塊是獨(dú)立的，你依舊可以設(shè)置點(diǎn)擊某個(gè)符合要求的菜單項(xiàng)，會(huì)觸發(fā)什么交互。
3、動(dòng)態(tài)數(shù)據(jù)類
前面用到的小模塊，都屬于在后臺(tái)“固化”的內(nèi)容，一旦涉及動(dòng)態(tài)數(shù)據(jù)，就更能顯它的神通了。
上面兩個(gè)圖表也是小模塊的應(yīng)用，把干燥的數(shù)據(jù)轉(zhuǎn)化成圖表，用于用戶動(dòng)態(tài)數(shù)據(jù)的可視化表達(dá)，比如每日體重、每月業(yè)績(jī)什么的。
因?yàn)閃eb APP還沒有真正火起來，下面放兩個(gè)APP的應(yīng)用給你看看，能更快感受到這種可視化數(shù)據(jù)的價(jià)值。
▲By 周莜視界
常用組件：文本、矢量圖（SVG）、數(shù)組、數(shù)據(jù)表、計(jì)數(shù)器、F（x）函數(shù)
溫馨提示：圖表繪制一般需要代碼，所以制作上有一定門檻；數(shù)據(jù)的動(dòng)態(tài)變化，可以通過更新與輸出數(shù)據(jù)表的內(nèi)容，并結(jié)合二維數(shù)組的綁定功能實(shí)現(xiàn)。
4、其他應(yīng)用
從上面的各種應(yīng)用，你會(huì)發(fā)現(xiàn)小模塊就是模式化的物件。
我們做H5，用的一鏡到底、720度全景、跑馬燈等手法，統(tǒng)統(tǒng)都是模式。小模塊也差不多，所以你可以參考一些現(xiàn)成的模式，給設(shè)計(jì)或交互帶來靈感。
下面推薦幾個(gè)參考設(shè)計(jì)模式的好去處——
移動(dòng)模式參考：日歷、留言、導(dǎo)航、注釋、空集、列表、時(shí)間線、畫集等各種移動(dòng)設(shè)備的模式……
http://www.mobile-patterns.com/
Pttrns：書籍、瀏覽、日歷、卡片、表格、登錄、空集等各種移動(dòng)設(shè)備平臺(tái)的模式，可根據(jù)蘋果/安卓、平板/手機(jī)/手表等進(jìn)行分類。
https://pttrns.com/（需VPN代理訪問）
移動(dòng)靈感：移動(dòng)設(shè)備的動(dòng)效設(shè)計(jì)集合，有豐富的效果預(yù)覽。
https://inspirationmobile.tumblr.com/（需VPN代理訪問）
Pinterest：針對(duì)某一個(gè)APP的設(shè)計(jì)模式整理，類型比較豐富。
https://www.pinterest.com/search/pins/?q=mobile&patterns（需VPN代理訪問）
二、3步，做一個(gè)屬于你的小模塊
下面以比較簡(jiǎn)單的開關(guān)觸發(fā)器為例，說明小模塊的使用方法。
1、確定功能
如圖，當(dāng)你選中這個(gè)開關(guān)時(shí)，會(huì)看到OFF文本（狀態(tài)為關(guān)時(shí)顯示的文字）、ON文本、開時(shí)背景、關(guān)時(shí)背景這些五花八門的名字，都是用戶自己定義的屬性。為它添加事件，你會(huì)看到點(diǎn)擊、開、關(guān)這樣的觸發(fā)動(dòng)作。
在舞臺(tái)選中小模塊，右擊選擇“展開小模塊”，就可以看清它的內(nèi)部結(jié)構(gòu)。
你可以看到，最頂層的用的是“對(duì)象組”，有利于子對(duì)象的全體放大縮小。
2、交互制作
如圖，這樣的小模塊是通過4個(gè)時(shí)間軸的軌跡，讓兩個(gè)分別表示開、關(guān)的圓形按鈕進(jìn)行位移、漸出/漸隱、擠壓的變化，并讓背景顏色發(fā)生改變。
因此，開關(guān)的觸發(fā)本質(zhì)上表示時(shí)間軸的正/反向播放，以及更改觸發(fā)狀態(tài)的標(biāo)記。
3、生成模塊
完成動(dòng)效、交互的設(shè)計(jì)后，右擊對(duì)象組選擇“生成小模塊”，你就可以打包整個(gè)組件，并把整體的屬性、事件和文件包內(nèi)的東西進(jìn)行關(guān)聯(lián)了。
簡(jiǎn)單吧？
你肯定也看出來了，既然這些參數(shù)是和iH5的組件功能掛鉤的，它的類型肯定非常多樣化，包括數(shù)值、內(nèi)容、顏色、數(shù)據(jù)組等等，拓展性極強(qiáng)。
三、為什么要有復(fù)用思維？
最后，簡(jiǎn)單討論一下復(fù)用思維的兩個(gè)必要性：
1、節(jié)約生命
你只需要花點(diǎn)時(shí)間把過去做的、以后想做的東西打包成小模塊，就能方便你未來修改或再使用同類型的H5，可以節(jié)省很多時(shí)間。
2、提高性能
當(dāng)你把可以重復(fù)利用的圖片資源打包成小模塊，在同一個(gè)案例中多次使用，還有利于降低整個(gè)H5的體積，顯著減小文件的大小。
所以，改需求不可怕，沒有應(yīng)對(duì)改需求的方法才可怕。
評(píng)論
評(píng)論
推薦評(píng)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）