网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

2018-08-20 10:56:48 来源: 网易 举报
0
分享到:
T + -
这是一本关于H5设计方法和设计流程的书,作者为近年来佳作频出的网易传媒设计中心,其代表作品有《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。

《H5匠人手册:霸屏H5实战解密》通过交互、视觉和动效三部分内容,从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行系统论述,通过理论讲解和案例分析,详细介绍了提升H5设计质量的方法和一些实用性强的手段,帮助读者建立起一个更加完整的H5设计思维体系。本书适合从事H5相关工作的交互设计师、视觉设计师、动效设计师阅读,也可供致力于H5设计的初学者和爱好者参考。

网易传媒设计中心出书啦!封面是这样子的。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

这是一本什么样的书

世界杯陪伴大家度过了一个特别的夏天,虽已落幕,但看球时激动的心情和欢聚、熬夜、啤酒、烧烤等各种因素共同浇灌的记忆,注定值得人回味。而这期间,相信大家的朋友圈也被不少关于世界杯的H5刷屏了。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

它们有的勾起我们个人对世界杯的记忆,感慨时代变迁和足球这项体育事业拥有的凝聚力;有的则通过好玩的小游戏,将本届世界杯各种元素混搭,生成专属“幸运足球”,参与感十足;还有的H5“穿越”地将世界杯和古代宫廷联系在一起,通过碰撞擦出火花,让人捧怀。

观看之余,你是否会好奇这些生动有料、趣味十足的H5是怎样做出来的呢?

本书就是针对这个问题进行“解密”。全书共分为4章,第1章主要讲述H5的概念、阶段性发展等基础知识,以及优秀H5应具备的6大特征;第2章剖析H5交互流程;第3章讲解H5设计的视觉套路;第4章则针对H5中的动效进行深入解读。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

书中的案例还可以扫码观看,理论和实例结合讲解,方便理解。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

第2章的开篇引领全文,告诉你一个H5的诞生要经历以下阶段:项目沟通、策划评估、产出。当然,在每一个阶段中,还有不少细分的环节,如图所示。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

以策划评估阶段为例,首先要在“动机”上做足文章,让用户在短时间内被吸引,直到完成整个H5的观看。为了达到这个目的,书中详细讲解了控制节奏的“心流理论”和引导用户的“HOOK理论”。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

8区间心流体验模型图

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

Hook理论模型图

吸引用户的机制确定好之后,还需要选择合适的框架,即H5展现形式,使其符合策划主题。按照交互的复杂程度,书中将展现形式归纳为以下三类:展示型、引导型、操作型,并从5个维度分析各类形式的特点,帮助你在第一时间找到最佳方式。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

确定展现形式之后,则需要找到H5的主要内容和目标人群,提炼核心任务。在此,书中更是提出了“白三角”的方法,将主要内容和目标人群喜欢的东西直接拼在一起做配对,激发想象力。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

最后,还要注意匹配交互方式和遵循交互原则。例如,为了适应移动端最好做到结构扁平化,而书中提出得以下几招能帮你减少层级:利用切换并列、设置模态化浮层弹窗、一镜到底等。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

以上还只是第2章“交互流程剖析”的部分内容。在第3章中,书中会向你展示各种视觉设计的创意套路,例如利用手绘插画、历史照片完成创意。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

设计师也现身说法,辅以案例,详细分析了项目中资料整理、方案优化、分镜及背景绘制的完整过程。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

而在第4章,不仅将动效与动画、电影、交互设计的渊源娓娓道来,还分析了动效在各大领域的运用,并重点结合具体案例讲解交互中的加载、转场、引导、反馈,让你充分了解动效的魔力,明白为何H5“无动效不欢”。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

当然,有趣的动效背后,一定也是遵守了物体固有的物理法则,如受力规律、波形曲线运动规律等,只有掌握了基本运动规律,才能制作出流畅又合理的动效。例如在《心灵复苏大保健》这个H5项目中,多处动效都使用了贝塞尔曲线。结合案例的讲解,让这些理论知识不那么枯燥,简明易学。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

阅读完全书,你会从交互、视觉、动效三大方面全面提高设计效能,掌握提升H5设计质量的方法,建立起更加完整的H5设计思维体系。

关于作者

网易传媒设计中心拥有交互用研团队、视觉设计团队近30余人,各团队除了专注自身领域,又时时融合在一起,以科学的设计方法和流程打造高精尖产品。从H5迅猛发展以来,团队打造出了多款页面浏览量上千万的H5产品,刷爆朋友圈, 例如《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

《里约小人大冒险》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

《滑向童年》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

《二零一七娱乐圈画传》

为什么要写这本书

网易传媒设计中心于2015年开始H5业务的设计工作,在积累了大量的案例经验之后,于2016年底,面向全公司的设计和编辑做了名为“如何做一个涨工资的H5的系列培训,协同编辑、技术团队一起,从策划、交互、视觉、动效、前端5个关键环节设计了主题化课程,在内部取得了不错的反响。

2017年6月,团队在IXDC国际体验设计大会上做了“霸占社交媒体的H5是如何诞生的”工作坊,全面、系统地讲解了H5的交互、视觉、动效的方法和应用,吸引了众多设计师参与其中。工作坊的授课内容有幸被清华大学出版社关注,于是有了这本《H5匠人手册:霸屏H5实战解密》的诞生。

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

网易传媒设计中心隆重推出《H5匠人手册:霸屏H5实战解密》

这本书适合哪些人

本书适合从事H5相关工作的交互设计师、视觉设计师、动效设计师阅读,也可供致力于H5设计的初学者和爱好者参考。

如何买到本书

可前往京东商城搜索“H5匠人手册”进行购买

写在最后

“他们心存理想,不是简单迎合或玩弄市场 , 而是根据自己的独特审美和专注精神进行创新、创作,给市场带来许多影响力深远的产品和作品。”这是网易集团董事长兼CEO丁磊先生对匠人精神的解释。

希望我们以匠人之心呈现的这本书,能够为读者带来收获。我们也希望读者能从这本书中获益,以匠人精神要求自己,成为一名优秀的复合型设计师!

志秋 本文来源:网易 责任编辑:马志秋_NQ2478
分享到:
跟贴0
参与0
发贴
为您推荐
  • 推荐
  • 娱乐
  • 体育
  • 财经
  • 时尚
  • 科技
  • 军事
  • 汽车
+ 加载更多新闻
×

最短时间让你张口流利说韩语

中高考取消考试大纲 整本书都成了重点

态度原创

热点新闻

阅读下一篇

返回网易首页 返回教育首页