聊聊Web App、Hybrid App與Native App的設(shè)計(jì)差異

5 評(píng)論 109460 瀏覽 167 收藏 11 分鐘

目前主流應(yīng)用程序大體分為三類:Web App、Hybrid App、 Native App。

一、Web App、Hybrid App、Native App 縱向?qū)Ρ?/strong>

首先,我們來(lái)看看什么是 Web App、Hybrid App、 Native App。

1. Web APP

Web App 指采用Html5語(yǔ)言寫(xiě)出的App,不需要下載安裝。類似于現(xiàn)在所說(shuō)的輕應(yīng)用。生存在瀏覽器中的應(yīng)用,基本上可以說(shuō)是觸屏版的網(wǎng)頁(yè)應(yīng)用。

優(yōu)點(diǎn)

(1)開(kāi)發(fā)成本低,

(2)更新快,

(3)更新無(wú)需通知用戶,不需要手動(dòng)升級(jí)

(4)能夠跨多個(gè)平臺(tái)和終端。

缺點(diǎn):

(1)臨時(shí)性的入口

(2)無(wú)法獲取系統(tǒng)級(jí)別的通知,提醒,動(dòng)效等等

(3)用戶留存率低

(4)設(shè)計(jì)受限制諸多

(5)體驗(yàn)較差

2. Hybrid App

Hybrid APP指的是半原生半Web的混合類App。需要下載安裝,看上去類似Native App,但只有很少的UI Web View,訪問(wèn)的內(nèi)容是 Web 。

例如Store里的新聞?lì)怉PP,視頻類APP普遍采取的是Native的框架,Web的內(nèi)容。

Hybrid App 極力去打造類似于Native App 的體驗(yàn),但仍受限于技術(shù),網(wǎng)速,等等很多因素。尚不完美。

3. Native App

Native APP 指的是原生程序,一般依托于操作系統(tǒng),有很強(qiáng)的交互,是一個(gè)完整的App,可拓展性強(qiáng)。需要用戶下載安裝使用。

優(yōu)點(diǎn):

(1)打造完美的用戶體驗(yàn)

(2)性能穩(wěn)定

(3)操作速度快,上手流暢

(4)訪問(wèn)本地資源(通訊錄,相冊(cè))

(5)設(shè)計(jì)出色的動(dòng)效,轉(zhuǎn)場(chǎng),

(6)擁有系統(tǒng)級(jí)別的貼心通知或提醒

(7)用戶留存率高

缺點(diǎn):

(1)分發(fā)成本高(不同平臺(tái)有不同的開(kāi)發(fā)語(yǔ)言和界面適配)

(2)維護(hù)成本高(例如一款A(yù)pp已更新至V5版本,但仍有用戶在使用V2, V3, V4版本,需要更多的開(kāi)發(fā)人員維護(hù)之前的版本)

(3)更新緩慢,根據(jù)不同平臺(tái),提交–審核–上線 等等不同的流程,需要經(jīng)過(guò)的流程較復(fù)雜

二、Web App、Hybrid App、Native App 技術(shù)特性

由上圖可見(jiàn),Web APP 的開(kāi)發(fā)基于Html5語(yǔ)言。而Html5語(yǔ)言本身又有著不可避免的局限性。正是這些局限性的存在,使得Web App在體驗(yàn)中要遜于Native App。

三、Web App受限制因素及設(shè)計(jì)要點(diǎn)

相比Native App,Web App體驗(yàn)中受限于以上5個(gè)因素:網(wǎng)絡(luò)環(huán)境,渲染性能,平臺(tái)特性,受限于瀏覽器,系統(tǒng)限制。

1. 網(wǎng)絡(luò)環(huán)境,渲染性能

Web APP對(duì)網(wǎng)絡(luò)環(huán)境的依賴性較大,因?yàn)閃eb APP中的H5頁(yè)面,當(dāng)用戶使用時(shí),去服務(wù)器請(qǐng)求顯示頁(yè)面。如果此時(shí)用戶恰巧遇到網(wǎng)速慢,網(wǎng)絡(luò)不穩(wěn)定等其他環(huán)境時(shí),用戶請(qǐng)求頁(yè)面的效率大打折扣,在用戶使 用中會(huì)出現(xiàn)不流暢,斷斷續(xù)續(xù)的不良感受。同時(shí),H5技術(shù)自身渲染性能較弱:對(duì)復(fù)雜的圖形樣式,多樣的動(dòng)效,自定義字體等的支持性不強(qiáng)。

