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

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

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

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

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

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

——《貼心設計：打造高可用性的移動產品》

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

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

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

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

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

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

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

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

2、做好新的WebAPP導航.

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

>> WebAPP導航怎樣設計？

一、常見的幾種WebAPP導航樣式

1.1頂部底部導航的設計：

常見WebAPP導航設計

1.2導航快捷鍵設計：

美團：頂部欄固定位置

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

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

導航快捷方式

二、有效的導航設計 

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

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

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

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

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

一、在哪里出現引導？

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

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

1、頁面頂部放置下載條    2、頁面底部懸浮層引導  3、融合在頁面首屏中

4、下載按鈕形式    5、底部foot里含： 客戶端下載入口

下載APP引導

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

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

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

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

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

浮層的轉換處理

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

視覺微調

技術上注意點：

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

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

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

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

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

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

騰訊視頻 異步加載