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

（作者注：本文WAP經(jīng)指正意為 webAPP ,many thx~）

從使用場景上，WAP用戶面臨比APP用戶更嚴(yán)峻的問題：

1、頁面跳轉(zhuǎn)更加費力，不穩(wěn)定感更強(qiáng)

思考點：如何減少跳轉(zhuǎn)（扁平結(jié)構(gòu)、頁面布局技巧），增加數(shù)據(jù)及展示的流暢流程及穩(wěn)定性（技術(shù)）

2、更小的頁面空間（由于瀏覽器的導(dǎo)航本身占用一部分屏幕空間），更大的信息記憶負(fù)擔(dān)

移動設(shè)備的屏幕要小得多。這種如同透過門縫進(jìn)行的閱讀增加了認(rèn)知的負(fù)擔(dān)。人腦的短期記憶是不穩(wěn)定的，用戶在滾動屏幕的過程中需要臨時記憶的信息越多，他們的表現(xiàn)就會越差。

——《貼心設(shè)計：打造高可用性的移動產(chǎn)品》

思考點：排版更清晰、信息更簡練 （可在APP基礎(chǔ)上去掉一些豐富、復(fù)雜的視覺表現(xiàn)）

3、導(dǎo)航不明顯，原有底部導(dǎo)航消失，有效的導(dǎo)航遇到挑戰(zhàn)

思考點：如何有效的提供導(dǎo)航？有哪些形式？

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

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

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

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

1、精簡功能，只將核心的任務(wù)實現(xiàn)，非核心的枝節(jié)可考慮刪減。

2、做好新的WAP導(dǎo)航.

3、補(bǔ)充從WAP站對?下載APP?的引導(dǎo)。

>> WAP導(dǎo)航怎樣設(shè)計？

一、常見的幾種WAP導(dǎo)航樣式

1.1頂部底部導(dǎo)航的設(shè)計：

1.2導(dǎo)航快捷鍵設(shè)計：

美團(tuán)：頂部欄固定位置

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

優(yōu)酷：非首屏?xí)r頁面右側(cè)懸浮

導(dǎo)航快捷方式

二、有效的導(dǎo)航設(shè)計

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

2、出現(xiàn)深層架構(gòu)時 及時補(bǔ)充返回重要層級頁面的快捷方式

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

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

>>怎樣引導(dǎo)用戶下載APP?

一、在哪里出現(xiàn)引導(dǎo)？

一般 首頁、核心任務(wù)的頁面（如 電商WAP的商品詳情頁 、視頻WAP的視頻觀看頁）

二、引導(dǎo)下載APP有哪些形式？

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

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

其次，在設(shè)計WAP版上，有以下小技巧可以參考：

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

利用展開收起按鈕 減少頁面跳轉(zhuǎn)

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

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

浮層的轉(zhuǎn)換處理

3、頁面中對圖片進(jìn)行縮?。ㄒ蚯闆r而異）的處理、精簡一些標(biāo)簽導(dǎo)航的視覺展現(xiàn)

視覺微調(diào)

技術(shù)上注意點：

1）各手機(jī)瀏覽器的兼容測試

2）底層服務(wù)的調(diào)?。苷{(diào)取，但只有當(dāng)其是核心功能時才保留 eg：新浪、美團(tuán)等皆去掉了頭像上傳功能）

3）注意離線數(shù)據(jù)存儲，減少數(shù)據(jù)請求頻率。

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

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

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

騰訊視頻 異步加載

扯一下= =：

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

但是不得不承認(rèn)，基于WAP的輕APP 更新迭代起來更方便，隨著H5技術(shù)的成熟和發(fā)展，也許以后就是基于H5的WAP APP的天下了0.0。r

附一些與WAP站設(shè)計有關(guān)的其它文章：

百度無線交互設(shè)計師談手機(jī)Web App設(shè)計方法

iPhone Web App 導(dǎo)航設(shè)計探討

輕，會成為未來的趨勢嗎？

作者：maye ；來源：簡書?