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

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

咱们从源头来想想徽章系统设计的目的，它是游戏化设计中的一个环节。游戏化设计咱们从这篇文章开始慢慢进行讲解。

游戏化是指运用游戏思维和游戏机制来解决问题和锁定用户的过程。——盖布·兹彻曼（Gabe Zichermann）

使用游戏和游戏元素背后的驱动力是相同的，都是要通过趣味性来激发和吸引用户，增加用户活跃性。

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

解决办法有以下几点：

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

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

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

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

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

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

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

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

且听下回分解~

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

相关阅读

1. 《创业公司设计师怎样从0到1设计一款APP（七）——APP Logo的设计》
2. 《创业公司设计师怎样从0到1设计一款APP（六）——整理和交接工作》
3. 《创业公司设计师怎样从0到1设计一款APP（五）——UI规范整理》
4. 《创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（下篇）》
5. 《创业公司设计师怎样从0到1设计一款APP（四）——Hi-fi输出（上篇）》
6. 《创业公司设计师怎样从0到1设计一款APP（三）——Low-fi输出》
7. 《创业公司设计师怎样从0到1设计一款APP（二）——立项》
8. 《创业公司设计师怎样从0到1设计一款APP（一）——概述》

专栏作家

Sophiallg，微信公众号：Sophia的玲珑阁，人人都是产品经理专栏作家。一枚爱折腾，爱健身的交互设计妹纸。

本文原创发布于人人都是产品经理，未经许可，禁止转载。