了解H5頁面設計局限

我的開發知識比較缺乏,寫這篇文章主要是為了幫助自己梳理和總結開發知識。為了保障此篇文章知識的準確性,我請教了周圍的開發同事。如果大家發現哪些知識是有問題的,歡迎在評論中指出。下面是正文:



大家是否注意到,越來越多的APP開始使用H5頁面來進行開發。例如京東的賬戶與安全頁面、QQ的興趣部落、唯品會的唯品花頁面、以及最近的熱點-微信小程序...

最近我的工作中也有越來越多的H5需求,這些H5需要和Native來回跳轉,在設計上也有許多局限,為了能在以后的設計中少踩雷,我們從以下3個方面來分析一下H5:

1、H5和Native有什么不同

2 、如何判斷哪些頁面是H5

3、在設計中H5有哪些局限


一、H5和Native有什么不同


Native APP

Native APP 指的是原生程序,依托于操作系統,有很強的交互性,是一個完整的 APP ,可拓展性強,需要用戶下載安裝使用。


優點:

  • 性能穩定、操作速度快,上手流暢

  • 可以直接訪問本地資源,比如通訊錄

  • 可以實現很多設計出色的動效

  • 擁有系統級別的貼心通知或提醒,用戶體驗好


缺點:

  • 開發成本高:不同平臺有不同的開發語言和界面適配,例如iOS、Android。

  • 維護成本高:例如一款 APP 已更新至 V5 版本,但仍有用戶在使用 V2, V3, V4 版本,需要更多的開發人員維護之前的版本

  • 更新緩慢:根據不同平臺,提交–審核–上線 等等不同的流程,需要經過的流程較復雜,且iOS和Android相比,審核更復雜,時間也更長。


H5

H5頁面是采用 Html5 語言寫出的 APP,也叫Web APP,不需要下載安裝。是生存在瀏覽器中的應用,需要通過瀏覽器和系統進行交互,因此更加受限于網速和硬件。但隨著網速的不斷提高,硬件的不斷提升,H5在速度、穩定性、流暢度方面終將和Native的體驗越來越拉近。


優點:

  • 開發成本低:H5可以跨多個平臺和終端,方便快速迭代

  • 維護成本低:H5不需要用戶手動升級即可更新,沒有維護老版本的成本

  • 更新快:不需要經過復雜的上線流程即可更新,方便前期產品的不斷試錯


缺點:

  • 受限于網絡和硬件、很多動效即使可以在H5上實現,效果也不好,且由于硬件和系統劣勢,Android的效果更差。

  • 臨時性的入口、無法獲取系統級別的通知,提醒,動效等等

  • 設計上受限制諸多, 用戶體驗較差 

現在使用H5的APP分為兩類:一類是純H5制作的,另一類是嵌在原生頁面的H5。

由于H5的諸多缺陷,純H5制作的APP比較少,但有一個用戶量極大的APP是純用H5制作的,就是鐵路12306,頁面都是用H5寫的。

而更多的APP選擇將某些H5功能嵌在Native APP中,例如QQ的興趣部落。這些功能不用跟隨版本迭代即可快速更新,且在不同系統中的體驗都是相同的。

H5頁面。


二、如何判斷哪些頁面是H5


如何快速的判斷一個APP頁面是原生的還是H5頁面呢?

1、看網頁跳轉情況

    APP和H5頁面相比,跳轉速度更快。網絡環境一致的情況下,APP的直接在本地加載,而H5頁面加載是需要調取服務器的,所以H5頁面跳轉更費力,不穩定感會強一些。

例如唯品會的首頁就是Native頁面,而唯品花頁面是由H5寫的,所以進入唯品花頁面的時候,加載時間會稍微長一些。

2、看斷網的情況

把手機的網絡斷掉,然后打開頁面,可以正常顯示、或者可以顯示一部分的是Native頁面,顯示404或錯誤頁面的是H5頁面。這是由于Native頁面一般都會在本地進行緩存,而H5頁面一般是在打開頁面的時候去重新拉數據。

當然也有例外情況,比如QQ的興趣部落在斷網的情況下,頁面依舊是可以加載出來的。這是由于興趣部落的開發團隊制作了離線包,將原來要請求服務器的H5頁面的資源打包在本地,這樣就能在本地預加載了,不用在線上拉取,節省了很多時間,體驗上也和Native非常接近。

