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