参考资料

https://ant.design/docs/spec/illustration-cn
Material Design 中文文档翻译
https://www.mdui.org/design/style/imagery.html#
Material Design 中文版极客学院团队出品（2018-11-28）（插图无法查看）
https://wiki.jikexueyuan.com/index.php/project/material-design/material-design-intro/introduction.html
（PS：真的需要用心读一遍）
插图的力量，打造有温度的企业产品（2019.01.18）（腾讯企点案例）
https://www.jianshu.com/p/6b746059c052
「Ant Design 4.0 探索专题」人人都是插画设计师，HiTu插画资产设计分享（2020-06-01）
https://mp.weixin.qq.com/s/0SMqtYOLpTkUCDA9V1L9sw

在线生成网站

https://icons8.com/vector-creator/
https://itg.digital/

图像的使用原则

选自Material Design https://www.mdui.org/design/style/imagery.html#imagery-ui-integration
图像不仅仅是装饰。它是一个强大的工具，可以帮助你表达和差异化你的产品。
大胆、生动、富有意味的图像可以帮助吸引用户。
无论气氛是沉闷安静还是多彩明亮，以下原则都可以帮助你成功地整合图像，为应用带来活力，无论是什么视觉品牌。
原则：

与人物相关的：与人物相关的图像可以反映出用户所处的情境。（唤起回忆，建立用户与应用程序的情感联系）（人脸有天然的亲和力，人眼目光有方向性）
有意义的：有意义的图像可以传达特定信息，让用户马上就能轻松理解。（比如：旅游产品可以放地标图片）
令人愉悦的：使用优美的插画来描绘场景，会使你的产品显得更加独特，并增添用户的愉悦感。

小技巧-配图策略

1.使用和场景相关的图片
确保图片与用户所处场景相关，并且随着场景变化图片也会动态变化。（比如早中晚、春夏秋冬使用不同的插图，为烘托节日氛围整体UI调整）
2.通过遮罩层打造沉浸感
当与前景内容交互时，背景图片可以加上一层遮罩打造沉浸感，比如可以通过颜色和遮罩层来暗示主图和缩略图是一体的。
3.使用多种介质：插图和照片
插图和照片可以同时存在于同一个产品中。照片应该自然的表达出一定程度的确定性，并且应该用于展示具体的实体或故事。在特定的照片不适用时，使用插画可以有效的表达概念和隐喻。
对于特定实体，应该首先通过照片来表达。
当内容不具有明确性时，使用和内容近似的插画以帮助理解。
4.远离老套的、不真实的照片
使用图像来传达有特色的观点。
对于特定的实体或品牌内容，请使用特定的图像。对于更抽象的内容，图像应该能解释其中的含义。老套的照片和剪贴画既不特殊，也不能解释含义，还可能让人感觉不真实。
5.在图像中要有焦点
焦点范围从单一的实体到整体，确保能以一种难忘的方式向用户传达一个清晰的概念。
可以使用颜色和构图、有意义的标志性元素给图像一个清晰的焦点，避免让用户去寻找图片的含义，并最大限度减少用户分心。
6.构建叙事
创建一个沉浸式的故事和场景，使你的应用更加人性化。通过视觉叙事来定义情绪，一个讲述故事的图片是非常有吸引力，且信息量很大的。缺乏故事的图片则会失去传达情绪、品牌和语境的机会。此外，适当的融入情景可以更有效的传达信息和品牌。

插画和摄影的选择

（PS：翻译质量不错）
插画和摄影可以运用在同一个产品中。摄影自动暗含了一定程度的特定性，从而应该用来展示特定的物体和故事。绘画则能有效的表现出概念和隐喻，而这一点是摄影所不具备的。对于特定的实物，首先考虑用摄影来表现。当所表达的内容并非具体实物（或者不能被具体实物所概括）时，绘画则可以传达出你的应用程序的信息，并且允许用户一目了然的理解内容。
A.远离图片库
对于特定的实体或品牌内容，要用具体的图像。对于较抽象的内容，使其具有解释性。而图片库(Photographic stock)和剪贴画(clipart)既不具体，又不具解释性。
B.创建一个让人感觉身临其境的故事和上下文(context)场景。
C.不要过度操作
保持图像的原始完整性，不要过度使用高度滤镜或高斯模糊，尤其是当试图去隐藏劣化(degradation)的时候。
D.有焦点
你的图像应当有一个标志性的焦点。小到单一物体，大到整体布局，都可以成为焦点。确保能够用一个让人印象深刻的方法，传递给用户一个清晰的概念。
E.构建叙事
创建一个让人感觉身临其境的故事和上下文(context)场景。
F.文字保护纱
暗纱(dark scrims)理想的透明度应当在20％-40％之间，亮纱(light scrims)理想的透明度应当在40％-60％之间，都要视具体内容来定。

