編者按：這3類主流應(yīng)用你都了解嗎蜒犯？設(shè)計師除了要有視覺功夫组橄，對不同形式的APP也應(yīng)當了然于胸，今天百度的同學寫了一篇非常全面的總結(jié)罚随，幫你迅速搞定3類主流APP的設(shè)計方法玉工，附帶一大波避雷針，帶你巧妙跳過APP設(shè)計的雷區(qū)淘菩，漲姿勢是分分鐘刻不容緩的事咯遵班！
目前主流應(yīng)用程序大體分為三類：Web App、Hybrid App潮改、 Native App费奸。
一、Web App进陡、Hybrid App愿阐、Native App 縱向?qū)Ρ?/b>
首先，我們來看看什么是 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)點
（1）開發(fā)成本低，
（2）更新快，
（3）更新無需通知用戶冶匹，不需要手動升級习劫，
（4）能夠跨多個平臺和終端。
缺點：
（1）臨時性的入口
（2）無法獲取系統(tǒng)級別的通知嚼隘，提醒诽里，動效等等
（3）用戶留存率低
（4）設(shè)計受限制諸多
（5）體驗較差
2. Hybrid App
Hybrid APP指的是半原生半Web的混合類App。需要下載安裝飞蛹，看上去類似Native App谤狡，但只有很少的UI Web View，訪問的內(nèi)容是 Web 卧檐。
例如Store里的新聞類APP墓懂，視頻類APP普遍采取的是Native的框架，Web的內(nèi)容霉囚。
Hybrid App 極力去打造類似于Native App 的體驗拒贱，但仍受限于技術(shù)，網(wǎng)速佛嬉，等等很多因素逻澳。尚不完美。
3. Native App
Native APP 指的是原生程序暖呕，一般依托于操作系統(tǒng)斜做，有很強的交互，是一個完整的App湾揽，可拓展性強瓤逼。需要用戶下載安裝使用。
優(yōu)點：
（1）打造完美的用戶體驗
（2）性能穩(wěn)定
（3）操作速度快库物，上手流暢
（4）訪問本地資源（通訊錄霸旗，相冊）
（5）設(shè)計出色的動效，轉(zhuǎn)場戚揭，
（6）擁有系統(tǒng)級別的貼心通知或提醒
（7）用戶留存率高
缺點：
（1）分發(fā)成本高（不同平臺有不同的開發(fā)語言和界面適配）
（2）維護成本高（例如一款A(yù)pp已更新至V5版本诱告，但仍有用戶在使用V2， V3民晒， V4版本精居，需要更多的開發(fā)人員維護之前的版本）
（3）更新緩慢，根據(jù)不同平臺潜必，提交–審核–上線 等等不同的流程靴姿，需要經(jīng)過的流程較復雜
二、Web App磁滚、Hybrid App佛吓、Native App 技術(shù)特性
由上圖可見，Web APP 的開發(fā)基于Html5語言。而Html5語言本身又有著不可避免的局限性维雇。正是這些局限性的存在淤刃，使得Web App在體驗中要遜于Native App。
三谆沃、Web App受限制因素及設(shè)計要點
相比Native App钝凶，Web App體驗中受限于以上5個因素：網(wǎng)絡(luò)環(huán)境仪芒，渲染性能唁影，平臺特性，受限于瀏覽器掂名，系統(tǒng)限制据沈。
1. 網(wǎng)絡(luò)環(huán)境，渲染性能
Web APP對網(wǎng)絡(luò)環(huán)境的依賴性較大饺蔑，因為Web APP中的H5頁面锌介，當用戶使用時，去服務(wù)器請求顯示頁面猾警。如果此時用戶恰巧遇到網(wǎng)速慢孔祸，網(wǎng)絡(luò)不穩(wěn)定等其他環(huán)境時，用戶請求頁面的效率大打折扣发皿，在用戶使用中會出現(xiàn)不流暢崔慧，斷斷續(xù)續(xù)的不良感受。同時穴墅，H5技術(shù)自身渲染性能較弱：對復雜的圖形樣式惶室，多樣的動效，自定義字體等的支持性不強玄货。
因此皇钞，基于網(wǎng)絡(luò)環(huán)境和渲染性能的影響，在設(shè)計H5頁面時松捉，應(yīng)注意以下幾點：
簡化不重要的動畫/動效
簡化復雜的圖形文字樣式
減少頁面渲染的頻率和次數(shù)
從下圖移動Web版 jing.fm和Native版jing對比后可以看出：Web APP首頁去除冗余的功能夹界，回溯本源，只給用戶提供了jing.fm最初的本質(zhì)需求——電臺隘世。既符合H5精簡功能又達到了突出核心功能的設(shè)計原則掉盅。無疑給用戶眼前一亮的氣息。
正如書中《瞬間之美》的一個核心觀點：重要的并不是我們提供的信息量有多大以舒，而是我們能否給他們提供真正需要的信息趾痘。
用戶是否真的在意準確的信息？這篇文章給你另一個全新的視角蔓钟！《重磅推薦永票！如何設(shè)計傳單才不會被人隨手扔掉？》
再如：百度最新推出的直達號，以良子健身為例：
從Native App和Web App（百度直達號）的對比中侣集，我們可以看出Native良子以九宮格的形式展現(xiàn)键俱，且屬于雙重導航，功能入口太多世分；弊端是用戶不知道聚焦在哪里编振，分散用戶的注意力。而Web版良子整合并減少了導航的入口臭埋，增強用戶的專注度踪央；界面清爽，整潔瓢阴，很好地傳達了良子本身的寓意——輕松畅蹂、愉悅、休閑荣恐、舒適液斜。
2. 受限于瀏覽器
通常Web App生存于瀏覽器里，宿主是瀏覽器叠穆。不同的瀏覽器自身的屬性不盡相同少漆，如：瀏覽器自帶的手勢，頁面切換方式硼被，鏈接跳轉(zhuǎn)方式示损，版本兼容問題等等。
例如下圖：UC 瀏覽器和百度瀏覽器自身支持手勢切換頁面祷嘶。手指從左側(cè)滑動頁面屎媳，返回至上一級。百度手機助手H5頁面论巍，頂部Banner支持手勢左右滑動切換烛谊。這一操作與瀏覽器自身手勢是沖突的。
再如嘉汰，基于瀏覽器的Web APP在打開新的模塊中的頁面時丹禀，大多會新開窗口來展現(xiàn)。例如用戶在使用購物類APP時鞋怀，瀏覽每日精選模塊時双泪，每當打開新的商品時，默認新開一個窗口密似。這樣的優(yōu)劣勢顯而易見：優(yōu)勢是能夠記錄用戶瀏覽過的痕跡焙矛，瀏覽過的商品，以便后續(xù)橫向?qū)Ρ炔须纾涣觿菔沁^多的頁面容易使用戶迷失在頁面中村斟。
正如Google開發(fā)手冊里描述：當用戶打開一個Web App的時候贫导，他們期待這個應(yīng)用就像是一個單個應(yīng)用，而不是一系列網(wǎng)頁的結(jié)合蟆盹。然而孩灯，什么情況下需要跳轉(zhuǎn)頁面，什么情況下在當前頁面展示則需要設(shè)計師細致考量逾滥。
因此峰档，Web App基于瀏覽器的特性底循，從設(shè)計角度應(yīng)該遵循以下了兩點：
少用手勢刺洒，避免與瀏覽器手勢沖突。
減少頁面跳轉(zhuǎn)次數(shù)趴樱，盡量在當前頁面顯示毅待。
3. 系統(tǒng)限制尚卫，平臺特性
由于Html5語言的技術(shù)特性归榕，無法調(diào)用系統(tǒng)級別的權(quán)限尸红。例如，系統(tǒng)級別的彈窗刹泄，系統(tǒng)級別的通知外里，地理信息，通訊錄特石，語音等等盅蝗。且與系統(tǒng)的兼容性也會存在一些問題。以上限制通常導致APP的拓展性不強姆蘸，體驗相對較差墩莫。例如百度地圖：
Web版地圖基于瀏覽器展現(xiàn)，因此逞敷，不能全屏顯示地圖狂秦，給用戶的眼界帶來局限感；相反推捐，Native 版地圖以全屏展現(xiàn)的形式裂问，很好的拓展了用戶的視野。整個界面干凈簡潔牛柒，首頁去除冗余功能堪簿。
在制定路線的體驗中，如圖：
Web 版地圖耗費的流量大于Native版皮壁，且不能預(yù)先緩存離線地圖椭更。對于地理位置的判斷也是基于宿主瀏覽器，而非Web地圖本身蛾魄。獲取路線后虑瀑，對于更換到達方式协饲，相對來說是不便利的。
相反缴川，Native 版地圖茉稠，能夠直接訪問用戶的地理位置，能夠很清晰的為用戶展現(xiàn)App規(guī)劃的路線把夸，并能輕松的查看多種路線方案而线，以便做出符合自己的最佳方案。對于切換公交恋日，走路膀篮，自駕等路線方式也是只需一鍵操作。
Native 版地圖相對于 Web版地圖增加更多情感化岂膳，易用的功能誓竿，如：能夠記錄用戶的生活軌跡，記錄用戶的點滴足跡谈截，能夠享受躲避擁堵方案等筷屡。而Web版地圖基于技術(shù)框架，很難實現(xiàn)以上功能簸喂，從用戶體驗角度來看毙死，弱于Native版地圖。
四喻鳄、小結(jié)
綜述所述扼倘，在設(shè)計Web APP時，應(yīng)當遵循以下幾點：
1. 簡化
簡化不重要的動畫/動效
簡化復雜的圖形文字樣式
2. 少用
少用手勢除呵，避免與瀏覽器手勢沖突
少用彈窗
3. 減少
減少頁面內(nèi)容
減少控件數(shù)量
減少頁面跳轉(zhuǎn)次數(shù)再菊，盡量在當前頁面顯示
4. 增強
增強Loading時的趣味性
增強頁面主次關(guān)系
增強控件復用性
原文地址：mux.baidu
作者：guowenwe
