H5設(shè)計(jì)：談一談H5設(shè)計(jì)上的一些需要注意的問題

一、Native APP和H5的區(qū)別

如下圖所示，當(dāng)加載H5過(guò)多的時(shí)候，我們多多商服及唯品花取現(xiàn)、京東實(shí)名認(rèn)證等頁(yè)面左上角有關(guān)閉按鈕，容易誤點(diǎn)。

那為什么不能將這個(gè)關(guān)閉按鈕去掉呢？請(qǐng)教開發(fā)同事得到的答案是：如果Native那里可以給H5接口去修改導(dǎo)航欄，肯定是可以去掉的。但如果Native在寫基礎(chǔ)框架的時(shí)候用的是開源代碼，代碼中的Native bar這里都是有關(guān)閉按鈕的，且沒有接口可以去掉，那就沒辦法了。這屬于基礎(chǔ)架構(gòu)問題，牽一發(fā)而動(dòng)全身。

因此大家在設(shè)計(jì)交互流程時(shí)，如果需要去掉關(guān)閉按鈕，需要和開發(fā)進(jìn)行確認(rèn)，看是否有合適的解決辦法。

3、蒙層無(wú)法遮蓋的Native bar

常見的彈窗操作是：當(dāng)出現(xiàn)彈窗時(shí)，為了讓用戶專注彈窗操作，底層會(huì)出現(xiàn)蒙層且不可操作。

但如下圖所示，H5頁(yè)面中的蒙層無(wú)法覆蓋Native bar，因此Native bar和彈窗一樣高亮且可操作，打擾用戶操作，容易轉(zhuǎn)移用戶注意力。

4、無(wú)法拓展功能的Native bar

Native APP的Native bar往往承載著拓展當(dāng)前頁(yè)面多種功能場(chǎng)景的，可以豐富頁(yè)面的可操作性。

但如下圖所示，我們多多商服、唯品花取現(xiàn)、京東實(shí)名認(rèn)證等H5頁(yè)面頂部的Native bar無(wú)法根據(jù)當(dāng)前頁(yè)面功能場(chǎng)景拓展功能，只能如我們房多多M站這樣，想辦法在Native bar下方或頁(yè)面底部及頁(yè)面左右側(cè)懸浮去拓展功能。

四、總結(jié)一下

以上是我在做H5頁(yè)面時(shí)遇到的一些問題，可能還有其他問題是我沒有遇到的，歡迎大家與我一起討論。

H5的優(yōu)勢(shì)是顯而易見的，隨著微信小程序的推出，H5的應(yīng)用將更加廣泛。但H5的天然缺陷也是無(wú)法避免的，我們可以運(yùn)用交互、UI的設(shè)計(jì)技巧來(lái)弱化這些缺點(diǎn)，為用戶帶來(lái)更好的產(chǎn)品體驗(yàn)。

關(guān)于我們：

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

服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(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ù)