《H5匠人手册》1：H5交互流程
最近一直在看网易出的《H5匠人手册》，能够全面的了解整个H5的产出流程，视觉实现和动效技巧，里面有很多网易出品的H5实例，干货很足，想要全面了解H5的建议可以买书配合书中的例子仔细体会；整理了其中一部分内容，后续会持续更新。
H5交互流程矩阵图
H5交互流程图H5是为了传播而生的，是为了推广宣传内容、活动或品牌而制作的。目的是尽可能最大化地引导用户分享和回流
1、项目沟通
1.1 邀请参与者开会：组织参与者碰头会：参与者包括项目负责人、产品经理、设计人员、开发人员、利益相关部门人员等
项目相关者全部到场，确认基本工作量、技术设计边界、项目工期安排、避免不不必要的返工
1.2 明确项目背景：前期会议要明确项目背景、却敌那个项目的整体规划，整体包括：
1）项目背景：项目主题、目标受众、决策方、是否有第三方参与、是否有商业合作等
2）商业目的：需要突出的商业元素、预期达到什么样的传播效果
3）重要程度：判断策划的难易、交互逻辑、设计风格、开发资源
4）上线时间：确定开发周期
1.3 常见问题：
1）项目方想展示的文本内容过多
2）发起方对核心交互方式把握不够精准
3）技术开发难度
4）需求文档不清晰
2、策划评估
2.1、动机——是否能在短时间内吸引用户注意力并完成阅读、
影响用户浏览的重要因素：目标&情感
目标指用户的目的性,目的性的强弱在很大程度上决定了用户浏览的耐心，用户完成某个操作的目的性月强，他就越可以忍受过程中带来的不愉快的体验，应用的目的性往往是由产品的属性决定的。
用户情感：决定了用户可以接受影响的程度，一般主观性越强用户越容易受到情绪的影响进而改变行为。
1）利用心流理论控制节奏
心流的概念，最初源自Csikszentmihalyi 于1960年代观察艺术家、棋手、攀岩者及作曲家等，他观察到当这些人在从事他们的工作的时候几乎是全神贯注的投入工作，经常忘记时间以及对周围环境的感知，这些人参与他们的个别活动都是出于共同的乐趣，这些乐趣是来自于活动的过程，而且外在的报酬是极小或不存在的，这种由全神贯注所产生的心流体验Csikszentmihalyi 认为是一种最佳的体验。（百度百科）
进入心流状态的用户通常有两个重要的表现：一是完全投入一项活动并从中感受到愉悦，二是关注体验过程从而忽视时间。在H5中我们要做的就是通过心流把控影响用户的主观因素。
与心流关系密切的两个要素：“挑战”和“技能”
从高挑战对应中技能的“激发”状态，让用户不断提高技能后进入高挑战对应的高技能的“心流”状态，随着技能的不断提高，原来的高挑变为了中挑战，于是用户就又进入了“激发”状态；如此往复，才能让用户达到一个正向循环，促进心流的过程。所以在H5的设计过程中，如果我们能让用户达到这样的过程，就能牢牢抓住用户，让他们有耐心，有兴趣浏览完我们的H5。
2）利用HOOK理论引导用户
引导用户的行为需要4个步骤：触发（诱因）—行为—多变的酬赏—投入
触发（诱因）和行为联系比较紧密，就是通过某种诱因让用户进入到产品中并产生行为；在多变的酬赏环节激发用户对产品中某个事物的强烈渴望，最后在投入环节让用户付出一些东西，例如时间、精力、金钱等，这些会让用户产生新的动机，让用户再次进入行为环节从而进入下一个瘾循环。
①触发与行为：促进一个人的行为的有三个关键因素：触发，动机、能力（福格行为模型）
通过触发引导用户进入到一个HOOK循环后，用户在完成任务时，影响任务的难易程度有6个要素：
1、时间：完成这项任务所需要的时间
2、金钱：从事任务所需要的经济投入
3、体力：完成任务所需要的体力
4、精力：从事任务需要消耗的脑力
5、社会偏差：他人对该项活动的接受度
6、非常规性：该项活动与常规活动之间的匹配程度或矛盾程度
在H5的设计范围中，最常用到的是如何控制用户花费的时间、精力。尽量让用户加快浏览速度，可以为用户节省时间，不要设置过于复杂的操作，为用户节省精力。
②多变的酬赏：在用户行动后，一定要给用户提供丰富的不可预知的奖励。多变的酬赏并不是漫无目的的；我们设置酬赏的时候要给出一个明确的目标范围，而不是用户无法预期的结果。
酬赏的三种表现形式：
社交酬赏：即社会认同感，人们通过社交产生奖励，例如朋友圈中的点赞和评论。
猎物酬赏：即人们在使用中获得直接物质奖励，例如抢代金红包。
自我酬赏：即人们在活动过程中获得的操控感、成就感，例如坚持健身打卡获得的勋章。
③投入：在投入环节我们要让用户付出一些东西，例如时间、精力、金钱等，这些会让用户产生新的动机，让用户再次进入行为环节继而进入下一个上瘾循环。我们在策划过程中，可以尽量让用户通过主动生产内容的方式参与到H5中，增加用户在H5中的投入，用户投入越多，越不会轻易离开。
2.2、框架—展现形式是否符号策划主题
按照交互的复杂程度，将展现形式分为三类：
1）展示型：涉及的交互非常少、多以展示内容为主
2）引导型：通过一些交互引导用户完成操作
3）操作型：涉及大量的交互，吸引用户完成操作
通过策划创意、交互程度、阅读体验、视觉表现、技术能力5个维度对各展示类型评价
①展示型：展示型按交互从弱到强分为：视频类、幻灯片类、空间展示类。展示型H5，是指打开页面仅通过几个简单常规操作甚至不操作，就能直观看到展示内容。这类H5的优势是易于流畅地呈现一个完整的故事或品牌形象，交互层级少，技术难度低。缺点也比较明显，对内容要求非常高，得足够吸引用户看完整个内容，如果交互形式简单乏味，也容易造成用户流失。
视频类：
视频要足够吸引人
视频不要过长。如果过长，建议分段播放
视频分段后，可用交互手势连接
幻灯片类：
着重优化动效和视觉，页数尽量控制在6-8页
尽量在结构和页面连接上创新，增加有趣的交互
空间展示类：
结构层级越少越好
交互尽量简单清晰
②引导型：互动视频类和小场景类。引导型表现形式丰富，让用户在阅读中始终保持沉浸感。不断变化的交互方式或反馈奖励能激励用户不断的阅读。但劣势和展示类一样，还需要强大的策划能力，创意和情感因素才能支撑整个H5。
互动视频类：
可以让用户引导故事走向，增加不确定性
可以利用交互点的精确把控，准确地配合故事结构，让故事更生动。
小场景类：
场景之间有一定的关联和过渡，让场景更加连贯。
场景间的过渡尽量不要重复，尽量符合场景所在的剧情。
需要给用户明确的提示和引导。
③操作型：小游戏、做测试和技术类。操作型是指用户更主动和深入地与H5交互，通过操作控制H5的走向和结果。
小游戏：
能够快速的吸引用户注意力，快速带领用户进入心流
游戏中可以穿插策划需要突出的重点
小游戏可以给予用户独特的成就，以便增加分享几率
要给予用户操作上的引导
不要讲H5的体量做的过大，导致加载问题。
做测试:
这类策划最好和用户的社交属性相关联
最终结果最好难以预料、调动用户的好奇心
可以通过回答不同难度的问题，得到不同的结果
技术类：
以技术为向导、强调产品的特性
突出主题中的某些特点
2.4、交互—交互方式与策划是否匹配
交互没有好与坏的分别，只有是否符合当下的使用环境
内容需要展示越多，交互方式越应该简单清晰。不要出现用户信息过载的情况。
2.5、原则—是否符合移动端的交互原则
1）简化层级，结构扁平化
移动端由于设备本身的限制，没有足够的空间来展示路径，如果没有清晰的层级关系，或者需要进入层级更深的页面才能找到用户想要的，这意味着用户会迷失方向，这时更应该减少层级的深度。
2）降低阅读门槛，减少认知成本 实现方法：
单页面操作单一化
多页面操作一致化
通过拟物化设计减少用户认知成本
利用手机传感器，让交互更自然
3）H5要注意分享属性
促进分享的方法：
在结果中带有一定的社交属性
分享后直接获得奖励
产生心理共鸣、击中用户
用户获得成就感，要晒给大家看
如何增加回流：
充分发挥社交属性、打造个性化分享链接
善于利用热点和流量点
3、产出
3.1、界面落实 交互设计师产出交互稿，跟进项目
完整的流程图：表面加载点、提示点、动效点、操作点、跳转逻辑等
交互文档：交互页面、页面所需的交互手势、点击位置、跳转逻辑、动效、加载位置等
3.2、完善细节
3.3、沟通跟进
1）加载与控件文件的大小
一般H5的大小建议控制在5M以内，用户在流畅的网络环境中可以1S之内加载完成。
减少H5大小的方法：
1）图片压缩：PNG格式的图片，导出时建议使用PNG-8格式，颜色位数建议选择256
2）文字处理：一般500个汉字所占内存约1KB，而一张文字转图片至少10KB，因此，除非应用特殊字体，不建议将文案以图片的形式输出。
加载处理方案：
1）全局加载：在H5封面出来之前一次性加载全部内容。在查看H5过程中不会出现卡顿的现象，用户体验流畅，不过加载时间过程，当文件过大时，在加载时应提醒用户注意流量。
2）优先加载：按照内容的重要程度，先将主要部分加载出来，再加载次要的部分。一般用于图文混排，优先加载文字，再加载图片。
3）分段加载：将H5分成若干段落，当用户看到某一段落后再对下一段落进行加载。适合分章节策划的H5。
3.4、测试上线与数据监测
常规的测试要点包括：
1）跳转逻辑是否正常
2）页面展示逻辑是否流畅
3）平台之间是否有交互冲突
4）H5的加载速度如何，能否再压缩H5的大小。
PS：常用的交互手段——H5常用的交互手段分为：手势类、硬件类、技术类
手势：点击、长按、滑动、拖动、
硬件：H5允许调用手机摄像头和相册、语音话筒、手机陀螺仪、速度加速器
技术类：VR\AR\3D渲染，双设备互动
