WEB APP與原生APP有哪些交互設計區別？

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

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

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

　　2、 更小的頁面空間(由於浏覽器的導航本身占用一部分屏幕空間)，更大的信息記憶負擔

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

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

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

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

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

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

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

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

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

　　2、 做好新的Web App導航.

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

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

　　1.1頂部底部導航的設計：

　　1.2導航快捷鍵設計：

　　美團：頂部欄固定位置

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

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

　　二、有效的導航設計

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

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

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

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

　　在哪裡出現引導？

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

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

　　頁面頂部放置下載條

　　頁面底部懸浮層引導

　　融合在頁面首屏中

　　下載按鈕形式

　　底部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