h5頁面設(shè)計(jì)規(guī)范

1、把重要內(nèi)容布局在安全線之上。

目前包含android和ios最小分辨率均在640*960之上。計(jì)算Android和ios安全區(qū)域，以android的導(dǎo)航欄和標(biāo)簽欄最大值（48+100）為準(zhǔn):960-148=812，從狀態(tài)欄開始812設(shè)計(jì)即是安全區(qū)域。

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

3、設(shè)計(jì)的時(shí)候盡量以一個(gè)使用者的角度去設(shè)計(jì)，判斷哪個(gè)頁面需要狀態(tài)欄，哪個(gè)頁面只需要一個(gè)返回按鈕。

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

5、盡可能的對頁面部件大小邊距等元素進(jìn)行大小的標(biāo)注。

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

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

8、排版

集中:簡單集中，中心元素不易過多，突出重點(diǎn)為最優(yōu)。

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

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

11、有時(shí)候構(gòu)思的時(shí)間比做的時(shí)間還要長。

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

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

相關(guān)文章：移動(dòng)端界面設(shè)計(jì)UI尺寸規(guī)范匯總

關(guān)于我們：

Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開發(fā)供應(yīng)商。

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