具体描述
这是一本关于H5设计方法和设计流程的书,作者为近年来佳作频出的网易传媒设计中心,其代表作品有《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。《H5匠人手册:霸屏H5实战解密》通过交互、视觉和动效三部分内容,从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行论述,通过理论讲解和案例分析,详细介绍了提升 H5 设计质量的方法和一些实用性强的手段,帮助读者建立起一个更加完整的 H5 设计思维体系。本书适合从事 H5 相关工作的交互设计师、视觉设计师、动效设计师阅读,也可供致力于 H5 设计的初学者和爱好者参考。
作者简介
目录信息
1.1 H5 的前身今世
1.1.1 H5 是什么
1.1.2 H5 的阶段性发展
1.1.3 我们为什么做 H5
1.2 怎样的 H5 才是好的 H5
1.2.1 情感共鸣 直击内心
1.2.2 构思新奇 有想象力
1.2.3 交互炫酷 有表现力
1.2.4 技术创新 新鲜有趣
1.2.5 加入鼓励 动力十足
1.2.6 反客为主 促进回流
2 章 H5 交互流程剖析
2.1 一个 H5 策划的开始,源于好的沟通
2.1.1 邀请参与者开会
2.1.2 明确项目背景
2.1.3 策划常见问题
2.2 策划评估 1:动机——是否能在短时间内吸引用户注意力并完成阅读
2.2.1 利用心流理论控制节奏
2.2.2 利用 Hook 理论引导用户
2.3 策划评估 2:框架——展现形式是否符合策划主题
2.3.1 展示型
2.3.2 引导型
2.3.3 操作型
2.4 策划评估 3:任务——是否提炼出核心任务
2.5 策划评估 4:交互——交互方式与策划是否匹配
2.6 策划评估 5:原则——是否符合移动端的交互原则
2.6.1 简化层级,结构扁平化
2.6.2 降低阅读门槛,减少认知成本
2.6.3 H5 要注意分享属性
2.6.4 一定要注意额外规范
2.7 产出 1:界面落实
2.7.1 快
2.7.2 细
2.8 产出 2:完善细节
2.8.1 关于分享控件与回流入口
2.8.2 文案配合专题
2.8.3 适当的提示
2.8.4 H5 的返回设置
2.8.5 H5 的分段设置
2.8.6 增加彩蛋
2.9 产出 3:沟通跟进,绕坑而行
2.9.1 加载与控制文件大小
2.9.2 避免手势冲突
2.9.3 输入框
2.9.4 播放器
2.9.5 手机适配(iPhone X)
2.9.6 其他设备端打开 H5
2.9.7 微信诱导分享
2.10 产出 4:测试上线与数据监测
2.11 常用交互手段
2.11.1 结合手势激发 H5 亮点
2.11.2 利用好硬件给 H5 添彩
2.11.3 新科技引体验
3 章 H5 视觉套路
3.1 制作一个 H5,视觉设计师要做什么
3.2 创意的视觉表现
3.2.1 要有目的的创意
3.2.2 创意形式千千万
3.2.3 没有灵感?没关系
3.3 执行——手头功夫很重要
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 丝滑柔顺的转场
4.2.3 一眼就看懂的引导
4.2.4 反馈动效很有必要
4.2.5 让人的动态视觉
4.2.6 动画的魅力
4.3 H5 的运动法则
4.3.1 基本运动规律
4.3.2 贝塞尔曲线那点事儿
4.3.3 不可忽视的反馈与夸张
4.3.4 情绪的重要性
4.3.5 空间感
4.3.6 节奏
4.4 H5 与电影
4.5 案例解析
4.5.1 《里约小人大冒险》
4.5.2 《2016 请回答》
4.5.3 《滑向童年》
4.5.4 《纪念哈利·波特 20 周年》
参考资料及延伸阅读
· · · · · · (收起)
读后感
用户评价
**评价四:** 一本真正意义上的“匠人”之作!《H5匠人手册》这本书,让我看到了作者在H5开发领域深厚的功底和独到的见解。它并非仅仅堆砌技术名词,而是通过一种“解构”的方式,将复杂的技术难题剖析得淋漓尽致,再辅以精巧的解决方案。书中对“性能优化”的讲解,真的是我读过的最系统、最深入的。作者不仅列举了各种常见的性能瓶颈,更重要的是,他深入浅出地分析了产生这些问题的根源,并提出了切实可行的优化策略。我曾经花费大量时间去摸索解决性能问题,而这本书则为我提供了一条清晰的路径,节省了我大量的试错成本。此外,书中对“可维护性”和“扩展性”的强调,也让我受益匪浅。它让我认识到,一个优秀的前端项目,不仅要能满足当前的需求,更要为未来的发展打下坚实的基础。这绝对是一本值得所有H5开发者珍藏的佳作。
**评价一:** 这本书的出版,简直是给H5前端开发者们送来了一份厚礼!作为一名在H5领域摸爬滚打多年的老兵,我深知一个好的项目背后,离不开对每一个细节的极致追求。而《H5匠人手册》恰恰捕捉到了这一点,它不仅仅是一本技术教程,更像是一本凝聚了无数实践经验的“武功秘籍”。我尤其欣赏书中对性能优化和用户体验的深入剖析,那些看似微不足道的细节,在书中却被娓娓道来,并辅以详实的案例和代码示例,让人豁然开朗。读完这部分,我感觉自己仿佛打开了新世界的大门,过去那些困扰我的性能瓶颈,似乎都找到了破解之道。而且,书中并没有止步于技术本身,还融入了对项目管理、团队协作以及如何培养“匠人精神”的探讨,这让我受益匪浅。它让我意识到,做一个优秀的前端工程师,不仅需要扎实的技术功底,更需要一种精益求精的态度和对用户负责的使命感。总而言之,这是一本值得反复品读、常备手边的宝藏。
**评价三:** 作为一名H5领域的初学者,《H5匠人手册》简直是我的“引路人”。我一直对H5开发充满了兴趣,但又不知道从何下手,市面上的资料碎片化严重,让人难以形成系统的知识体系。这本书的出现,完美地填补了我的需求。它以一种循序渐进的方式,从基础概念讲起,逐步深入到高级技巧,让我能够清晰地理解H5开发的整个流程。我尤其对书中关于“响应式布局”和“跨平台开发”的章节印象深刻,作者用非常通俗易懂的语言解释了这些复杂的技术,并提供了大量的实践指导,让我能够很快地掌握这些技能。读这本书,我感觉就像是在一位经验丰富的老师的指导下学习,不仅学到了知识,还培养了解决问题的能力。它让我对H5开发充满了信心,也让我看到了未来发展的方向。
**评价五:** 读完《H5匠人手册》,我最大的感受就是“醍醐灌顶”。作为一名在H5领域工作多年的开发者,我一直觉得自己已经掌握了大部分的核心技术,但这本书却让我看到了更广阔的天地。它不仅仅是在教你如何写代码,更是在传授一种“开发哲学”。我尤其喜欢书中关于“用户至上”和“持续迭代”的理念,这些看似朴素的道理,在实际开发中却往往容易被忽视。作者通过丰富的案例,生动地阐述了如何将这些理念融入到H5开发的每一个环节,让我对“匠人精神”有了更深刻的理解。这本书的语言风格也非常独特,既有严谨的技术论述,又不失幽默和趣味性,读起来一点也不枯燥。它让我重新燃起了对H5开发的激情,也让我对未来的职业发展有了更清晰的规划。这是一本能够真正改变你思维方式的书。
**评价二:** 说实话,当初拿到《H5匠人手册》的时候,我并没有抱太大的期望,市面上类似的图书很多,真正能打动人的却不多。然而,这本书却给了我一个大大的惊喜。它并没有像其他技术书籍那样枯燥乏味地罗列API和概念,而是通过一个个生动的故事和鲜活的案例,将H5开发的各种技巧和原理娓娓道来。我特别喜欢书中关于“微交互设计”的那几章,作者用非常巧妙的方式解释了如何通过细微的动画和反馈来提升用户的操作体验,读起来就像在听一位经验丰富的UX设计师分享他的心得。而且,书中对不同设备和浏览器的兼容性问题也进行了深入的探讨,这对于我们这种需要覆盖广泛用户群体的开发者来说,简直是福音。我感觉,这本书不仅仅是教我“怎么做”,更是教我“为什么这么做”,以及“如何做得更好”。它让我重新审视了自己的开发习惯,也激发了我更多的创造力。
没有学习到🐑
从设计的角度来还原H5霸屏的原因,和市场运营的思路还是有区别,但类似Hook,心流理论是普天之下的共享。网易这些年被称为了现象级刷屏公司,这也是花了近100元来买书的探究的原因,但可能其中一个被人忽视的原因在于网易真的做了很多H5(不少鲜为人知),这样的努力下有刷屏现象也并不觉得奇怪…勤奋真的很重要…为何半夜煲起了鸡汤…
从设计的角度来还原H5霸屏的原因,和市场运营的思路还是有区别,但类似Hook,心流理论是普天之下的共享。网易这些年被称为了现象级刷屏公司,这也是花了近100元来买书的探究的原因,但可能其中一个被人忽视的原因在于网易真的做了很多H5(不少鲜为人知),这样的努力下有刷屏现象也并不觉得奇怪…勤奋真的很重要…为何半夜煲起了鸡汤…
感觉一般吧,不太实用,就是一些案例展示
冲着网易二字,就不能不买。案例很多,干货也有,但讲解较浅,够不上解密二字……