插图的使用已有 10,000 年的历史。最早的图画之一是西班牙发现的手部轮廓图，距今已有 66,000 多年历史。随着互联网的出现，大约在 1997 年，插图的使用逐渐增多，谷歌的每日涂鸦和红牛能量饮料就是其中的典型例子，包括国内的百度，它们都在将具有特殊意义的插图融入产品中。
在过去插图通常使用铅笔、粉笔、钢笔、蚀刻画和颜料完成，但现在经过技术的发展我们可以通过更智能的方式来呈现插图；
一个好的插图还可以更好地生动地传达信息，我们如何确定最合适的插图风格？插图怎么才能体现品牌感？怎么能引起用户群体的共鸣？对于内容，哪种类型的插图最能强调产品特性，本篇内容分享了相关的案例，并解析如何针对不同用户群体确定产品插图风格；
1、当代产品设计中插图的战略价值
以互联网产品为例，现在市场上随便拿出来个产品都会有一堆竞品出现，那如何在众多产品中体现自己产品的特性呢，除了功能层的差距外，无非就是“看和用”这个方面了，我们以看为例，像Ant Design的「科技温度」风格、Discord的「夜光贴纸」风格，都展现了产品的个性化，甚至说从插图风格就能get到产品是做什么行业的；
当情况挺复杂的时候，要是全靠大段大段的文字去讲清楚，用户可能得费不少劲才能弄明白。这时候，要是有插图来帮忙，往往就能直接把意思给展现出来，让用户能更快地抓住信息的核心意思，例如医疗类APP用插图替代专业术语；
好的插图不仅起到美化视觉信息传达的作用，也能够对业务起到数据方面的提升，例如多邻国的插图表情，他们在2023年的调研数据上显示ip系统提升用户学习时长28%，Headspace冥想插图动效减少用户焦虑指数；
不同的群体对于认知和喜好不同，首先就要明确是给谁做，每个产品都有自己用户画像，拿到用户画像去进行拆解设计目标，例如年龄在18-25岁，这就决定了设计风格偏年轻化，女性用户群体占比70%，决定了色系不能使用过多的冷色系（产品主色如果不是按照群体来的，那当我没说），在例如是一线还是二线三线，职业分布如何，这些拆解出来后，方向不就确定了吗，无非就是通过受众群体做减法，减少无用的脑暴；
|
用户特征 |
设计切入点 |
|
18-25岁 |
年轻化风格、新颖、趣味性 |
|
男性70% |
减少暖色使用，冷色为主 |
|
一线城市居多 |
避免营销化、低端风格 |
|
对科技、技术感兴趣 |
冷色系、极客风、极简... |
搭建插图系统和设计规范流程是一致的，都需要在最基础的设计原则框架下完成，否则就脱离了基本的体验；
视觉降噪原则：构图简单，突出核心表达信息，避免过渡装饰干扰用户
语言符号化：使用行业共识的符号做为基础形象进行设计，降低认知成本以及适配国际化，例如网络中断使用wifi、球形网络；
场景关联：除了基础的插图，在特定场景下的插图也要预判用户在当前场景下的情绪变化，通过插图来提升用户情绪峰值，例如社区产品中，用户成功发布一个帖子，给用户反馈的插图应当是开心、活跃让用户感受到产品的情绪价值；
动态情感曲线：在新手引导中通过每一步的交互流程来变化插图表达的情绪，例如开始引导时突出表达信息，在一个流程结束时强化氛围鼓励用户，用户情绪进度期待→奋斗→高昂，促进用户进一步操作；
视觉原子构建：提取品牌色彩、标志性符号，形成基础的插图基因库；
品牌故事元素贯穿全场景，例如茶颜悦色将古风和现代插图风格结合，创造了独特的品牌调性，并且每个插图场景都在传达品牌故事；
多端一致性：能够三端自适应适配尺寸，在小尺寸屏幕下插图的识别性是否会出现问题；
扩展性：在各大节日时插图是否能够结合当前节日扩展，例如春节时插图是否可以添加灯笼烟花相关元素；
插图风格系统是品牌视觉语言的延伸，需通过基因提炼-规则制定-动态迭代的三层框架实现规模化应用；提到喜茶能想到的是描边黑白风格插图，茶颜悦色就能想到古风，而提到飞书我们就能想到极简具有规则的形状插图，这就是通过插图风格提升用户对产品认知；
前面每一步的分析都是为执行辅助
|
品牌基因提取 |
从品牌色、logo中提取颜色标志性符号，上面提到过 |
|
用户认知匹配 |
例如年轻用户偏高饱和，小众独特风格，但银行类的产品就需要体现出权威、安全、稳重的风格 |
|
组件化拆解 |
代入组件化思维，从小到大进行搭建，例如原子层→分子层→模块，也可以根据场景搭建基础层→装饰层→插图 |
|
情感化分类 |
按照场景情绪进行分类，成功、错误、失败 |
通过视觉表达降低用户认知负荷，引导用户关注或操作核心功能；
这个比较常见，很多产品在新功能或者复杂功能的时候会建立新手引导的流程，这时候使用单一的箭头引导会比较单一，就需要添加一些插图做为情绪化引导，提升用户趣味性；
在一些上传、加载的场景其实也可以融入插图来缓冲用户焦虑，现在大多产品都是使用比较简单的加载方式，实际上可以将品牌插图融入进去；
将品牌DNA转化为可感知的视觉叙事，建立情感化认知锚点
在登录页/加载页/404页等全链路重复品牌标志性元素，提升用户对品牌的记忆；
用插图隐喻传递品牌主张（如环保产品用树木生长插图替代口号式文案）
在特殊节日叠加一些装饰元素，提升仪式感，上面有提到融入节日元素；
解决体验断点，通过情感化设计提升用户容忍度与愉悦感
出现bug的页面通过插图传递「可控感」，用修复工具插图+明确解决步骤缓解用户焦虑；
在新功能上线时或者改版功能时，用插图对比新旧流程差异，这个主要在b端场景使用会比较多
在用户完成某项任务或完成某个阶段流程时给用户反馈出高成就感的插图，例如keep的成就解锁，学习软件种每日学习打卡成功等；
分析三个不同行业的插图，来看看他们的插图差异化
首先看看金融类产品如何在专业与用户情感传递之间进行平衡
颜色方面围绕稳重复合色（深蓝+浅金），避免高饱和色彩带来的廉价感；
仅在低风险场景（如教育科普页）使用轻度拟人化角色，而核心功能涉及到数据方面的则使用抽象的数据的可视化插图；
在出海的一些国家涉及到文化冲突，例如在中东区域就删除了动物形象用植物和建筑符号代替；
小红书通过潮流涂鸦的风格建立z时代圈层共鸣，为用户提供固定的模板，降低用户创作成本，提升产品的品牌主张，同时能够营造出社区统一的氛围感。
以线稿为主，为用户提供自由创意的涂鸦玩法。
动态生成：根据实时数据改变插图元素，如不同的天气、心率的高低、运动的步数等等；
天气软件中可以根据不同的天气变化背景，当然这个目前已经广泛应用了，但未来也是不变的一个趋势；
可通过ai流程来制作统一的插图风格进行应用，并且风格的局限性相较于之前也更灵活了，在前几年只能通过mj喂图抽卡来生成统一的插图，并且时间成本非常高；
在前两年只能通过训练大模型的方式训练具有产品特点的模型，并且训练周期非常长，配置要求高，随着现在的技术更新，线上出现了很多训练模型的方式，不在依赖本地配置，通过线上训练的lora模型，内存比较小也方便调用，时间上相对之前大大提高；
转载：
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
