@ChM_CuoreAzzurro ：Web App和原生APP同為移動(dòng)端，很少有時(shí)間研究這兩項(xiàng)的交互區(qū)別，最近公司做了一次從原生APP到Web App（HTML5 ）的移植，故總結(jié)一下期間遇到的問(wèn)題及不同點(diǎn)總結(jié)。

想學(xué)習(xí)交互，先了解下基礎(chǔ)的區(qū)別會(huì)很有幫助：《超贊！聊聊Web App、Hybrid APP與本地 APP的設(shè)計(jì)差異》

從使用場(chǎng)景上，Web App用戶面臨比原生APP用戶更嚴(yán)峻的問(wèn)題：

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

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

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

移動(dòng)設(shè)備的屏幕要小得多。這種如同透過(guò)門(mén)縫進(jìn)行的閱讀增加了認(rèn)知的負(fù)擔(dān)。人腦的短期記憶是不穩(wěn)定的，用戶在滾動(dòng)屏幕的過(guò)程中需要臨時(shí)記憶的信息越多，他們的表現(xiàn)就會(huì)越差。——《貼心設(shè)計(jì)：打造高可用性的移動(dòng)產(chǎn)品》

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

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

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

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

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

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

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

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

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

3、補(bǔ)充從Web App 對(duì) 下載原生APP 的引導(dǎo)。

>>>>> Web App導(dǎo)航怎樣設(shè)計(jì)？

一、常見(jiàn)的幾種Web APP導(dǎo)航樣式

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

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

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

淘寶：懸浮圓圈--可展開(kāi)的按鈕

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

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

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

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

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

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

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

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

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

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

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

其次，在設(shè)計(jì)Web App時(shí)，有以下小技巧可以參考：

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

利用展開(kāi)收起按鈕 減少頁(yè)面跳轉(zhuǎn)。

2、取消float浮層，增大展示空間（eg：大眾點(diǎn)評(píng)）

取消float浮層，同時(shí)在詳情尾部再次加上 “購(gòu)買(mǎi)”按鈕。

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

3、頁(yè)面中對(duì)圖片進(jìn)行縮小（因情況而異）的處理、精簡(jiǎn)一些標(biāo)簽導(dǎo)航的視覺(jué)展示。

視覺(jué)微調(diào)。

技術(shù)上注意點(diǎn)：

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

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

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

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

5）避免動(dòng)效與瀏覽器的交互沖突

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

騰訊視頻異步加載。

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

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

【設(shè)計(jì)兩三事的人氣好文】

Top 1：設(shè)計(jì)一事，配色是重中之重，必須正確！
《秒變配色高手！怎么都不會(huì)錯(cuò)的6條網(wǎng)頁(yè)設(shè)計(jì)配色原則》

Top 2：設(shè)計(jì)二事，字體是畫(huà)龍點(diǎn)睛，定要最好的！
《字體排行榜！2014年最受歡迎的35款字體素材打包下載》

Top 3：設(shè)計(jì)三事，視覺(jué)如衣服，文案是氣質(zhì)，不能不高端！
《年度最佳教程！7招教你寫(xiě)出互聯(lián)網(wǎng)頂尖文案！》

原文地址：jianshu
作者：@ChM_CuoreAzzurro

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號(hào)：youshege