h5保存图片到手机_H5火不火，不靠艺术靠科学

团队通力合作、熬夜无数、费劲心力的 H5 终于上线了，满怀欣喜地希望看到用户的惊叹、满屏的赞誉、大规模的转发，以及……甲方爸爸的慈祥的笑容。

但数据报告出来之后，等到的却是惨淡的数字和略显肿胀的脸庞？

这种情况我们都遇到过。

是创意不够动人吗？是视觉不够酷炫吗？是投放不够精准吗？很可能都不是，最可能的原因是：没有给用户一个理由。

每一支 H5（也包括小程序、APP）都会存在一个或多个目标，可能是获取用户的联系方式，可能是激励用户分享，也可能是让用户购买产品或服务。

在设计 H5 的时候，你可能在幻想出街之时，一呼百应，芸芸众生都哭天抢地贡献出自己的电话号码，呼朋唤友地互相转发，甚至疯狂点击购买按钮……醒醒吧，用户没有那么听话。

要实现这些目标，我们需要用户做出某些特定的行为：

• 获取用户联系方式：用户需要填写联系方式，或者授权使用微信个人信息（地址、电话）
• 激励用户分享：用户需要点击右上角分享，或生成图片，保存并发给朋友
• 购买产品或服务：用户需要填写地址并付款

那么，怎么才能激励用户做出我们希望的行为呢？

我们将尝试用福格行为模型（Fogg Behavior Model，简称 FBM）来分析一些案例，探讨一下如何让 H5 得到我们想要的数据结果。

福格行为模型是斯坦福大学教授 BJ·福格（BJ Fogg）提出的一种用户行为激励模式。简单来说，用户要做出某个目标行为，需要有三个方面的因素：动机、能力和触发，缺一不可。

动机（Motivation）

动机是用户做出目标行为的主观意愿，通常来自于三个方面：

• 快乐/痛苦：对快乐的渴望和对痛苦的逃避
• 希望/恐惧：对好事物的希望和对坏事物的恐惧
• 社会关系接纳：对融入社交关系的渴望

那么，想要提升用户做出目标行为的动机，就可以从这三个方面入手。

我们可以让用户对完成目标行为之后的结果产生更好的预期，如分享给好友之后可以获得较高的购买折扣。

我们可以让用户对目标行为失败之后需要承担的损失的感到恐惧，如不填写手机号码就不能下载完整 PDF 资料。

最常用的还是帮助用户获得更好的社会关系，常见的生成图片并分享都是基于这个目的，特别是那些带有一点自嘲意味的话题。

应该说，针对用户动机的激励，已经应用的比较广泛了。目前我们看到的比较优秀的 H5，无一例外都是给用户提供了足够的动机。

能力（Ability）

能力是用户做出目标行为的客观限制，对用户能力的挑战来自于：

• 时间：需要用户耗费时间的行为
• 金钱：需要用户耗费金钱的行为
• 体力活动：需要用户付出体力活动的行为，如走远路
• 脑力活动：需要用户付出脑力活动的行为，如解数学题
• 社会偏差：与社会秩序不符的行为，如让用户穿着内衣上街
• 非常规行为：与用户日常习惯不一致的行为，如换一条路回家

想要提升用户做出目标行为的能力很难实现（想要在H5中训练用户？不可能的……），所以我们换一个思路——降低目标行为的难度，越简单的目标行为，就越容易符合更多用户的能力范围。要实现这一点，我们可以将复杂的目标行为，拆解成多个简单的目标行为，让用户每次实现其中的一部分。

拿我们最常见的注册来说，如果给用户展示一个冗长的表单，对用户的时间和脑力活动来说都是很大的挑战。把这个表单拆解成为多个小表单，用户的脑力活动压力就会小很多；再把这个表单放在不同的阶段，对用户的时间压力也小了很多。

需要注意的是，用户的动机和能力是可以相互影响的，强动机可以提升能力，强能力也可以提升动机。

用户当前没有买车的动机，但是4S店做活动，只需要1块钱就可以买一辆新车，此时用户虽然动机不足，但支付1块钱的能力却非常充足，所以也极有可能购买。

反过来也是一样，用户解出一道奥数题就可以获得1万元奖金，此时用户虽然能力不足，但有足够的动机去找个数学好的朋友帮忙，然后拿到这笔奖金。

触发（Trigger）

用户有了能力和动机还不够，还需要一个触发物，让用户真的行动起来。我们经常喊着要减肥，周末也有足够的时间，为什么许多人还是没有动起来呢？就是因为缺少一个触发的信号，哪怕只是一个闹钟都行。

我们在 H5 中看到的注册按钮、分享提示、下载链接、购买链接都属于触发物。

一个合格的触发物需要有三个条件：

• 能够被注意到
• 能够与目标行为联系起来
• 在合适的时间出现

其中第3点最为重要，触发物只有在用户有动机也有能力的时候出现才有效。触发物在没有动机的时候出现就是垃圾信号，如我们不想买房时接到的中介的电话；触发物在没有能力的时候出现则会让用户沮丧，如我们没钱的时候，中介打电话说1000万的房子打9折。

在 H5 这种用户流程较短的载体中，要特别注意触发物的使用。在触发用户行为时，需要仔细考虑用户的动机和能力，并给予用户合适的触发物。

1. 提升用户动机的触发物（Spark）：在 H5 中，这类触发物往往以强调失去的风险的形式存在，如活动倒计时、商品剩余数量提醒等；
2. 降低用户能力要求的触发物（Facilitator）：在 H5 中，这类触发物通常是激励用户完成一个大任务中的小任务，如新手任务清单；或者将多个目标行为合并成为一个简单的行为，如一键购物、上传通讯录查找好友等；
3. 纯信号触发物（Signal）：当用户有动机又有能力时，只需要提醒用户即可，如分享提醒、长按保存图片等

