勋章设计和勋章页面设计的细节解析

提起用户激励体系你会想到什么？积分体系？签到体系？或者是简单粗暴的现金优惠？

 以上都不是，今天我想和大家分享的是任务成就体系中的勋章设计。

一、什么是勋章

我们先来看看勋章的定义：    勋章，是指授给有功者的荣誉证章或者标志。    古代欧洲为了区别在战场上的骑士，一个名为勋章的标志制度得以发展。每一个贵族都会设计出一个独特的标志，制作在他的盾牌、外衣、旗帜和印章上。（摘自百度百科）

上面这段话有三个词语是重点，有功者、荣誉、独特标志。有功者反应了勋章不是每个人都能获得的，而荣誉则反应了勋章是荣誉的象征，能带给获得者精神上的满足。独特标志则区分了获得者与其他人。

小到小时候得到的小红花，大到奥运会国家赢得奖牌，这些都算是勋章（不同产品的叫法可能不同，有勋章、徽章、奖章等）。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

二、勋章的作用

上面我们说了勋章能带给获得者精神上的满足，那么延伸到互联网中，勋章设计的完善则能一定程度上起到满足用户的成就感，激励用户不断使用产品的作用，常用在内容类产品中，如视频类、知识付费类、阅读类产品中。

但是把勋章设计运用的最好的当属游戏类产品了，比如王者荣耀的勋章成就体系，借助获得难易程度不同的勋章，能使用户自主的不断使用产品，获得高等级勋章后还会被膜拜为大神，充分满足了用户的虚荣心。

三、勋章页的构成

勋章页大致由六部分构成。包括勋章页入口、勋章墙、勋章详情说明、进度展示、勋章图标。

1.勋章页入口

勋章入口一般有两个位置，一是放置在个人中心页中，还有一种则是放置在个人主页中。个人中心页只需点击底部tab切换即可看见入口，而个人主页还需用户再点击一次才可看见。

放置在个人中心

放置在个人中心的勋章入口大致也有两种样式，一种是以图标的形式跟随在昵称旁边，另一种则是放入个人中心列表功能入口中。如下图：

二者的选择主要是看个人中心的主要导航方式，一般宫格导航为主的个人中心页会采用勋章入口跟随昵称旁边，列表导航为主的则会将入口放入列表中。

当然，具体选择还是看勋章功能的重要程度，比如波洞的个人中心以列表导航为主，但勋章入口却是放置在顶部宫格中，我的理解是波洞的勋章功能层级较高，因此放在了更显眼的位置。

放置在个人主页

勋章入口多以图标形式跟随昵称放置在个人主页中，此类产品往往拥有较强的社交属性，用户拥有自己的动态主页，因此既能查看自己的，也能查看他人的勋章。

上图知乎的勋章入口还将用户拥有的勋章展示了出来，比起单个图标入口更能吸引用户点击进入

2.勋章墙

点击勋章入口进入的页面就是勋章墙了，勋章墙主要包括用户已获得的勋章信息以及产品包含的所有类别的勋章展示。

勋章墙展示几乎都是采用的宫格式布局，一般一行分布2~5个勋章，多以3个为主。