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

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

首先，我們來看看什么是 Web App、Hybrid App、 Native App。

1. Web APP

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

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

（1）開發(fā)成本低，

（2）更新快，

（3）更新無需通知用戶，不需要手動升級

（4）能夠跨多個(gè)平臺和終端。

缺點(diǎn)：

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

（2）無法獲取系統(tǒng)級別的通知，提醒，動效等等

（3）用戶留存率低

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

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

2. Hybrid App

Hybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問的內(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）訪問本地資源（通訊錄，相冊）

（5）設(shè)計(jì)出色的動效，轉(zhuǎn)場，

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

（7）用戶留存率高

缺點(diǎn)：

（1）分發(fā)成本高（不同平臺有不同的開發(fā)語言和界面適配）

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

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

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

由上圖可見，Web APP 的開發(fā)基于Html5語言。而Html5語言本身又有著不可避免的局限性。正是這些局限性的存在，使得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ǒng)限制。

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

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

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

• 簡化不重要的動畫/動效
• 簡化復(fù)雜的圖形文字樣式
• 減少頁面渲染的頻率和次數(shù)

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

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

再如：百度最新推出的直達(dá)號，以良子健身為例：

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

2. 受限于瀏覽器

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

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

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

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

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

少用手勢，避免與瀏覽器手勢沖突。

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

3. 系統(tǒng)限制，平臺特性

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

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

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

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

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

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

四、小結(jié)

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

1. 簡化

• 簡化不重要的動畫/動效
• 簡化復(fù)雜的圖形文字樣式

2. 少用

• 少用手勢，避免與瀏覽器手勢沖突
• 少用彈窗

3. 減少

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

4. 增強(qiáng)

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

?

原文地址：mux.baidu

作者：guowenwe

總結(jié)

以上是生活随笔為你收集整理的聊聊Web App、Hybrid App与Native App的设计差异的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。