產品經理必瞭解的3個app技術框架

在如今愈來愈多的app，你能夠看到有一些app中是混着網頁加載的（咱們俗稱的爲H5）但要注意的web 前端開發是包含着h5的。web前端開發還包括了許多內容，好比說後臺html，css，div等都是屬於web前端開發的，html5和其它技能都是同樣的，是屬於web前端開發的一種技術，就是咱們平時所說的移動端的網頁製做，簡稱H5。

你也可能會發現有的app並無網頁加載，一些工具性的app爲了達到最好的用戶體驗，流暢的響應所使用的app技術框架又有不一樣。

總體app 的技術分爲三大類：native app、web app、hybrid app。必需要說起的是火爆的小程序不論是百度、微信、仍是支付寶的，都是基於hybrid 框架技術的一項火爆的應用。以下圖4.1.1表示 hybird的關係

技術最終是服務於產品的，產品是解決用戶問題的。所以3個框架並非有絕對的好壞。三者也有各自的優點和缺點，以下圖4.1.2展現3者技術框架的嵌套關係。

Native 架構

基於智能移動操做系統（如iOS、Android），並使用對應系統所適用的程序語言編寫運行的第三方應用程序，能夠直接調用系統操做的接口，能夠調用足夠的cpu資源，可讓app 運行的速度更快、流暢，常見落地的場景如：大型手機遊戲、性能要求較高的工具類app，但運行app所佔據的內存與所須要的手機配置也會有要求。

Web app架構

一種採用Html、css、div、js等語言編寫的，受限制於UI webview，頁面存放不在本地。也沒法調用系統底層接口，對CPU的性能使用有限，常見比較輕的產品、利於傳播的app，在webapp中所使用的技術框架有jQueryMobile、frozen UI、iconic、amazon UI、cardkit、appjs等

Hybrid app架構

一種用Native技術來搭建App的外殼，殼裏的內容由Web技術來提供的移動應用，兼具「Native App良好交互體驗的優點」和「Web App跨平臺開發的優點」。但一樣受限制於UIVIEW，不能作大型類遊戲產品。但能夠兼顧交互體驗、速度運行

產品經理在對技術框架了解後還應該熟悉技術的優點與劣勢，咱們如何在產品研發中選擇對應的框架幫助更好的產品增加與轉化呢？下面整理出了一些優點和劣勢

各自優點

1.Native

開發成本：要爲iOS、Android各自開發一套App

維護成本：不只要維護多個系統版本，還要維護多個歷史版本（若有的用戶在5.0版本，有的用戶在4.0版本等）

版本發佈：須要發佈（用戶安裝）最新版App

資源存儲：本地

網絡要求：支持離線

開發時間：耗時最長

人員配比：須要iOS、Android系統的開發人員

性能要求：硬件配置性能要求高

2.Web

開發成本：只需開發一套App，便可運用到不一樣系統平臺

維護成本：只須要維護一套（最新版本）

版本發佈：直接發佈，隨時24小時能夠發佈（除開審覈）

資源存儲：服務器

網絡要求：依賴網絡

開發時間：語言選擇不一樣，會有影響。可是最快的

人員配比：會寫對應網頁語言的開發

性能要求：硬件性能要求低

3.Hybrid（混合型）

開發成本：native須要iOS、android各自配備開發人員，web部分只需統一配置調用接口便可

維護成本：native須要爲多最新版本和多個歷史版本，web只需維護最新版本，而且web能夠支持隨時維護修改

版本發佈：native部分須要發佈（用戶安裝）最新的App，web部分不須要發佈（用戶安裝）最新的App

資源存儲：本地服務器和騰訊雲、阿里雲等雲服務器

網絡要求：大部分依賴網絡也有本地部署

開發時間：根據功能複雜度，若功能集中在web 則快，反之則慢

性能要求：中等

因爲hybrid是融入了系統自身的接口，所使用性能佔比的CPU也是不一樣的。因爲web須要依靠網絡問題，因此hybrid框架應用中，是須要兼顧web的網絡問題

