超全总结！6个章节深入聊聊插图在产品中的应用

一、背景概述

插图的使用已有 10,000 年的历史。最早的图画之一是西班牙发现的手部轮廓图，距今已有 66,000 多年历史。随着互联网的出现，大约在 1997 年，插图的使用逐渐增多，谷歌的每日涂鸦和红牛能量饮料就是其中的典型例子，包括国内的百度，它们都在将具有特殊意义的插图融入产品中。

在过去插图通常使用铅笔、粉笔、钢笔、蚀刻画和颜料完成，但现在经过技术的发展我们可以通过更智能的方式来呈现插图；

一个好的插图还可以更好地生动地传达信息，我们如何确定最合适的插图风格？插图怎么才能体现品牌感？怎么能引起用户群体的共鸣？对于内容，哪种类型的插图最能强调产品特性，本篇内容分享了相关的案例，并解析如何针对不同用户群体确定产品插图风格。

更多干货：

1. 当代产品设计中插图的战略价值

品牌差异化

以互联网产品为例，现在市场上随便拿出来个产品都会有一堆竞品出现，那如何在众多产品中体现自己产品的特性呢，除了功能层的差距外，无非就是“看和用”这个方面了，我们以看为例，像 Ant Design 的「科技温度」风格、Discord 的「夜光贴纸」风格，都展现了产品的个性化，甚至说从插图风格就能 get 到产品是做什么行业的；

信息传达

当情况挺复杂的时候，要是全靠大段大段的文字去讲清楚，用户可能得费不少劲才能弄明白。这时候，要是有插图来帮忙，往往就能直接把意思给展现出来，让用户能更快地抓住信息的核心意思，例如医疗类 APP 用插图替代专业术语；

情感化连接量化

好的插图不仅起到美化视觉信息传达的作用，也能够对业务起到数据方面的提升，例如多邻国的插图表情，他们在 2023 年的调研数据上显示 ip 系统提升用户学习时长 28%，Headspace 冥想插图动效减少用户焦虑指数；

二、如何设计出好的插图

1. 受众群体

不同的群体对于认知和喜好不同，首先就要明确是给谁做，每个产品都有自己用户画像，拿到用户画像去进行拆解设计目标，例如年龄在 18-25 岁，这就决定了设计风格偏年轻化，女性用户群体占比 70%，决定了色系不能使用过多的冷色系（产品主色如果不是按照群体来的，那当我没说），在例如是一线还是二线三线，职业分布如何，这些拆解出来后，方向不就确定了吗，无非就是通过受众群体做减法，减少无用的脑暴；

2. 设计原则体系

搭建插图系统和设计规范流程是一致的，都需要在最基础的设计原则框架下完成，否则就脱离了基本的体验；

信息传达的精准性

1. 视觉降噪原则：构图简单，突出核心表达信息，避免过渡装饰干扰用户
2. 语言符号化：使用行业共识的符号做为基础形象进行设计，降低认知成本以及适配国际化，例如网络中断使用 wifi、球形网络；

情感共鸣的层次化

1. 场景关联：除了基础的插图，在特定场景下的插图也要预判用户在当前场景下的情绪变化，通过插图来提升用户情绪峰值，例如社区产品中，用户成功发布一个帖子，给用户反馈的插图应当是开心、活跃让用户感受到产品的情绪价值；
2. 动态情感曲线：在新手引导中通过每一步的交互流程来变化插图表达的情绪，例如开始引导时突出表达信息，在一个流程结束时强化氛围鼓励用户，用户情绪进度期待→奋斗→高昂，促进用户进一步操作；

品牌基因渗透

1. 视觉原子构建：提取品牌色彩、标志性符号，形成基础的插图基因库；
2. 品牌故事元素贯穿全场景，例如茶颜悦色将古风和现代插图风格结合，创造了独特的品牌调性，并且每个插图场景都在传达品牌故事；

适配原则

1. 多端一致性：能够三端自适应适配尺寸，在小尺寸屏幕下插图的识别性是否会出现问题；
2. 扩展性：在各大节日时插图是否能够结合当前节日扩展，例如春节时插图是否可以添加灯笼烟花相关元素；

3. 风格系统构建

风格定位

