當前市面上有兩種類型的APP，一種是用Android/IOS直接編寫的原生APP的，一種是通過H5寫的Web APP然後封裝成原生APP的樣子。

他們各有優劣，但是隨著H5的勢頭正勁，現在H5開發的APP也越來越多，不乏一些大家常用的就是用H5開發的。例如京東一些頁面、QQ興趣部落等

原生APP與Web APP的區別

原生APP直接基於操作系統編寫，可以調用很多操作系統底層應用，可以完成很複雜的交互與功能，需要下載安裝。

原生APP的優點：1.操作穩定，效率高；2.直接訪問底層應用，例如通訊錄等；3.可以實現更多的交互效果；3.具有系統級別的交互體驗與提醒。

缺點：1.開發成本高，不同平台使用不同的語言（IOS、Android）；2.維護成本高，每一個迭代版本都得維護；3.更新迭代耗時，根據不同平台，提交–審核–上線 等等不同的流程，需要經過的流程較複雜，且iOS和Android相比，審核更複雜，時間也更長。

Web APP 不需要下載，通過瀏覽器直接訪問。需要瀏覽器系統進行交互。

優點：1. 開發成本低：H5是一種前端語言，與後台語言無關，並且適配各種平台；2.維護成本低：只需要發布就可以了；3.更新快：不需要經過複雜的上線流程即可更新

缺點：1.受限於網路和硬體、很多動效即使可以在H5上實現，效果也不好，且由於硬體和系統劣勢，Android的效果更差；2.臨時性的入口、無法獲取系統級別的通知，提醒，動效等等；3.設計上受限制諸多， 用戶體驗較差 ；

如何辨別原生APP與Web APP

1. 看跳轉。原生比Web效率更高、速度更快。唯品會是比唯品花更快。

2. 看斷網。斷網后依然能顯示部分的是原生APP，顯示404是Web APP

當然現在Web APP也可以通過預存離線包的形式實現斷網訪問。

3. 看APP頂部導航欄是否會有關閉的功能

頂部有關閉功能的是Web APP，沒有的則是原生APP（不過，如果要完成這個功能也是可以的）

4. 下拉刷新功能

如果界面沒有明顯刷新現象的是原生的，如果有明顯刷新現象，比如頁面閃一下或者白屏一下的是H5頁面（IOS和Android）。

不過現在很多框架、硬體升級、網速升級。如果APP有足夠的開發資源來對H5頁面進行優化，其實是可以做到和Native的體驗非常接近的，能讓你幾乎無法分辨。

界面設計有哪些異同？

支付寶中原生APP的鍵盤和浮層是一體的，而唯品會H5頁面的浮層和系統鍵盤是分離的，H5頁面鍵盤是有局限性的。

關閉按鈕容易誤操作。比如京東的修改支付密碼流程都是用H5寫的，步驟比較多且每一步都很關鍵，如果用戶誤點擊了關閉，整個修改密碼的流程就前功盡棄了。

是夠能覆蓋頂部狀態欄。原生APP可以在彈出框之後整個頁面添加蒙版。而Web APP狀態欄區域不會被蒙版覆蓋。

設計入門或提升群：566106030 UI、電商、前端視頻下載：www.nbteach.com