起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識未來的熱門！WEB APP與原生APP有哪些交互設計區(qū)別？
@ChM_CuoreAzzurro?：Web App和原生APP同為移動端，很少有時間研究這兩項的交互區(qū)別，最近公司做了一次從原生APP到Web App（HTML5 ）的移植，故總結一下期間遇到的問題及不同點總結。
從使用場景上，Web App用戶面臨比原生APP用戶更嚴峻的問題：
1、頁面跳轉更加費力，不穩(wěn)定感更強
思考點：如何減少跳轉（扁平結構、頁面布局技巧），增加數據及展示的流暢流程及穩(wěn)定性（技術）
2、更小的頁面空間（由于瀏覽器的導航本身占用一部分屏幕空間），更大的信息記憶負擔
移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩(wěn)定的，用戶在滾動屏幕的過程中需要臨時記憶的信息越多，他們的表現就會越差。——《貼心設計：打造高可用性的移動產品》
思考點：排版更清晰、信息更簡練 （可在原生APP基礎上去掉一些豐富、復雜的視覺表現）
3、導航不明顯，原有底部導航消失，有效的導航遇到挑戰(zhàn)
思考點：如何有效的提供導航？有哪些形式？
4、交互動態(tài)效果收到限制，影響一些頁面場景、邏輯的理解。
思考點：比如登錄注冊流程的彈出、完成及異常退出，做好文字提示。
針對以上困境，解決方法總結如下：
首先，從APP到WAP版，在產品上，最明顯且核心的：
1、精簡功能，只將核心的任務實現，非核心的枝節(jié)可考慮刪減。
2、做好新的Web App導航.
3、補充從Web App 對 下載原生APP 的引導。
>>>>> Web App導航怎樣設計？
一、常見的幾種Web APP導航樣式
1.1頂部底部導航的設計：
1.2導航快捷鍵設計：
美團：頂部欄固定位置
淘寶：懸浮圓圈–可展開的按鈕
優(yōu)酷：非首屏時頁面右側懸浮
二、有效的導航設計
1、基本的快捷導航中包括 返回常用頁面（如 首頁 我的 等）的快捷方式
2、出現深層架構時 及時補充返回重要層級頁面的快捷方式
3、情境式導航，方便用戶快捷跳轉到ta想去的頁面，如購買結束時提供查看訂單詳情的按鈕。
PS：Web APP更加需要畫頁面跳轉的流程圖，摸清各個頁面的入口，尤其是頁面返回的流程；有些簡化的返回按鈕，可以特殊注明返回到的頁面
>>>>>>>>> 怎樣引導用戶下載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技術的成熟和發(fā)展，也許以后就是基于H5的Web App的天下了 0.0
原文地址：jianshu
作者：@ChM_CuoreAzzurro
- 目前還沒評論，等你發(fā)揮！
