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

释放双眼,带上耳机,听听看~!
本文以「被窝知道」的图标设计项目为例,分享情感化设计的思考及创意过程,探索如何以视觉手段帮助品牌和用户建立起友好的沟通。

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

本篇文章将以被窝家装的线上百科产品——“被窝知道”的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」

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

给TA打赏
共{{data.count}}人
人已打赏
教程分享

为什么我临摹的时候还行,但让我原创就不行呢

2021-4-20 17:18:10

教程分享

如何设计直播间转化更高?试试京东都在用的贴片!

2021-4-21 17:17:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索