写在前面：第一次参加H5项目，发现其实整个流程和App功能设计的是差不多的，在明确交互方案之前都要梳理清除需求，敲定交互方案后也一样盘查可以提升体验的细节。以下就是我本次H5项目的一些经验总结和复盘感想——在过去的一年，国家监管政策变化、国内经济形式不明朗，小赢也面临巨大的挑战。到目前，小赢已经从最困难的阶段走过，依然朝着曙光不断前行。
作为中国少有的能够把投资人的本金加利息一分不差地全部归还的公司，小赢过去的努力塑造了自己“安全、诚信、责任”的品牌形象，今年适逢小赢成立6周年之际，在欢庆之余，通过H5的形式让更多人了解小赢使命的同时祝福小赢生日快乐。此次周年庆H5的目的主要是品牌形象的塑造与传递，传播公司品牌，提升用户对以下品牌的感知认同。我们的H5将以游戏的方式开启进行，贯穿H5始终的是品牌责任感，目标完成一支和品牌自身形象联系极为紧密的H5。接下来我将从交互设计层面，从“选题、主题确定，到方案构思、项目落地、最后到数据复盘”这几个环节，分享本次H5设计过程，一起探讨如何打造具有表现力的H5。目的：周年庆、品宣
小赢是一家具有使命感的公司，从成立到建立各个服务品牌及所做的公益都“不忘初心 牢记使命”。即使在行业冬天黑夜下，也践行使命聚光前行。在「选题构思」环节中，确定了要在H5中加入游戏互动(拼图游戏)，接下来则需要进一步设定游戏完成时长。因为高效、顺畅的游戏环节能够给用户带来愉悦的心情；反之，复杂、花费太长时间的游戏环节只会让用户烦躁跳出。本次H5项目游戏环节的目标是让用户能够进入「心流状态」，让用户心情愉悦，提高从游戏页面进入海报结果分享页的转化率。
「心流状态」是心理学家米哈里·齐克森米哈里提出来的，指的是一种心理状态。比如：我们在观看一部喜欢的电影或参加感兴趣的剧本杀活动时，会忽视周围的环境和时间的流逝，此时我们便进入了心流状态。
影响用户进入「心流状态」主要和2大要素相关，一是“游戏难度”，二是“拼图技能”。由图可知：
D区域低技能玩家匹配高难度游戏容易焦虑；B区高技能玩家匹配低难度游戏容易感到无聊。
由图可知：
A区和C区的低/高技能玩家匹配低/高难度的游戏容易产生正面情绪，因此我们要确保“游戏难度”和“拼图技能”之间保持一个平衡点，这样用户才能进入一个心流体验状态。
“游戏难度”作为设计者可以进行人为把控，而“拼图技能”则和每个人对拼图游戏的掌握程度挂钩，不可把控。每个人都是拼图小白(“拼图技能”低)，主要从“游戏难度”着手，设计「低中」难度的游戏，让用户产生正面情绪。
如上：
方式2要比方式1更考察用户的观察力，难度系数更大。
如上：
图片拼块与拼块之间的边缘的细节越少(占据的元素越少)反而越难拼，拼图的难度跟着递增。比如上图1(第1、2行)和图2(第1行)的天空部分，拼块与拼块之间的细节极其少，该部分内容相对非天空部分的拼接就更有难度；而图3第1行的天空的拼块边缘增加了山元素，细节相对增加，因此比图1和图2的天空部分好拼很多。
很显然：
从左到右，图片划分的碎片越碎，拼图的难度也跟着加大。
我们可以通过控制「拼图方式」、「图片元素数量」和「拼图碎片数量」来决定拼图的完成时长。从「拼图方式」而言，方式2会比方式1难很多，方式2要具有更好的观察力，花费的时长显然会比1多得多，容易卡住，不符合大部分用户能够顺畅完成游戏的设定，所以我们决定用方式1。因为一张海报对应一个相应的子品牌，为了能够清晰直观地描述品牌对象，我们决定放置6～9个元素，不要让图片看上去过于复杂，因此将「图片元素数量」定位为常量因素。将「拼图碎片数量」定位为变量因素，实验设定分别为划分为3*3、4*3和4*4。分别将图片碎片无规律进行排布，对游戏参与者完成完整拼图的时间进行记录。
经过游戏实验，得到初步数据，3*3拼图游戏时长在0～10s左右；3*4拼图游戏时长在10s～20s左右；4*4拼图时长在20s～40s左右。
因为我们对游戏时长的设想是控制在0～10s之内，最终我们决定海报图放置6～9个元素，元素分类上划分为强元素、辅助元素和补充元素，元素要与品牌定位和品宣主题相挂钩；拼图碎片则确定划分为3*3即3行3列的形式；用户通过拖拽碎片到正确方格位置上的方式完成游戏。我们确定在H5中给出5张预选图片供用户自行选择，拼成后分别是“小赢科技、小赢公益、小赢卡贷、摇钱花和小赢理财”的海报图。明确游戏玩法后，还需要进一步明确H5交互详细路线，此部分主要在三个层面展开，分别是“主题层面、互动层面以及情感层面”。进入游戏前的背景带入和参与游戏环节要进行无违和的衔接，紧扣“解锁小赢”贯穿主题，使整个H5流程逻辑具备合理性。拼图成功后会最终形成一张周年庆海报的形式让用户觉得自己参与了制作，不同卡片分别代表小赢不同品牌，创造出来的海报作品也不一样。以此让用户体会到有趣的参与感。让用户参与到游戏中，拼图成功后的结果页上形成一张周年庆海报，每个品牌的海报与周年庆主题和品牌定位相契合。同时，拼图成功呈现的结果页也展示用户拼图所用的时长，相呼应展示各品牌服务时长。（完成一个游戏能够用很短的时间，而小赢各个品牌成立对外服务的时长已经数年了）确定构思完成交互方案，从主题层吸引用户、从互动层活跃用户、再从情感层打动用户。前提是保证主题层的逻辑表现的合理性，在互动层的基础上塑造用户的参与感，最后升华用户情感，以期让H5变得更具有吸引力。指引性：用户不能一看就会的操作或功能，给出贴心的指引游戏页面给出一句话提示(“移动碎片，拼出完整海报”)告知用户游戏玩法。游戏页面提供入口查看完整海报，用户可自行选择是否查看提示。镜头由近及远的形式出现主kv，同时出现文字(分3段出现)交代故事背景，引入H5主题。
进入游戏主场后，先展示1张卡牌，接着剩余5张卡牌动效出现，目的是让画面专场不会显得那么平淡生硬。
拼图海报的出场借由卡牌这个载体，在点击卡牌的时候加入翻牌的音效和动效。
点击拼块后拼块放大且带上阴影，从视觉上产生空间前置效果。
拼图成功后自动弹出庆祝画面，同时加入音效，给用户带来愉悦。
监测时间段，H5平均每日PV(浏览数)4,085，平均每日UV(浏览人数)为1,867。
上线前3日为访问高峰期，于8/27达到最高，之后呈下降趋势。
监测时间段，H5上线后累计9日参与游戏次数越近2w，参与游戏人数超1.6w。
H5平均每日参与拼图游戏的次数为2,155，平均每日参与拼图游戏的人数有1,799。
参与拼图游戏的次数比参与拼图游戏的人数多，预估大约有60%的人玩完一局拼图后，会返回继续玩一轮拼图游戏。
在本次「一起解锁百变小赢」H5项目中，从“选题构思到交互构思、再到路线细化和体验提升”，完成了整个H5从构思到落地的过程，最终圆满推动整个H5的落地实现。与此同时，反观本次H5活动，在【用户行为】和【行为结果】步骤还有待改进之处：H5的拼图游戏有统计玩家所用的时间，在「拼图成功页面」可以通过击败百分之多少用户或给予用户一个称号让用户更有成就感。可在H5中加入社交关联，玩家可邀请好友参与拼图，好友参与后通过拼图完成的时间来定输赢，挑战书上可以写入有趣的输者惩罚方式。本次H5看到结果文案后产生情感认同，让用户主动产生动机去分享，相对未产生认同或动机较弱的用户来说，主动分享的意愿并不会太高。因此可考虑加入分享获取奖励的形式进一步刺激用户分享。若还是采取让用户自发产生分享的动机，可以在结果页加上“送上祝福”的按钮，并在设计上加入动效引导，促进用户分享的意愿。推荐阅读：
在过去的一年，国家监管政策变化、国内经济形式不明朗，小赢也面临巨大的挑战。到目前，小赢已经从最困难的阶段走过，依然朝着曙光不断前行。 
