勋章设计怎么搞？浅析勋章页面设计细节

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

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

一、什么是勋章

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

 

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

 

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

二、勋章的作用

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

 

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

三、勋章页的构成

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

1.勋章页入口

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

 

放置在个人中心

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

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

 

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

放置在个人主页

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

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

2.勋章墙

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

 

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

勋章墙中的已获得勋章信息包括用户总获得的以及不同类别勋章的单类获得数，显示总获得数的勋章墙会在顶部加入用户的获得信息，帮助用户一眼识别。

在勋章墙的设计中，注意要做好获取与未获取勋章的区别样式，重点是保证用户能一眼识别出获得与未获得的勋章，多是将未获得的勋章置灰处理。反面例子如下：

上图KEPP中，已获得勋章是将其正常颜色展示，而未获得勋章采用的浅紫灰色，我一眼看过去时真的没有反应过来哪些是未获得的。

3.勋章详情说明

勋章详情说明是在勋章墙展示中，点击勋章后以弹窗的形式展示出来的，包括全屏弹窗与非全屏弹窗两种展现形式。

 

全屏弹窗详情说明

勋章详情说明采用全屏弹窗能承载更多的信息，除了可以包括获取说明外，还可以承载奖励说明、获取进度以及获得后的分享炫耀按钮等。

上图中得到与咕咚的该勋章都属于升级类勋章，勋章本身有级别的划分，左右切换可查看不同级别的勋章，像这样有等级划分的勋章采用全屏弹窗会更加直观

 

非全屏弹窗详情说明

承载的信息较少，一般只包括简短的说明信息，更加简洁轻量。如下图：

知乎与开眼都采用的非全屏图片弹窗，视觉效果更加轻量。知乎虽然也有等级划分类的勋章，但由于采用的非全屏弹窗，等级切换采用的是点击切换，说明文字也更加简洁。而开眼则直接在文字中说明下一等级勋章，并不能直接切换查看。

4.进度展示

需要累积获得的以及等级划分的勋章还需要加入获取进度。我汇总了3种勋章进度展示的样式，包括进度条、数字进度、文字说明。

 

进度条

以一个横向进度条展示在勋章详情说明中，能够直观看出当前进度占比，对升级进度有一个大致的判断，占屏比较大，适合放入全屏弹窗详情说明中。

上图中咕咚进度条只展示了进度百分比，而波洞的进度条同时配上文字说明，升级进度更加精确。

 

数字进度

左边为当前达到数字，中间斜杠隔开，右边为该勋章获取总达到数字。升级进度精确，占屏比小，即可放入全屏弹窗详情说明也可放入非全屏弹窗详情说明。

文字说明

文字说明进度直接告诉用户还差多少具体的进度，没有总进度展示，进度也很精确，占比小，注意需要对文字进行字数限制。

5.勋章图标

勋章图标作为勋章设计中最重要的一环，需要UI设计师花费很多的心思。勋章图标目前多为图形图标，我只看到开眼是采用的图片类勋章。

在设计图形勋章时以现实生活中的勋章为灵感，多采用统一的勋章背景模板，保证整体勋章墙的视觉统一，便于多次复用。常用的形状有六边形、圆形、盾牌形状等。

切忌在设计图形勋章时采用复杂的背景模板，以免降低了勋章内部主体的层级。

四、划重点

本文主要为大家浅析了勋章设计的定义、作用以及勋章页的构成。

 

• 勋章的定义：勋章是指授给有功者的荣誉证章或者标志；

• 勋章的作用：勋章能带给获得者精神上的满足，一定程度上激励用户不断使用产品；

• 勋章页的构成：包括勋章页入口、勋章墙、勋章详情说明、进度展示以及勋章图标。

参考引文：

《聊一聊勋章设计的“道”与“术”》http://1t.click/aHEz

《产品游戏化之如何设计勋章体系》http://1t.click/aHE2