隨著html5技術的成熟，
h5頁面越來越受大家歡迎，各種
h5頁面層出不窮，那如何才能讓自己的
h5頁面在眾多頁面中脫穎而出呢？幾個h5頁面的設計技巧分享給大家，希望對大家有所幫助。
1.故事化
h5本身是乙個資訊承載和傳達的工具。講故事是讓資訊快速傳達的最好方式。你要將品牌故事融入
h5，借助
h5的技術優勢將品牌價值文化理念傳達給使用者，讓其永久的記住你。
如圖以成長記錄的形式來進行產品的推廣：
h5融入場景一是讓使用者能在參與中，找到熟悉感以更容易的接受裡面的資訊，而是場景承載的品牌資訊，使用者在特定場景裡，喚起他們的認知，從而加深使用者對品牌的印象。
比如下圖滴滴打車利用「加班」場景推廣品牌：
2.強互動
強互動是將h5頁面做的比較有趣的最好的一種方法。場景現實化、加入互動機制，能讓使用者進一步感知體驗
h5宣傳的品牌產品，提高對產品的購買慾望，並且增加了樂趣。
如圖為蘇泊爾空氣淨化器的h5頁面，互動的方式讓使用者既進一步認知產品又提高樂趣：
3.參與感
真正能和讓使用者更好的理解品牌是讓使用者在參與進來深入感知，擁有能讓使用者參與體驗的h5會更加有趣和讓使用者喜愛。你可以結合產品本身的特性以及使用者的喜好進行參與機制的設定。
如圖優衣庫「為自己的一天搭配」，希望使用者通過h5
頁面的搭配來傳遞給使用者優衣庫的品牌、產品資訊：
4.社交性
h5頁面最重要的乙個特性是傳播。要讓品牌能傳播的更遠還需在
h5上融入社交性，借助使用者的社交關係鏈傳播。通產使用者會通過談資、幫助、比較、炫耀、窺視……與好友維持或促進社交關係。因此在
h5設計中，應融入了這些能讓使用者分享的動機。而且社交對
h5頁面是乙個**方法，利用好社交性，推廣力度、傳播範圍會成倍增長。
5.話題性
想要你的h5專題頁一夜爆紅，第一時間抓住熱點並火速上線，藉機進行品牌宣傳也不失為一條捷徑。注意借勢營銷具有很強時效性。要分清主次用熱點去推廣產品。
如圖為天天p圖結合當時的熱播劇《武媚娘》的介面：
6.流暢性
隨著技術的發展，如今的html5擁有眾多出彩的特性，讓我們能輕鬆實現繪圖、擦除、搖一搖、重力感應、吹起、
3d檢視等互動效果。但是切記實現動效的前提是保證流暢性。有些流暢性可以通過動效進行掩蓋，但有的時候動效可能會影響畫面的流暢性，所以產品經理要根據具體情況具體對待。
h5頁面的寫法 移動端h5頁面寫法
1.頁面寬度320，所有元素尺寸設一半 缺點 不自能適應全屏 2.頁面寬度640，元素尺寸正常 暫未發現問題 3.頁面寬度640，js控制自適應全屏 adaptuilayout.adapt initviewportwidth 缺點 qq空間分享後點開頁面套在qq預設瀏覽器裡有相容性問題 4.rem寫...
h5頁面的快取問題
最近遇到乙個靈異事件 js上線前會build帶上hash，hash方式採用 aaa 1s12jashdjas.js 方式 1 開始排查流程，前端修改了不規範的 格式，再次上線仍可復現 2 疑似nginx有快取html檔案，找運維排查，nginx沒有快取該html頁面 3 又排查nginx配置問題，再...
移動端h5頁面的設計稿尺寸
那麼多手機螢幕尺寸，設計稿應該按照哪乙個尺寸作為標準尺寸。現在已經有2k解析度的手機螢幕了，設計稿是不是也要把寬高跟著最大解析度來設計。顯然不是。請注意 以下所有討論內容和規範均將viewport設定為content width device width 的情況下 也就是我們的h5頁面前端 裡面必須...