网易传媒设计中心隆重推出《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
发贴
为您推荐
  • 推荐
  • 娱乐
  • 体育
  • 财经
  • 时尚
  • 科技
  • 军事
  • 汽车

烈犬突袭!妈妈护6岁女儿被咬出血窟窿 狗被主人连夜送走

新闻 烈性犬 大型犬
|
新民晚报
16小时前
21282 跟贴21282

路透:中国准备对谷歌发起反垄断调查

新闻 反垄断 谷歌
|
观察者网
4小时前
0 跟贴0

2020年首虎被双开:敷衍应付中央抗疫决策

新闻 张志南 常委
|
长安街知事
9小时前
2461 跟贴2461

江苏四企业家3亿投资黑龙江海林被“埋雷”,项目停滞十年两人已

新闻 海林 海林市
|
上游新闻
10小时前
13494 跟贴13494

发糕吃了一半感觉有点硬,后来扯出一段壁虎?

新闻 发糕 葡萄干
|
1818黄金眼
6小时前
3104 跟贴3104

深圳市盐田区人民检察院以涉嫌偷越边境罪批准逮捕犯罪嫌疑人李某

新闻 人民检察院 偷越
|
深圳市盐田区人民检察院
6小时前
0 跟贴0

已进隔离免疫区,蒙古国捐赠的3万只羊要来了

新闻 蒙古国 扎门乌德
|
人民日报国际
6小时前
341 跟贴341

阿塞拜疆和亚美尼亚冲突土耳其为何会介入?

新闻 阿塞拜疆 亚美尼亚
|
观察者网
16小时前
38 跟贴38

痛心!被前夫纵火焚烧重度烧伤 网红拉姆不幸去世

新闻 拉姆 烧伤
|
红星新闻
2小时前
5821 跟贴5821

外媒:印度在中印边境地区加紧路桥建设 预算加倍

新闻 中印 印度
|
环球时报-环球网
16小时前
0 跟贴0

美F-35与加油机碰撞 F-35坠毁 飞行员跳伞幸存

新闻 坠毁 海军陆战队
|
网易军事
17小时前
195 跟贴195

中国外交部发言人汪文斌也开通脸书账号了,他的最新一条帖文是

新闻 汪文斌 外交部
|
环球网
6小时前
0 跟贴0

首艘!中国最大万吨级海巡船9月29日在广州出坞

新闻 海事局 海巡船
|
环球网
16小时前
0 跟贴0

印度副总统奈杜新冠病毒检测呈阳性

新闻 副总统 新冠病毒
|
新华国际
6小时前
0 跟贴0

烈士纪念日向人民英雄敬献花篮仪式在京隆重举行

新闻 习近平 花篮
|
央视网
5小时前
1111 跟贴1111

亚美尼亚国防部称:已摧毁阿塞拜疆137辆装甲车辆

新闻 阿塞拜疆 亚美尼亚
| 海外网
18小时前
472 跟贴472

自称“桃花源中人”的70岁“老虎”,在节前被处理了

新闻 云公民 云光中
|
北京青年报政知道
3小时前
0 跟贴0

详解台湾军队空防力量:老旧装备多 性能不稳定

新闻 导弹 战斗机
|
观察者网
16小时前
0 跟贴0

离异女两年交了近300个“男友”,每次被戳穿后都送祝福

新闻 诈骗罪 离异
|
现代快报
11小时前
41 跟贴41

台老兵叮嘱儿子:若两岸开战 一枪干掉让你冲锋的长官

新闻 台军 美军
|
环球时报
17小时前
2180 跟贴2180

男子将3岁儿子喂安定药后装入编织袋!更可恨的是…

新闻 监护权 福利院
|
杭州交通918
10小时前
2997 跟贴2997

亚美尼亚和阿塞拜疆双方战损实录汇总(上)

新闻 阿塞拜疆 亚美尼亚
|
网易军事
2天前
0 跟贴0

亚阿冲突继续:亚指责土耳其动用F16战机

新闻 土耳其 国防部
|
观察者网
12小时前
0 跟贴0

环球:一团糟!这是美国有史以来最糟糕的一次辩论

新闻 唐纳德·特朗普 拜登
|
环球网
13小时前
598 跟贴598

土耳其:如果阿塞拜疆寻求军事支持,土将"做必要的事"

新闻 阿塞拜疆 亚美尼亚
|
环球时报-环球网
9小时前
0 跟贴0

习近平在联合国生物多样性峰会上发表重要讲话

新闻 习近平 生物多样性
|
央视网
3小时前
0 跟贴0

向着中华民族伟大复兴的光辉彼岸奋勇前进

新闻 复兴 习近平
|
求是网
10小时前
6 跟贴6

有传言武器弹药经伊朗进入亚美尼亚 遭伊朗否认

新闻 亚美尼亚 伊朗
|
环球时报-环球网
12小时前
0 跟贴0

江苏警方通报“女子遭迷奸”:4名犯罪嫌疑人全部抓获

新闻 犯罪 强奸
|
江宁公安在线
15小时前
710 跟贴710

李海默:《纽约时报》深挖税务问题,能伤到特朗普吗?会秋后算账

新闻 唐纳德·特朗普 李海默
|
观察者网
18小时前
45 跟贴45

假期加班生产iPhone12 入职奖励9000元 富士康回应

新闻 富士康 iphone12
| 网易财经
3小时前
120 跟贴120

解放军2架军机一度"距高雄仅80公里" 台防空导弹追监

新闻 反潜机 侦察机
|
环球网
19小时前
569 跟贴569

蓬佩奥称美正构建反华联盟 外交部:他等不到那天了

新闻 蓬佩奥 东盟
|
中华人民共和国外交部
19小时前
7461 跟贴7461

印度成功试射一枚增程版“布拉莫斯”超音速巡航导弹

新闻 布拉莫斯 巡航导弹
|
新华网
2小时前
0 跟贴0

河北马戏之王:江湖不易,我险些被脱衣舞厅干倒闭

新闻 马戏团 马戏
| 看客
2天前
0 跟贴0

亚美尼亚军方:已摧毁阿塞拜疆多枚重型喷火器

新闻 阿塞拜疆 亚美尼亚
| 海外网
5小时前
0 跟贴0

亚美尼亚和阿塞拜疆冲突持续 双方发布摧毁对方军事设施信息

新闻 亚美尼亚 阿塞拜疆
|
央视新闻客户端
6小时前
0 跟贴0

日本10月起将分阶段下调159个国家和地区旅行警告

新闻 日本外相 旅行警告
|
中国新闻网
16小时前
0 跟贴0

南航中秋国庆计划增班2500余班次

新闻 国庆 南航
|
民航资源网
16小时前
0 跟贴0

假期加班生产iPhone12 入职奖励9000元 富士康回应

新闻 富士康 iphone12
| 网易财经
3小时前
120 跟贴120
+ 加载更多新闻
×

【TED】怎样学外语才最有效果?

这所985拟新规:博士毕不了业,可转硕士?

态度原创

热点新闻

网易号

查看全部
阅读下一篇

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