在現在越來越多的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者技術框架的巢狀關係。
基於智慧移動作業系統（如iOS、Android），並使用對應系統所適用的程式語言編寫執行的第三方應用程式，可以直接呼叫系統操作的介面，可以呼叫足夠的cpu資源，可以讓app 執行的速度更快、流暢，常見落地的場景如：大型手機遊戲、效能要求較高的工具類app，但執行app所佔據的記憶體與所需要的手機配置也會有要求。
一種採用Html、css、div、js等語言編寫的，受限制於UI webview，頁面存放不在本地。也無法呼叫系統底層介面，對CPU的效能使用有限，常見比較輕的產品、利於傳播的app，在webapp中所使用的技術框架有jQueryMobile、frozen UI、iconic、amazon UI、cardkit、appjs等
一種用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的網路問題
由於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中載入情況產品經理要注意對應的互動和文案
1、正在載入中
2、載入成功
3、沒網路
4、載入失敗
最快的辦法是直接使用一個【載入圖示】+“正在載入中“，就可以接觸使用者的困惑。如圖4.1.7所示
技術架構在不停的更新，產品經理要與開發同學溝通出最好的符合當前場景的解決方案。畢竟開發很可能只瞭解部分業務，至於為什麼這麼做則需要產品人員來主導了。
顯然當前小程式也是hybrid的技術架構的亮點應用方向，適合輕度場景、沒有過多的動畫動效，頁面少、功能不復雜。因此網際網路產品人保持不斷學習的態度是至關重要的。
好啦，今天原創就在這裡，我會每週原創2篇工作案例
推薦閱讀：
我的原創課程，產品經理8次訓練