這是根據(jù)騰訊最新公布的《移動頁面用戶行為報告》來給大家分享的關(guān)于移動端H5頁面開發(fā)一些20條規(guī)范和準(zhǔn)則。里面大概包含了16種用戶操作習(xí)慣和注意點(diǎn)。

想要了解詳細(xì)的小伙伴可以前往：http://bigdata.qq.com/article?id=2944

下面25學(xué)堂跟大家先分享一張關(guān)于2016年最新的ios和android系統(tǒng)的占比情況，以便于我們對h5開發(fā)和APP設(shè)計有進(jìn)一步的了解。

擴(kuò)展閱讀：

1、移動端H5頁面的設(shè)計稿尺寸大小規(guī)范

2、當(dāng)當(dāng)網(wǎng)的H5觸屏版的UI視覺設(shè)計規(guī)范

廢話少說，直接跟隨25學(xué)堂的小編來細(xì)細(xì)品讀這20條移動前端H5頁面開發(fā)規(guī)范。

1. 做好縮略圖，事半功倍

用戶會點(diǎn)擊一個H5，跟標(biāo)題、縮略圖以及發(fā)布的時間有關(guān)系。一個奪人眼球的標(biāo)題能夠吸引人的點(diǎn)擊，一個引人注目的縮略圖會引起人們的好奇心。

以上一些經(jīng)典的H5案例

2. 請在12點(diǎn)或22點(diǎn)發(fā)布或上線H5頁面

H5發(fā)布最合適的時間，騰訊的《移動頁面用戶行為報告》給出了以下答案。

3. 請把引流頁放在首頁或尾頁

騰訊《移動頁面用戶行為報告》指出，H5頁面首屏和最后一屏的平均停留時間比中間頁面的平均停留時間長，按鈕點(diǎn)擊率也比較高，是放置引流頁面的最佳選擇。

4. 給按鈕好聽的名字和動畫

▲以上3個案例來自ih5平臺 按鈕命名值得借鑒

5. 力求三秒鐘渲染首屏

騰訊《移動頁面用戶行為報告》第一條指出，加載超過5秒就會有74%的用戶離開頁面。

用戶都是沒有耐心的，首屏渲染越短越好。

因此一定要盡量縮小首屏的體積，業(yè)內(nèi)一般以聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)為準(zhǔn)，3秒以內(nèi)渲染完成，所以首屏資源不應(yīng)超過1014KB。

6. 大型重資源頁面采用loading頁面

如果你不能夠保證3秒出首屏，那就增加有趣的Loading頁面進(jìn)行預(yù)加載，資源加載完成后再顯示頁面。雖說Loading頁面可以緩解用戶等待的焦慮，但時間過長，也會造成用戶流失。因此H5素材優(yōu)化才是硬道理。

7. 用色彩單一的繪圖方式作圖

這是三張200*200像素圖片的體積對比，第一張單色塊，第二張垂直漸變，第三張斜對角漸變。對于H5來說，流暢度往往比畫面的精細(xì)程度更加重要。

8. 靜態(tài)圖盡量保存成png8、或者進(jìn)行圖片壓縮，在線png圖片壓縮工具很多。

這是一張1M的圖片用PS壓縮成jpg、png8、png24的體積對比。需要補(bǔ)充的是Png8最多只能展示265種顏色，而png24能有1600萬。

所以色彩單一時用png8，色彩豐富時用jpg，需要追求精度時用png24。

9. 無損壓縮圖片可用網(wǎng)站

大家都知道的TinyPNG 和業(yè)界好口碑的智圖。

手機(jī)APP設(shè)計必備圖片壓縮神器-TinyPNG

推薦一個APP切圖文件的PNG壓縮工具-Pnggauntlet

10. 圖片避免大小重設(shè)

根據(jù)需求上傳相應(yīng)尺寸圖片，避免大小重設(shè)，不寬于640像素（基于手機(jī)屏幕一般寬度），避免造成圖片質(zhì)量剩余。

11、善于用H5工具匹配多終端

H5中背景圖片寬度固定為640px，那如何匹配高度呢？

如果你用的是H5制作工具——ih5.cn，就能夠解決。

打開ih5.cn，在舞臺下添加【移動設(shè)備】功能，設(shè)置不同方案的高度，案例就可以根據(jù)終端設(shè)備自動跳轉(zhuǎn)到對應(yīng)的方案去瀏覽。這種方法需要重復(fù)設(shè)計多種尺寸的圖，堪稱累倒設(shè)計師的方法。

