H5知識總結(jié)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? H5知識總結(jié)

優(yōu)點(diǎn)

H5頁面交由前端進(jìn)行開發(fā)衔统，頁面模塊之間分開開發(fā)和維護(hù)朦乏，有效減少App的開發(fā)周期

H5頁面不受限于應(yīng)用商店繁瑣的審核流程和冗長的等待時間，新增頁面和功能龙填、修復(fù)缺陷都可隨時部署到線上

H5頁面在有需要時才加載，減小App打包后的大小，縮短App在應(yīng)用商店下載的時間和減少本地占用手機(jī)的空間

H5頁面接入App Webview中爹脾，不再受限于瀏覽器，可通過與App交互調(diào)用設(shè)備更多底層的API來完善更多原本瀏覽器無法完成的操作

缺點(diǎn)

協(xié)定好H5和App之間的通訊協(xié)議箕昭，定義好全局屬性和全局方法在兩者之間如何調(diào)用

H5頁面接入App Webview中灵妨，可能會出現(xiàn)很多兼容問題，需要前端和客戶端多加注意

開發(fā)前需按照需求和交互進(jìn)行頁面劃分落竹，哪些頁面歸前端開發(fā)泌霍，哪些頁面歸客戶端開發(fā)

頁面出現(xiàn)Bug有時候很難發(fā)現(xiàn)是在哪個環(huán)節(jié)出錯，需要前端和客戶端共同調(diào)試找出問題所在

通訊方式

前端通知客戶端

在H5頁面里觸發(fā)鏈接跳轉(zhuǎn)述召，App Webview檢測到鏈接跳轉(zhuǎn)再進(jìn)行攔截朱转，因此可以通過URL上攜帶參數(shù)來告知App下一步應(yīng)該做些什么。

H5 App設(shè)計者需要注意的問題

別讓用戶空等

App加載時間過長很容易讓用戶以為出現(xiàn)了什么故障积暖，也會帶來糟糕的用戶體驗藤为。App加載的時候不要讓用戶看到空白的屏幕，使用加載指示條或者小動畫讓用戶知道App處于正常運(yùn)行當(dāng)中夺刑。

菜單層次太深

菜單項以5~7個為宜缅疟，如果有二級菜單，就要注意合理的菜單分類遍愿，不能有太多層級的菜單存淫，否則很難預(yù)期，也很難找到沼填，尋找和返回都會變得很麻煩纫雁。

交互流程分支太多

做交互的時候一定要有一個任務(wù)流程的概念貫穿始終，用戶是為了完成某個任務(wù)而使用軟件的倾哺，交互設(shè)計師除了關(guān)注界面元素轧邪、跳轉(zhuǎn)邏輯和交互反饋之外刽脖，還要關(guān)注用戶任務(wù)，分得清主要任務(wù)和次要人物忌愚，給主要任務(wù)一個暢通無阻的清晰流程曲管，不要給予太多可能的分支，干擾主要流程硕糊。

相關(guān)的選項離的很遠(yuǎn)

不要在沒有流程圖之就前開始設(shè)計或者畫線框圖

即便一個簡單的H5 APP也要有一個思慮周全的流程圖院水，以確保在H5 APP有合乎邏輯的、合理的導(dǎo)航結(jié)構(gòu)简十。跳過流程圖直接進(jìn)進(jìn)入開發(fā)會讓開發(fā)變得復(fù)雜檬某、不可控，很容易讓用戶迷茫螟蝙，最后選擇關(guān)掉或者卸載你的App恢恼。

2.分工要明確不要忽略開發(fā)預(yù)算

一個計劃好的H5 App可能有一個搜索框，設(shè)計師預(yù)想的是一個產(chǎn)生實時結(jié)果的鍵入搜索胰默，但設(shè)計師不能是做這個重大決定的唯一決策人场斑。

把所有的操作都暴露出來

H5 APP產(chǎn)品交互設(shè)計要經(jīng)歷縮減、隱藏牵署、附加漏隐、組織的過程，千萬不要妄圖把什么功能奴迅、什么操作都暴露出來青责，以彰顯強(qiáng)大。你需要把自己應(yīng)用的所有功能所有操作做個優(yōu)先級設(shè)定取具，那些常用的20%的功能爽柒，放在界面的主要位置上，其他80%的操作者填，放在次要位置或合理歸類組織后浩村，隱藏起來就可以了。