WebAPP與原生APP的交互設計區別

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

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

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

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

二、更小的頁面空間（因爲瀏覽器的導航自己佔用一部分屏幕空間），更大的信息記憶負擔

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

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

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

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

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

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

思考點：好比登陸註冊流程的彈出、完成及異常退出，作好文字提示。

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

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

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

二、作好新的WebAPP導航.

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

>> WebAPP導航怎樣設計？

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

1.1頂部底部導航的設計：

常見WebAPP導航 設計

1.2導航快捷鍵設計：

美團：頂部欄固定位置

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

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

導航快捷方式

2、有效的導航設計 

一、基本的快捷導航中包括 返回經常使用頁面（如 首頁 個人 等）的快捷方式 

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

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

ps：WebAPP更加須要畫頁面跳轉的流程圖，摸清各個頁面的入口，尤爲是頁面返回的流程；有些簡化的返回按鈕，能夠特殊註明返回到的頁面

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

1、在哪裏出現引導？

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

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

一、頁面頂部放置下載條    二、頁面底部懸浮層引導  三、融合在頁面首屏中

四、下載按鈕形式    五、底部foot裏含： 客戶端下載入口

下載APP引導

其次，在設計WebAPP時，有如下小技巧能夠參考：

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

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

二、取消float浮層，增大展現空間（eg：大衆點評）

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

浮層的轉換處理

三、頁面中對圖片進行縮小（因狀況而異）的處理、精簡一些標籤導航的視覺展現

視覺微調

技術上注意點：

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

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

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

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

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

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

騰訊視頻 異步加載