小技巧-技术和UI

分辨率：确保图片尺寸适合跨平台显示。
比例与布局：在图库的场景中，大部分用的都是网格布局，也可以使用多种尺寸的缩略图来表达内容的层次结构。
文本保护：要使图片上的文本清晰可见，可使用遮罩。遮罩是一个轻量级、半透明的材料层。
遮罩的使用技巧：

为了避免条带效应（形成明显的条纹形状），渐变要尽可能长，渐变的中点建议在距离暗端 3/10 处。这使得渐变非常自然，且避免了边缘变得尖锐。
渐变的不透明度应该根据所处环境变化。在某些情况下，可以使用最低 10-20% 的渐变。
暗色遮罩与亮色遮罩：暗色遮罩的不透明度根据内容而定，最好在 20%-40% 之间。亮色遮罩的不透明度根据内容而定，最好在 40%-60% 之间。
对于较大的实景图，遮罩应该在文本区域，而不是覆盖整张图片。
颜色覆盖层和文本保护遮罩不同，颜色覆盖层可以作为设计元素使用。

头像：个人头像、品牌头像；圆形、方形；
图片处理技术/算法：高斯模糊（背景虚化、毛玻璃效果），从图片中提取主色；
缩略图；
图片预览，图片查看器；
图片裁剪与截取：长图，横图；
滤镜，艺术风格滤镜；

插图

背景

除了在传统的商业和艺术领域之外，插图在产品及界面中作为一种视觉语言产生越来越突出的影响力，在众多场景下成为提升用户体验的有效手段，因此成为设计趋势之一。
B端产品也逐渐告别冰冷枯燥的刻板影响，利用插图让用户感受温暖与人性：Atlassian，Intercom，Slack，Dropbox。

价值

・直观传递信息，帮助用户快速理解提升效率；
・提升界面趣味性，激发用户兴趣和行动；
・传递产品的品牌个性，帮助加深品牌印象；
・通过故事和用户建立情感联系，引起共鸣。

案例解读

现状分析与设计目标
设计构思
插图作为叙述性画面，有三个构成要素：角色、风格和内容

切入角色

A.代表企业形象：展现产品团队的能力、专业和责任感，帮助客户建立信任感。
B.代表用户群体：围绕不同的角色及其不同的诉求，结合插图的界面场景和情感化的设计目标，进行精准的故事讲述。

风格定义

不同的插图风格展现不同的产品气质。在插图风格选择上，首先对现有的流行风格进行整理归纳。插图的风格还需以产品需求为基础，展现产品及品牌的气质诉求。
“专业商务business+友好易用user friendly”

扁平风	时下流行的风格，扁平基础上含有明暗关系，简洁明了
线性风	运用形状及描边，对人或物进行抽象化处理，简洁圆润可爱
手绘风	对设计师功底要求较高，以个人风格为主，风格更多元
肌理风	在扁平的基础上，加入各种光影或纹理，强调质感或肌理
立体风	三维空间感明确，isometric等距风格为代表，微距模型感较强等距视角（Isometric）风格，也称为等轴测图
渐变风	以较少的主色进行拓展，采用近似色表现，可唯美也可以科技感

内容

相比于想象虚构的画面，描绘角色的真实需求场景或工作生活，可以帮助我们在产品上建立和用户的情感联系，有效地建立用户关怀，达到情感化设计的目的。

应用

插图的使用场景非常多，所以有必要梳理出插图设计及场景规范。
・空白页
空白插图将角色的生活场景结合界面功能，提升用户共鸣。（暂无XX）
・Placeholder
相较于直白的功能icon描述，以自然物体/场景为灵感结合功能信息，icon的设计可以更愉悦。
内容缺省场景下的配色偏轻，因为其适用于友好占位；而在一些新功能引导/出错场景，则设计更丰富的内容和动态效果，达到吸引关注或缓解焦虑的目的。
・出错页
在没有界面元素出错页场景下，插图加上简单GIF动效循环，缓解焦虑的同时，提升趣味性。
・新功能引导
告别单薄的图标，设计生动的插图故事场景，吸引用户关注未开启的功能。
・帮助中心
在帮助中心利用IP角色进行头图设计，建立用户教育场景下的初步认知。

规范梳理

插图规范的制定，包括肢体、颜色比例，图文组合等内容，涉及了各个端和不同界面场景，主要用于插图协作，避免风格产生太大差异，达到维持统一性的效果。

插图IP探索

通过对角色的性格识别进一步丰富和延展，打磨角色IP并设计周边提升影响力

Banner设计方法

超全面！写给入门新手的运营插画 Banner 设计指南（一）（二）（三）
https://www.uisdc.com/banner-design-guide
https://www.uisdc.com/banner-design-guide-2
https://www.uisdc.com/banner-design-guide-3

交互设计

图像 Illustration