偷懶的設(shè)計師們用的是——將設(shè)計文檔統(tǒng)一按照最大方案也就是640*1040px來創(chuàng)建，然后添加一個移動設(shè)備，選擇默認(rèn)高度，在設(shè)計文檔時記得將主要的信息放在中間，重要的按鈕盡量往中間放。

12. 動圖優(yōu)化再優(yōu)化

在不影響動態(tài)圖整體效果的前提下，通過修改尺寸、質(zhì)量、幀數(shù)等進(jìn)行優(yōu)化。

13. 善用背景顏色屬性

如果你是用H5工具編輯案例，以ih5為例，在需要使用單純色做背景或者其它的情況下，可以利用圖形工具里面的背景色屬性或者舞臺與頁面的背景屬性。

▲ih5平臺頁面屬性面板

14. 開發(fā)們都喜歡的H5音頻規(guī)范

格式：mp3 ，單軌，最好30秒以內(nèi) ，文件大小控制在100k以內(nèi)最佳。

由上圖可得，mp3文件較大主要是由于比特率過高，一般H5背景音樂比特率選擇64kbps已經(jīng)足夠了。利用Adobe Audition、格式工廠或者一些音樂播放軟件可以剪輯和壓縮音樂。要注意，作為無限循環(huán)的背景音樂，截取時一定要注意頭尾得連接得上，而且要淡入淡出。

15. 視頻3分鐘以內(nèi)，用H.264格式

① 視頻時長：3分鐘以內(nèi)。近年比較火的全屏視頻，視頻長度均為3分鐘以內(nèi)，比如薛之謙史上最瘋狂的廣告（騰訊出品，2分51秒），都是為了避免跳出率過高。

② 格式：MP4，H.264。H.264編碼后生成的視頻文件，體積較小，畫質(zhì)也不錯。藍(lán)光技術(shù)（Blu-ray）和幾乎所有的高清攝像機(jī)都采用這種格式。

③ 在保證基本清晰度的前提下，用格式工廠等軟件進(jìn)行壓縮。視頻寬度同樣是640px，尺寸越小，體積才越小。

16.不濫用Web字體

一般瀏覽器只支持一些默認(rèn)字體，中文如宋體、微軟雅黑、華文細(xì)黑，英文如Helvetica、Arial、Georgia、Times。

H5用了其他字體，需要下載，解析，重繪當(dāng)前頁面，應(yīng)盡量減少使用，或者直接將文字轉(zhuǎn)成圖片再導(dǎo)入。

不過在ih5中，如果你用中文字體組件輸入文字，其實(shí)是自動將文字轉(zhuǎn)成圖片，就不需要擔(dān)心這個問題。

17. 善于復(fù)用元素

H5在制作的過程中經(jīng)常會用到同一個元素，比如按鈕、箭頭等，我們可以直接在iH5編輯舞臺里復(fù)制或直接填寫被復(fù)用的元素的連接，這樣就不用重復(fù)插入圖片，節(jié)省案例內(nèi)存，提高流暢度。

▲圖片屬性面板記錄著資源位置

18.?遵循用戶操作習(xí)慣

騰訊的《移動頁面用戶行為報告》公布：大多數(shù)用戶習(xí)慣滑動切換，放置在左邊的按鈕點(diǎn)擊率低（可能大部分是右撇子）。

用戶習(xí)慣沿用上一屏學(xué)習(xí)到的操作行為，如果當(dāng)前操作不同，需要提示用戶。

19. 慎用向右滑動和橫屏

很多手機(jī)，特別是蘋果手機(jī)，向右滑動容易觸發(fā)返回“上一級頁面”效果。

橫屏需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高（很多安卓手機(jī)經(jīng)常對橫屏沒反應(yīng)）。對不同屏幕的手機(jī)，長寬比例不一，難以展示最佳的視覺效果。

20. 慎用輸入行為

輸入行為或者復(fù)雜交互行為都會導(dǎo)致用戶流失。

用戶都是沒有耐心的，如果一定要輸入，盡量改成選擇的形式，會好很多。

比如ih5平臺上設(shè)計師悟腳叔叔的作品《你，有什么資格睡覺》，就把一些輸入行為轉(zhuǎn)為了選擇行為。對每一個測試類H5，都是有借鑒意義的。