未來的熱門！Web APP與原生APP有哪些交互設計區別？

@ChM_CuoreAzzurro ：Web App和原生APP同為移動端，很少有時間研究這兩項的交互區別，最近公司做了一次從原生APP到Web App（HTML5 ）的移植，故總結一下期間遇到的問題及不同點總結。

想學習交互，先了解下基礎的區別會很有幫助：《超贊！聊聊Web App、Hybrid APP與本地 APP的設計差異》

從使用場景上，Web App用戶面臨比原生APP用戶更嚴峻的問題：

1、頁面跳轉更加費力，不穩定感更強

思考點：如何減少跳轉（扁平結構、頁面布局技巧），增加數據及展示的流暢流程及穩定性（技術）

2、更小的頁面空間（由于瀏覽器的導航本身占用一部分屏幕空間），更大的信息記憶負擔

移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的，用戶在滾動屏幕的過程中需要臨時記憶的信息越多，他們的表現就會越差。——《貼心設計：打造高可用性的移動產品》

思考點：排版更清晰、信息更簡練 （可在原生APP基礎上去掉一些豐富、復雜的視覺表現）

3、導航不明顯，原有底部導航消失，有效的導航遇到挑戰

思考點：如何有效的提供導航？有哪些形式？

4、交互動態效果收到限制，影響一些頁面場景、邏輯的理解。

思考點：比如登錄注冊流程的彈出、完成及異常退出，做好文字提示。

針對以上困境，解決方法總結如下：

首先，從APP到WAP版，在產品上，最明顯且核心的：

1、精簡功能，只將核心的任務實現，非核心的枝節可考慮刪減。

2、做好新的Web App導航.

3、補充從Web App 對 下載原生APP 的引導。

>>>>> Web App導航怎樣設計？

一、常見的幾種Web APP導航樣式

1.1頂部底部導航的設計：

1.2導航快捷鍵設計：

美團：頂部欄固定位置

淘寶：懸浮圓圈--可展開的按鈕

優酷：非首屏時頁面右側懸浮

二、有效的導航設計

1、基本的快捷導航中包括 返回常用頁面（如 首頁 我的 等）的快捷方式

2、出現深層架構時 及時補充返回重要層級頁面的快捷方式

3、情境式導航，方便用戶快捷跳轉到ta想去的頁面，如購買結束時提供查看訂單詳情的按鈕。

PS：Web APP更加需要畫頁面跳轉的流程圖，摸清各個頁面的入口，尤其是頁面返回的流程；有些簡化的返回按鈕，可以特殊注明返回到的頁面

>>>>>>>>> 怎樣引導用戶下載APP？

在哪里出現引導？

一般首頁、核心任務的頁面（如 電商Web APP的商品詳情頁 、視頻Web APP的視頻觀看頁）

二、引導下載APP有哪些形式？

1. 頁面頂部放置下載條
2. 頁面底部懸浮層引導
3. 融合在頁面首屏中
4. 下載按鈕形式
5. 底部Foot里含客戶端下載入口

其次，在設計Web App時，有以下小技巧可以參考：

1、從頁面布局上減少跳轉：使用交互技巧隱藏文字（eg 騰訊視頻）

利用展開收起按鈕 減少頁面跳轉。

2、取消float浮層，增大展示空間（eg：大眾點評）

取消float浮層，同時在詳情尾部再次加上 “購買”按鈕。

浮層的轉換處理。

3、頁面中對圖片進行縮小（因情況而異）的處理、精簡一些標簽導航的視覺展示。

視覺微調。

技術上注意點：

1）各手機瀏覽器的兼容測試

2）底層服務的調取（能調取，但只有當其是核心功能時才保留 eg：新浪、美團等皆去掉了頭像上傳功能）

3）注意離線數據存儲，減少數據請求頻率。

4）考慮保存用戶的哪些數據：設置、個人數據、閱讀錨點、跳出頁面等。

5）避免動效與瀏覽器的交互沖突

6）按順序 異步加載 eg： 騰訊視頻

騰訊視頻異步加載。

雖然Web App目前處于比較尷尬的地位，我們是由于原APP客戶端中一些頁面需要分享出去才開啟制作Web App版。

但是不得不承認，基于Web的輕APP 更新迭代起來更方便，隨著H5技術的成熟和發展，也許以后就是基于H5的Web App的天下了 0.0

【設計兩三事的人氣好文】

Top 1：設計一事，配色是重中之重，必須正確！
《秒變配色高手！怎么都不會錯的6條網頁設計配色原則》

Top 2：設計二事，字體是畫龍點睛，定要最好的！
《字體排行榜！2014年最受歡迎的35款字體素材打包下載》

Top 3：設計三事，視覺如衣服，文案是氣質，不能不高端！
《年度最佳教程！7招教你寫出互聯網頂尖文案！》

原文地址：jianshu
作者：@ChM_CuoreAzzurro

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量90萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege