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

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

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

2、更小的頁面空間（由於瀏覽器的導航本身占用一部分螢幕空間），更大的資訊記憶負擔

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

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

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

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

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

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

1.1頂部底部導航的設計：

1.2導航快捷鍵設計：

美團：頂部欄固定位置

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

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

導航快捷方式

二、有效的導航設計 

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

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

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

一、在**出現引導？

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

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

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

浮層的轉換處理

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

視覺微調

技術上注意點：

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

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

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

扯一下= =：

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

1 頁面跳轉更加費力，不穩定感更強 思考點 如何減少跳轉 扁平結構 頁面布局技巧 增加資料及展示的流暢流程及穩定性 技術 2 更小的頁面空間 由於瀏覽器的導航本身占用一部分螢幕空間 更大的資訊記憶負擔 移動裝置的螢幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的，使用...

H5 與 原生APP互動 安卓 IOS

h5與安卓互動 自己規定好的引數.自己規定好的引數 例如 rich.callshareformorevipshare 如果需要帶引數 const imgurl rich.callshareformorevipshare qrurl h5與ios互動 window.webkit.messagehand...

webapp與安卓原生應用通訊過程

為指導第三方應用開發人員安卓系統上呼叫html5應用程式開發提供方案設計 入參分別為 activity 安卓應用的activity，值為字串型別 需要前面加上應用包名 入參 安卓原生應用間的呼叫是通過採用startactivityforresult機制來實施的 基本原理 vardevice cord...