能让人会心一笑的图标，是如何设计出来的？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

有趣的灵魂万里挑一，人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场，用户对产品或服务的诉求逐渐上升至心理层面，而人格化、趣味化作为共情设计的重要思路，对于品牌能否脱颖而出、提升用户认同感，发挥着不容小觑的作用。

本篇文章将以被窝家装的线上百科产品——“被窝知道”的icon设计项目为例，分享情感化设计的思考及创意过程，探索如何以视觉手段帮助品牌和用户建立起友好的沟通。

项目背景

在众多生活服务中，装修应当算是相对低频但流程复杂的一项了：不论是老房翻新还是新房美化，前期准备的疏忽往往会为后期施工带来各种隐患。在装前缺少清晰易懂的家装科普，正是大多业主的痛点之一。基于这样的背景，被窝家装推出了自己的线上百科产品——被窝知道：其配合工艺介绍、家装案例等板块，补齐了用户的装修知识系统，帮助业主规避潜在问题，提升家装体验。

本次需求为设计一套 icon，用生动、有趣的形式展现百科中的 80 余个知识场景。对装修疑问的解答过程，正是品牌同用户的一次交流互动。如何让沟通交流的过程专业但不枯燥，是本次设计需要解决的问题。

切入点：让 IP 成为沟通的入口

在被窝 app1.5 版本中，被窝设计团队结合用户调研梳理出了品牌传达的关键词：专业与温暖。为构建这样的品牌调性，在设计探索的过程中，我们格外注重品牌 IP——Mr.Wo的融入。

Mr.Wo 是随被窝品牌一起诞生的人物形象，他继承了被窝 logo 那双炯炯有神的大眼睛，并延续了被窝品牌积极、正面的情感内核：他可爱逗趣、充满好奇，对生活品质有着自己的追求和小执拗，也是努力实现美好居住的梦想家。

△ 图 1 被窝品牌与 Mr.Wo

作为品牌的“代言人”，我们再次选择 IP 形象作为视觉创意的切入点，让其成为与用户沟通的入口，帮助复杂的百科内容变得专业却不枯燥，温暖且更加有趣。

确立风格：从产品特征发散创意

确定了以 IP 为载体进行设计，但 icon 风格如何选择、温暖有趣要怎样体现等问题，还需要回到产品本身进行思考。结合产品功能进行分析，“被窝知道”有以下两点特征：

1. 问答形式展开叙述

在每个知识点中，“被窝知道”均采用一问一答的方式进行讲解。比起教科书似的陈述结构，聊天式的沟通过程更加具有亲和力，这也奠定了该产品轻松的氛围基调；

2. 内容多样场景具体

本次需要设计的 icon 约 80 余个，虽然部分知识点标题存在重复现象，但均针对了特定的生活场景及家装体验。举例来说，施工避坑章节中的“卫生间”知识点更加侧重常见隐患的解决方式；而空间功能板块中的“卫生间”知识点则更加聚焦主材的选择技巧。场景存在差异，所描绘的故事便也各不相同。

△ 图 2 从产品特征发散创意

结合以上特征，本次视觉创意发散的关键词为“轻松”与“故事感”。“轻松”对应产品本身的语言调性，目的是营造轻松、友好的阅读氛围；而“故事感”则是为了更好地区分场景，通过贴近生活的画面吸引用户，引发情绪共鸣。

注入灵魂：用趣味打动人心

基于以上分析，我们通过三个步骤来营造轻松、生动的视觉体验：

Step1. IP 融入-建立情绪触点

从产品入口到文章分享，IP 融入的目的是让风趣幽默的态度在产品内贯穿始终，增加情绪触点，赋予产品人格魅力。

△ 图 3 通过 IP 建立情绪触点

Step2. 调性把控-延续情绪氛围

在体验过程中，icon 需要做到视觉统一，以保证整体氛围稳定、连续。在本次需求中，我们从风格、色彩、复杂程度等不同维度对 icon 进行规范。

风格上，icon 统一使用线性+色块的视觉语言进行表现，其中线条用于勾勒基础场景，色块用于强调重点元素。色彩上，我们精简了图标颜色的选择，在品牌黄之外仅以蓝、橙这组撞色来辅助情感信息的表达。为营造“轻松”的视觉氛围，整套 icon 尝试使用断线风格来帮助页面创造呼吸感，避免复杂图案带来的拥堵与不适感。对于 IP 人物的使用，为简化细节并保证形象特征在小尺寸下依旧能被清晰识别，对人物比例进行了 Q 版处理，并规范本次需求中的最小使用尺寸。

△ 图 4 调性把控：延续情绪氛围

Step3. 升温共情-传递喜悦与乐趣

仔细分析，“被窝知道”中对各种装修疑问的解答，其实也是在回应用户各式各样的情绪：有期待的、兴奋的、激动的，也有焦虑的、犹豫的、不安的。在 icon 的设计过程中，我们可以通过诙谐、幽默的方式来强化正面情感、弱化负面情感：比如通过描绘 Mr.Wo 在飘窗上仰望星空的场景来放大对浪漫生活的憧憬之情；又或是用淡定清扫房间的 Mr.Wo 来缓解对卫生问题的忧虑之情。这样一来，家装百科所传达的便不只是严肃认真的科普，更表达了被窝愿意与用户一同打造美好新家的意愿。

△ 图 5 强化正面情感

此外，巧妙利用场景中的不同情绪，也能够拉大图标间的差异性、增加视觉的趣味性。之前有举例提到，同样是以“卫生间”作为标题，两篇百科内容中一篇侧重规避装修隐患、一篇侧重提升居住体验，分别对应用户的潜在痛点与爽点。在设计过程中回想卫生间里代表“爽”与“不爽”的元素，最先想到的便是厕纸与马桶搋子：能贱兮兮的翘着小拇指抽取厕纸，必然代表这位朋友顺利完成了今日的“健康指标”；而手足无措的握住马桶搋子，则表明厕所一定发生了什么不妙的事情。将两种场景具象化的描绘出来，既成功区分了标题重复带来的难题，也表达了品牌积极、阳光的性格。

△ 图 6 巧用幽默打造差异

小结

在家装领域的设计探索中，我们发现共情设计的核心目标是为用户带来美好的感受，唤起其对美好居住的向往。以幽默、风趣的设计手法持续寻找产品中的情感发力点，除了换来人们的会心一笑，也能够通过不断的情感累加，提升大众对于品牌的认同感与依赖感。

目前“被窝知道”已在被窝 APP 中上线，虽然目前我们仅从 icon 设计的角度对品牌的情感融入进行了探索，但在未来迭代及其他项目中，我们将尝试更加多元、灵活的创意方式来探索共情设计的方法路径。

欢迎关注作者微信公众号：「贝壳KEDC」