如果細(xì)心地觀察那些閱讀轉(zhuǎn)發(fā)破萬的H5，它們除了本身極具特色的創(chuàng)意之外，排版與動(dòng)效功能的應(yīng)用也是恰到好處。所以今天我們就分別從【排版】、【動(dòng)效】兩方面來給大家闡釋，如何讓自己創(chuàng)作的H5更具傳播性。
來源： iH5（ID：ih5_cn）
Part 1 排版篇
生長在移動(dòng)端的H5廣告相較于其他廣告，充分地暴露了屏幕小、層級深、較難在保持內(nèi)容統(tǒng)一性的前提下包含眾多且交互復(fù)雜東西等缺點(diǎn)，也因此可能會(huì)影響用戶在閱覽H5時(shí)對有效信息的獲取能力。所以，利用設(shè)計(jì)在最短的時(shí)間內(nèi)引導(dǎo)用戶接收到有效信息變得更加重要。
那么，怎樣才能更有效地引導(dǎo)用戶接受到那些有效信息呢？ 通過排版！
版面是基礎(chǔ)，先確定版面的布局框架，再考慮配色，字體…
優(yōu)秀的版面設(shè)計(jì)，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時(shí)也能明確信息主次，使有效信息達(dá)到最優(yōu)的傳播。
版面在H5設(shè)計(jì)中的作用：
1、不同圖文信息的有序展示，在視覺上起到一定引導(dǎo)作用，通過版面大小和前后復(fù)疊關(guān)系明確展示信息的主次，視覺表達(dá)更加合理。
2、交互性是移動(dòng)端H5設(shè)計(jì)中必須考慮的因素，好的版面分割可以增強(qiáng)引導(dǎo)性、增加點(diǎn)擊感，在視覺上輔助交互。
我們常見的版面類型包括：直線型版面、斜線型版面、三角型版面、圓型版面。
1、直線型版面
由直線進(jìn)行切分，面積大小會(huì)根據(jù)內(nèi)容相對調(diào)整。
直線型版面示意圖
此版面類型操作起來最為簡單，畫面中規(guī)中矩，易給人嚴(yán)肅而具有理性的感覺。反過來說，直線版面也容易顯得呆板生硬，不夠活潑。
不過可以通過不同的設(shè)計(jì)風(fēng)格進(jìn)行彌補(bǔ)，具體可見下例：
根據(jù)內(nèi)容的不同，清晰地進(jìn)行分割。居中的板式和文案，表現(xiàn)出品牌的正式、專業(yè)、高端，適合高端消費(fèi)領(lǐng)域的品牌。
直線型版面是最常見的板式，簡單的直線分割容易打造沉穩(wěn)而具有品質(zhì)感的頁面基調(diào)。同時(shí)在視覺上對不同內(nèi)容起到明確的區(qū)分，從而正確引導(dǎo)用戶進(jìn)行相應(yīng)的交互。
優(yōu)秀直線型案例賞析
2、斜線型版面
類型比直線更活潑，視覺上更具沖擊力，整體版面更加動(dòng)感，并有一定的引導(dǎo)性。斜線版面配合適當(dāng)?shù)膭?dòng)效能夠在第一時(shí)間給用戶帶來畫面沖擊，傾斜的角度越呆沖擊感越強(qiáng)，適合在活動(dòng)、促銷、推薦等場景下使用。
斜線型版面示意圖
斜線容易給人以平面延續(xù)的感覺，可以在頁面切換時(shí)打造連續(xù)的畫面，增強(qiáng)頁面的引導(dǎo)性，適合用于長頁面和多頁面同級并列的H5場景。
3、三角型版面
三角形是一個(gè)具有穩(wěn)定性的圖形，在頁面上容易給用戶帶來視覺引導(dǎo)。穩(wěn)定的三角形，同時(shí)也是尖銳的形狀，比較容易傳達(dá)快速、時(shí)尚、暴力刺激等感受。
三角型版面示意圖
在視覺上，三角形給人以指向性。在多屏滑動(dòng)頁面時(shí)，可用于交互上的頁面引導(dǎo)。
4、圓型版面
圓形在手機(jī)屏幕上的表現(xiàn)天然具有視線聚焦的吸引力，適合主標(biāo)題、主圖和其他關(guān)鍵信息的展示。圓形在視覺表現(xiàn)上更加光滑飽滿，給人親近感，適合手繪風(fēng)格、卡通風(fēng)格的頁面設(shè)計(jì)。
圓型版面示意圖
利用圓形巧妙靈動(dòng)的將畫面內(nèi)容進(jìn)行分割，相比較直線版面更加流暢，視覺上更具親和力，不生硬。
回顧總結(jié)
1、優(yōu)秀的版面設(shè)計(jì)，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時(shí)也能明確信息主次；
2、不同的版面會(huì)有不同的視覺效果，選擇版面時(shí)要根據(jù)自己的需求進(jìn)行設(shè)計(jì)。
Part 2 動(dòng)效篇
如今的消費(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)化的作用：
問題一：屏幕小，信息含量多
解決思路：對重點(diǎn)宣傳信息加以突出讓關(guān)鍵信息在最短的時(shí)間內(nèi)被獲取
問題二：頁面多，要保持統(tǒng)一性
解決思路：通過固定的動(dòng)效交互，在體驗(yàn)上保證整個(gè)內(nèi)容展示的完整性
問題三：層級深，用戶易流失
解決思路：有趣的動(dòng)效加上適當(dāng)?shù)慕换?，提高用戶參與度、趣味性、更有效地留住用戶
以下從幾個(gè)方面談?wù)剟?dòng)效的制作和應(yīng)用：
1、動(dòng)效的作用
總結(jié)而言，動(dòng)效對H5頁面的作用主要體現(xiàn)在兩個(gè)方面，分別為功能性以及趣味性。
（1）功能性：
引導(dǎo)用戶進(jìn)行點(diǎn)擊、翻頁等動(dòng)作
吸引用戶并讓其做長時(shí)間的視覺停留；
（2）趣味性：
通過一些充滿趣味的特效，讓用戶的體驗(yàn)變得真正愉快以及難忘。
2、動(dòng)效的類型
在H5內(nèi)容展示中常見的動(dòng)效有：移位、旋轉(zhuǎn)、翻轉(zhuǎn)、縮放、逐楨、淡入淡出、粒子效果、3D等，而我們能大致地將這些動(dòng)效分為基礎(chǔ)特效、招牌特效以及高難度特效三種類別。
其中，基礎(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)知。
招牌動(dòng)效是基于基本動(dòng)作有選擇性的差異化展現(xiàn)，就像一個(gè)個(gè)有個(gè)性的Pose，讓用戶眼前一亮，建立對界面的獨(dú)特印象。
這類動(dòng)效目的是主要為了加深用戶印象，但需要注意夸張個(gè)性化的表現(xiàn)，以及對于動(dòng)效節(jié)奏的把控。
高難度動(dòng)效主要的目的是為了加深用戶印象。如果運(yùn)用在H5中會(huì)很酷很炫，可以讓用戶做長時(shí)間的視覺停留，但是也是起到錦上添花、畫龍點(diǎn)睛的作用，需要根據(jù)切實(shí)需要來進(jìn)行設(shè)計(jì)。
有時(shí)候大家會(huì)覺得這些酷炫的動(dòng)效很難實(shí)現(xiàn)，其實(shí)如果你仔細(xì)分析，會(huì)發(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)讀者。
iH5創(chuàng)作研究室
20160515期
完
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
全部評論（3條）