H5設計：談一談H5設計上的一些需要注意的問題

一、Native APP和H5的區別

如下圖所示，當加載H5過多的時候，我們多多商服及唯品花取現、京東實名認證等頁面左上角有關閉按鈕，容易誤點。

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

因此大家在設計交互流程時，如果需要去掉關閉按鈕，需要和開發進行確認，看是否有合適的解決辦法。

3、蒙層無法遮蓋的Native bar

常見的彈窗操作是：當出現彈窗時，為了讓用戶專注彈窗操作，底層會出現蒙層且不可操作。

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

4、無法拓展功能的Native bar

Native APP的Native bar往往承載著拓展當前頁面多種功能場景的，可以豐富頁面的可操作性。

但如下圖所示，我們多多商服、唯品花取現、京東實名認證等H5頁面頂部的Native bar無法根據當前頁面功能場景拓展功能，只能如我們房多多M站這樣，想辦法在Native bar下方或頁面底部及頁面左右側懸浮去拓展功能。

四、總結一下

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

H5的優勢是顯而易見的，隨著微信小程序的推出，H5的應用將更加廣泛。但H5的天然缺陷也是無法避免的，我們可以運用交互、UI的設計技巧來弱化這些缺點，為用戶帶來更好的產品體驗。

關于我們：

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

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