创业项目实战：倾听机App情绪化表情设计全流程解析

这是我在2022年创业时接手的第一个项目，虽然项目因甲方未结款而遗憾终止，但其中关于“心情设计”的实践与思考，还是很有分享价值的。

今天就来系统复盘一下，我们为“倾听机”应用设计的一套情绪表情体系。

这套设计最终包含了7个等级的心情表情，覆盖从极度难受到极度开心的完整情绪光谱。

下面，我就详细拆解一下从造型提炼到表情绘制，再到颜色定义的全流程设计思路。

01 造型绘制：从吉祥物到核心符号

首先，我们从插画师那里拿到了初始的吉祥物造型，它是一系列生动可爱的方块角色。

但直接将所有造型原封不动地放入UI界面是行不通的，我们必须考虑其在有限空间内的最佳展示效果。这时，我参考了一些优秀的设计，例如下面这种将复杂形象简化为核心几何形态的做法。

我们的吉祥物主体恰好也是正方体。因此，一个关键的决策是：去掉四肢，仅保留身体部分。这样做有几个明显的好处：

1. 造型更稳固、整体：避免了零散的部件，视觉上更统一。
2. 视线更聚焦：我们的核心是传递情绪，去除次要部分能让用户的注意力完全集中在面部表情上。

此外，为了不让方块显得呆板，我们需要让它展现出一定的立体感，即能看到一些侧面。

当然，吉祥物头顶标志性的“小角”必须保留，这是维持其识别度的关键特征。

02 表情绘制：从参考到原创的细节打磨

在动笔之前，我们先广泛收集和观察各类表情包，不急于划分等级，而是先感受和筛选出那些能明确传达“开心”或“难过”情绪的典型表情。

从参考中挑选出一些结构清晰、易于转化并符合我们品牌调性的表情进行绘制尝试。

经过一系列草图绘制和筛选，我们初步确定了几个表现力不错的表情，然后根据情绪的强度对其进行等级排序。

在这个绘制过程中，有几个提升“可爱度”和“表现力”的细节技巧至关重要：

1. 五官紧凑才可爱
对比小孩和成人的面部特征，五官紧凑是显年轻的秘诀。在绘制可爱形象时，我们有意让眼睛向内倾斜靠拢，使五官布局更集中。

2. 优化“> <”这类线性表情
单纯的细直线条会显得生硬且缺乏质感。对于“> <”这类害羞、开心的表情，我们通过加粗线条并赋予其微妙的弧度，来增强软萌感。

3. 嘴角下垂的幅度与情绪强度挂钩
现实生活中，情绪越低落，嘴角下拉得越明显。在设计“不开心”系列表情时，我们刻意拉长了嘴角下垂的线条，用视觉长度直观表达情绪程度。

4. 同是曲线，为何情绪不同？
观察下面两个表情，眼部都用曲线表示，为何一个传达开心，一个却暗示难过？这源于我们对现实世界的隐喻：弯弯如月牙的眼睛自然关联到笑意。

而表示难过的下垂眼形，则是对应了人们沮丧时眼皮低垂的神态。

03 心情等级的颜色定义：色彩的情绪语言

颜色是情绪最直接的视觉载体。在我们的普遍认知中，暖色系（如红、橙、黄）通常与积极、热情、活力等正面情绪相关联；而冷色系（如蓝、紫）则常用来代表忧郁、冷静、神秘等中性或负面情绪。

首先，我们需要一个“情绪原点”——代表“正常”、“平静”或“中立”的中间色。绿色或青色在情绪表达上较为中性，不偏不倚，因此我们选用绿色来绘制这个基准表情。

确定了中间色后，我们参照色温条来为其他情绪等级赋色。以绿色为起点，向暖色方向（左）逐渐过渡为黄色、橙色、粉色，代表情绪越来越正面、热烈；向冷色方向（右）逐渐过渡为蓝色、紫色，代表情绪越来越负面、低沉。

将定义好的色彩应用到整套表情上，最终的效果就诞生了！

让我们看看它在实际应用界面中的效果。

延伸思考：优秀的情绪记录设计参考

情绪记录与表达已成为许多App的标配功能。这里分享几个我认为在设计或交互上做得不错的案例，供大家拓展思路：

1. QQ心情卡
它创新地将心情记录做成了“心情风铃”的样式，交互方式新颖有趣，赋予了记录行为更强的仪式感和视觉美感。

2. 支付宝心情日历（支付宝地下室）
以日历为载体，让用户对自己当月的心情变化一目了然，视觉化呈现做得非常清晰直观。

3. MOODA
这款应用采用可爱治愈的手绘风格，用最简单的图形和色彩传递情绪，体验非常轻松友好。

每一次具体项目的UI/UX设计实践，都是对设计理论的验证和深化。虽然这个项目未能落地，但其中关于情感化设计、符号提炼和色彩心理学的思考，对我后续的工作产生了积极影响。如果你也对产品设计与用户体验感兴趣，欢迎到云栈社区交流探讨，那里有许多同行分享的实战经验和资源。