如何在UI界面中使用插图设计？试试这个实用的方法
关注▲Clip设计夹后台回复“进群”加入设计成长群
设计夹的第127篇文章分享
在产品设计中，插图用于空状态、错误页面、仪表盘、新手引导以及可以增强页面视觉效果的地方。
在保证产品功能性和有效性的前提下，使用插图能为用户带来愉悦感和情感化的体验。
插图设计原则
在产品中经常使用插图来突出产品界面中的某个特点或功能，同时强化产品的特征。
在UI设计中，对插图设计的要求包括：
视觉效果好，但不能过多分散用户对内容的注意力。插图在界面中更多是起到辅助支持的作用，好看的插图能与界面融为一体，让界面看起来更美观，也要确保能让用户更好地了解内容。
图层分析
为了能让产品中的插图保持统一的风格和样式，在设计时可以建立起图层的概念，统一规划插图的层级结构。
前景主要为次要元素，例如一些小的图形元素或者高光效果，起到装饰画面的作用。
中景作为插图主体部分，面积至少占整个插图的60%，并且需要清晰容易识别。
尺寸要求
在设计中，可能同一个插图需要用在很多不同的地方，需要适配不同的尺寸。这种情况下，我们需要考虑在不同尺寸下插图的样式和效果。
随着尺寸变小，插图的细节也应该简化，而不是单纯地把大尺寸的插图等比缩小。
在小尺寸的插图中，可以考虑省略小的装饰细节，简化图形样式，因为在尺寸很小的情况下我们无法分辨出太多的细节，并且会给识别插图增加负担。
例如，在空状态界面中，有足够的空间来使用大尺寸、样式复杂的插图效果。
而在内容界面中，留给插图的空间变得很小，这种情况下可以使用小尺寸、样式简洁的插图效果。
颜色选择
在插图颜色的选用上，首先要与品牌主题色相关联。
其次，还要根据在界面中的重要程度，输出一套带有颜色的主要插图和一套灰色的次要插图，这样能更有针对性地表达内容。
插图设计工具
通过介绍插图的设计特点，我们能对插图在UI设计中的应用有一个基本的了解。
但在设计插图时，需要考虑图形、元素、配色、风格等很多因素，是个费时费力的工作。对于手绘功底不太好的设计师来说，想要设计出一个视觉效果好的插图，仍是个不小的挑战。
这里设计夹推荐一个插图设计网站DesignStripe，可以在线编辑插图，调整颜色、描边、元素等效果。
另外，DesignStripe是一个国外网站，大家在使用的时候不用太担心版权问题。
DesignStrip是一个集合了很多插图资源的在线插图库，里面所有的插图都可以点进去二次编辑。
△例如，我们找到一个合适的插图，点击在线编辑这个插图，选择插图中的人物，可以随意改变人物头发和皮肤的颜色，变换多种人物姿势。
如果觉得这个插图太复杂，还可以调整插图的场景细节，对场景元素进行删减。
如果想要线性插图风格，可以直接滑动切换为线性、面性、线面结合等多种不同的插图风格。
在线编辑插图后，还能导出png、jpg、svg等多种格式，可以支持多个设计软件，应用到多种设计场景中。
在体验完DesignStrip后，设计夹觉得这个网站特别实用，能很好地提升设计效率。
而且目前在国内还没有看到过功能这么齐全的插图设计网站，希望有了这个网站的加持，能帮助大家更快更好地完成设计任务。
建议大家亲自去这个网站操作体验一下，相信亲自体验后你也会码住这个宝藏工具。
如果体验完你也觉得很好用，
🔗网站链接：designstripe.com ，也可以在公众号后台回复 插图 一键获取网站地址。
添加微信, 邀你进设计成长群🌟
🔥文章合集