因此,基于網(wǎng)絡(luò)環(huán)境和渲染性能的影響,在設(shè)計(jì)H5頁(yè)面時(shí),應(yīng)注意以下幾點(diǎn):

  • 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效
  • 簡(jiǎn)化復(fù)雜的圖形文字樣式
  • 減少頁(yè)面渲染的頻率和次數(shù)

從下圖移動(dòng)Web版 jing.fm和Native版jing對(duì)比后可以看出:Web APP首頁(yè)去除冗余的功能,回溯本源,只給用戶提供了jing.fm最初的本質(zhì)需求——電臺(tái)。既符合H5精簡(jiǎn)功能又達(dá)到了突出核心功能的設(shè)計(jì)原則。無(wú)疑給用戶眼前一亮的氣息。

正如書(shū)中《瞬間之美》的一個(gè)核心觀點(diǎn):重要的并不是我們提供的信息量有多大,而是我們能否給他們提供真正需要的信息。


再如:百度最新推出的直達(dá)號(hào),以良子健身為例:

從Native App和Web App(百度直達(dá)號(hào))的對(duì)比中,我們可以看出Native良子以九宮格的形式展現(xiàn),且屬于雙重導(dǎo)航,功能入口太多;弊端是用戶不知道聚焦在哪里,分散用戶 的注意力。而Web版良子整合并減少了導(dǎo)航的入口,增強(qiáng)用戶的專注度;界面清爽,整潔,很好地傳達(dá)了良子本身的寓意——輕松、愉悅、休閑、舒適。

2. 受限于瀏覽器

通常Web App生存于瀏覽器里,宿主是瀏覽器。不同的瀏覽器自身的屬性不盡相同,如:瀏覽器自帶的手勢(shì),頁(yè)面切換方式,鏈接跳轉(zhuǎn)方式,版本兼容問(wèn)題等等。

例如下圖:UC 瀏覽器和百度瀏覽器自身支持手勢(shì)切換頁(yè)面。手指從左側(cè)滑動(dòng)頁(yè)面,返回至上一級(jí)。百度手機(jī)助手H5頁(yè)面,頂部Banner支持手勢(shì)左右滑動(dòng)切換。這一操作與瀏覽器自身手勢(shì)是沖突的。

再如,基于瀏覽器的Web APP在打開(kāi)新的模塊中的頁(yè)面時(shí),大多會(huì)新開(kāi)窗口來(lái)展現(xiàn)。例如用戶在使用購(gòu)物類APP時(shí),瀏覽每日精選模塊時(shí),每當(dāng)打開(kāi)新的商品時(shí),默認(rèn)新開(kāi)一個(gè)窗口。這 樣的優(yōu)劣勢(shì)顯而易見(jiàn):優(yōu)勢(shì)是能夠記錄用戶瀏覽過(guò)的痕跡,瀏覽過(guò)的商品,以便后續(xù)橫向?qū)Ρ?;劣?shì)是過(guò)多的頁(yè)面容易使用戶迷失在頁(yè)面中。

正如Google開(kāi)發(fā)手冊(cè)里描述:當(dāng)用戶打開(kāi)一個(gè)Web App的時(shí)候,他們期待這個(gè)應(yīng)用就像是一個(gè)單個(gè)應(yīng)用,而不是一系列網(wǎng)頁(yè)的結(jié)合。然而,什么情況下需要跳轉(zhuǎn)頁(yè)面,什么情況下在當(dāng)前頁(yè)面展示則需要設(shè)計(jì)師細(xì)致考量。

因此,Web App基于瀏覽器的特性,從設(shè)計(jì)角度應(yīng)該遵循以下了兩點(diǎn):

少用手勢(shì),避免與瀏覽器手勢(shì)沖突。

