TechRoomage

新增功能頁面,用H5還是原生?

0 5

原標題:新增功能頁面,用H5還是原生?

新上的功能頁面,到底要用H5還是原生呢?

新增功能頁面,用H5還是原生?

公司最近遇到了兩個項目,在選擇H5還是原生上面糾結了好一陣,用原生的話,老版本無法兼容;用H5的話,功能及頁面過於粗糙,開發出來的效果無法滿足需求。

在這種情況下,產品該如何決策,某個功能用H5還是原生來實現呢?

本文通過對H5和原生異同點的梳理,希望能夠對以後產品決策提供幫助。分為以下三部分:

  • 如何區分一個頁面是H5還是原生
  • H5和原生可實現功能列舉
  • 如何確定一個項目用H5和原生

5種方法區分頁面是H5還是原生

1.看斷網的情況

把手機的網路斷掉,再點開頁面。

  • 可以正常顯示頁面內容或是有網路診斷引導就是原生;
  • 顯示404或錯誤頁面的是H5頁面。

2.看載入的方式

新打開一個頁面,看導航欄下面是否有一條載入線。

  • 如果沒有,就是原生的。
  • 如有,這個頁面就是H5頁面;比如微信裡面打開我們的H5頁面常見的有個綠色的 載入線條。

3.看下拉刷新的情況

前提是APP有下拉刷新,此時下拉頁面:

  • 如果沒有明顯頁面變化,或是有動態下拉刷新loading圖,是原生;
  • 如果頁面閃了一下,或是顯示該網頁由XXX提供,是H5頁面。

註:有的APP並沒有下拉刷新,此時即使用H5,下拉也沒有任何反應。

4.看複製文章的提示

如果頁面有大段文字,長按頁面後:

  • 如果出現文字選擇、粘貼功能的,是H5;
  • 長按無反應,或是出現APP獨有的複製按鈕的,是原生。

註:有些原生APP自身也開發了複製粘貼功能,有的H5的css屏蔽了複製選擇功能等等。此種判斷依據誤差較大。

5.看布局邊界(限安卓)

可以在設置中打開【開發者選項】中的顯示布局邊界。

  • 在頁面元素很多的情況下布局是一整塊的,是h5;
  • 布局密密麻麻的是原生。

有什麼是H5或是原生的獨有功能

隨著前端技術的發展,H5可以實現的功能及效果已經越來越接近原生APP。

但仍然有些技術壁壘由於平台性能等無法攻克,下表列出了H5和原生能實現的常見功能及推薦,在遇到面臨包括此種功能的需求時,可以直接據此判斷用何種技術來實現。

【H5及原生可實現功能列表】

新增功能頁面,用H5還是原生?

如何確定一個項目是否要用H5

新增功能頁面,用H5還是原生?

如果項目核心需求中,包含富文本、動畫、大量格式,且無其他需求(如電商的商品圖文詳情、文章諮詢等)——使用H5,可以更好更快地實現功能。總結上方H5和原生的優缺點後,可以得出以下方便產品快速決策的結論:

  1. 如果項目核心需求中,需要調起本機硬體功能、離線操作(如電商評價頁面需要上傳圖片)。——必須使用原生,H5無法實現。
  2. 如果項目需要較高的使用者體驗(如遊戲或是模型操作),且項目時間較寬裕 ——使用原生,流暢性和體驗更好。
  3. 如果項目需要大量的前後台數據交互,且需要保持穩定(如電商購物車、訂單頁面)。——使用原生,原生的API更加穩定,對於弱網狀態的兼容也更好。
  4. 如果項目處在初期試錯階段,不確定是否要長期運營,或是暫時的活動頁面。——使用H5,成本低,開發周期短;可以保證使用者更新及時性,且無新老版本兼容問題(原生APP一定要發版才能實現新功能,且舊版本使用者不升級就無法體驗)。

    另:

在多篇他人文章中都提到過,H5和原生各有長短,單獨的html APP或是原生 APP均有所局限,所以現在常態的網際網路APP均採取Hybrid形式,即部分功能原生,部分功能H5。

最後附上一個小貼士:

Hybrid APP(H5內嵌APP頁面),建議頭部使用原生的,名稱讀取H5的document title,常駐back按鈕。這樣在載入過程中,使用者體驗較好。且如果網速差,也可以快速返回,不浪費使用者的流量及時間。

參考資料:

http://www.jianshu.com/p/00ff5664e000(作者:小聖)

http://www.uisdc.com/web-hybrid-native-app(作者:cyRotel

作者:徐家小翼,公眾號:poemmanager,PM圈萌新一隻,求帶飛求指導~~

本文由 @徐家小翼 原創發佈於人人都是產品經理。未經許可,禁止轉載。

題圖來自PEXELS,基於CC0協議

Leave A Reply

Your email address will not be published.