基于微信朋友圈H5页面设计心得

粗略算了下，上年参与构思设计了近十几个轻APP，有些点可以分享给大家，也算作为项目总结，简单分为技法，玩法，道法三方面。

1、技法方面：用动态视角来考虑排版和适配。

2、玩法方面：围绕用户利益点，基于数据的响应式设计。

3、道法方面：以女性思维来设计交互，文本之源。

▪ 用动态视角来考虑排版和适配

首先，我们要了解，和原生应用相比，Html 5页面目前的弊端。

受限于浏览器，H5页面跳转会更费力和不稳定，因为多了个加载的过程。多了个浏览器头部，页面的展示空间更小。

So，在排版上切忌元素堆积，第一屏突出某一利益点即可，其他利益点可以先藏后现。

我们将利益点主要分为三点，①得到好处，如代金券奖励或利好消息；②有趣走心，如温馨小故事；③好玩，如围住神经猫。

如果是给好处的，在第一屏让好处更明显；

（突出0元抢购利益点，将后面砍价游戏的部分用蒙层形式藏起来）

如果是有趣有心的，一个有吸引力的标题即刚刚好；

（正牌完败小三全攻略，展示型H5 页面，采用异步加载）

如果是好玩的，尽量做到一屏内显示完全，将架构稳定下来。

（2048游戏，保证稳定在一屏内避免手势冲突）

这里的总体原则是：

①一个页面说一件事情。将后续的，复杂的内容藏起来。

②减少页面的跳转，屏数的概念代替页面的概念。除非是结果反馈，少用跳转，采用屏数间切换；

③不要考验用户的短期记忆。用标题来帮助用户理解内容，利用动效，循序渐进展示。

而关于适配，考虑到机型适配，这里可采用响应式布局方式，我们的原则是保持长宽比一致，根据机型尺寸进行拉伸。

▪ 内容层采用640*960，上下左右居中于背景；

▪ 背景层采用800*1200，无主要内容，用来衬底；

▪ 如采用纯色背景，或者中央向四周渐变为纯色的内容层，则不用设计背景层。

通过将背景层和内容层区分开来，就可以兼顾长宽比从1.2到1.875的机型啦，嘿~

▪ 围绕用户利益点，基于数据的响应式设计。

这里的用户，默认属性为微信用户，基于社交平台，如果没有足够的分享则无法完成目标。分享的动机简单来说，即刷存在感。再往深挖一点，社交场景中的自我认知碎片化的一种展示。

在朋友圈，我们所愿意分享的，往往是一种对自我的认同，即使并非现实，但我们是希望周围的人能通过这碎片化内容来理解自己，肯定自己。人生如戏，朋友圈也是个演绎的舞台。而赞和评论，则代表对当事人社会人格的肯定，存在感得以确认。所谓高逼格，即为高存在感。

换句话说，因为朋友圈附属于个人微信，所以就是一张名片，这张名片上，有美化的照片，有激动的吐槽，有无奈的诉苦，奋斗的豪言等等，无所谓真实和虚伪，但都构成了社会人格的一部分。

因此，围绕用户利益点，就是说围绕以用户演绎自我的需求为起点，逐渐衍生的卖点。玩微信，就要这样玩。

OK，原理讲到这里，万变不离其宗，这里玩法可以给大家提供几个思路。

① 利他心理：好东西齐分享，你有我有全都有啊。提供足以满足用户好奇心，视听感，甚至可以分发利益的内容。就好像逛街时某人看到新鲜事物，然后呼唤大家一起看。

在H5 页面流行前期（大概去年3、4月份），简单的幻灯片展示效果即可引爆朋友圈，那时候硬广告效果也会很好。但形式一定要服务于内容，如果用标题党，不要和内容相差太多。

（那时候我们设计三版不同类型的H5，效果最好的是结合热点的类资讯版本：正牌完败小三全攻略。为了抵消硬广的不良影响，我们让招商选了一些爆款，并用进度条来激发用户的补全心理。）

其他类型包括但不限于：用故事打动人，分享感动；用游戏吸引人，分享趣味；用红包奖励人，分享利益；用特效Duang人，分享惊喜。

现在H5 在形式上的能给用户新鲜感不多了，虚拟现实方面应该还有一波，但还是内容为王。

② 利己心理：一个篱笆三个桩，一个好汉三个帮。提供给用户实实在在的好处，有诱饵式（分享后可获得好处），众筹式（其他用户点击可以帮助本人获得好处）。最好的效果是让用户觉得占了便宜，而非得来的东西便宜。打个比方，用户参加了某次活动，如果直接派代金券，未免显得这个代金券来的太廉价。这里可以借助抽奖和游戏来进行包装。比如采用伪随机算法，将中奖概率提升；通过游戏成绩来区分奖品等级。或者是二者的结合。