減少頁(yè)面跳轉(zhuǎn)次數(shù),盡量在當(dāng)前頁(yè)面顯示。

3. 系統(tǒng)限制,平臺(tái)特性

由于Html5語(yǔ)言的技術(shù)特性,無(wú)法調(diào)用系統(tǒng)級(jí)別的權(quán)限。例如,系統(tǒng)級(jí)別的彈窗,系統(tǒng)級(jí)別的通知,地理信息,通訊錄,語(yǔ)音等等。且與系統(tǒng)的兼容性也會(huì)存在一些問(wèn)題。以上限制通常導(dǎo)致APP的拓展性不強(qiáng),體驗(yàn)相對(duì)較差。例如百度地圖:

Web版地圖基于瀏覽器展現(xiàn),因此,不能全屏顯示地圖,給用戶的眼界帶來(lái)局限感;相反,Native 版地圖以全屏展現(xiàn)的形式,很好的拓展了用戶的視野。整個(gè)界面干凈簡(jiǎn)潔,首頁(yè)去除冗余功能。

在制定路線的體驗(yàn)中,如圖:

Web 版地圖耗費(fèi)的流量大于Native版,且不能預(yù)先緩存離線地圖。對(duì)于地理位置的判斷也是基于宿主瀏覽器,而非Web地圖本身。獲取路線后,對(duì)于更換到達(dá)方式,相對(duì)來(lái)說(shuō)是不便利的。

相反,Native 版地圖,能夠直接訪問(wèn)用戶的地理位置,能夠很清晰的為用戶展現(xiàn)App規(guī)劃的路線,并能輕松的查看多種路線方案,以便做出符合自己的最佳方案。對(duì)于切換公交,走路,自駕等路線方式也是只需一鍵操作。

Native 版地圖相對(duì)于 Web版地圖增加更多情感化,易用的功能,如:能夠記錄用戶的生活軌跡,記錄用戶的點(diǎn)滴足跡,能夠享受躲避擁堵方案等。而Web版地圖基于技術(shù)框架,很難實(shí)現(xiàn)以上功能,從用戶體驗(yàn)角度來(lái)看,弱于Native版地圖。

四、小結(jié)

綜述所述,在設(shè)計(jì)Web APP時(shí),應(yīng)當(dāng)遵循以下幾點(diǎn):

1. 簡(jiǎn)化

  • 簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效
  • 簡(jiǎn)化復(fù)雜的圖形文字樣式

2. 少用

  • 少用手勢(shì),避免與瀏覽器手勢(shì)沖突
  • 少用彈窗

3. 減少

  • 減少頁(yè)面內(nèi)容
  • 減少控件數(shù)量
  • 減少頁(yè)面跳轉(zhuǎn)次數(shù),盡量在當(dāng)前頁(yè)面顯示

4. 增強(qiáng)

  • 增強(qiáng)Loading時(shí)的趣味性
  • 增強(qiáng)頁(yè)面主次關(guān)系
  • 增強(qiáng)控件復(fù)用性

 

原文地址:mux.baidu

作者:guowenwe

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. Hybrid web 是不是可以選擇在任意頁(yè)面或功能用原生或用web嗎

    來(lái)自廣東 回復(fù)
  2. @yoyo 專業(yè)的設(shè)計(jì)師角度,這篇文章查閱了很多編程方面的知識(shí)進(jìn)行各個(gè)維度的對(duì)比,并分析了優(yōu)缺點(diǎn),對(duì)于不同應(yīng)用場(chǎng)景的應(yīng)用給出了專業(yè)的意見(jiàn),從用戶體驗(yàn)角度為出發(fā)點(diǎn),給產(chǎn)品設(shè)計(jì)提供了交互指導(dǎo),我只想問(wèn)下,怎么才能成為像你這樣的牛人

    來(lái)自廣東 回復(fù)
  3. 不錯(cuò),看完了

    來(lái)自上海 回復(fù)
  4. 6666 謝謝分享

    來(lái)自浙江 回復(fù)
  5. 666666666,太牛了

    來(lái)自廣東 回復(fù)