产品@产品设计

没有排行榜的徽章系统,是你会怎样设计?

2017-05-03  本文已影响197人  阁主的叨叨

最近接手一个活,是设计徽章系统的。PM还没有整理完需求,于是自己先搭了一个最基础的框架,然后顺着市场上现有产品的思路一步步思考下去。

徽章系统是游戏化设计的一个环节,一般与积分和排行榜相连进行设计。可如果限于开发成本的原因,某个版本暂时不考虑积分和排行榜的设计(有徽章会涉及到积分和排行榜,这个另外在一篇文章进行说明)。也就是说徽章系统只能有list(列表页)、单个放大的页面,类似于iOS系统中iWatch的“健身记录”APP,如下图。应该如何处理这个问题呢?

列表页.png 单个徽章页面.png

咱们从源头来想想徽章系统设计的目的,它是游戏化设计中的一个环节。游戏化设计咱们从这篇文章开始慢慢进行讲解。游戏化是指运用游戏思维和游戏机制来解决问题和锁定用户的过程。——盖布·兹彻曼(Gabe Zichermann)。使用游戏和游戏元素背后的驱动力是相同的,都是要通过趣味性来激发和吸引用户,增加用户活跃性。

所以咱们的目的是一种用趣味化的方式让用户持续性用APP,以及在APP内与好友产生良性互动,进行一些社交。也就是说咱们现在就是针对这两个页面去想方设法,勾起用户的挑战欲,以及增强用户之间的互动。

解决办法有以下几点:

1.同样是所有徽章的list排列出来,不同的是突出最近获得的那一个,给予用户视觉上的重点以及一些熟悉感。最近获得的也是用户在看列表时,印象最深的。

思考的突破点是觉得iWatch的徽章列表只做展示没有比较强烈的情感注入在里面。当然iWatch的优点在于徽章的个性化设计,在徽章上面刻上了用户的名字和激活的时间,这个点可以拿来参考,但要做到3D的渲染效果图在第一阶段可以暂时不考虑(太费资源,囧)。

2.针对每个达到的徽章,添加时间与徽章名、徽章代表的主要活动信息,并且将这些信息放在最外层,一目了然,用户在迅速浏览的时候,不用再点到单个徽章详情页面再去看信息。如下图。

BadgeList.png

3.单个徽章的展示页面,分为激活和不激活两个状态进行描述,激活状态的,加上发生时间、徽章名称、代表内容详情、分享按钮。分享出去的H5页面,带有对方头像、事件发生时间、徽章的名称以及徽章的具体代表意义等因素,叙述的是一个完整的事件,与list页面的信息相呼应,也与APP内的页面内容保持一致。

同时在相应的页面也给予action button的提示,让用户在激活的状态下去分享,未激活的状态下去行动注意那个相机按钮,下文会用到)。 如下图

Badge_active.png Badge_unactive.png

4.个性化设置,比方说分享的时候,徽章背景可以自行上传,用户可以从相册中选择一张,或者现场拍一张进行上传,将图片进行裁切成固定比例。如果用户不上传就自动将徽章设置为背景,上传新的照片后,徽章作为水印的作用烙在图片上。

Badge fill pic.png

综合起来看,阁主的思路就是先根据一定场景,推断出用户的比较常见的行为,将行为表现在页面上。然后,再将整个行为过程中的页面进行分拆开,针对每个页面进行信息侧重点的区分,可以创新的地方先创新。最后再将所有页面的行为再连贯起来进行思考,让行为有所联系。

当然所有以上的解决方案都是基于各种限制条件下去进行调节的,如果想拥有更广阔的思路,就从整个APP的结构出发重新思考,会有不一样的大局观,从而产生不一样的思路。比方说,游戏化设计有三大要素:自主性(动机)、能力(挑战度稍比自己强)、关联性(与其他玩家的互动),这三大要素又会引导出游戏化设计的组成因素:game、得分、奖章或贴纸、排行榜、进度、限制因素。

且听下回分解~

Sophia的tips:
不管处于什么样的情况下都是会有解决办法的,只要肯花时间!

其它热门文章
《创业公司设计师怎样从0到1设计一款APP(七)——APP Logo的设计》
《创业公司设计师怎样从0到1设计一款APP(六)——整理和交接工作》
《创业公司设计师怎样从0到1设计一款APP(五)——UI规范整理》
《创业公司设计师怎样从0到1设计一款APP(四)——Hi-fi输出(下篇)》
《创业公司设计师怎样从0到1设计一款APP(四)——Hi-fi输出(上篇)》
《创业公司设计师怎样从0到1设计一款APP(三)——Low-fi输出》
《创业公司设计师怎样从0到1设计一款APP(二)——立项》
《创业公司设计师怎样从0到1设计一款APP(一)——概述》

上一篇下一篇

猜你喜欢

热点阅读