基于数据如何来响应呢？

H5页面本身作为网页发布流程比原生应用要容易，即使是活动上线，也是可以进行元素更换的，这里的流程是这样：

页面元素埋点→上线→检测点击率→更换页面元素→再次上线

替换的页面元素，理论上是可以涵盖页面的所有元素，但基于成本考虑，比较适合的包括，按钮的文案，朋友圈分享后的默认文案和配图，这是修改成本最低而且容易出效果的。

比如我们在撒娇节的H5 游戏的朋友圈文案就至少有3版，可以对比来看哪些更容易吸引人。

这里分享一些经验：

① 将首屏页面的大小控制在一定范围内。用户的忍受加载时间平均为5秒，我们可以通过网速测试来判断目标用户的手机访问速度V，首屏页面的大小≤V*5，其他页面则采用异步加载。只要时间超过2秒，就添加loading效果，最好结合主题本身，如下：

② 将按钮做大，做明显。移动场景中，用户对按钮的感知会模糊一点，也可能是操作成本低的原因，一些大一点的图标，会动的元素，都会成为点击的目标。所以设计的按钮要足够醒目，要有行动呼吁。

③ 减少输入的场景，这对转化率很伤。谢天谢地，由于微信开发接口，终于直接读用户ID了，为了通知兑奖，一开始会采用输入电话号码的情况，但不少人会直接放弃。想想新年的支付宝红包吧…

④ 屏数滑动类型的埋点可以考虑建立一个透明的层进行埋点，重点分析那些跳出率高的内容。

▪ 以女性思维来交互设计，文本之源

考虑到篇幅问题和时机问题，这里不展开来写，也不谈为什么要用女性思维来进行交互设计，抛出三个点，欢迎大家讨论。

① 不关注过去，不考虑未来，只考虑当下

忘掉品牌过去有多少沉淀，多么高高在上。要想得到用户更多的认同并分享，将姿态放平，这时候我们和用户的关系，是朋友，不是长辈，也不是导师。

层级要平，最好的不要超过4个层级，短期记忆中，人的大脑内存为4个容量，这是自动保存可轻易回忆起来的容量。

内容要平，设计风格建议轻盈一点，兼顾品牌的视觉识别规范，降低用户的心理负担，多用点高短调，高中调，高长调的配色（不清楚可百度），如下图，少用低调颜色。

对话要平，多用下切（细化内容和事实），少用上推（概括目的和意义）。在文案设计上，需要更加具体，形象，细节的东西。打个比方：同样是表达游戏成绩的文案链接。

上推：在撒蕉游戏中，我取得了一般的成绩。

下切：我抿着小嘴，跺着小脚，才撒了50斤香蕉~

很明显，我会更想点击下面的文案链接。

② 设计的一切，围绕着“连接他人”

在微信朋友圈环境下，我们的每一个互动都是一次连接，每个分享都有着与他人建立联系的潜在诉求。设计应该围绕着“连接他人”。

女性思维本质上是利他的。所以在设计中不妨引入他人的互动。

简化感知过程，做到“连接最简化”，这一点微信朋友圈已经给我们很好的例子，即“❤赞”的功能，点击后，用户的头像会一排排出现在内容下面。一次点击，即可建立连接，并且有反馈。

比如我们在六周年庆所设计的唯品会欠点红包，用户进来后，整个页面设计只有一个icon按钮，通过一次点击，即可帮作者“增肥”红包。好友的头像也会保留在作者的页面中。从结果看来，这是个比较成功的案例。

③ 感知而非计算，文本之源

大脑本来就是通过感知而非计算的，人的判断来源于不同感觉之间的联动，而不单单只是从视觉或者听觉，人类大脑开始从这些感觉中找到共同点，并进行加工还原，从而形成对事物的整体把握。

在主题选择上，围绕着人情场景进行拓展，比如招贵人，家人团圆，压岁钱等，场景上打通社交潜意识；

在交互上，结合手机的硬件属性，尽可能模拟现实场景，比如摇签，按指纹，照相机扫描等，强化场景感；

在文案设计上，尽可能避免消极词汇，公式如：否定词&消极词汇≤肯定词

（举个栗子：撒蕉游戏，极简的交互（摇一摇），结尾的明星留言彩蛋，提高了游戏的可玩性。轻快的游戏场景和“前辈”社交元素，这些都能提高用户的分享意愿。）

…

篇幅又超了，就此打住。

更多可以参考我之前的文章：文本之源（一）——那些有趣的例子