本文格式為Word版，下載可任意編輯——超贊的刷屏級H5排版以及動效超贊的刷屏級H5排版以及動效

超贊的刷屏級H5排版以及動效

假設(shè)細心地查看那些閱讀轉(zhuǎn)發(fā)破萬的H5，它們除了本身極具特色的創(chuàng)意之外，排版與動效功能的應(yīng)用也是恰到好處。所以今天我們就分別從、兩方面來給大家闡釋，如何讓自己創(chuàng)作的H5更具傳播性。

Part1排版篇

生長在移動端的H5廣告相較于其他廣告，充分地暴露了屏幕小、層級深、較難在保持內(nèi)容統(tǒng)一性的前提下包含眾多且交互繁雜東西等缺點，也因此可能會影響用戶在閱覽H5時對有效信息的獲取才能。所以，利用設(shè)計在最短的時間內(nèi)引導(dǎo)用戶接收到有效信息變得更加重要。

那么，怎樣才能更有效地引導(dǎo)用戶采納到那些有效信息呢?通過排版!

版面是根基，先確定版面的布局框架，再考慮配色，字體

優(yōu)秀的版面設(shè)計，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時也能明確信息主次，使有效信息達成最優(yōu)的傳播。

版面在H5設(shè)計中的作用：

1、不同圖文信息的有序表示，在視覺上起到確定引導(dǎo)作用，通過版面大小和前后復(fù)疊關(guān)系明確表示信息的主次，視覺表達更加合理。

2、交互性是移動端H5設(shè)計中務(wù)必考慮的因素，好的版面分割可以鞏固引導(dǎo)性、增加點擊感，在視覺上輔佐交互。

我們常見的版面類型包括：直線型版面、斜線型版面、三角型版面、圓型版面。

1、直線型版面

由直線舉行切分，面積大小會根據(jù)內(nèi)容相對調(diào)整。

直線型版面示意圖

此版面類型操作起來最為簡樸，畫面中規(guī)中矩，易給人肅穆而具有理性的感覺。反過來說，直線版面也輕易顯得呆板生硬，不夠活潑。

不過可以通過不同的設(shè)計風(fēng)格舉行彌補，概括可見下例：

根據(jù)內(nèi)容的不同，明顯地舉行分割。居中的板式和文案，表現(xiàn)出品牌的正式、專業(yè)、高端，適合高端消費領(lǐng)域的品牌。

直線型版面是最常見的板式，簡樸的直線分割輕易打造沉穩(wěn)而具有品質(zhì)感的頁面基調(diào)。同時在視覺上對不同內(nèi)容起到明確的區(qū)分，從而正確引導(dǎo)用戶舉行相應(yīng)的交互。

優(yōu)秀直線型案例賞析

2、斜線型版面

類型比直線更活潑，視覺上更具沖擊力，整體版面更加動感，并有確定的引導(dǎo)性。斜線版面合作適當(dāng)?shù)膭有軌蛟诘谝粫r間給用戶帶來畫面沖擊，傾斜的角度越呆沖擊感越強，適合在活動、促銷、推舉等場景下使用。

斜線型版面示意圖

斜線輕易給人以平面延續(xù)的感覺，可以在頁面切換時打造連續(xù)的畫面，鞏固頁面的引導(dǎo)性，適合用于長頁面和多頁面同級并列的H5場景。

3、三角型版面

三角形是一個具有穩(wěn)定性的圖形，在頁面上輕易給用戶帶來視覺引導(dǎo)。穩(wěn)定的三角形，同時也是尖銳的外形，對比輕易傳達快速、時尚、暴力刺激等感受。

三角型版面示意圖

在視覺上，三角形給人以指向性。在多屏滑動頁面時，可用于交互上的頁面引導(dǎo)。

4、圓型版面

圓形在手機屏幕上的'表現(xiàn)自然具有視線聚焦的吸引力，適合主標(biāo)題、主圖和其他關(guān)鍵信息的表示。圓形在視覺表現(xiàn)上更加光滑飽滿，給人親近感，適合手繪風(fēng)格、卡通風(fēng)格的頁面設(shè)計。

圓型版面示意圖

利用圓形高明靈動的將畫面內(nèi)容舉行分割，相對比直線版面更加流暢，視覺上更具親和力，不生硬。

回想總結(jié)

1、優(yōu)秀的版面設(shè)計，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時也能明確信息主次;

2、不同的版面會有不同的視覺效果，選擇版面時要根據(jù)自己的需求舉行設(shè)計。

Part2動效篇

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

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

問題一：屏幕小，信息含量多

解決思路：對重點宣傳信息加以突出讓關(guān)鍵信息在最短的時間內(nèi)被獲取

問題二：頁面多，要保持統(tǒng)一性

解決思路：通過固定的動效交互，在體驗上保證整個內(nèi)容表示的完整性

問題三：層級深，用戶易流失

解決思路：好玩的動效加上適當(dāng)?shù)慕换?，提高用戶參與度、趣味性、更有效地留住用戶

以下從幾個方面談?wù)剟有У闹谱骱蛻?yīng)用：

1、動效的作用

總結(jié)而言，動效對H5頁面的作用主要表達在兩個方面，分別為功能性以及趣味性。

1功能性：

引導(dǎo)用戶舉行點擊、翻頁等動作

吸引用戶并讓其做長時間的視覺停留;

2趣味性：

通過一些彌漫趣味的特效，讓用戶的體驗變得真正高興以及難忘。

2、動效的類型

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

其中，根基動效分為指向性動效和空間表示動效，概括表現(xiàn)在：

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

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

根基動效最重要的目的是要讓用戶感到毫無負擔(dān)，順應(yīng)自然規(guī)律，此類動效無需做到奪人眼球，而是要讓動效安逸流暢。為了能讓大家更直觀地理解根基特效的效果，不妨來看看下面這些關(guān)于動效設(shè)計中的物理關(guān)系。

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

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

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

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

高難度動效主要的目的是為了加深用戶印象。假設(shè)運用在H5中會很酷很炫，可以讓用戶做長時間