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

4.进度展示

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

进度条

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

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

数字进度

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

文字说明

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

5.勋章图标

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

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

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

四、划重点

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

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

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

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

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