黑马哥第 177 篇原创
2022 年原创目标输出第 22 篇
-------------------------------------------
黑马青年
设计师 / 设计进阶讲师
一套 UI 设计作品想要打动面试官，除了在需求解决层面、体验分析层面、交互呈现层面和全案设计发挥层面做得比较优秀以外，视觉感的强化也是至关重要的。视觉感是吸引面试官关注度的第一层面，只有吸引关注了才会有观看作品的可能性，反之则会降低作品集的打开率。
提高视觉感的形式有很多，可以是 IP 形象的结合、突出的配色表现、精美的图形装饰、插画的风格强化等。而插画运用到 UI 设计中是视觉感较强的形式，也能体现出设计师的综合能力。
对于部分 UI 设计师来说，插画能力并不突出，单独展示插画作品不容易突出这个技能。而融入到 UI 场景中进行发挥，不仅可以提高作品的亮点，也能将插画这个附加技能的曝光度加大。
插画可以在 UI 的哪些场景进行发挥呢？下面通过一个插画作品进行案例展示，看看一张插画作品是如何撑起一套 UI 作品的。
1、Banner 设计主图
将插画作为 Banner 设计主视觉配图，在项目中也是非常普遍，作为作品包装来说绝对是提高视觉感的重要技巧。
2、封面展示配图
UI 场景中需要配图的部分很多，特别是封面展示。使用高质量的照片是大家的首选，不过插画形式带来的风格感和视觉效果也是不容忽视的。
3、个人中心头图
近些年个人中心头部区域背景设计被重视起来，除了通过品牌色和照片形式强化以外，弥散光、流体渐变、情感化插画等形式也十分流行。特别是插画的表达方式，带来的风格性和视觉感都是值得推荐的。
4、界面头部区域配图
界面头部区域通常的做法是白底或者品牌色为主，不过近些年插画形式的强化开始流行，带来的视觉感更强。以插画配图来作为区域背景，风格感也会更好些。
5、情感化弹窗设计
弹窗设计除了常规的系统级表达以外，以插画形式和 IP 形象结合表达，带来的感官体验也是不错的。特别是在活动性质的弹窗设计中，这样的表达形式已经形成一种流行趋势。
6、专题活动主视觉
近些年以插画和建模的场景设计替代照片合成，在专题活动主视觉中表现尤为明显。特别是插画形式的表达，不仅可以避免运用照片带来的版权问题，也能给专题页设计带来更强的特征感和视觉感。
7、插画形式的异形广告
异形（胶囊）广告近些年逐渐成为产品中广告表达的新颖形式，相较于束缚于边界的表达来说，异形广告在 UI 场景中的融合性更强，带来的视觉张力也是有目共睹的。插画形式结合到异形广告中，无论是在场景表达还是局部元素强化中发挥性都比较高。
8、空状态设计
空状态由单纯的文字提示演变到图文结合，感官层面越来越被重视。利用图形结合、IP 形象结合、小场景插画结合等，逐渐成为设计表达的趋势。
9、瓷片区的视觉强化
插画风格被运用到视觉表现层面案例较多，特别是在瓷片区的发挥，呈现出了风格多样的优秀案例。可以使用全场景插画作为背景设计，也可以使用小场景插画作为局部强化，还有使用部分插画元素作为点缀设计，视觉表现力丰富多样。
10、引导页/闪屏广告设计
插画被运用到引导页/闪屏广告设计中是相当普及的，也是非常有利于进行设计发挥的。插画元素表达的可控性可以满足主题创意的需求，特别是在广告创意形式的发挥中，可以绘制更加丰富的插画创意场景来满足客户需求。
小结
本文通过一张插画作品在 UI 场景中的运用举例，分析了插画在产品中的普及度和表现形式，以此来验证插画技能作为 UI 设计师必备技能的趋势。随着产品设计感官体验的不断升级，风格化和差异化的设计才能满足更多用户的感官需求，而风格多样的插画形式首当其冲。
希望这些插画结合 UI 场景的案例可以作为抛砖引玉，让大家重视插画在 UI 设计中的表现力，不断加强并掌握插画设计的能力。
不会插画怎么办？
如果你也想要在项目中运用插画来提高作品亮点，但是自己又不会插画，作为零基础的你机遇来啦！黑马家族推出零基础商业插画特训营，小班授课，老师亲自一对一指点插画技能，带你闯进插画的圈子。
一起突破吧!
如果你希望自己的设计思考更全面、设计技法更深入、作品输出更专业，或者你想跳槽去更大的公司。欢迎加入黑马哥的进阶特训营，我们一起努力！
本文来自微信公众号“黑马家族”（ID：heimauiued）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
