1分鐘，深度掌握H5動效技能

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

如今的消費者幾乎手機不離身，手機移動端H5對公司宣傳的影響愈加明顯，可移動端相對于PC端與紙媒等其他渠道而言，具有以下幾點特性：

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

1動效的作用

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

功能性：

（1）引導用戶進行點擊、翻頁等動作

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

趣味性：

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

2動效的類型

在H5內(nèi)容展示中常見的動效有：移位、旋轉、翻轉、縮放、逐楨、淡入淡出、粒子效果、3D等，而我們能大致地將這些動效分為基礎特效、招牌特效以及高難度特效三種類別。

（1）基礎動效

基礎動效分為指向性動效和空間展示動效，具體表現(xiàn)在：

指向性動效——H5元素的出現(xiàn)、滑動、彈出等

空間展示動效——頁面的切換、翻動和放大。

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

為了能讓大家更直觀地理解基礎特效的效果，不妨來看看下面這些關于動效設計中的物理關系。

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

此外，物理規(guī)律也是動效考慮的關鍵因素。看起來舒服的動效，一定是符合真實物理運動規(guī)律的，比如小球從上往下掉，加速運動要比勻速運動更符合人眼的認知。

（2）招牌動效

招牌動效是基于基本動作有選擇性的差異化展現(xiàn)，就像一個個有個性的Pose，讓用戶眼前一亮，建立對界面的獨特印象。

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

（3）高難度動效

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

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

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