轉載文章需要在明顯位置标注轉載來源:http://www.woshipm.com/pd/123646.html
目前主流應用程式大體分為三類:web app、hybrid app、 native app。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuMjY4MGMxEGMxIDZkNDZyAjMjhTYzYWOkljZmJjZ3ATOvwlMx8CX0EDMy8CXzVGbpZWLwd3Lc12bj5SbwlGaz92duU2Zh1Wavw1LcpDc0RHaiojIsJye.png)
首先,我們來看看什麼是 web app、hybrid app、 native app。
web app 指采用html5語言寫出的app,不需要下載下傳安裝。類似于現在所說的輕應用。生存在浏覽器中的應用,基本上可以說是觸屏版的網頁應用。
優點
(1)開發成本低,
(2)更新快,
(3)更新無需通知使用者,不需要手動更新
(4)能夠跨多個平台和終端。
缺點:
(1)臨時性的入口
(2)無法擷取系統級别的通知,提醒,動效等等
(3)使用者留存率低
(4)設計受限制諸多
(5)體驗較差
hybrid app指的是半原生半web的混合類app。需要下載下傳安裝,看上去類似native app,但隻有很少的ui web view,通路的内容是 web 。
例如store裡的新聞類app,視訊類app普遍采取的是native的架構,web的内容。
hybrid app 極力去打造類似于native app 的體驗,但仍受限于技術,網速,等等很多因素。尚不完美。
native app 指的是原生程式,一般依托于作業系統,有很強的互動,是一個完整的app,可拓展性強。需要使用者下載下傳安裝使用。
優點:
(1)打造完美的使用者體驗
(2)性能穩定
(3)操作速度快,上手流暢
(4)通路本地資源(通訊錄,相冊)
(5)設計出色的動效,轉場,
(6)擁有系統級别的貼心通知或提醒
(7)使用者留存率高
(1)分發成本高(不同平台有不同的開發語言和界面适配)
(2)維護成本高(例如一款app已更新至v5版本,但仍有使用者在使用v2, v3, v4版本,需要更多的開發人員維護之前的版本)
(3)更新緩慢,根據不同平台,送出–稽核–上線 等等不同的流程,需要經過的流程較複雜
由上圖可見,web app 的開發基于html5語言。而html5語言本身又有着不可避免的局限性。正是這些局限性的存在,使得web app在體驗中要遜于native app。
相比native app,web app體驗中受限于以上5個因素:網絡環境,渲染性能,平台特性,受限于浏覽器,系統限制。
web app對網絡環境的依賴性較大,因為web app中的h5頁面,當使用者使用時,去伺服器請求顯示頁面。如果此時使用者恰巧遇到網速慢,網絡不穩定等其他環境時,使用者請求頁面的效率大打折扣,在使用者使 用中會出現不流暢,斷斷續續的不良感受。同時,h5技術自身渲染性能較弱:對複雜的圖形樣式,多樣的動效,自定義字型等的支援性不強。
是以,基于網絡環境和渲染性能的影響,在設計h5頁面時,應注意以下幾點:
簡化不重要的動畫/動效
簡化複雜的圖形文字樣式
減少頁面渲染的頻率和次數
從下圖移動web版 jing.fm和native版jing對比後可以看出:web app首頁去除備援的功能,回溯本源,隻給使用者提供了jing.fm最初的本質需求——電台。既符合h5精簡功能又達到了突出核心功能的設計原則。無疑給使用者眼前一亮的氣息。
正如書中《瞬間之美》的一個核心觀點:重要的并不是我們提供的資訊量有多大,而是我們能否給他們提供真正需要的資訊。
再如:百度最新推出的直達号,以良子健身為例:
從native app和web app(百度直達号)的對比中,我們可以看出native良子以九宮格的形式展現,且屬于雙重導航,功能入口太多;弊端是使用者不知道聚焦在哪裡,分散使用者 的注意力。而web版良子整合并減少了導航的入口,增強使用者的專注度;界面清爽,整潔,很好地傳達了良子本身的寓意——輕松、愉悅、休閑、舒适。
通常web app生存于浏覽器裡,宿主是浏覽器。不同的浏覽器自身的屬性不盡相同,如:浏覽器自帶的手勢,頁面切換方式,連結跳轉方式,版本相容問題等等。
例如下圖:uc 浏覽器和百度浏覽器自身支援手勢切換頁面。手指從左側滑動頁面,傳回至上一級。百度手機助手h5頁面,頂部banner支援手勢左右滑動切換。這一操作與浏覽器自身手勢是沖突的。
再如,基于浏覽器的web app在打開新的子產品中的頁面時,大多會新開視窗來展現。例如使用者在使用購物類app時,浏覽每日精選子產品時,每當打開新的商品時,預設新開一個視窗。這 樣的優劣勢顯而易見:優勢是能夠記錄使用者浏覽過的痕迹,浏覽過的商品,以便後續橫向對比;劣勢是過多的頁面容易使使用者迷失在頁面中。
正如google開發手冊裡描述:當使用者打開一個web app的時候,他們期待這個應用就像是一個單個應用,而不是一系列網頁的結合。然而,什麼情況下需要跳轉頁面,什麼情況下在目前頁面展示則需要設計師細緻考量。
是以,web app基于浏覽器的特性,從設計角度應該遵循以下了兩點:
少用手勢,避免與浏覽器手勢沖突。
減少頁面跳轉次數,盡量在目前頁面顯示。
由于html5語言的技術特性,無法調用系統級别的權限。例如,系統級别的彈窗,系統級别的通知,地理資訊,通訊錄,語音等等。且與系統的相容性也會存在一些問題。以上限制通常導緻app的拓展性不強,體驗相對較差。例如百度地圖:
web版地圖基于浏覽器展現,是以,不能全屏顯示地圖,給使用者的眼界帶來局限感;相反,native 版地圖以全屏展現的形式,很好的拓展了使用者的視野。整個界面幹淨簡潔,首頁去除備援功能。
在制定路線的體驗中,如圖:
web 版地圖耗費的流量大于native版,且不能預先緩存離線地圖。對于地理位置的判斷也是基于宿主浏覽器,而非web地圖本身。擷取路線後,對于更換到達方式,相對來說是不便利的。
相反,native 版地圖,能夠直接通路使用者的地理位置,能夠很清晰的為使用者展現app規劃的路線,并能輕松的檢視多種路線方案,以便做出符合自己的最佳方案。對于切換公交,走路,自駕等路線方式也是隻需一鍵操作。
native 版地圖相對于 web版地圖增加更多情感化,易用的功能,如:能夠記錄使用者的生活軌迹,記錄使用者的點滴足迹,能夠享受躲避擁堵方案等。而web版地圖基于技術架構,很難實作以上功能,從使用者體驗角度來看,弱于native版地圖。
綜述所述,在設計web app時,應當遵循以下幾點:
1. 簡化
2. 少用
少用手勢,避免與浏覽器手勢沖突
少用彈窗
3. 減少
減少頁面内容
減少控件數量
減少頁面跳轉次數,盡量在目前頁面顯示
4. 增強
增強loading時的趣味性
增強頁面主次關系
增強控件複用性