HTML5在國內(nèi)一般稱為H5，指的是HTML5網(wǎng)頁，現(xiàn)在常用于微信營銷。如果細(xì)心地觀察那些閱讀轉(zhuǎn)發(fā)破萬的H5，它們除了本身極具特色的創(chuàng)意之外，排版與動(dòng)效功能的應(yīng)用也是恰到好處。今天我們就從【動(dòng)效】來給大家闡釋，如何讓自己創(chuàng)作的H5更具傳播性。

如今的消費(fèi)者幾乎手機(jī)不離身，手機(jī)移動(dòng)端H5對公司宣傳的影響愈加明顯，可移動(dòng)端相對于PC端與紙媒等其他渠道而言，具有以下幾點(diǎn)特性：

為了大大降低這些特征對H5內(nèi)容閱讀吸引力的影響，針對不同的問題，我們可以在H5內(nèi)容中添加相對應(yīng)的動(dòng)效，以達(dá)到優(yōu)化的作用:

1動(dòng)效的作用

總結(jié)而言，動(dòng)效對H5頁面的作用主要體現(xiàn)在兩個(gè)方面，分別為功能性以及趣味性。

功能性：

（1）引導(dǎo)用戶進(jìn)行點(diǎn)擊、翻頁等動(dòng)作

（2）吸引用戶并讓其做長時(shí)間的視覺停留；

趣味性：

通過一些充滿趣味的特效，讓用戶的體驗(yàn)變得真正愉快以及難忘。

2動(dòng)效的類型

在H5內(nèi)容展示中常見的動(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)效——頁面的切換、翻動(dòng)和放大。

基礎(chǔ)動(dòng)效最重要的目的是要讓用戶感到毫無負(fù)擔(dān)，順應(yīng)自然規(guī)律，此類動(dòng)效無需做到奪人眼球，而是要讓動(dòng)效舒服流暢。

為了能讓大家更直觀地理解基礎(chǔ)特效的效果，不妨來看看下面這些關(guān)于動(dòng)效設(shè)計(jì)中的物理關(guān)系。

首先，我們要理解“顏色是有重量的”，如下圖所示，隨著明度和飽和度的升高，顏色的重量在下降：

此外，物理規(guī)律也是動(dòng)效考慮的關(guān)鍵因素?？雌饋硎娣膭?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，讓用戶眼前一亮，建立對界面的獨(dú)特印象。

這類動(dòng)效目的是主要為了加深用戶印象，但需要注意夸張個(gè)性化的表現(xiàn)，以及對于動(dòng)效節(jié)奏的把控。

（3）高難度動(dòng)效

高難度動(dòng)效主要的目的是為了加深用戶印象。如果運(yùn)用在H5中會很酷很炫，可以讓用戶做長時(shí)間的視覺停留，但是也是起到錦上添花、畫龍點(diǎn)睛的作用，需要根據(jù)切實(shí)需要來進(jìn)行設(shè)計(jì)。

有時(shí)候大家會覺得這些酷炫的動(dòng)效很難實(shí)現(xiàn)，其實(shí)如果你仔細(xì)分析，會發(fā)現(xiàn)他們都是基礎(chǔ)動(dòng)效的排列組合。比如下面這兩個(gè)動(dòng)效，只要拆分成不同的層，就能發(fā)現(xiàn)其中只是不同層之間平移和縮放的組合。

以上，僅是一些制作經(jīng)驗(yàn)和思路分享，不過具體的情況還得具體分析，排版與動(dòng)效的表現(xiàn)形式錯(cuò)綜復(fù)雜，只有找到合適自己創(chuàng)作風(fēng)格的才能打動(dòng)讀者。