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

11 評論 31215 瀏覽 325 收藏 7 分鐘

新上的功能頁面,到底要用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和原生的優缺點后,可以得出以下方便產品快速決策的結論:

  1. 如果項目核心需求中,包含富文本、動畫、大量格式,且無其他需求(如電商的商品圖文詳情、文章咨詢等)——使用H5,可以更好更快地實現功能。
  2. 如果項目核心需求中,需要調起本機硬件功能、離線操作(如電商評價頁面需要上傳圖片)。——必須使用原生,H5無法實現。(隨著H5技術發展,已經可以逐漸實現調取相冊、相機功能,其他功能相信也會陸續實現。但短期內,原生實現調起底層硬件的成本和體驗都要大幅度占優。
  3. 如果項目需要較高的用戶體驗(如游戲或是模型操作),且項目時間較寬裕?——使用原生,流暢性和體驗更好。
  4. 如果項目需要大量的前后臺數據交互,且需要保持穩定(如電商購物車、訂單頁面)。——使用原生,原生的API更加穩定,對于弱網狀態的兼容也更好。
  5. 如果項目處在初期試錯階段,不確定是否要長期運營,或是暫時的活動頁面。——使用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協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 小姐姐微信多少可以加你嗎?我也是產品經理

    來自廣東 回復
  2. 謝謝

    來自北京 回復
  3. 666

    來自廣東 回復
  4. 剛畢業入職一個半月,自己沒有從事本專業而做了運營?,F在公司由于轉型之后產品運營這個崗位就要撤了。老大給了兩條路,一是轉型成為PM,二是去其它的部門。自己內心還是未來想做PM的。想請教下姐姐在時間有限的情況下如何學習才可盡快的轉型呢? ??

    來自北京 回復
  5. H5頁面現在是可以調取底層的,上傳拍照都可以,最近項目剛用過。

    來自上海 回復
    1. 感謝指出哈~隨著H5技術發展,調取底層的功能會逐步實現的。不過比起原生體驗和成本應該都要差一些。上個月公司項目,涉及到一個分享合成圖的,和APP+M站開發討論后,說為了實現H5頁面這一功能,APP開發成本比單獨做一個頁面高得多……

      來自北京 回復
  6. 其實斷網那里,如果要看其中一個頁面的話,有可能出現預加載或者緩存的情況吧?這里就要注意檢測的方法了

    來自北京 回復
    1. H5一般不太可能預加載&緩存整個頁面,如果是再打開(新開一次),一般都是無網加載不出的。

      來自北京 回復
    2. 我指的是原生頁面的情況,你說的也對

      來自北京 回復
  7. :mrgreen:

    來自湖北 回復
    1. ??

      來自北京 回復