01 前章
今年8月，我们启动了荣誉体系的设计项目，荣誉体系本身意在通过虚拟勋章更好的激励员工的积极性和职业成就感。
勋章是什么？我们首先看一下勋章的定义：勋章一般是授给有功者的荣誉证章或者标志。最早起源于古代欧洲用于区别战场上的骑士，一个名为勋章的标志制度得以发展。简而言之，勋章是荣誉的象征，能带给获得者精神上的满足，勋章系统本身更在乎的也是情感层面的激励。
现实生活中金光闪闪的奖牌
现实生活中，小到幼儿园得到的小红花，运动员获得的奖牌，军人胸前的各种荣誉，奥斯卡和金鸡奖的奖杯这些都算荣誉系统在起到作用。对应的，互联网产品中“勋章”也通常作为激励体系使用。我们似曾相识的在各种APP、游戏和平台中见过各种“小红花”，来提升我们对于该产品的粘性。
如果我们用很经典的马斯洛金字塔来解释这个事情，荣誉系统解决的往往都是人们比较高级的需求：“荣誉感、被尊重、被认可”。所以在荣誉系统的设计中，我们优先考虑的就是希望通过设计的呈现和视觉的传达，让我们的用户直接的感受到那份荣誉、尊重、认可。
这是一次“表达”>“形态”的设计主题，最后我们确定了“仪式感”作为这次荣誉系统设计的综合表述。
02 仪式感的设计
A.仪式主体设计
勋章是合作方唯一明确提给我们的需求内容，他们把涉及奖项、司龄、员工关怀、团队建设、公司文化、学习成长、人才招聘等等各个维度的内容进行了汇总，希望我们把他们统统都绘制成缤纷的勋章。
而我们做的第一件事是拆解，我们尝试了各个维度对这些勋章进行拆解，提取他们的关键属性，寻找他们的共性和要表达的不同核心思路，最终将其划分为两个大类，标签类和奖项类。
核心：是最需要突出“仪式感”“荣誉感”的一类勋章，是十分正式的认可
性格：庄重
表现：运用现实生活中金光闪闪的奖杯或品质感较高的奖牌突出表现主题，在材质和颜色上更加正式，多多的采用了金银黑红等思路
另外，在整体的视觉风格上，我们也更多的映射了现实世界的直观感受，以希望勋章本身能够给予获得者直观的刺激和获得感，所以设计风格更加立体，并稍微的调高了勋章的视角，采用了一种微仰视的视角。
部分评优类勋章
部分标签类勋章
可爱的司龄帮帮勋章
B.仪式环境设计
仪式感，是人们表达内心情感最直接的方式，它使得某一个时刻与其他时刻的不同。同样一个年轻人，放在光彩夺目的舞台和放在人流不息的街头，给人传达的含义是完全不一样的。一个好的视觉场景，用户会因为黑暗感受到恐怖，会因为花团锦簇感知到一股清香，会因为平静的海洋而触景生情，而我们要做的就是这种将视觉场景与主体相结合，带给用户更全面的情绪表达。
摇滚乐队演出的舞台光
对于环境的设计，我们调研了各种颁奖典礼，宗教仪式，经典电影动漫场景等等，制作了相应情绪板拟定主视觉风格。综合来说可把环境的要素分为：背景-核心表达-环境因子。
环境表达的要素
对应此次设计，我们提取出来的内容分别是深色的纹理背景，模拟现实的顶部光，向上升腾的不规则粒子。深色的背景不仅可以突出光影的效果，更加突出勋章的分量，稍微增加的纹理，也可以更加拉伸勋章的纵深，给人悬浮神秘的氛围渲染。顶部光是舞台/教堂等常用的光影效果，是从现实世界映射的极具仪式感的表现形式。搭配的向上粒子，不仅可以让整个环境更丰富，也更多的传达一种积极向上的企业文化。
多种光效加入营造“仪式感”
C.仪式行为设计
在做了这些之后，我们觉得对于“仪式感”这个视觉定位还有些欠缺，对应人们在现实世界的感受，仪式感更多的是一种行为的结果，而不是一个静态的主体静帧，我们联想到国粹里面经典的亮相。我们希望这次的勋章设计，不仅是一种主体呈现，而且还是一种行为呈现。
戏曲演员的亮相
所以无论是在主体本身的亮相和定身，还是环境光的亮相及循环呈现，我都有针对性的进行了相关的动效设计。让整个仪式的呈现更加具有时间惯性。希望，当用户点开勋章的一瞬间，会有一份惊喜在呈现。
勋章和环境加入动效后的亮相
主体-环境-行为设计思考模型
03 “仪式感”的落地
A.设计流水线
· 勋章流水线
在设计中期因为勋章量比较大，设计团队怎么提高设计质量和工作效率，统一设计标准就显得比较重要，基于这些问题我们制定了相应的勋章设计规范。从「图形、颜色、质感、结构」四个基础形态来执行整体的设计，制定初步的设计规则，帮助后续更加深入和准确地把控整体设计。
从4个维度梳理勋章规范
如此多的动效怎么才能快速产出且保证运动规律和节奏一致。
我们引入了动画库工具，在对基础动画的进行了拆解和提取后，制作了一套基础的动效范式。这个动效库保证了动效设计的统一节奏和基本规则，设计师可以在此基础上，根据勋章的具体内容对主体进行微创作即可。
在此基础上，本来可能花费大量精力的动效设计环节，反而成为了比较轻松和高效的一个过程。保证了我们的勋章设计，节奏统一又个性独立。
统一的动效库保证勋章的节奏一致，产出高效
B.动效的轻量化落地方案
动画框架的选择，我们分别对比了PNG序列帧、SVGA、Lottie等实现方式，最终选择使用AE+Lottie 的方案输出动画方案。Lottie导出Json文件交付给开发同学，开发同学简单调整、稍做关联就可以完美实现动画效果！在本次荣誉体系项目中，我们使用Lottie实现了全部动效设计，在项目极为紧急的情况下，既保证了视觉呈现，又避免了占用过多开发资源，总体来说成果喜人。
04 结语
以上，是我们这次项目中总结出的对于“仪式感”设计思考以及复盘。希望对大家有所帮助。
在整个项目开发过程中设计团队和开发团队配合紧密。在此，也要特别感谢BIC的开发团队和HR童鞋对我们不断尝试的支持，虽然过程布满荆棘，但也充满挑战，不仅锻炼了团队，也提升了多维专业能力。
原文地址：58UXD（公众号）
作者：环铁艺术家
