這是根據騰訊最新公布的《移動頁面使用者行為報告》來給大家分享的關于移動端H5頁面開發一些20條規範和準則。裡面大概包含了16種使用者操作習慣和注意點。
下面25學堂跟大家先分享一張關于2016年最新的ios和android系統的占比情況，以便于我們對h5開發和APP設計有進一步的了解。
擴充閱讀：
廢話少說，直接跟随25學堂的小編來細細品讀這20條移動前端H5頁面開發規範。
1. 做好縮略圖，事半功倍
使用者會點選一個H5，跟标題、縮略圖以及釋出的時間有關系。一個奪人眼球的标題能夠吸引人的點選，一個引人注目的縮略圖會引起人們的好奇心。
以上一些經典的H5案例
2. 請在12點或22點釋出或上線H5頁面
H5釋出最合适的時間，騰訊的《移動頁面使用者行為報告》給出了以下答案。
3. 請把引流頁放在首頁或尾頁
騰訊《移動頁面使用者行為報告》指出，H5頁面首屏和最後一屏的平均停留時間比中間頁面的平均停留時間長，按鈕點選率也比較高，是放置引流頁面的最佳選擇。
4. 給按鈕好聽的名字和動畫
▲以上3個案例來自ih5平台 按鈕命名值得借鑒
5. 力求三秒鐘渲染首屏
騰訊《移動頁面使用者行為報告》第一條指出，加載超過5秒就會有74%的使用者離開頁面。
使用者都是沒有耐心的，首屏渲染越短越好。
是以一定要盡量縮小首屏的體積，業内一般以聯通3G網絡平均338KB/s(2.71Mb/s)為準，3秒以内渲染完成，是以首屏資源不應超過1014KB。
6. 大型重資源頁面采用loading頁面
如果你不能夠保證3秒出首屏，那就增加有趣的Loading頁面進行預加載，資源加載完成後再顯示頁面。雖說Loading頁面可以緩解使用者等待的焦慮，但時間過長，也會造成使用者流失。是以H5素材優化才是硬道理。
7. 用色彩單一的繪圖方式作圖
這是三張200*200像素圖檔的體積對比，第一張單色塊，第二張垂直漸變，第三張斜對角漸變。對于H5來說，流暢度往往比畫面的精細程度更加重要。
8. 靜态圖盡量儲存成png8、或者進行圖檔壓縮，線上png圖檔壓縮工具很多。
這是一張1M的圖檔用PS壓縮成jpg、png8、png24的體積對比。需要補充的是Png8最多隻能展示265種顔色，而png24能有1600萬。
是以色彩單一時用png8，色彩豐富時用jpg，需要追求精度時用png24。
9. 無損壓縮圖檔可用網站
大家都知道的TinyPNG 和業界好口碑的智圖。
10. 圖檔避免大小重設
根據需求上傳相應尺寸圖檔，避免大小重設，不寬于640像素(基于手機螢幕一般寬度)，避免造成圖檔品質剩餘。
11、善于用H5工具比對多終端
H5中背景圖檔寬度固定為640px，那如何比對高度呢？
如果你用的是H5制作工具——ih5.cn，就能夠解決。
打開ih5.cn，在舞台下添加【移動裝置】功能，設定不同方案的高度，案例就可以根據終端裝置自動跳轉到對應的方案去浏覽。這種方法需要重複設計多種尺寸的圖，堪稱累倒設計師的方法。
偷懶的設計師們用的是——将設計文檔統一按照最大方案也就是640*1040px來建立，然後添加一個移動裝置，選擇預設高度，在設計文檔時記得将主要的資訊放在中間，重要的按鈕盡量往中間放。
12. 動圖優化再優化
在不影響動态圖整體效果的前提下，通過修改尺寸、品質、幀數等進行優化。
13. 善用背景顔色屬性
如果你是用H5工具編輯案例，以ih5為例，在需要使用單純色做背景或者其它的情況下，可以利用圖形工具裡面的背景色屬性或者舞台與頁面的背景屬性。
▲ih5平台頁面屬性面闆
14. 開發們都喜歡的H5音頻規範
格式：mp3 ，單軌，最好30秒以内 ，檔案大小控制在100k以内最佳。
由上圖可得，mp3檔案較大主要是由于比特率過高，一般H5背景音樂比特率選擇64kbps已經足夠了。利用Adobe Audition、格式工廠或者一些音樂播放軟體可以剪輯和壓縮音樂。要注意，作為無限循環的背景音樂，截取時一定要注意頭尾得連接配接得上，而且要淡入淡出。
15. 視訊3分鐘以内，用H.264格式
① 視訊時長：3分鐘以内。近年比較火的全屏視訊，視訊長度均為3分鐘以内，比如薛之謙史上最瘋狂的廣告(騰訊出品，2分51秒)，都是為了避免跳出率過高。
② 格式：MP4，H.264。H.264編碼後生成的視訊檔案，體積較小，畫質也不錯。藍光技術(Blu-ray)和幾乎所有的高清錄影機都采用這種格式。
③ 在保證基本清晰度的前提下，用格式工廠等軟體進行壓縮。視訊寬度同樣是640px，尺寸越小，體積才越小。
16.不濫用Web字型
一般浏覽器隻支援一些預設字型，中文如宋體、微軟雅黑、華文細黑，英文如Helvetica、Arial、Georgia、Times。
H5用了其他字型，需要下載下傳，解析，重繪目前頁面，應盡量減少使用，或者直接将文字轉成圖檔再導入。
不過在ih5中，如果你用中文字型元件輸入文字，其實是自動将文字轉成圖檔，就不需要擔心這個問題。
17. 善于複用元素
H5在制作的過程中經常會用到同一個元素，比如按鈕、箭頭等，我們可以直接在iH5編輯舞台裡複制或直接填寫被複用的元素的連接配接，這樣就不用重複插入圖檔，節省案例記憶體，提高流暢度。
▲圖檔屬性面闆記錄着資源位置
18. 遵循使用者操作習慣
騰訊的《移動頁面使用者行為報告》公布：大多數使用者習慣滑動切換，放置在左邊的按鈕點選率低(可能大部分是右撇子)。
使用者習慣沿用上一屏學習到的操作行為，如果目前操作不同，需要提示使用者。
19. 慎用向右滑動和橫屏
很多手機，特别是蘋果手機，向右滑動容易觸發傳回“上一級頁面”效果。
橫屏需要使用者裝置開啟螢幕旋轉功能，才能正常觀看，使用者操作成本高(很多安卓手機經常對橫屏沒反應)。對不同螢幕的手機，長寬比例不一，難以展示最佳的視覺效果。
20. 慎用輸入行為
輸入行為或者複雜互動行為都會導緻使用者流失。
使用者都是沒有耐心的，如果一定要輸入，盡量改成選擇的形式，會好很多。
比如ih5平台上設計師悟腳叔叔的作品《你，有什麼資格睡覺》，就把一些輸入行為轉為了選擇行為。對每一個測試類H5，都是有借鑒意義的。
![h5 預設為移動端頁面_移動端-H5預加載頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)