匠人手冊：霸屏H5實(shí)戰(zhàn)解密

第 1 章 鋪墊
1.1 H5 的前身今世
1.1.1　H5 是什么
1.1.2　H5 的階段性發(fā)展
1.1.3　我們?yōu)槭裁醋?H5
1.2 怎樣的 H5 才是好的 H5
1.2.1　情感共鳴 直擊內(nèi)心
1.2.2　構(gòu)思新奇 有想象力
1.2.3　交互炫酷 有表現(xiàn)力
1.2.4　技術(shù)創(chuàng)新 新鮮有趣
1.2.5　加入鼓勵(lì) 動力十足
1.2.6　反客為主 促進(jìn)回流
第 2 章 H5 交互流程剖析
2.1 一個(gè) H5 策劃的開始，源于好的溝通
2.1.1 邀請參與者開會
2.1.2 明確項(xiàng)目背景
2.1.3 策劃常見問題
2.2 策劃評估 1：動機(jī)——是否能在短時(shí)間內(nèi)吸引用戶注意力并完成閱讀
2.2.1 利用心流理論控制節(jié)奏
2.2.2　利用 Hook 理論引導(dǎo)用戶
2.3 策劃評估 2：框架——展現(xiàn)形式是否符合策劃主題
2.3.1　展示型
2.3.2 引導(dǎo)型
2.3.3 操作型
2.4 策劃評估 3：任務(wù)——是否提煉出核心任務(wù)
2.5 策劃評估 4：交互——交互方式與策劃是否匹配
2.6 策劃評估 5：原則——是否符合移動端的交互原則
2.6.1 簡化層級，結(jié)構(gòu)扁平化
2.6.2 降低閱讀門檻，減少認(rèn)知成本
2.6.3 H5 要注意分享屬性
2.6.4 一定要注意額外規(guī)范
2.7 產(chǎn)出 1：界面落實(shí)
2.7.1　快
2.7.2　細(xì)
2.8 產(chǎn)出 2：完善細(xì)節(jié)
2.8.1　關(guān)于分享控件與回流入口
2.8.2　文案配合專題
2.8.3　適當(dāng)?shù)奶崾?
2.8.4　H5 的返回設(shè)置
2.8.5　H5 的分段設(shè)置
2.8.6　增加彩蛋
2.9 產(chǎn)出 3：溝通跟進(jìn)，繞坑而行
2.9.1　加載與控制文件大小
2.9.2　避免手勢沖突
2.9.3　輸入框
2.9.4　播放器
2.9.5　手機(jī)適配（iPhone X）
2.9.6　其他設(shè)備端打開 H5
2.9.7　微信誘導(dǎo)分享
2.10 產(chǎn)出 4：測試上線與數(shù)據(jù)監(jiān)測
2.11 常用交互手段
2.11.1　結(jié)合手勢激發(fā) H5 亮點(diǎn)
2.11.2　利用好硬件給 H5 添彩
2.11.3　新科技引領(lǐng)新體驗(yàn)
第 3 章 H5 視覺套路
3.1 制作一個(gè) H5，視覺設(shè)計(jì)師要做什么
3.2 創(chuàng)意的視覺表現(xiàn)
3.2.1　要有目的的創(chuàng)意
3.2.2　創(chuàng)意形式千千萬
3.2.3　沒有靈感？沒關(guān)系
3.3 執(zhí)行——手頭功夫很重要
3.3.1　要展示的信息量大怎么辦
3.3.2　怎么搞定 H5 小游戲
3.4 萬能的插畫
3.4.1　做到表里如一
3.4.2　形式很重要
3.4.3　制造氛圍
3.4.4　案例賞析 1
3.4.5　案例賞析 2
第 4 章 H5 動效解密
4.1 何為動效
4.1.1　動畫與動效
4.1.2　MG 動畫與動效
4.1.3　交互與動效
4.2 為何 H5“無動效不歡”
4.2.1　有趣加載治百病
4.2.2　絲滑柔順的轉(zhuǎn)場
4.2.3　一眼就看懂的引導(dǎo)
4.2.4　反饋動效很有必要
4.2.5　讓人驚喜的動態(tài)視覺
4.2.6　動畫的魅力
4.3 H5 必備的運(yùn)動法則
4.3.1　基本運(yùn)動規(guī)律
4.3.2　貝塞爾曲線那點(diǎn)事兒
4.3.3　不可忽視的反饋與夸張
4.3.4　情緒的重要性
4.3.5　空間感
4.3.6　節(jié)奏
4.4 H5 與電影
4.5 案例解析
4.5.1　《里約小人大冒險(xiǎn)》
4.5.2　《2016 請回答》
4.5.3　《滑向童年》
4.5.4　《紀(jì)念哈利·波特 20 周年》
參考資料及延伸閱讀