現(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)然有很多頁面我還沒詳細表達出來，包括：頁面內(nèi)的動畫交互、圖片預(yù)覽時的放大收縮等，這些都能通過時間軸等功能實現(xiàn)，還有3D型翻轉(zhuǎn)的相冊類型交互都可以實現(xiàn)。

總而言之在整個體驗的過程來說，操作的效率和實現(xiàn)的效果都很好。在使用Axure等工具制作原型時，不妨用H5來作輔助性展示，相信可以更加直觀地提高與老板、交互設(shè)計師等對象溝通時的效率，便于作產(chǎn)品全局的決策。