H5頁面設(shè)計的的發(fā)展井噴之勢，給我們的生活帶來了別樣的精彩。沉迷于H5頁面設(shè)計的粉絲們，你們知道該如何設(shè)計出一款讓消費者位置心動，為之瘋狂的頁面嗎？在實踐中先知品牌營銷策劃公司也已經(jīng)積累了一些經(jīng)驗和教訓(xùn)，今天結(jié)合咱們的實戰(zhàn)案例，從字體，排版，動效，音效，適配性，想法這幾個方面好好聊一聊關(guān)于H5的設(shè)計，希望對大家有幫助。

　　 字體

　　 排版

　　 在有限的手機屏幕空間內(nèi)，我們積累的經(jīng)驗告訴我們更好的效果是簡單集中，更好有一個核心元素，中心元素不宜過多，突出重點為更優(yōu)。

　　 比如JDC的“拍拍十二星座實用手冊”的項目，只用了更簡單的圖形和文字居中擺放。

　　 以可口可樂的這個“我們在這 我們在乎”為例，相較而言，越左邊的排版會越容易引起關(guān)注。這是因為我們懶惰的大腦里更初看到這種簡潔排版會立刻出現(xiàn)“嗯 我可以馬上看完不費勁”的潛意識信息而帶著輕松的態(tài)度去閱讀。

　　 動效

　　 1 / 前期跟前端設(shè)計師進(jìn)行溝通，討論頁面中元素的動效呈現(xiàn)。例如一些元素的位移，旋轉(zhuǎn)，翻轉(zhuǎn)，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展示效果。

　　 比如JDC出品的“京東HR招聘”里面就用了位移，縮放，淡入淡出的效果。而“京東微店七宗罪”的更慷慨這一屏則是用到了粒子效果，每個錢幣翻轉(zhuǎn)下落的速度不一樣顯得畫面更真實。今年在朋友圈瘋轉(zhuǎn)的維多利亞和特斯拉的H5用的是擦除的效果，模糊的遮罩足夠挑起人們的好奇心。

　　 以上兩款，包括今年更火的H5案例都在這了

　　 2 / 背景動效其實比較推薦緩動效果，如“京東管培生招聘”的例子里星空中一閃而過的流星，間歇性出現(xiàn)不搶主角風(fēng)頭再好不過了.

　　 3 /復(fù)雜多變的動效不一定是好的，要考慮到加載速度等用戶體驗問題。

　　 音效

　　 1 / 考慮到用戶使用場景的多樣性，那種介紹類的如果要加背景音樂，盡量不要太粗暴。有一點循序漸進(jìn)更好，給用戶留時間在騷擾別人之前可以關(guān)閉。

　　 或者可以在開始時是關(guān)閉狀態(tài)。但做游戲h5頁面的時候，音樂可以沒有關(guān)閉開啟按鈕，因為用戶對接下來發(fā)生的事是有預(yù)知的。

　　 2 / 考慮每一頁音樂按鈕放置的明顯性。如果能用其他頁面元素去替代音樂符號作為按鈕也是極好的。

　　 3 / 給前端設(shè)計師的音樂文件：格式為mp3等 ，單軌，更好30秒以內(nèi) 。為了加載速度，文件大小盡量控制在：100k以內(nèi)更佳，可以用Adobe Audition等軟件來壓縮。作為無限循環(huán)的背景音樂，截取時一定要注意頭尾得連接得上。

　　 交互

　　 1 / 展示型: 有很多種不同的交互方式，更常見的是翻頁，這種方式制作起來相對簡單，多用于展示一些新的產(chǎn)品，功能，或者活動介紹等。技術(shù)上現(xiàn)在市面上已經(jīng)有H5在線生成器，基本上給圖片和文字就可以幫你進(jìn)行處理。

　　 除了翻頁以外，還有點擊，輸入文字，擦除屏幕，滑動屏幕等，玩法非常豐富。在“拍拍圣誕活動”里就用到了重力感應(yīng)，搖一搖可以隨機判斷，讓用戶有了自己參與的樂趣。

　　 2 /游戲型：像是起初朋友圈紅過的圍住神經(jīng)貓，或者是我們的“拍拍Jump”這類需要計算邏輯，得出分?jǐn)?shù)或者結(jié)論的小游戲。

