現(xiàn)在市面上有很多諸如Axure瓣喊、Shireframe蚪拦、Pencil Project等產(chǎn)品原型設(shè)計軟件弃榨，每個產(chǎn)品都有其獨特的優(yōu)越性，目標(biāo)都只有一個：高效產(chǎn)出可測試雇卷、可交互的產(chǎn)品原型鬓椭。
毋庸置疑，這些軟件的功能都十分強大聋庵，但是事實上并沒我們想象中的高效膘融，除開都需要完成軟件的下載安裝捆綁等繁瑣操作外，便攜性差是他們最令人不滿的地方祭玉。
就比如老板急需要你在手機上給他展示新制作的APP原型氧映，而你艱辛地在Axure上把原型文件導(dǎo)入到手機中，在手機打開卻需要花費幾分鐘脱货，且瀏覽時發(fā)現(xiàn)效果甚差——動畫卡岛都、鏈接按鈕丟失、畫面顯示不全...同時滿足高效振峻、可測試臼疫、可互動、方便老板瀏覽做決策等特點就需要選用一些輔助用的工具或軟件了扣孟，而HTML5工具似乎是不二的選擇烫堤。
縱觀國內(nèi)的HTML5制作工具，做得比較好的有易企秀、iH5鸽斟、MAKA拔创、爆米兔等，幾款工具各有利弊但鑒于其交互性的實現(xiàn)富蓄，個人還是傾向于iH5剩燥。這款工具并非是專業(yè)的原型制作工具，它只是能通過高效產(chǎn)出一個產(chǎn)品原型的H5立倍，來彌補Axure等專業(yè)工具所不具備的便攜式掌上展示功能（特別是動畫灭红、動效、交互等元素的展示）口注，以此作為輔助性使用变擒。之前有用過爆米兔給同學(xué)做校招的筆試題，網(wǎng)易春招的有道考神寝志，效果還蠻不錯的哦~~
下面向大家展示本人用該HTML5工具臨摹的instagram APP中的一些交互界面（事先在手機上把各界面截圖導(dǎo)出到電腦赁项，然后用PS作切片處理），以及敘述相應(yīng)的邏輯：
頁面跳轉(zhuǎn)：頁面的跳轉(zhuǎn)主要用的邏輯為：透明按鈕——置頂同層控件——顯示/隱藏頁面
以點擊第一個icon和第二個icon的頁面跳轉(zhuǎn)為例澈段，我們需要把已切片的素材導(dǎo)入，先隱藏初始不用顯示的頁面舰攒。在下方icon欄處設(shè)置畫布败富，且對應(yīng)地設(shè)置透明按鈕，目的是為了用透明按鈕+事件的邏輯實現(xiàn)頁面跳轉(zhuǎn)摩窃。
對于icon欄的切換兽叮，除了可以用iH5的時間軸+遮罩功能來實現(xiàn)，可以用“同層控件置頂”功能：在需要點擊的按鈕下設(shè)置事件猾愿，將對應(yīng)的控件頂置即可鹦聪。
另外這個工具帶有“動效”功能，常見的向左進入蒂秘、向右退出等動效都有泽本，所以我們可以在頁面下放置一個進入和退出的動效即可。
2.頁面滑動：
頁面滑動交互的主要邏輯為：固定頂姻僧、底欄——滑動時間軸——長圖頭尾設(shè)置軌跡關(guān)鍵幀
首先固定首尾欄规丽，設(shè)置滑動時間軸，在滑動時間軸下放置用于上下滑動的長圖撇贺，用軌跡控制長圖的頭和尾的位置（在時間軸上添加軌跡的關(guān)鍵幀add赌莺，然后點擊頭幀和尾幀設(shè)置坐標(biāo)屬性）。值得注意的是松嘶，滑動時間軸的屬性欄下的“自動跳轉(zhuǎn)控制點”應(yīng)選為NO艘狭。如果勾選該選項，我們在滑動的過程中松手，長圖會自動跳轉(zhuǎn)到頂部或者尾部巢音。
3.頁面嵌入視頻：
頁面嵌入視頻交互的主要邏輯為：透明按鈕——事件控制播放/暫停
視頻規(guī)格似乎是限定MP4格式且不大于50M遵倦，在設(shè)置屬性時取消自動播放，通過在播放的圖標(biāo)上設(shè)置透明按鈕讓用戶點擊觸發(fā)視頻播放和暫停港谊。當(dāng)然這個播放圖標(biāo)也可以用時間軸+軌跡的配合實現(xiàn)圖標(biāo)閃爍骇吭、呼吸型伸縮等提示效果。
當(dāng)然有很多頁面我還沒詳細(xì)表達出來歧寺，包括：頁面內(nèi)的動畫交互燥狰、圖片預(yù)覽時的放大收縮等，這些都能通過時間軸等功能實現(xiàn)斜筐，還有3D型翻轉(zhuǎn)的相冊類型交互都可以實現(xiàn)龙致。
總而言之在整個體驗的過程來說，操作的效率和實現(xiàn)的效果都很好顷链。在使用Axure等工具制作原型時目代，不妨用H5來作輔助性展示，相信可以更加直觀地提高與老板嗤练、交互設(shè)計師等對象溝通時的效率榛了，便于作產(chǎn)品全局的決策。
