- 相關(guān)推薦
超贊的刷屏級H5排版以及動(dòng)效
如果細心地觀(guān)察那些閱讀轉發(fā)破萬(wàn)的H5，它們除了本身極具特色的創(chuàng )意之外，排版與動(dòng)效功能的應用也是恰到好處。所以今天我們就分別從【排版】、【動(dòng)效】?jì)煞矫鎭?lái)給大家闡釋?zhuān)绾巫屪约簞?chuàng )作的H5更具傳播性。
Part 1 排版篇
生長(cháng)在移動(dòng)端的H5廣告相較于其他廣告，充分地暴露了屏幕小、層級深、較難在保持內容統一性的前提下包含眾多且交互復雜東西等缺點(diǎn)，也因此可能會(huì )影響用戶(hù)在閱覽H5時(shí)對有效信息的獲取能力。所以，利用設計在最短的時(shí)間內引導用戶(hù)接收到有效信息變得更加重要。
那么，怎樣才能更有效地引導用戶(hù)接受到那些有效信息呢? 通過(guò)排版!
版面是基礎，先確定版面的布局框架，再考慮配色，字體…
優(yōu)秀的版面設計，不僅在視覺(jué)上能起到正確引導用戶(hù)的作用，同時(shí)也能明確信息主次，使有效信息達到最優(yōu)的傳播。
版面在H5設計中的作用：
1、不同圖文信息的有序展示，在視覺(jué)上起到一定引導作用，通過(guò)版面大小和前后復疊關(guān)系明確展示信息的主次，視覺(jué)表達更加合理。
2、交互性是移動(dòng)端H5設計中必須考慮的因素，好的版面分割可以增強引導性、增加點(diǎn)擊感，在視覺(jué)上輔助交互。
我們常見(jiàn)的版面類(lèi)型包括：直線(xiàn)型版面、斜線(xiàn)型版面、三角型版面、圓型版面。
1、直線(xiàn)型版面
由直線(xiàn)進(jìn)行切分，面積大小會(huì )根據內容相對調整。
直線(xiàn)型版面示意圖
此版面類(lèi)型操作起來(lái)最為簡(jiǎn)單，畫(huà)面中規中矩，易給人嚴肅而具有理性的感覺(jué)。反過(guò)來(lái)說(shuō)，直線(xiàn)版面也容易顯得呆板生硬，不夠活潑。
不過(guò)可以通過(guò)不同的設計風(fēng)格進(jìn)行彌補，具體可見(jiàn)下例：
根據內容的不同，清晰地進(jìn)行分割。居中的板式和文案，表現出品牌的正式、專(zhuān)業(yè)、高端，適合高端消費領(lǐng)域的品牌。
直線(xiàn)型版面是最常見(jiàn)的板式，簡(jiǎn)單的直線(xiàn)分割容易打造沉穩而具有品質(zhì)感的頁(yè)面基調。同時(shí)在視覺(jué)上對不同內容起到明確的區分，從而正確引導用戶(hù)進(jìn)行相應的交互。
優(yōu)秀直線(xiàn)型案例賞析
2、斜線(xiàn)型版面
類(lèi)型比直線(xiàn)更活潑，視覺(jué)上更具沖擊力，整體版面更加動(dòng)感，并有一定的引導性。斜線(xiàn)版面配合適當的動(dòng)效能夠在第一時(shí)間給用戶(hù)帶來(lái)畫(huà)面沖擊，傾斜的角度越呆沖擊感越強，適合在活動(dòng)、促銷(xiāo)、推薦等場(chǎng)景下使用。
斜線(xiàn)型版面示意圖
斜線(xiàn)容易給人以平面延續的感覺(jué)，可以在頁(yè)面切換時(shí)打造連續的畫(huà)面，增強頁(yè)面的引導性，適合用于長(cháng)頁(yè)面和多頁(yè)面同級并列的H5場(chǎng)景。
3、三角型版面
三角形是一個(gè)具有穩定性的圖形，在頁(yè)面上容易給用戶(hù)帶來(lái)視覺(jué)引導。穩定的三角形，同時(shí)也是尖銳的形狀，比較容易傳達快速、時(shí)尚、暴力刺激等感受。
三角型版面示意圖
在視覺(jué)上，三角形給人以指向性。在多屏滑動(dòng)頁(yè)面時(shí)，可用于交互上的頁(yè)面引導。
4、圓型版面
圓形在手機屏幕上的表現天然具有視線(xiàn)聚焦的吸引力，適合主標題、主圖和其他關(guān)鍵信息的展示。圓形在視覺(jué)表現上更加光滑飽滿(mǎn)，給人親近感，適合手繪風(fēng)格、卡通風(fēng)格的頁(yè)面設計。
圓型版面示意圖
利用圓形巧妙靈動(dòng)的將畫(huà)面內容進(jìn)行分割，相比較直線(xiàn)版面更加流暢，視覺(jué)上更具親和力，不生硬。
回顧總結
1、優(yōu)秀的版面設計，不僅在視覺(jué)上能起到正確引導用戶(hù)的作用，同時(shí)也能明確信息主次;
2、不同的版面會(huì )有不同的視覺(jué)效果，選擇版面時(shí)要根據自己的需求進(jìn)行設計。
Part 2 動(dòng)效篇
如今的消費者幾乎手機不離身，手機移動(dòng)端H5對公司宣傳的影響愈加明顯，可移動(dòng)端相對于PC端與紙媒等其他渠道而言，具有以下幾點(diǎn)特性：
為了大大降低這些特征對H5內容閱讀吸引力的影響，針對不同的問(wèn)題，我們可以在H5內容中添加相對應的動(dòng)效，以達到優(yōu)化的作用：
問(wèn)題一：屏幕小，信息含量多
解決思路：對重點(diǎn)宣傳信息加以突出讓關(guān)鍵信息在最短的時(shí)間內被獲取
問(wèn)題二：頁(yè)面多，要保持統一性
解決思路：通過(guò)固定的動(dòng)效交互，在體驗上保證整個(gè)內容展示的完整性
問(wèn)題三：層級深，用戶(hù)易流失
解決思路：有趣的動(dòng)效加上適當的交互，提高用戶(hù)參與度、趣味性、更有效地留住用戶(hù)
以下從幾個(gè)方面談?wù)剟?dòng)效的制作和應用：
1、動(dòng)效的作用
總結而言，動(dòng)效對H5頁(yè)面的作用主要體現在兩個(gè)方面，分別為功能性以及趣味性。
(1)功能性：
引導用戶(hù)進(jìn)行點(diǎn)擊、翻頁(yè)等動(dòng)作
吸引用戶(hù)并讓其做長(cháng)時(shí)間的視覺(jué)停留;
(2)趣味性：
通過(guò)一些充滿(mǎn)趣味的特效，讓用戶(hù)的體驗變得真正愉快以及難忘。
2、動(dòng)效的類(lèi)型
在H5內容展示中常見(jiàn)的動(dòng)效有：移位、旋轉、翻轉、縮放、逐楨、淡入淡出、粒子效果、3D等，而我們能大致地將這些動(dòng)效分為基礎特效、招牌特效以及高難度特效三種類(lèi)別。
其中，基礎動(dòng)效分為指向性動(dòng)效和空間展示動(dòng)效，具體表現在：
指向性動(dòng)效——H5元素的出現、滑動(dòng)、彈出等
空間展示動(dòng)效——頁(yè)面的切換、翻動(dòng)和放大。
基礎動(dòng)效最重要的目的是要讓用戶(hù)感到毫無(wú)負擔，順應自然規律，此類(lèi)動(dòng)效無(wú)需做到奪人眼球，而是要讓動(dòng)效舒服流暢。為了能讓大家更直觀(guān)地理解基礎特效的效果，不妨來(lái)看看下面這些關(guān)于動(dòng)效設計中的物理關(guān)系。
首先，我們要理解“顏色是有重量的”，如下圖所示，隨著(zhù)明度和飽和度的升高，顏色的重量在下降：
此外，物理規律也是動(dòng)效考慮的關(guān)鍵因素�？雌饋�(lái)舒服的動(dòng)效，一定是符合真實(shí)物理運動(dòng)規律的，比如小球從上往下掉，加速運動(dòng)要比勻速運動(dòng)更符合人眼的認知。
招牌動(dòng)效是基于基本動(dòng)作有選擇性的差異化展現，就像一個(gè)個(gè)有個(gè)性的Pose，讓用戶(hù)眼前一亮，建立對界面的獨特印象。
這類(lèi)動(dòng)效目的是主要為了加深用戶(hù)印象，但需要注意夸張個(gè)性化的表現，以及對于動(dòng)效節奏的把控。
高難度動(dòng)效主要的目的是為了加深用戶(hù)印象。如果運用在H5中會(huì )很酷很炫，可以讓用戶(hù)做長(cháng)時(shí)間的視覺(jué)停留，但是也是起到錦上添花、畫(huà)龍點(diǎn)睛的作用，需要根據切實(shí)需要來(lái)進(jìn)行設計。
有時(shí)候大家會(huì )覺(jué)得這些酷炫的動(dòng)效很難實(shí)現，其實(shí)如果你仔細分析，會(huì )發(fā)現他們都是基礎動(dòng)效的排列組合。比如上面這兩個(gè)動(dòng)效，只要拆分成不同的層，就能發(fā)現其中只是不同層之間平移和縮放的組合。
【超贊的刷屏級H5排版以及動(dòng)效】相關(guān)文章：
解讀刷屏級H5排版以及動(dòng)效08-09
H5動(dòng)效設計中的常見(jiàn)制作手法10-02
10個(gè)值得前端收藏的CSS3動(dòng)效庫08-10
十個(gè)值得前端收藏的CSS3動(dòng)效庫10-05
很火的H5知識集錦07-25
關(guān)于H5的一些細節08-07
四級試卷的排版布局圖10-12
WORD 排版技巧05-23
網(wǎng)頁(yè)的排版與布局08-26