《H5匠人手册》1：H5交互流程
最新回答
◎黛颜
2024-11-06 01:36:52
1、项目沟通
1.1 邀请参与者开会： 组织参与者碰头会：参与者包括项目负责人、
产品经理
、设计人员、开发人员、利益相关部门人员等项目相关者全部到场，确认基本工作量、技术设计边界、项目工期安排、避免不不必要的返工
1.2 明确项目背景： 前期会议要明确项目背景、却敌那个项目的整体规划，整体包括：
1）项目背景：项目主题、目标受众、决策方、是否有第三方参与、是否有商业合作等
2）商业目的：需要突出的商业元素、预期达到什么样的传播效果
3）重要程度：判断策划的难易、交互逻辑、设计风格、开发资源
4）上线时间：确定开发周期
1.3 常见问题：
1）项目
方想
展示的文本内容过多2）发起方对核心交互方式把握不够精准
3）技术开发难度
4）需求文档不清晰
2、策划评估
2.1、动机——是否能在短时间内吸引用户注意力并完成阅读 、
影响用户浏览的重要因素：目标&情感
目标指用户的目的性,目的性的强弱在很大程度上决定了用户浏览的耐心，用户完成某个操作的目的性月强，他就越可以忍受过程中带来的不愉快的体验， 应用的目的性往往是由产品的属性决定的。
用户情感：决定了用户可以接受影响的程度，一般
主观性
越强用户越容易受到情绪的影响进而改变行为。1）利用
心流
理论控制节奏 进入心流状态的用户通常有两个重要的表现：一是完全投入一项活动并从中感受到愉悦，二是关注体验过程从而忽视时间。在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格式，颜色位数建议选择2562）文字处理：一般500个汉字所占内存约1KB，而一张文字转图片至少10KB，因此，除非应用特殊字体，不建议将文案以图片的形式输出。
加载处理方案：
1）全局加载：在H5封面出来之前一次性加载全部内容。在查看H5过程中不会出现卡顿的现象，用户体验流畅，不过加载时间过程，当文件过大时，在加载时应提醒用户注意流量。
2）优先加载：按照内容的重要程度，先将主要部分加载出来，再加载次要的部分。一般用于图文混排，优先加载文字，再加载图片。
3）分段加载：将H5分成若干段落，当用户看到某一段落后再对下一段落进行加载。适合分章节策划的H5。
3.4、测试上线与数据监测
常规的测试要点包括：
1）跳转逻辑是否正常
2）页面展示逻辑是否流畅
3）平台之间是否有交互冲突
4）H5的加载速度如何，能否再压缩H5的大小。
热门标签
