20條移動前端H5頁面開發規范,h5開發必看文檔

這是根據騰訊最新公布的《移動頁面用戶行為報告》來給大家分享的關于移動端H5頁面開發一些20條規范和準則。里面大概包含了16種用戶操作習慣和注意點。

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

下面25學堂跟大家先分享一張關于2016年最新的ios和android系統的占比情況,以便于我們對h5開發和APP設計有進一步的了解。

2016最新app系統占比

擴展閱讀:

1、移動端H5頁面的設計稿尺寸大小規范

2、當當網的H5觸屏版的UI視覺設計規范

 

廢話少說,直接跟隨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 和業界好口碑的智圖。

手機APP設計必備圖片壓縮神器-TinyPNG

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

 

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,都是有借鑒意義的。

 

每天更新,
全站高品質素材免費下載!