H5為主的Hybrid App技術方案的設想/架構優化/設計/實戰-Android

  Web運營：QQ團隊除了採用動態CDN、後臺渲染等全棧手段優化體驗，也構建了圍繞速度、成功率、頁面異常等維度的監控體系來保障服務質量。
  維護手機QQ中的所有H5 hybrid開發的框架，即WebView元件的技術工作。現在主流的hybrid還是H5 + native。
70%以上業務由H5開發，手機QQ Hybrid 的架構如何優化演進？- https://www.iamue.com/19437
hybrid app開發實戰- http://blog.csdn.net/atgwwx/article/details/42693379

設想：

主要思路

• APP以H5實現為主，而不是僅限於活動頁面
• 不使用比較流行的SPA（single page application）方式
• 每個介面對應一個H5頁面，等效Activity/ViewController+佈局的職能
• 每個介面（包括原生的）都有一個唯一的URL，通過url跳轉
• 模板在App渲染，前後端分離將在APP而不是服務端，APP更具動態性
• 預置資源，使載入過程更快

APP將會分為以下三個層次：

• 容器：以原生方式提供H5尚不支援或者支援得不好的功能（比如視訊和音訊播放），管理頁面切換，與伺服器的資料互動，頁面渲染，預置資源，快取策略等。容器應該模組化，構建時可插拔
• H5框架：輕量的H5框架,再加一些支援APP通用功能（比如動畫效果，手勢互動，通用的ui元件等）
• H5業務層：所有的業務邏輯分在不同的頁面實現

其中前兩個層次可以形成框架，造福人類。在同一領域下，第三層次也可以抽象出有共享的元件或庫

優點：

相對於原生應用，

• APP更加動態化，可以減少APP升級，只有容器改動，才需要使用者升級。頁面變化，無需升級
• 跨平臺，iOS和Android公用一套頁面（未來可能還有PC，Widows Phone一類）
• 減少技術需求，前端可以很快上手

相對於SPA

• 各個頁面之間相互更獨立，避免所有js程式碼在一個上下文裡執行，可以不要過重的UI框架，單個頁面的問題不會干擾其他頁面，也不需要過分複雜的dom結構
• 和原生APP的玩法不衝突，可以互為補充。比如APP可以部分頁面是原生，部分是H5（當然儘量多用H5實現）。

問題

除錯比純原生應用困難一些。但如果單純在模擬器上除錯H5，用Safari和Chrome遠端除錯都比Native應用除錯靈活。
體驗比原生APP還有差距，主要表現在操作響應時間，動畫效果等方面。但大多數情況下和原生APP相比，已經感受不到差距了。
安全性方面還需要研究方案; 過多頁面並存的時候，記憶體消耗大.

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

（作者注：本文WAP經指正意為 webAPP ,many thx~）

從使用場景上，WAP使用者面臨比APP使用者更嚴峻的問題：

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

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

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

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

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

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

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

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

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

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

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

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

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

2、做好新的WAP導航.

3、補充從WAP站對 下載APP 的引導。

> WAP導航怎樣設計？

一、常見的幾種WAP導航樣式

1.1頂部底部導航的設計：

常見WAP導航設計

1.2導航快捷鍵設計：

美團：頂部欄固定位置

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

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

導航快捷方式

二、有效的導航設計

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

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

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

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

> 怎樣引導使用者下載APP?

一、在哪裡出現引導？

一般 首頁、核心任務的頁面（如 電商WAP的商品詳情頁 、視訊WAP的視訊觀看頁）

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

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

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

下載APP引導

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

1、從頁面佈局上減少跳轉：使用互動技巧隱藏文字（eg 騰訊視訊）

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

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

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

浮層的轉換處理

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

視覺微調

技術上注意點：

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

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

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

4）考慮儲存使用者的哪些資料：設定、個人資料、閱讀錨點、跳出頁面等。

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

6）按順序 非同步載入  eg： 騰訊視訊

騰訊視訊 非同步載入。