5個應用難點

因爲Hybrid App是融合了Native App和Web App的技術特色，經過分析Hybrid App的技術框架成分，能讓咱們更好地掌握App框架的基本開發知識，有助於咱們更好地去作設計。

1. 網絡致使的沒法載入圖片問題

如上圖是一條app典型的利用hybrid技術的應用。由於要支持微信端口的商城，電商系統在減小資源浪費的狀況下，就只作一套。但卻因網絡問題致使了沒法加載商品信息流頁。

但由於商品的內容是豐富的，經過這樣技術框架能夠避免安裝包過大。是一個典型的案例

2.使用系統的動效

在native 框架中有系統自帶的動畫。好比縮放、載入、點擊效果、彈窗動畫。在產品設計中選擇系統自帶的動畫，能夠避免native成本太高。因爲web app\hybrid 都受限於UI VIEWR（一個技術接口），致使須要訪問多個層級進行渲染，最終形成的動畫效果就會卡幀或性能降低。

相似遊戲產品，流暢的體驗是玩家首先體驗之一，大型遊戲都會採起所有native 開發，以下圖

3.注意兼容性

因爲Hybrid App中，咱們會經常使用一套web 方案。不論是微信、仍是 app上，都會用一套字體與風格。但咱們不可能讓設計師在移動端、pad上切不一樣尺寸的圖。因此爲了更好地讓設計方案兼容不一樣的平臺特性和手機分辨率，因此建議文案和圖形採用如下三種方式：

a. 系統默認字體：若是不是爲了設計出特殊的字體樣式，iOS、Android和Windows Phone系統的默認字體是基本知足咱們的需求，同時在不一樣平臺上的顯示效果也會比較好。

b. svg 可縮放矢量圖形：可以自由縮放大小來適應不一樣屏幕尺寸和分辨率，不會模糊變形。SVG圖形是可交互的和動態的，能夠在SVG文件中嵌入動畫元素或經過腳原本定義動畫。

c. Iconfont來代替圖標：可以自由變換大小和顏色。

4.把控web與native的平衡

web 頁面因在hybrid中會更加自由，不論是UI仍是交互上都會更能知足產品人的需求，但要注意若是web頁面太多會致使整個app的體驗大幅降低。用戶進入app 後即不能接受到良好的native體驗，還會認爲是你產品的設計有問題。

Web方式能夠幫助業務複雜的企業實現一些定製化的解決方案。業務類型太多，所有依靠native 會讓app 顯得過於臃腫耗費性能。

以下圖支付寶圖4.1.7所示，支付寶中支付、下單、付款等高頻操做，纔是採用native的方式，減小用戶在高頻操做中的卡頓狀況。

5.注意加載等操做交互設計

利用hybrid的技術，其實自己也是在app中實現了一個不徹底的瀏覽器。Hybrid但因爲可能過分依靠html5 致使體驗不夠原生，還有可能審覈被拒的可能。

針對下面4中加載狀況產品經理要注意對應的交互和文案

一、正在加載中

二、加載成功

三、沒網絡

四、加載失敗

最快的辦法是直接使用一個【載入圖標】+「正在載入中「，就能夠接觸用戶的困惑。如圖4.1.7所示

總結

技術架構在不停的更新，產品經理要與開發同窗溝通出最好的符合當前場景的解決方案。畢竟開發極可能只瞭解部分業務，至於爲何這麼作則須要產品人員來主導了。

顯然當前小程序也是hybrid的技術架構的亮點應用方向，適合輕度場景、沒有過多的動畫動效，頁面少、功能不復雜。所以互聯網產品人保持不斷學習的態度是相當重要的。

好啦，今天原創就在這裏，我會每週原創2篇工做案例

推薦閱讀：

堅持一年，招募100個產品經理

個人第一本書，給大家

個人原創課程，產品經理8次訓練