　　 3 /產(chǎn)品型：有一些H5是作為一個長期運營的產(chǎn)品存在的，用戶的訪問可能會更固定，比如微信里的購物頁面等。

　　 手機端之間：一般我們先用640X1136進(jìn)行設(shè)計，參考線會標(biāo)在960高的地方，主要元素更好不要過高以適配各種機型。其他安卓機器前端切圖時可以適當(dāng)拉伸，變化不會太大就不用每個進(jìn)行適配。

　　 響應(yīng)式設(shè)計：頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

　　 為不同電子設(shè)備單個布局，盡量使用純色而非漸變

　　 想法

　　 被大眾主流樂于分享的信息大概有這么幾種：

　　 更直接的利益驅(qū)動，分享有獎或者需要等，

　　 對自己有用并且也對周圍人也會有新鮮感的信息，

　　 自己參與游戲或者測試得到的結(jié)果。

　　 不管是分享給朋友或朋友圈還是QQ對話，讓用戶主動去分享你的帶有很大性質(zhì)的廣告意味的信息在自己的社交群體中，此條信息與自己相關(guān)并且別人也能參與進(jìn)來當(dāng)然是更理想的。

　　 可口可樂北極熊求合影的例子就是一個很好的宣傳方式，借由簡單的合成照片技術(shù)讓人們有意愿去分享自己努力創(chuàng)作的照片。還有UJEANS的設(shè)計延續(xù)了品牌的調(diào)性就是實用，在選擇你的牛仔褲喜好時也同時穿插了商品的說明，顯得不那么生硬，它比較符合理由3。

　　 在我們設(shè)計一個H5頁面時，很重要的一點就是站在自己的角度跳出來去看你做的東西，首先一點是你和你周圍的人愿意轉(zhuǎn)發(fā)分享這個東西嗎?它有趣嗎?它對其他人也是有用的信息嗎?

　　 在做“1212陪你一二到底”的時候，我們的設(shè)計師要在更后引出有優(yōu)惠券領(lǐng)取這個信息，前面也用用盡了節(jié)操去設(shè)計文案和人物，在此體會一下文案的重要性，它是貫穿整個H5的靈魂。張圖上的小字“海外 足不出戶購遍”是產(chǎn)品想說的硬廣告臺詞，但在小小的手機屏幕里，碎片時間中，我們必須先抓人眼球，再抓住人心，所以”身體和快遞，至少一個在路上“。

　　 對于展示型和互動型H5來說更重要的還是想法。對于設(shè)計師來說，也許他們給到我們的只有幾行文字，那時候前期構(gòu)思這個H5的時間有可能比真正做的時間還要長。

　　 比如拍拍網(wǎng)同步發(fā)售iPhone6的這個消息要做成H5，如果我們只是做一張炫酷的圖片告訴大家我們這里有iphone6分享朋友圈有可能中獎，也會有利益驅(qū)動的誘惑讓人去轉(zhuǎn)發(fā)分享。但通過大家的腦爆，我們將這句話變成“關(guān)于Phone6的哥德巴赫猜想”，根據(jù)測試結(jié)果得出有趣的結(jié)論，這樣轉(zhuǎn)發(fā)的并不是赤果果的求中獎行為，還帶著有趣的插圖和自己測出來的殺馬特范，是不是顯得更含蓄更不經(jīng)意呢。這樣更終轉(zhuǎn)發(fā)的理由上述1，2，3好像都有了呢。

　　 現(xiàn)在H5 頁面，產(chǎn)量頗豐。 H5和app比起來優(yōu)勢在于開發(fā)周期時間短，傳播起來有效率，并且在更新迭代的成本上要小很多。特別在游戲上，未來H5會有更多的可能性。 我們也會堅持去研究和嘗試，不管是新技術(shù)，還是更有趣的營銷方式，和大家共勉。

        希望以上這篇給大家分享的H5移動端頁面設(shè)計的經(jīng)驗之談能夠給大家?guī)韼椭?，祝愿大家都能夠設(shè)計出一款令人震撼的H5頁面。

       文章來源：先知品牌營銷策劃 http://e.xianzhi.net/html5sj/6918.html