在熟悉了福格行为模型之后，我们来看几个比较典型的案例。

1. 网易哒哒：人生必做的100件事

这是一支非常典型的传播型 H5，其目标就是让更多的用户看到并体验。

动机：在首屏中，就让用户明确感知到即将获得的收益（全网整理100件最有意义的事情，上图左），让用户有了足够的动机。

能力：让用户选择的过程非常简单，左右滑动并且点击，点击后有明确的视觉反馈（上图右），符合绝大部分用户的能力范围。

触发：在激励用户分享方面使用了长按保存图片，引导用户分享到自己的社交关系中，展示已经完成的有意义的事，以获得更多的社会关系接纳（下图）。

此时用户即有动机、又有能力，所以只需要一个简单的提示（Signal）就可以让用户完成分享，如屏幕下方的黑色按钮（长按保存你的结果页）。

2. 冠珠陶瓷：一个90后的独白

这个案例在我们之前的文章中曾经有过介绍，其目标也是传播品牌。

动机：页面的首屏提示用户一个90后的独白，没有给用户任何未来收益的提示，用户不知道浏览完这个 H5 之后能够得到什么物质或者精神的激励，明显动机不足。

能力：页面的交互采用上滑的方式，相对单调，需要用户付出时间成本，但因为交互非常简单，所以用户能力是足够的。

触发：因为没有明显的预期收益，再简单的行为也不会提升用户的动机，所以此时无论有什么触发物，都很难激励用户的目标行为（分享）。

在 H5 的机制设计中，要根据客户的需求，设计尽可能明确的目标和用户行为，模糊的陈述会让用户感到困惑，进而失去继续体验的动机。。

3. OPPO Reno2 手稳挑战

这支 H5 的目标包含了线上预定和分享两种行为，但二者可能都无法完成。

动机：在首屏即告知用户 “有奖” 这个信息，给用户创造了一定的预期，但并没有明显提示奖品是什么（在玩法介绍中有介绍）。考虑到此类游戏众多，但奖品发放过程并不透明，奖品数量太少，所以用户对获奖的预期并不高，动机不足。

能力：游戏挑战是利用陀螺仪控制图形跟住画面（上图左），其困难程度超过了绝大部分用户的能力范围。

触发：因为前两个因素的问题，用户很可能看不到最终的触发信号（上图右）。

游戏化的设计是一种非常好的方式，但是一定要考虑游戏性和难度的问题，超出用户能力太多的游戏，只会让用户觉得沮丧。

4. 雪佛兰x微信运动

这个微信小程序的目标是希望用户参与活动，并推广产品新科沃兹。

动机：在进入小程序时就已经提醒用户3天内微信步数超过7.9万，即有机会赢取7.9元买一辆新科沃兹的机会，并在后续说明中解释了超过7.9万步，还需要比谁的徽章多，但无论如何给用户提供了一个明确的得奖通道和预期，没有太多的随机和模糊成分，用户动机较强。

能力：3天积累7.9万步，平均每天26,333步，对我来说挺难……但对许多朋友来说应该比较容易，并且强预期还会进一步提升用户的能力。

触发：这个小程序的目标用户行为是参与活动，即授权微信使用用户个人信息和微信步数数据，大部分用户在看过首屏之后都会同意授权。

从小程序内部数据和微博上的话题热度来看，这个小程序起到了应有的效果，其数据报告应该非常好看。

5. 人民日报 子曰诗云

这支 H5 是一个很有挑战性的游戏，其目标是传播。

动机：在页面 loading 部分已经给用户提示，拼出更多诗句，并与好友比较，具有非常强的社会关系接纳收益，用户动机较强。

能力：抛开游戏性不谈，但是能拼出这么多诗句，对大部分人来说就已经是很高的挑战了，但传统文化对于个人形象的加持预期可以提升用户的能力，让用户主动查找资料来答题。

触发：答题结束后如果得到了自己较为满意的结果，用户会主动自发地想与好友比较，以获得更多的收益（满足感），此时的触发就可以是提升用户动机的触发物（Spark），例如提示用户与好友比拼等。

合理的游戏性设计，结合较强的“比拼”意味，将使得游戏本身就具备了传播价值。

通过以上案例我们可以看出，基于一定的用户行为理论来精心设计的 H5，无论在体验还是传播效果上，都会有不错的结果。而在动机、能力、触发任何一个方面有欠缺的 H5，其数据就很难让甲方满意了。

我们在为客户策划此类项目时，通常会经过一些特定的步骤：

1. 从客户的业务需求触发，为 H5（网站、APP、小程序）设置一个目标；
2. 分析完成目标所需要的用户行为；
3. 用户完成该行为的动机和能力是否充足，给用户足够的动机，并保证行为符合用户的能力范围；
4. 在合适的位置设计触发物，激励用户完成目标行为；
5. 测试并查看数据结果，并进行必要的调整。

这些步骤完成后，我们将得到一份完整的用户路径，之后就是补充画面、音效、按钮、文案、动效等等等。

H5 的一切设计都是为了触发用户目标行为而存在的，而这也是我们希望能为客户实现的。

参考资料：

1. Fogg Behavior Model, Persuasive’09, April 26-29, Claremont, California, USA.

2. Prompts tell people to "do it now!", Prompts | behaviormodel

众创科技​www.masscrunch.com

众创科技是一家专注于创意实现的互动营销技术供应商，我们为您提供最全面的互动技术服务，更为您提供面向业务的技术方案选择和排雷服务。