聊聊Web App、Hybrid App與Native App的設計差異

來源:互聯網
上載者:User

標籤:遇到   感受   調用   存在   程式   相對   效率   複雜   每日   

摘要: 這3類主流應用你都瞭解嗎?設計師除了要有視覺功夫,對不同形式的APP也應當瞭然於胸,今天百度的同學寫了一篇非常全面的總結,幫你迅速搞定3類主流APP的設計方法,附帶一大波避雷針,帶你巧妙跳過APP設計的雷區,漲姿勢是分分鐘刻不容緩的事咯!

目前主流應用程式大體分為三類:Web App、Hybrid App、 Native App。

一、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)更新緩慢,根據不同平台,提交–審核–上線 等等不同的流程,需要經過的流程較複雜

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

由可見,Web APP 的開發基於Html5語言。而Html5語言本身又有著不可避免的局限性。正是這些局限性的存在,使得Web App在體驗中要遜於Native App。

三、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版地圖。
四、小結

綜述所述,在設計Web APP時,應當遵循以下幾點:

1. 簡化

    簡化不重要的動畫/動效
    簡化複雜的圖形文字樣式

2. 少用

    少用手勢,避免與瀏覽器手勢衝突
    少用彈窗

3. 減少

    減少頁面內容
    減少控制項數量
    減少頁面跳轉次數,盡量在當前頁面顯示

4. 增強

    增強Loading時的趣味性
    增強頁面主次關係
    增強控制項複用性

聊聊Web App、Hybrid App與Native App的設計差異

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.