新書推薦：
《
万历四大征（全两册）
》
售價：HK$
117.6
《
凝望：我的摄影与人生
》
售價：HK$
129.6
《
工业机器人从基础到实战
》
售價：HK$
153.6
《
重症产科.1
》
售價：HK$
71.8
《
财之道丛书·表层的真理：当代经济学与社会
》
售價：HK$
105.6
《
世界服饰艺术史
》
售價：HK$
309.6
《
海外中国研究·卿本著者：明清女性的性别身份、能动主体和文学书写
》
售價：HK$
81.6
《
日耳曼通识译丛：近代哲学：从笛卡尔到康德
》
售價：HK$
32.2
|
| 編輯推薦： |
|
随着朋友圈的普及，H5也成为当今非常流行的一种媒介：重大盛事、娱乐新闻、时令风俗一支支H5以此为素材或浓墨重彩，或剑走偏锋，并结合新兴技术如VR、人脸识别等，赋予事件本身更多的趣味，在博得一笑或深思之余，也让人忍不住想分享出去。但H5也存在天生的缺陷，即传播热度来得快去得也快。台上十分钟，台下十年功，每一支短短的H5背后却蕴含着作者大量的心血。《H5匠人手册：霸屏H5实战解密》正是为此而来，通过实例剖析，让作品背后的设计精髓更长久地流传。相信作者团队沉淀的干货会对读者有所启发，帮助你设计出更加优秀的H5！
|
| 內容簡介： |
|
这是一本关于H5设计方法和设计流程的书，作者为近年来佳作频出的网易传媒设计中心，其代表作品有《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。《H5匠人手册：霸屏H5实战解密》通过交互、视觉和动效三部分内容，从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面进行系统论述，通过理论讲解和案例分析，详细介绍了提升 H5 设计质量的方法和一些实用性强的手段，帮助读者建立起一个更加完整的 H5 设计思维体系。本书适合从事 H5 相关工作的交互设计师、视觉设计师、动效设计师阅读，也可供致力于 H5 设计的初学者和爱好者参考。
|
| 關於作者： |
|
网易传媒设计中心拥有交互用研团队、视觉设计团队近30余人，各团队除了专注自身领域，又时时融合在一起，以科学的设计方法和流程打造高精尖产品。我们以不断提升网易产品用户体验，带给用户极佳的使用感受为目标而努力。目前设计中心服务的范围涵盖网易门户旗下所有内容部门，包括新闻、财经、体育、娱乐、科技、直播、原创等多条业务线，并从H5迅猛发展以来，打造出了多款页面浏览量上千万的H5产品，刷爆朋友圈， 例如《娱乐圈画传》《里约小人大冒险》《我是一只快乐的羊驼》《滑向童年》等。
|
| 目錄：
|
|
第 1 章 铺垫1.1H5 的前身今世1.1.1 H5 是什么1.1.2 H5 的阶段性发展1.1.3 我们为什么做 H51.2怎样的 H5 才是好的 H51.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 其他设备端打开 H52.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 案例赏析 13.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.3H5 必备的运动法则4.3.1 基本运动规律4.3.2 贝塞尔曲线那点事儿4.3.3 不可忽视的反馈与夸张4.3.4 情绪的重要性4.3.5 空间感4.3.6 节奏4.4H5 与电影4.5案例解析4.5.1 《里约小人大冒险》4.5.2 《2016 请回答》4.5.3 《滑向童年》4.5.4 《纪念哈利波特 20 周年》参考资料及延伸阅读
|
| 內容試閱：
|
行业背景以 PC 为载体的门户网站时代渐行渐远，所幸网易传媒在移动端的布局较早，与被迫转型的友商相比略显从容。但作为业务部门的我们所面临的转型压力丝毫未减，设备终端、用户使用场景、交互手段乃至用户群体的突变，要求我们在业务形态上也应当有快速的转变。在传统 PC 时代，我们的业务主形态是各种趋于杂志化的专题，这种近乎纸媒的传播形态移植到移动端显然不合时宜。2014 年 10 月 28 日，W3C 的 HTML 工作组正式发布了 HTML5 的正式推荐标准（W3C Recommendation），HTML5标准的确立让音视频脱离了播放器和插件的束缚，在 Web 中的呈现更加便捷。而在PC 时代，低版本浏览器在很长一段时间都占据着较高的市场份额，Web 形态受制于浏览器性能、标准、兼容性等综合因素，因此形态相对单一、简单。移动时代虽然也存在类似问题，但用户终端的迭代速度与技术性能的提升步调相对一致，让更多的交互和用户体验形态成为可能。于是 H5 这种移动传播形态在设备转换和技术革新的双重催化下，应运而生。
成书历程网易传媒设计中心于 2015 年开始 H5 业务的设计工作，在积累了大量的案例经验之后，我们于 2016 年底，面向全公司的设计和编辑做了名为如何做一个涨工资的 H5的系列培训，协同编辑、技术团队一起，从策划、交互、视觉、动效、前端 5 个关键环节设计了主题化课程，在内部取得了不错的反响。2017 年 6 月，我们在 IXDC 国际体验设计大会上做了霸占社交媒体的 H5 是如何诞生的工作坊，从设计角度，全面、系统地讲解了 H5 的交互方法，视觉设计思路、表现手法，动效的基础知识、作用和工具运用，吸引了众多设计师参与其中。我们的授课内容有幸被清华大学出版社关注，并且我们的内容价值也得到了充分的认可，于是有了这本《H5 匠人手册：霸屏 H5 实战解密》的诞生。他们心存理想，不是简单迎合或玩弄市场 , 而是根据自己的独特审美和专注精神进行创新、创作，给市场带来许多影响力深远的产品和作品。这是网易集团的董事长兼 CEO 丁磊对匠人精神的解释。匠人精神既是消费升级品牌创新的大时代要求，也是网易旗下各产品线一直标榜的核心理念，代表着我们对作品精益求精的追求，我们也希望读者能从这本书中获益，以匠人精神要求自己，成为一名优秀的复合型设计师。在阅读本书之前，希望您能了解以下几个问题：Why、Who、What、How。
Why我们为什么要做 H5这是由移动传播特性决定的。纸媒时代，用户角色是单纯的读者，具有信息传播单向、被动接受、近乎零互动等特点。PC 时代，用户可以通过跟帖等形式与媒体进行简单互动。进入移动时代，微博、微信等社交媒体让用户从单一的读者变成读者兼传播者，甚至是内容生产者，移动终端的便携性和移动网络的普及也彻底解放了 PC 终端的桌面束缚。媒体传播形态也由单向传播变成了社交化传播。H5 将图片、文字、视频、音频与交互、游戏化、用户 URC 等多种媒体形态完美融合，与 App 相比，基于 Web 的产品形态决定了 H5 社交传播的可能性，具有强互动、可监测、跨平台、易传播等优势，所以H5在2年时间内迅速得到互联网用户、商家及业界的广泛认可，爆款 H5 对媒体品牌价值、商家产品调性都有很大的提升，于是无论是网络媒体还是移动广告都对这种形式趋之若鹜。
Who用户是谁H5 以媒体渠道实现冷启动，在社交网络产生流量分发，最终达到爆发效应。以网易新闻为例，核心型用户为 70 后至 85 后，成长型用户为 85 后至 95 后，潜力型用户为 95 后至 00 后，我们的 H5 目标受众为 85 后至 00 后的成长型和潜力型用户群体。在社交渠道，根据微信的相关报告显示，60% 的微信用户是年轻人（15~29岁），每个年轻人平均有 128 个好友。所以，吸引这部分人的注意，并让其产生主动传播欲望，就能在社交网络产生蝴蝶效应，引发爆款的产生。
What优质 H5 的评判标准一个成功的 H5 需要具备以下特质：主题具备一定的传播性，能够触及当下热点，用户在看到标题后有点击欲，信息传播上及时有效，能激发用户的想象力；视觉层面有表现力、有张力，移动环境下的浏览习惯具有碎片化、目的性不强等特点，视觉感知往往是吸引用户停留的首要因素；产品形态及交互体验上有创新点，简单易用，用户能快速理解交互逻辑，顺畅完整地完成全部交互过程，并且通过交互产生与用户关联的个性化信息。以上三点最终形成用户精神体验上的获得感、愉悦感，产生情感共鸣，进而形成社交分享意愿。H5 的成功标准可归纳为三个逐层递进的层级：第一层级，信息传播准确有效到达、交互顺畅舒适；第二层级，用户的参与感强，分享意愿强；第三层级，能够引发用户情感共鸣，提升产品的品牌调性。
How怎么做一个 H5这是本书要为大家解决的核心问题，我们会从产品策划、用户心理、交互手段、视觉渲染、动效运用、移动界面设计常识等方面来系统论述讲解，通过理论和案例分析详细介绍提升 H5 设计质量的方法和一些实用性强的手段，同时帮助大家建立一个更加完整的 H5 设计思维体系。第 2 章在策划部分重点讲解如何利用心流理论控制阅读节奏和如何利用Hook 理论控制交互节奏，引导用户完成整个浏览及操作，并从心理学和设计学的理论角度共同论述交互框架的分类和选取、核心任务的提炼、合适交互模式的选取、常用的 H5交互规范、移动交互原则、需要关注的核心问题、如何引导用户分享回流等。在梳理完 H5 的工作流程、逻辑和框架后，在具体交互层面，我们讲解了产出的要求、细节的完善、需要避免的常见错误。第 3 章结合实例从创意的视觉表现出发，讨论视觉设计师应该如何进行有目的的创意，总结分析了当下流行的几类 H5 视觉表现方式的优点，以及在使用这几类表现手法时要规避的地方和要注意的一些问题。此外，还根据 H5 的内容形式进行分类，对纯信息展示、游戏互动两类 H5 的视觉表现方法进行了分析，重点介绍了小游戏以及插画这两类 H5 的视觉套路。第 4 章解释了动效和动画的相同点和不同点，以及动效在 H5 中的加载、转场、视觉引导、操作反馈等核心作用，并结合案例对动效的基本运动法则进行讲解。本书将结合网易传媒设计中心以及其他友商制作的一些 H5 案例，总结成功或失败的经验，并由此归纳一套行之有效的流程方法，分享给读者，希望能对读者起到帮助。最后对本书的合作作者表示感谢：徐琳琳、李唯、马然、张天雨参与了第 1章和第 2 章的编写；陈德进、谢斐、王彦淇、李志、张议文参与了第 3 章的编写；王锐、孟帅、沈号参与了第 4 章的编写。
|
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
