Web App、Hybrid App與Native App的設計差別

目前主流應用程序大致分爲三類：Web App、Hybrid App、 Native App。

 

1、Web App、Hybrid App、Native App 縱向對比

首先，咱們來看看什麼是 Web App、Hybrid App、 Native App。

1. Web APP

Web App 指採用Html5語言寫出的App，不須要下載安裝。相似於如今所說的輕應用。生存在瀏覽器中的應用，基本上能夠說是觸屏版的網頁應用。

優勢

（1）開發成本低，

（2）更新快，

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

（4）可以跨多個平臺和終端。

缺點：

（1）臨時性的入口

（2）沒法獲取系統級別的通知，提醒，動效等等

（3）用戶留存率低

（4）設計受限制諸多

（5）體驗較差

2. Hybrid App

Hybrid APP指的是半原生半Web的混合類App。須要下載安裝，看上去相似Native App，但只有不多的UI Web View，訪問的內容是 Web 。

例如Store裏的新聞類APP，視頻類APP廣泛採起的是Native的框架，Web的內容。

Hybrid App 極力去打造相似於Native App 的體驗，但仍受限於技術，網速，等等不少因素。尚不完美。

3. Native App

Native APP 指的是原生程序，通常依託於操做系統，有很強的交互，是一個完整的App，可拓展性強。須要用戶下載安裝使用。

優勢：

（1）打造完美的用戶體驗

（2）性能穩定

（3）操做速度快，上手流暢

（4）訪問本地資源（通信錄，相冊）

（5）設計出色的動效，轉場，

（6）擁有系統級別的貼心通知或提醒

（7）用戶留存率高

缺點：

（1）分發成本高（不一樣平臺有不一樣的開發語言和界面適配）

（2）維護成本高（例如一款App已更新至V5版本，但仍有用戶在使用V2， V3， V4版本，須要更多的開發人員維護以前的版本）

（3）更新緩慢，根據不一樣平臺，提交–審覈–上線 等等不一樣的流程，須要通過的流程較複雜

2、Web App、Hybrid App、Native App 技術特性

 

由上圖可見，Web APP 的開發基於Html5語言。而Html5語言自己又有着不可避免的侷限性。正是這些侷限性的存在，使得Web App在體驗中要遜於Native App。

3、Web App受限制因素及設計要點

 

相比Native App，Web App體驗中受限於以上5個因素：網絡環境，渲染性能，平臺特性，受限於瀏覽器，系統限制。

1. 網絡環境，渲染性能

Web APP對網絡環境的依賴性較大，由於Web APP中的H5頁面，當用戶使用時，去服務器請求顯示頁面。若是此時用戶恰巧遇到網速慢，網絡不穩定等其餘環境時，用戶請求頁面的效率大打折扣，在用戶使 用中會出現不流暢，斷斷續續的不良感覺。同時，H5技術自身渲染性能較弱：對複雜的圖形樣式，多樣的動效，自定義字體等的支持性不強。

所以，基於網絡環境和渲染性能的影響，在設計H5頁面時，應注意如下幾點：

ï 簡化不重要的動畫/動效

ï 簡化複雜的圖形文字樣式

ï 減小頁面渲染的頻率和次數

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

正如書中《瞬間之美》的一個核心觀點：重要的並非咱們提供的信息量有多大，而是咱們可否給他們提供真正須要的信息。

再如：百度最新推出的直達號，以良子健身爲例：

從Native App和Web App（百度直達號）的對比中，咱們能夠看出Native良子以九宮格的形式展示，且屬於雙重導航，功能入口太多；弊端是用戶不知道聚焦在哪裏，分散用戶 的注意力。而Web版良子整合並減小了導航的入口，加強用戶的專一度；界面清爽，整潔，很好地傳達了良子自己的寓意——輕鬆、愉悅、休閒、溫馨。

 

2. 受限於瀏覽器

一般Web App生存於瀏覽器裏，宿主是瀏覽器。不一樣的瀏覽器自身的屬性不盡相同，如：瀏覽器自帶的手勢，頁面切換方式，連接跳轉方式，版本兼容問題等等。

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

 

再如，基於瀏覽器的Web APP在打開新的模塊中的頁面時，大多會新開窗口來展示。例如用戶在使用購物類APP時，瀏覽每日精選模塊時，每當打開新的商品時，默認新開一個窗口。這 樣的優劣勢顯而易見：優點是可以記錄用戶瀏覽過的痕跡，瀏覽過的商品，以便後續橫向對比；劣勢是過多的頁面容易使用戶迷失在頁面中。

正如Google開發手冊裏描述：當用戶打開一個Web App的時候，他們期待這個應用就像是一個單個應用，而不是一系列網頁的結合。然而，什麼狀況下須要跳轉頁面，什麼狀況下在當前頁面展現則須要設計師細緻考量。

 

所以，Web App基於瀏覽器的特性，從設計角度應該遵循如下了兩點：

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

減小頁面跳轉次數，儘可能在當前頁面顯示。

3. 系統限制，平臺特性

因爲Html5語言的技術特性，沒法調用系統級別的權限。例如，系統級別的彈窗，系統級別的通知，地理信息，通信錄，語音等等。且與系統的兼容性也會存在一些問題。以上限制一般致使APP的拓展性不強，體驗相對較差。例如百度地圖：

Web版地圖基於瀏覽器展示，所以，不能全屏顯示地圖，給用戶的眼界帶來侷限感；相反，Native 版地圖以全屏展示的形式，很好的拓展了用戶的視野。整個界面乾淨簡潔，首頁去除冗餘功能。

在制定路線的體驗中，

Web 版地圖耗費的流量大於Native版，且不能預先緩存離線地圖。對於地理位置的判斷也是基於宿主瀏覽器，而非Web地圖自己。獲取路線後，對於更換到達方式，相對來講是不便利的。

相反，Native 版地圖，可以直接訪問用戶的地理位置，可以很清晰的爲用戶展示App規劃的路線，並能輕鬆的查看多種路線方案，以便作出符合本身的最佳方案。對於切換公交，走路，自駕等路線方式也是隻需一鍵操做。

Native 版地圖相對於 Web版地圖增長更多情感化，易用的功能，如：可以記錄用戶的生活軌跡，記錄用戶的點滴足跡，可以享受躲避擁堵方案等。而Web版地圖基於技術框架，很難實現以上功能，從用戶體驗角度來看，弱於Native版地圖。

4、小結

綜述所述，在設計Web APP時，應當遵循如下幾點：

1. 簡化

ï 簡化不重要的動畫/動效

ï 簡化複雜的圖形文字樣式

2. 少用

ï 少用手勢，避免與瀏覽器手勢衝突

ï 少用彈窗

3. 減小

ï 減小頁面內容

ï 減小控件數量

ï 減小頁面跳轉次數，儘可能在當前頁面顯示

4. 加強

ï 加強Loading時的趣味性

ï 加強頁面主次關係

ï 加強控件複用性