从OPPO R17 Pro H5谈H5设计

作者: 交互_物语 | 来源:发表于2019-01-01 09:49 被阅读40次

OPPO 最近退出了R17 Pro 新年特别版,并且做了一款H5辅助线上传播。设计十分新颖,很容易引起用户的注意,可以说是一个优秀的H5设计。其实H5访问热度非常有限,一般只在开始推送H5的前两天,之后访问的可能性就会降低。所以要抓住用户眼球,让用户眼前一亮非常重要。我觉得OPPO这个H5成功抓住用户的眼球有以下几点:

1、视觉设计:

视觉设计出彩,古今中外的人物形象都有在这个H5出现,令人耳目一新。

2、页面层级:

采用长卷轴的方式展现商品,主要展示手机拍照的功能,古今中外的人物都拿着OPPO手机拍照,重点突出。长卷轴的展现方式不需要用户进行过于复杂的操作,也不需要经理跳转页面的过程,页面层级少,相对用户的流失率就比较低一些。相反,如果H5跳转层级太多,用户很容易感到不耐烦,从而关闭H5页面。

3、交互流畅,动画元素:

整个H5页面没有按钮的点击。主要的交互由用户自己挖掘。比如画面中某些地方可以点一点,物体就会动一动,或者掉落某些道具。点击人物手上拿着的手机,手机界面可以放大(如下图所示)等等。正因为H5层级界面少,没有按钮的点击,用户就会按照自己的习惯来操作页面,反倒给用户增加了体验的乐趣。如果H5是静态页面,那么再强学习能力的用户应该也不会想要点击。但是设计师很聪明,采用了动画的元素,例如荔枝的滚动,窗帘的飘拂等等引起用户的注意并引导用户点击。

整个H5采用的是长卷轴,因此用户的最主要的操作步骤只有滑动。比起让用户向左切换的交互方式,用户更倾向于手势滑动,因为这样整个H5的整体性更强,场景的沉浸性也更好。

4、文件体积:

文件体积应该不大,因为点开链接马上就能打开H5。如果一个H5文件过大,那么用户也会不想等。

5、游戏元素:

在长卷轴中用户可以收集五个隐藏道具,也就是彩蛋,增加趣味性,多点点多看看就能找到道具。道具一般都会有一定的动画或者发光,吸引用户注意。找到一个道具后,会弹出提示,还剩下多少个隐藏的彩蛋。

当然也有设计的不足之处:

1、收集道具的游戏玩法有点过于隐蔽。点击道具掉落收集有的地方做的不够明显,很容易让用户一滑而过。

2、关注到收集道具的玩法,最终成功收集并没有任何反馈,缺乏一定的奖励机制。

3、右上角发光灯泡的图标意义不够明确,很容易一开始误认为是调整亮度。(毕竟又和音量的icon放在一起)。实际上灯泡icon是显示需要收集的道具。个人觉得使用类似“福袋”的icon更适合,一方面也迎合了“新年”的节日气氛,另一方面也不容易误解。

最后附上此H5的链接(建议在手机上打开食用):https://hd.oppo.com/2018/newyear/index.html

相关文章

网友评论

    本文标题:从OPPO R17 Pro H5谈H5设计

    本文链接:https://www.haomeiwen.com/subject/wltnlqtx.html