h5頁面設計規范

1、把重要內容布局在安全線之上。

目前包含android和ios最小分辨率均在640*960之上。計算Android和ios安全區域，以android的導航欄和標簽欄最大值（48+100）為準:960-148=812，從狀態欄開始812設計即是安全區域。

2、可點擊部件盡量和屏幕四邊保持20-30PX的距離。

3、設計的時候盡量以一個使用者的角度去設計，判斷哪個頁面需要狀態欄，哪個頁面只需要一個返回按鈕。

4、iPhone輸入法自帶搜索按鈕，沒有必要再在頁面上進行顯示。

5、盡可能的對頁面部件大小邊距等元素進行大小的標注。

6、中文字體:黑體-簡或者華文黑體。英文字體:helvetica neue lt。

7、字號選擇:建議最小不超過18像素，其他字號雙數，同種類別下用一樣字號。

8、排版

集中:簡單集中，中心元素不易過多，突出重點為最優。

9、給開發提供圖片素材要控制在100k以內。這樣不僅能提高加載速度，還能節省用戶帶寬。

10、在小小的手機屏幕里，碎片時間中，我們必須先抓人眼球，再抓住人心。

11、有時候構思的時間比做的時間還要長。

12、H5和app比起來優勢在于開發周期時間短，傳播起來有效率，并且在更新迭代的成本上要小很多。特別在游戲上，未來H5會有更多的可能性。

13、從頁面布局上減少跳轉：使用交互技巧隱藏文字

相關文章：移動端界面設計UI尺寸規范匯總

關于我們：

Infocode藍暢信息技術有限公司成功為多家世界財富500強企業以及其他著名品牌提供優質服務，是您靠譜的互聯網開發供應商。

服務客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區    為您提供：H5開發，小程序開發，H5外包，微信開發外包，H5商城開發，小程序商城開發，網站開發外包，H5游戲開發，小程序開發外包，小程序設計、APP開發外包，UI設計，SEO優化，SEO外包，視頻后期制作等優質服務