- 相關(guān)推薦
解讀刷屏級H5排版以及動效
如果細(xì)心地觀察那些閱讀轉(zhuǎn)發(fā)破萬的H5，它們除了本身極具特色的創(chuàng)意之外，排版與動效功能的應(yīng)用也是恰到好處。所以今天我們就分別從【排版】、【動效】兩方面來給大家闡釋，如何讓自己創(chuàng)作的H5更具傳播性。
Part 1 排版篇
生長在移動端的H5廣告相較于其他廣告，充分地暴露了屏幕小、層級深、較難在保持內(nèi)容統(tǒng)一性的前提下包含眾多且交互復(fù)雜東西等缺點(diǎn)，也因此可能會影響用戶在閱覽H5時對有效信息的獲取能力。所以，利用設(shè)計在最短的時間內(nèi)引導(dǎo)用戶接收到有效信息變得更加重要。
那么，怎樣才能更有效地引導(dǎo)用戶接受到那些有效信息呢? 通過排版!
版面是基礎(chǔ)，先確定版面的布局框架，再考慮配色，字體…
優(yōu)秀的版面設(shè)計，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時也能明確信息主次，使有效信息達(dá)到最優(yōu)的傳播。
版面在H5設(shè)計中的作用：
1、不同圖文信息的有序展示，在視覺上起到一定引導(dǎo)作用，通過版面大小和前后復(fù)疊關(guān)系明確展示信息的主次，視覺表達(dá)更加合理。
2、交互性是移動端H5設(shè)計中必須考慮的因素，好的版面分割可以增強(qiáng)引導(dǎo)性、增加點(diǎn)擊感，在視覺上輔助交互。
我們常見的版面類型包括：直線型版面、斜線型版面、三角型版面、圓型版面。
1、直線型版面
由直線進(jìn)行切分，面積大小會根據(jù)內(nèi)容相對調(diào)整。
此版面類型操作起來最為簡單，畫面中規(guī)中矩，易給人嚴(yán)肅而具有理性的感覺。反過來說，直線版面也容易顯得呆板生硬，不夠活潑。
不過可以通過不同的設(shè)計風(fēng)格進(jìn)行彌補(bǔ)，具體可見下例：
根據(jù)內(nèi)容的不同，清晰地進(jìn)行分割。居中的板式和文案，表現(xiàn)出品牌的正式、專業(yè)、高端，適合高端消費(fèi)領(lǐng)域的品牌。
直線型版面是最常見的板式，簡單的直線分割容易打造沉穩(wěn)而具有品質(zhì)感的頁面基調(diào)。同時在視覺上對不同內(nèi)容起到明確的區(qū)分，從而正確引導(dǎo)用戶進(jìn)行相應(yīng)的交互。
2、斜線型版面
類型比直線更活潑，視覺上更具沖擊力，整體版面更加動感，并有一定的引導(dǎo)性。斜線版面配合適當(dāng)?shù)膭有軌蛟诘谝粫r間給用戶帶來畫面沖擊，傾斜的角度越呆沖擊感越強(qiáng)，適合在活動、促銷、推薦等場景下使用。
斜線容易給人以平面延續(xù)的感覺，可以在頁面切換時打造連續(xù)的畫面，增強(qiáng)頁面的引導(dǎo)性，適合用于長頁面和多頁面同級并列的H5場景。
3、三角型版面
三角形是一個具有穩(wěn)定性的圖形，在頁面上容易給用戶帶來視覺引導(dǎo)。穩(wěn)定的三角形，同時也是尖銳的形狀，比較容易傳達(dá)快速、時尚、暴力刺激等感受。
在視覺上，三角形給人以指向性。在多屏滑動頁面時，可用于交互上的頁面引導(dǎo)。
4、圓型版面
圓形在手機(jī)屏幕上的表現(xiàn)天然具有視線聚焦的吸引力，適合主標(biāo)題、主圖和其他關(guān)鍵信息的展示。圓形在視覺表現(xiàn)上更加光滑飽滿，給人親近感，適合手繪風(fēng)格、卡通風(fēng)格的頁面設(shè)計。
利用圓形巧妙靈動的將畫面內(nèi)容進(jìn)行分割，相比較直線版面更加流暢，視覺上更具親和力，不生硬。
回顧總結(jié)
1、優(yōu)秀的版面設(shè)計，不僅在視覺上能起到正確引導(dǎo)用戶的作用，同時也能明確信息主次;
2、不同的版面會有不同的視覺效果，選擇版面時要根據(jù)自己的需求進(jìn)行設(shè)計。
Part 2 動效篇
如今的消費(fèi)者幾乎手機(jī)不離身，手機(jī)移動端H5對公司宣傳的影響愈加明顯，可移動端相對于PC端與紙媒等其他渠道而言，具有以下幾點(diǎn)特性：
為了大大降低這些特征對H5內(nèi)容閱讀吸引力的影響，針對不同的問題，我們可以在H5內(nèi)容中添加相對應(yīng)的動效，以達(dá)到優(yōu)化的作用：
問題一：屏幕小，信息含量多
解決思路：對重點(diǎn)宣傳信息加以突出讓關(guān)鍵信息在最短的時間內(nèi)被獲取
問題二：頁面多，要保持統(tǒng)一性
解決思路：通過固定的動效交互，在體驗上保證整個內(nèi)容展示的完整性
問題三：層級深，用戶易流失
解決思路：有趣的動效加上適當(dāng)?shù)慕换ィ岣哂脩魠⑴c度、趣味性、更有效地留住用戶。
H5的設(shè)計
一、H5頁面設(shè)計
1. 確定設(shè)計目標(biāo)
在開始設(shè)計H5頁面之前，首先需要明確設(shè)計目標(biāo)。這包括確定頁面的主題、風(fēng)格、功能和交互方式等。同時，還需要了解目標(biāo)用戶的需求和特點(diǎn)，以便更好地滿足他們的需求。
2. 設(shè)計頁面布局
根據(jù)設(shè)計目標(biāo)，開始設(shè)計頁面的布局。這包括確定頁面的主要元素、顏色、字體和圖片等。在設(shè)計過程中，需要注意頁面的整體美觀度和易用性。
3. 設(shè)計交互效果
H5頁面的交互效果是吸引用戶的重要因素之一。在設(shè)計交互效果時，需要根據(jù)頁面的功能和目標(biāo)用戶的需求，選擇合適的交互方式和效果。例如，可以使用動畫、音效、視頻等來增強(qiáng)頁面的交互效果。
二、H5頁面開發(fā)
1. 前端開發(fā)
前端開發(fā)是H5頁面制作的核心環(huán)節(jié)之一。在這個環(huán)節(jié)中，需要根據(jù)設(shè)計稿和交互效果圖，使用HTML、CSS和JavaScript等技術(shù)，實現(xiàn)頁面的布局和交互效果。在開發(fā)過程中，需要注意頁面的兼容性和性能優(yōu)化。
2. 后端開發(fā)
如果H5頁面需要與后端數(shù)據(jù)交互，還需要進(jìn)行后端開發(fā)。后端開發(fā)可以使用各種編程語言和技術(shù)框架來實現(xiàn)。在這個環(huán)節(jié)中，需要根據(jù)業(yè)務(wù)需求和數(shù)據(jù)結(jié)構(gòu)，編寫相應(yīng)的后端代碼，實現(xiàn)數(shù)據(jù)的存儲、處理和交互等功能。
三、H5頁面測試
1. 單元測試
在完成前端和后端開發(fā)后，需要進(jìn)行單元測試。單元測試是對每個功能模塊進(jìn)行單獨(dú)測試的過程，以確保每個模塊的功能正常、邏輯正確。在單元測試中，需要使用各種測試工具和方法，如黑盒測試、白盒測試等。
2. 集成測試
集成測試是在單元測試完成后進(jìn)行的測試環(huán)節(jié)。在這個環(huán)節(jié)中，需要將各個模塊進(jìn)行集成測試，以確保模塊之間的協(xié)調(diào)性和穩(wěn)定性。在集成測試中，需要注意模塊之間的依賴關(guān)系和數(shù)據(jù)傳遞等。
3. 性能測試
性能測試是檢查H5頁面在不同設(shè)備和網(wǎng)絡(luò)環(huán)境下的性能表現(xiàn)的過程。在這個環(huán)節(jié)中，需要使用各種性能測試工具和方法，如壓力測試、負(fù)載測試等。通過性能測試，可以發(fā)現(xiàn)頁面在各種情況下的性能瓶頸和問題，并進(jìn)行相應(yīng)的優(yōu)化和改進(jìn)。
四、H5頁面發(fā)布和維護(hù)
1. 發(fā)布H5頁面
在完成測試后，就可以將H5頁面發(fā)布到相應(yīng)的平臺或服務(wù)器上。在發(fā)布過程中，需要注意頁面的安全性、穩(wěn)定性和可訪問性等問題。同時，還需要根據(jù)實際情況調(diào)整頁面的大小、格式和加載速度等參數(shù)。
2. 維護(hù)和更新H5頁面
在H5頁面發(fā)布后，還需要進(jìn)行維護(hù)和更新工作。這包括定期檢查頁面的性能、安全性和用戶體驗等方面的問題，并及時進(jìn)行修復(fù)和改進(jìn)。同時，還需要根據(jù)業(yè)務(wù)需求和用戶反饋等情況，對頁面進(jìn)行更新和優(yōu)化工作。在維護(hù)和更新過程中，需要注意保持頁面的兼容性和穩(wěn)定性等問題。
總之，H5頁面制作是一個復(fù)雜而細(xì)致的過程。從設(shè)計到開發(fā)再到測試和發(fā)布都需要認(rèn)真對待每一個環(huán)節(jié)的工作才能制作出高質(zhì)量的H5頁面來吸引用戶的關(guān)注和使用。
【解讀刷屏級H5排版以及動效】相關(guān)文章：
超贊的刷屏級H5排版以及動效02-01
H5動效設(shè)計中的常見制作手法05-12
10個值得前端收藏的CSS3動效庫08-10
十個值得前端收藏的CSS3動效庫01-20
很火的H5知識集錦07-25
網(wǎng)頁的排版與布局05-26
WORD 排版技巧05-23
四級試卷的排版布局圖06-03
dreamweaver代碼怎么排版06-03