插图风格系统是品牌视觉语言的延伸，需通过基因提炼-规则制定-动态迭代的三层框架实现规模化应用；提到喜茶能想到的是描边黑白风格插图，茶颜悦色就能想到古风，而提到飞书我们就能想到极简具有规则的形状插图，这就是通过插图风格提升用户对产品认知；

风格系统四个纬度

前面每一步的分析都是为执行辅助

三、插图应用场景

1. 核心功能

通过视觉表达降低用户认知负荷，引导用户关注或操作核心功能；

新手引导

这个比较常见，很多产品在新功能或者复杂功能的时候会建立新手引导的流程，这时候使用单一的箭头引导会比较单一，就需要添加一些插图做为情绪化引导，提升用户趣味性；

状态可视化

在一些上传、加载的场景其实也可以融入插图来缓冲用户焦虑，现在大多产品都是使用比较简单的加载方式，实际上可以将品牌插图融入进去；

2. 品牌价值传达层

将品牌 DNA 转化为可感知的视觉叙事，建立情感化认知锚点

超级符号 ip 渗透

在登录页/加载页/404 页等全链路重复品牌标志性元素，提升用户对品牌的记忆；

价值观场景化表达

用插图隐喻传递品牌主张（如环保产品用树木生长插图替代口号式文案）

节日仪式感表达

在特殊节日叠加一些装饰元素，提升仪式感，上面有提到融入节日元素；

3. 用户体验优化层

解决体验断点，通过情感化设计提升用户容忍度与愉悦感

负向场景安抚设计

出现 bug 的页面通过插图传递「可控感」，用修复工具插图+明确解决步骤缓解用户焦虑；

降低学习成本

在新功能上线时或者改版功能时，用插图对比新旧流程差异，这个主要在 b 端场景使用会比较多

情感峰值制造

在用户完成某项任务或完成某个阶段流程时给用户反馈出高成就感的插图，例如 keep 的成就解锁，学习软件种每日学习打卡成功等；

四、案例分析

分析三个不同行业的插图，来看看他们的插图差异化

1. 金融类 APP 的信任感构建

首先看看金融类产品如何在专业与用户情感传递之间进行平衡

符号系统化

颜色方面围绕稳重复合色（深蓝+浅金），避免高饱和色彩带来的廉价感；

场景克制表达

仅在低风险场景（如教育科普页）使用轻度拟人化角色，而核心功能涉及到数据方面的则使用抽象的数据的可视化插图；

文化兼容

在出海的一些国家涉及到文化冲突，例如在中东区域就删除了动物形象用植物和建筑符号代替；

2. 社交产品的年轻化表达

小红书通过潮流涂鸦的风格建立 z 时代圈层共鸣，为用户提供固定的模板，降低用户创作成本，提升产品的品牌主张，同时能够营造出社区统一的氛围感。

视觉特点

以线稿为主，为用户提供自由创意的涂鸦玩法。

五、未来趋势

实时渲染的个性化插图

动态生成：根据实时数据改变插图元素，如不同的天气、心率的高低、运动的步数等等；

天气软件中可以根据不同的天气变化背景，当然这个目前已经广泛应用了，但未来也是不变的一个趋势；

AI 效率性插图

可通过 ai 流程来制作统一的插图风格进行应用，并且风格的局限性相较于之前也更灵活了，在前几年只能通过 mj 喂图抽卡来生成统一的插图，并且时间成本非常高；

在前两年只能通过训练大模型的方式训练具有产品特点的模型，并且训练周期非常长，配置要求高，随着现在的技术更新，线上出现了很多训练模型的方式，不在依赖本地配置，通过线上训练的 lora 模型，内存比较小也方便调用，时间上相对之前大大提高；

六、聊一聊

上面的模型是之前训练的，曾经工作中有一部分需求需要大量的插图和 3d 图标（除了小女孩模型），之后为了提升效率干脆直接自己训练了，从模型可以看出风格不太一样，但是对于应用的场景都是同一个场景。

我对之前的那些需求的做法其实很不认可，花费了人力物力，最后做出这么些图标，最后的收益是什么，难道只是为了视觉上的好看，对于业务的收益，对于品牌的收益呢，在风格都没统一的情况下，连最基础的品牌一致性都没达到，并且我已经离开这么久了，需求还是没上线；难以想象某些大厂所谓的设计到底在设计什么哦，天下本无事，庸人自扰之。