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