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

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

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

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

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


这是一本什么样的书

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




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

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

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





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



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


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


8区间心流体验模型图

Hook理论模型图

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


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


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



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



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




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


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




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

关于作者

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


《里约小人大冒险》

《滑向童年》

《二零一七娱乐圈画传》

为什么要写这本书

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

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


这本书适合哪些人

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

如何买到本书

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

写在最后

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

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

相关推荐
热点推荐
吃个大瓜!要多扎心有多扎心!具俊晔开着汪小菲台湾购买的豪车!

吃个大瓜!要多扎心有多扎心!具俊晔开着汪小菲台湾购买的豪车!

拿数据说话
2024-04-22 15:22:41
奚梦瑶送娃上学,赌王长孙读什么学校?

奚梦瑶送娃上学,赌王长孙读什么学校?

热闹吃瓜大姐
2024-04-22 20:44:45
妹妹被局长开除后摆地摊,五年后,哥哥调来担任市委书记

妹妹被局长开除后摆地摊,五年后,哥哥调来担任市委书记

乔生桂
2024-04-20 19:44:55
这年头,还没有背上房贷,都是什么人?

这年头,还没有背上房贷,都是什么人?

暖心的小屋
2024-04-22 11:08:59
美军24架无人机闯入我国领空,竟帮中国一大忙,白宫懊悔不已

美军24架无人机闯入我国领空,竟帮中国一大忙,白宫懊悔不已

星辰故事屋
2024-04-19 17:44:02
周杰伦演唱会送给小姐姐的衣服被炒到200万,她不卖,评论区炸锅

周杰伦演唱会送给小姐姐的衣服被炒到200万,她不卖,评论区炸锅

娱乐圈酸柠檬
2024-04-23 13:09:59
欧尔班宣布将阻止欧盟向乌克兰拨款20亿欧元:除非满足我一个条件

欧尔班宣布将阻止欧盟向乌克兰拨款20亿欧元:除非满足我一个条件

探索星空
2024-04-23 12:31:46
后续!河南家长打的是校霸,他妈发声遭全网痛批,学校摊上事了!

后续!河南家长打的是校霸,他妈发声遭全网痛批,学校摊上事了!

鬼菜生活
2024-04-22 22:15:36
王鸥一定想不到,《哈尔滨一九四四》播了6集,自己口碑一夜暴涨

王鸥一定想不到,《哈尔滨一九四四》播了6集,自己口碑一夜暴涨

娱乐圈十三太保
2024-04-23 09:27:38
领导干部任职前公示

领导干部任职前公示

锡望
2024-04-22 15:17:18
台军来真的!大陆战机飞至台海,台立即发射导弹,专家:自寻死路

台军来真的!大陆战机飞至台海,台立即发射导弹,专家:自寻死路

车马点兵V
2024-04-21 17:47:31
蚂蚁集团CEO井贤栋现身周杰伦杭州演唱会

蚂蚁集团CEO井贤栋现身周杰伦杭州演唱会

互联网那些破事
2024-04-22 14:50:58
一场也不让打!新疆男篮2米07大中锋季后赛遭雪藏,邱彪下狠手

一场也不让打!新疆男篮2米07大中锋季后赛遭雪藏,邱彪下狠手

老陆侃球
2024-04-23 14:25:12
张馨予素颜录化妆视频,手比脸黑,假睫毛粘在杯子上被嘲太邋遢!

张馨予素颜录化妆视频,手比脸黑,假睫毛粘在杯子上被嘲太邋遢!

八卦爱侃娱
2024-04-23 14:14:52
穆帅:当年我用罗梅罗找费莱尼战术拿三冠,他们说是灾难赛季

穆帅:当年我用罗梅罗找费莱尼战术拿三冠,他们说是灾难赛季

直播吧
2024-04-22 21:14:25
泽连斯基怒斥西方:口上说制裁俄罗斯,背地里为其提供导弹零部件

泽连斯基怒斥西方:口上说制裁俄罗斯,背地里为其提供导弹零部件

绝密探照灯
2024-04-23 12:38:18
汪小菲真憋屈!汪小菲刚炫完豪车!就被曝两辆豪车都是具俊晔在开

汪小菲真憋屈!汪小菲刚炫完豪车!就被曝两辆豪车都是具俊晔在开

小咪侃娱圈
2024-04-23 15:33:16
回顾女婿性侵岳母,岳母不反抗反而全力配合,被捕后辩称:在治病

回顾女婿性侵岳母,岳母不反抗反而全力配合,被捕后辩称:在治病

百事所谈汇
2024-04-08 18:12:46
女排备战有变,蔡斌摊牌,官宣决定,张常宁遗憾,朱婷或提前回国

女排备战有变,蔡斌摊牌,官宣决定,张常宁遗憾,朱婷或提前回国

东球弟
2024-04-23 13:12:47
新科德甲冠军勒沃库森官推换头像庆祝夺120年队史首座沙拉盘

新科德甲冠军勒沃库森官推换头像庆祝夺120年队史首座沙拉盘

直播吧
2024-04-22 17:31:43
2024-04-23 17:30:44

头条要闻

"消失的她"原型重返泰国:做8次手术 去年才重新站起来

头条要闻

"消失的她"原型重返泰国:做8次手术 去年才重新站起来

体育要闻

快船独行侠G1:猛踹瘸子那条好腿

娱乐要闻

赵丽颖晒照似初恋,拍照疑与儿子分享

财经要闻

千元“特供”酒 猫腻有几何

科技要闻

Meta宣布开放这一系统,自比安卓对抗苹果

汽车要闻

哪吒首款大五座SUV 哪吒L售价12.99万起

态度原创

手机
本地
时尚
教育
公开课

手机要闻

vivo影像品牌命名“蓝图”,官方高管称一语双关

本地新闻

我和我的家乡|潍坊人真是什么都敢往天上放啊

建议中年男人:少穿这3种“假时髦、真土气”冲锋衣,油腻显廉价

教育要闻

洪秀柱问学生如何解决两岸困境,这是排除“武统”选择外最大难题

公开课

睡前进食会让你发胖吗?

无障碍浏览 进入关怀版
×