H5工匠手册1: H5互动流程

1，项目沟通

1.1邀请参会人员开会:组织参会人员开会:参会人员包括项目负责人、产品经理、设计师、开发人员、相关部门人员等。

所有项目干系人都到场确认基本工作量、技术设计界限、项目时间表，避免不必要的返工。

1.2明确项目背景:预备会议应明确项目背景，但不是该项目的总体规划，包括:

1)项目背景:项目主题、目标受众、决策者、第三方参与、商业合作等。

2)商业目的:突出商业元素，期望达到什么样的传播效果。

3)重要性:判断策划难度、交互逻辑、设计风格、开发资源。

4)上线时间:确定开发周期。

1.3常见问题:

1)项目方想展示的文字内容太多。

2)发起方对核心交互模式的把握不够准确。

3)技术发展困难

4)需求文档不清晰。

2.规划和评估

2.1，动机——是否能吸引用户注意力，在短时间内看完，

影响用户浏览的重要因素:目标& amp；情绪

目标是指用户的目的，目的的强弱很大程度上决定了用户浏览的耐心。用户完成一项操作的目的性越强，就越能容忍过程带来的不愉快体验。应用的目的往往是由产品的属性决定的。

用户的情绪:决定了用户可以接受影响的程度。一般来说，主观性越强，用户越容易被情绪影响，进而改变行为。

1)用流量理论控制节奏

进入心流状态的用户通常有两个重要表现:一是全身心地投入一项活动并从中感受到快乐，二是注重体验过程而忽略时间。在H5我们需要做的是通过流量控制影响用户的主观因素。

与心流密切相关的两个要素:“挑战”和“技巧”

从高挑战对应的技能“亢奋”状态，用户在不断提升技能后，会进入高挑战对应的高技能“流动”状态。随着技能的不断提升，原本高大上的会变成中等挑战，所以用户会再次进入“亢奋”状态；只有这样，用户才能实现正向循环，推动流量的进程。所以在H5的设计过程中，如果能让用户到达这个过程，就能牢牢抓住用户，让他们有耐心和兴趣浏览我们的H5。

2)用HOOK理论引导用户。

引导用户行为有四个步骤:触发-行为-可变奖励-输入。

①触发与行为:推动一个人行为的关键因素有三个:触发、动机和能力(福格的行为模型)。

通过触发引导用户进入钩环后，用户完成任务时影响任务难度的因素有六个:

1，时间:完成此任务所需的时间。

2.金钱:任务所需的经济投资。

3.体力:完成任务所需的体力。

4.精力:从事任务所需的精神能量。

5.社会偏离:别人对这个活动的接受程度。

6.非常规:活动与常规活动的匹配或矛盾程度。

在H5的设计范围内，最常用的是如何控制用户花费的时间和精力。尽量让用户加快浏览速度，可以为用户节省时间，不要设置太复杂的操作，为用户节省精力。

2多变的奖励:用户行动后，我们必须为用户提供丰富的、不可预知的奖励。多变的奖励不是漫无目的的；我们在设置奖励时，要给出明确的目标范围，而不是用户意想不到的结果。

三种奖励形式:

社交奖励:即社交认同，人们通过社交产生奖励，比如朋友圈的赞和评论。

对猎物的奖励:即人们在使用中获得直接的物质奖励，比如抢到现金换红包。

自我奖励:即人们在活动过程中获得控制感和成就感，比如坚持健身打卡获得的奖牌。

③敬业度:在敬业度阶段，要让用户付出一些东西，比如时间、精力、金钱等。，这会给用户一个新的动力，让用户再次进入行为阶段，然后进入下一个成瘾周期。在策划过程中，可以尽量通过积极制作内容，让用户参与到H5中来，增加用户对H5的投入。用户投入越多，离开的可能性就越小。

2.2.框架——呈现形式是否象征策划主题？

根据交互的复杂程度，呈现形式分为三类:

1)展示类型:涉及互动很少，多以展示内容为主。

2)引导型:通过一些交互引导用户完成操作。

3)运营型:涉及大量互动，吸引用户完成运营。

从策划创意、互动程度、阅读体验、视觉表现、技术能力五个维度对每个展览类型进行评估。

①展示类型:展示类型按交互由弱到强分为视频型、幻灯片型、空间展示型。显示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的大小是否可以再压缩？