整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
具的選擇不是越多人用越好。像Axure這類專業的原型制作軟件，在標尺、對齊上面，是iH5遠比不上的。但后者在與人溝通以及查看時有著優勢。
最近支付寶進行了一次比較大的版本更新，引起了很多人的關注，無論從視覺還是交互體驗上都有了很大的改變，但是從原型制作來說，其實比之前更加簡單了。
通過臨摹這些知名廠商的產品，是快速進步的一種方式，可以更好的借鑒他們的交互與邏輯，比體驗觀看，更能深刻的理解，從而更好的改進自己的產品。
說到原型，很多人就會想到Axure，這類常用的原型工具，他們使用的都是HTML規范，動效以及交互大部分引入的jQuery庫或者封裝的JS庫，其效果可以在軟件預覽以及導出HTML文件在瀏覽器預覽，同樣類別的還有Justinmind等等。
與其原理類似的也有很多，如定位于開發工具的Animate，其動畫效果比Axure要強大的多，以及谷歌的web design，還有向國內線上制作平臺的iH5，他們面向的是基礎交互，可自由編輯度高，不僅可以做出H5實例，同樣也可以用于原型。
這些工具可以分為線上與離線兩種制作方式，我個人偏向使用線上的制作工具，因為離線工具生成的原型不方便發給別人那看，而且制作嚴重依賴于軟件安裝，不便與即時查看與他人溝通。
對于臨摹來說，事先無需過多分析，了解一下大致交互，直接上手就可以。
工具：iH5
材料準備：用手機把新版支付截屏，調到PS用切片把其分為各個模塊，如導航欄，對話框等等。
描述：底部導航的切換交互，跳轉頁面并且圖標變為藍色。可以用點擊事件控制兩種狀態，一是遮罩的移動，二是頁面的跳轉。
新建時間軸，在其下面新建一個畫布，將藍色與灰色兩個底部導航欄，以及一個與圖標大小的白色矩形，放入其中，在藍色導航圖片的屬性——遮罩，選擇白色矩形。然后在矩形下建立軌跡，四個關鍵幀分別對應四個圖標。
在舞臺上建四個頁面用來存放導航里的內容。
在圖標位置添加透明按鈕，在其下方添加事件，當輕觸時跳轉頁面，以及跳轉到該時間軸的某一幀。
描述：當頁面滑動一段距離，頂部導航欄發生變換。通過監測時間軸滑動的時間，來觸發菜單欄的更換。
在頁面一，新建滑動時間軸，所有素材放入其中，將兩個頂部導航疊放在一起，為內容添加軌跡，讓其讓下滑動，一秒時滑動到底部，為初始默認的導航添加兩個事件，當滑動時間軸滑動0.1秒時，置于底層，當時間為0時，至于頂層。
描述：類似圖片的輪播效果，將未顯示的圖片放在屏幕之外或者隱藏，通過手指的左右滑動來控制圖片的進出。
在頁面二，把準備好三張輪播的圖，帶有三個鏤空圓點的PNG圖片，以及一個大小與圓點差不多的矩形，都放入滑動時間軸下面，新建軌跡，創建三個關鍵幀，通過調整圖片坐標來控制在每一幀上顯示的圖片，當你滑動時，就會出現圖片的輪播效果，如果需要在圖片上加入鏈接，直接在該圖片添加點擊事件，動作設置為跳轉頁面即可。
描述：點擊按鈕時彈框出現，然后點擊其周圍彈框消失。為彈框設置好動畫之后，利用事件，來控制其正向與反向播放即可。
在頁面三上，準備一張黑背景圖片以及設計好的彈框，將其放入時間軸下，利用軌跡制作出想要的效果，在背景上的“+”添加一個透明按鈕，增加一個事件，當點擊時讓該時間軸從頭播放，然后在黑色背景下添加同樣的事件，把動作改為反向播放。
其他的一些交互無外乎都是頁面的跳轉，原型制作上并沒有多少壓力。
制作完成之后，就可發布了，會生成一個網址鏈接與二維碼，可以在線編輯與查看。
工欲善其事，必先利其器，工具的選擇不是越多人用越好。像Axure這類專業的原型制作軟件，在標尺、對齊上面，是上面所使用的iH5遠比不上的（后者得通過x|y坐標等精確控制），而且其還擁有眾多有手機圖標等模板，可以大大加快原型制作，但后者在與人溝通以及查看時有著優勢，并且隨著H5營銷的流行，其也可以快速制作出相關的營銷案例，并迅速在網上傳播，不用再依靠別人，或者重新學習其他制作工具，擁有更多的可操作性。
本文由 @iood 原創發布于人人都是產品經理。未經許可，禁止轉載。
TML5在國內一般稱為H5，指的是HTML5網頁，比如前兩年大火的小游戲《圍住神經貓》，就是H5網頁的一種。近期比較出名還有看看新聞通過www.ih5.cn制作的H5《和宋仲基結婚合成器》，一天內瀏覽量破250萬。
如果細心地觀察那些閱讀轉發破萬的H5，它們除了本身極具特色的創意之外，排版與動效功能的應用也是恰到好處。
所以今天我們就分別從【動效】來給大家闡釋，如何讓自己創作的H5更具傳播性。
·
如今的消費者幾乎手機不離身，手機移動端H5對公司宣傳的影響愈加明顯，可移動端相對于PC端與紙媒等其他渠道而言，具有以下幾點特性：
為了大大降低這些特征對H5內容閱讀吸引力的影響，針對不同的問題，我們可以在H5內容中添加相對應的動效，以達到優化的作用:
1、動效的作用
總結而言，動效對H5頁面的作用主要體現在兩個方面，分別為功能性以及趣味性。
功能性：
（1）引導用戶進行點擊、翻頁等動作
（2）吸引用戶并讓其做長時間的視覺停留；
趣味性：通過一些充滿趣味的特效，讓用戶的體驗變得真正愉快以及難忘。
2、動效的類型
在H5內容展示中常見的動效有：移位、旋轉、翻轉、縮放、逐楨、淡入淡出、粒子效果、3D等，而我們能大致地將這些動效分為基礎特效、招牌特效以及高難度特效三種類別。
（1）基礎動效
基礎動效分為指向性動效和空間展示動效，具體表現在：
指向性動效——H5元素的出現、滑動、彈出等
空間展示動效——頁面的切換、翻動和放大。
基礎動效最重要的目的是要讓用戶感到毫無負擔，順應自然規律，此類動效無需做到奪人眼球，而是要讓動效舒服流暢。
為了能讓大家更直觀地理解基礎特效的效果，不妨來看看下面這些關于動效設計中的物理關系。
首先，我們要理解“顏色是有重量的”，如下圖所示，隨著明度和飽和度的升高，顏色的重量在下降：
此外，物理規律也是動效考慮的關鍵因素。看起來舒服的動效，一定是符合真實物理運動規律的，比如小球從上往下掉，加速運動要比勻速運動更符合人眼的認知。
（2）招牌動效
招牌動效是基于基本動作有選擇性的差異化展現，就像一個個有個性的Pose，讓用戶眼前一亮，建立對界面的獨特印象。
這類動效目的是主要為了加深用戶印象，但需要注意夸張個性化的表現，以及對于動效節奏的把控。
（3）高難度動效
高難度動效主要的目的是為了加深用戶印象。如果運用在H5中會很酷很炫，可以讓用戶做長時間的視覺停留，但是也是起到錦上添花、畫龍點睛的作用，需要根據切實需要來進行設計。
有時候大家會覺得這些酷炫的動效很難實現，其實如果你仔細分析，會發現他們都是基礎動效的排列組合。比如下面這兩個動效，只要拆分成不同的層，就能發現其中只是不同層之間平移和縮放的組合。
以上，僅是一些制作經驗和思路分享，不過具體的情況還得具體分析，排版與動效的表現形式錯綜復雜，只有找到合適自己創作風格的才能打動讀者。
【附：HTML5制作，建議使用www.ih5.cn，國內唯一提供可視化物理引擎、微信付費點、微信紅包等功能的H5頁面制作云服務平臺。】
者： 卡特
轉發鏈接：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
