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

分类:用户体验观尔 | 作者:观尔腾 | 发表于2015/03/11

long time no see

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

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

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

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

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

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

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

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

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

如果是给好处的,在第一屏让好处更明显;

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

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

(正牌完败小三全攻略,展示型H5 页面,采用异步加载)

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

(2048游戏,保证稳定在一屏内避免手势冲突)

这里的总体原则是:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

image

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

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

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

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

基于数据如何来响应呢?

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

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

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

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

这里分享一些经验:

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

image

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

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

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

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

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

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

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

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

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

image

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

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

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

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

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

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

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

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

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

image

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

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

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

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

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

image

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

篇幅又超了,就此打住。

更多可以参考我之前的文章:文本之源(一)——那些有趣的例子

日志信息 »

« »
目前盖楼 (5)层:
  1. 汽车销量 說:

    传说中的微网站设计

  2. 灵芸 說:

    好啊博主,没想到啊,太好了

发表评论 »


页面载入中...