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

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

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

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

H5頁面在有需要時(shí)才加載，減小App打包后的大小，縮短App在應(yīng)用商店下載的時(shí)間和減少本地占用手機(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有時(shí)候很難發(fā)現(xiàn)是在哪個(gè)環(huán)節(jié)出錯(cuò)，需要前端和客戶端共同調(diào)試找出問題所在

通訊方式

前端通知客戶端

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

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

別讓用戶空等

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

菜單層次太深

菜單項(xiàng)以5~7個(gè)為宜，如果有二級菜單，就要注意合理的菜單分類，不能有太多層級的菜單，否則很難預(yù)期，也很難找到，尋找和返回都會變得很麻煩。

交互流程分支太多

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

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

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

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

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

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

把所有的操作都暴露出來

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

交互流程分支太多

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