网易首页 > 教育频道 > 正文

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

0
分享至
这是一本关于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丁磊先生对匠人精神的解释。

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

相关推荐
热点推荐

中国“首富”再换人,他身价4100亿,等于2个丁磊3个王健林

ERP之家
2021-01-26 20:10:02

西伯利亚冻土层出土4万年前毛犀牛首次亮相解冻,或用于克隆

南方都市报
2021-01-27 13:22:07

伊布怂了!涉嫌种族歧视卢卡库,国米锋霸怒斥打爆大奉先的头

代古龙侃球
2021-01-27 08:26:03

克莱晒科比将其晃倒图致敬:他当时跟我说“坐那儿吧小兄弟”

直播吧
2021-01-27 09:03:09

今天,又一地突发调控新政,炒房客泪崩…成都购房者可以安心了!

直击成都楼市
2021-01-27 20:01:35

“掏肠恶魔”乔建国落网记

何乐生活
2021-01-24 07:17:27

上海一女子独自养儿14年,前男友探望被拒,孩子:暂不打算认爹!

民生有看点
2021-01-27 11:30:04

苹果ios14.4更新啦!这些小细节有了改变,你愿意升级吗?

权威科技控
2021-01-27 18:13:54

袁泉真是行走的“超模”!穿黑色羽绒服配雪地靴,素颜也有国际范

蓓小西
2021-01-27 13:58:14

回到过去杀了自己的外祖母,你还存在吗?这个悖论终于被破解了

闽南大侠
2021-01-27 10:23:07

肝开始癌变时,皮肤通常会给出“暗示”,别不在意,拖到中晚期

生活大火锅
2021-01-27 18:27:33

王晓晨官宣结婚?

八姐论八卦
2021-01-26 23:01:03

为什么可乐十多年了还是三元一瓶?

超级数学建模
2021-01-27 09:45:05

张恒父亲提交新录音 打破了郑爽的网红梦 可他不懂得见好就收

阿呆爱娱乐
2021-01-27 13:18:41

什么事归你们警察管?

警界君
2021-01-03 16:46:48

19岁女孩全身瘫痪,被男邻居们轮着上门照顾,人性的弱点暴露无遗

五美吟
2020-12-21 09:06:09

22万!全新第十五代皇冠杀回来了,超高颜值秒杀奥迪A6与宝马5系!

热血汽车资讯
2021-01-25 21:50:45

下午13点!上港高层再现争议言论:中国足协遭质疑,球迷骂声一片

我爱国足
2021-01-27 13:28:50

那个帮张子强送6天饭,分得1500万巨款的饭馆老板,后来结局如何

于叔情感社
2021-01-27 05:29:09

王菲真要命,宽毛衣加大肥裤再配大红鞋?一般人真驾驭不了!

小智星娱师
2021-01-25 15:00:57
2021-01-27 22:08:52

头条要闻

山东金矿爆炸迟报30小时 国务院要求"给社会个交代"

头条要闻

山东金矿爆炸迟报30小时 国务院要求"给社会个交代"

体育要闻

大批民众纪念科比 父亲带女儿一同缅怀

娱乐要闻

华谊千金王文也晒男友视角照秀恩爱

财经要闻

科技要闻

盖茨:新冠预计造成28万亿美元经济损失

汽车要闻

中期改款Q5L/国产A7L领衔 2021奥迪新车规划

态度原创

本地
教育
旅游
亲子
公开课

本地新闻

F1电竞,女司机的操作就...离谱!

教育要闻

全城血拼学区房背后 有人成立“业主补课队”拉动房价

旅游要闻

中国南部地区的秘境,纯净的自然风光!

亲子要闻

吃一顿相当喝6桶地沟油,许多家长还盲目喂娃吃

公开课

美国小姐姐:我见过太多假精致的中国年轻人

×