3、看APP頂部導航欄是否會有關閉的操作

如果APP頂部導航欄當中出現了關閉按鈕,那么當前的頁面肯定的H5,原生的不會出現(除非設計開發者故意弄的)

美團的、大眾點評的APP、微信APP當加載H5過多的時候,左上角會出現“關閉”。

4、判斷頁面 下拉刷新的時候(前提是要有下拉刷新的功能)

一般情況下,如果界面沒有明顯刷新現象的是原生的,如果有明顯刷新現象,比如頁面閃一下或者白屏一下的是H5頁面(IOS和Android)。比如微信里的H5頁面,和淘寶里的螞蟻花唄頁面刷新時都明顯的白屏一下,但也就不到0.5秒的瞬間,微信我截圖撲捉了很多次都沒成功,但淘寶的螞蟻花唄成功截到了白屏的瞬間,大家可以去自己感受一下。

在體驗的時候發現iOS版的QQ的興趣部落在下拉刷新時和Native的體驗一模一樣,大家可以去試試。只能說騰訊的攻城獅們將H5頁面的用戶體驗最大限度接近Native,開發能力很強。


以上提供的這些方法也都是有局限性的,如果APP有足夠的開發資源來對H5頁面進行優化,其實是可以做到和Native的體驗非常接近的,能讓你幾乎無法分辨。


三、在設計中H5有哪些局限


1、鍵盤

如下圖所示,支付寶中Native的鍵盤和浮層可以做成一體的,而唯品會H5頁面的浮層和系統鍵盤是分離的,這并不是開發能力的問題,而是H5頁面調的是瀏覽器的鍵盤,局限性是本身就存在的。如果H5頁面想獲得更好的體驗,需要自己開發鍵盤,但開發鍵盤可不是那么容易的事情,也不是短期能夠完成的。

2、容易誤操作的關閉按鈕

微信的公眾號中可以嵌入第三方的H5頁面,為了能讓用戶在層級較深的第三方頁面可以快速返回微信主頁面,導航欄會有返回和關閉兩個選項。但這不一定適合所有H5頁面,有些H5頁面,比如京東的修改支付密碼流程都是用H5寫的,步驟比較多且每一步都很關鍵,如果用戶誤點擊了關閉,整個修改密碼的流程就前功盡棄了。

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

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


3、高亮的native bar

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

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

在這個問題上,白色Native bar尤其突出,而其他顏色的要好一些。如下圖QQ的Native bar是藍色,因此當QQ的H5頁面出現彈窗時,Native bar并不是特別突出。

因此建議H5頁面如果Native bar是白色的,則H5彈窗的顏色就不要再做白色了,顏色和設計都可以更加突出。如果Nativebar本身是藍色、紅色等比較亮的顏色,那么H5彈窗就可以做白色

4、數據獲取速度慢

進入H5頁面時,如果需要獲取的數據太多,而用戶的網絡情況又不佳,就會造成頁面刷不出來或者接口返回結果滯后。比如唯品會H5頁面的短信驗證,如果在調出彈窗的同時自動發送驗證碼,給頁面的壓力是比較大的,因此這個頁面需要點擊“獲取驗證碼”才能觸發短信驗證碼發送。

更優的解決方法是:打開彈窗時,默認自動發送短信驗證碼,但是“獲取驗證碼”button呈loading狀態,給頁面緩沖時間,也給用戶加載預期。

以上是我在設計H5頁面時經常遇到的一些問題,可能還有其他問題是我沒有遇到的,歡迎大家在評論中描述自己遇到的問題,我也將持續補充在文章中


最后總結一下:

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

此篇文章幫助自己記錄,也希望能提供給大家一些參考

來源:UI中國

上一篇: 國內最火的五款HTML5前端開發框架

下一篇: HTML5前端開發人員需掌握的七大技能

分享到: 更多
2019年最老的葡京赌侠 1000炮打鱼游戏机 时时彩技巧论坛 幸运飞艇六码计划 黑龙江22选五的走势图看一下 双色球的计划网站 四川时时开奖号码查询 足球直播90 重庆时时开奖结果记录 时时彩最快开奖 新强时时彩三星开奖号 怎么购买老时时 重庆时时现场开奖结果 拉菲时时彩平台 3分pk10计划软件app pk10三码必中冠军计划