【UI设计】B端产品插画库的设计运用

0-封面.png

项目背景

插画在UI中运用已经不是什么新鲜事，但是在项目中大家都擅长不同的设计风格，在图形化的工作协同中，风格难复现和统一。所以为了保持图形化设计输出的一致性，建立插画库就显得尤为重要。

产品概述

慧徕店是专为商户推出的数字化管理系统，具有商品管理、会员管理、经营分析、聚合支付、库存管理、营销管理等多种新零售解决方案。

产品定位

对产品有了清晰的了解之后，我们来大致梳理一下产品定位，有了统一清晰的产品定位之后，也可以更好的定位设计目标和设计方向。

1-产品定位.png

情绪板

在进行插画库设计之前，需要先做好准备工作，对项目有充分的了解和调研，找到合理的设计目标。情绪板可以有效统一大家对产品的理解，并且也可以让非设计工作人员参与进来，在关键词的脑暴过程中可以更多的去了解大家的想法，从而再有效的进行

关键词

从用户属性、行业属性和产品诉求3个方面进行关键词的分析，提炼出了衍生关键词，再按照指定关键词进行参考图的收集与整理。

2-关键词.png

对关键词我们再次进行分析和整理，对于用户来说，简洁实用才是第一位的，且由于B端产品的属性，整体界面并不会像C端那样色彩丰富，不过由于B端业务场景的多样化，对于插画库的要求也需要能应对较为多样化的场景。

设计风格参考

B端插画相对来说对质感要求不高，所以一开始就将目标锁定在了扁平插画范畴，在参考时，除了插画的设计风格，还包括人物的衣服、发型、动作、配色、构图等等。从以下参考中了解当前主流扁平插画的运用，从而运用到项目当中。

3-参考图片整理.png

构图分类

结合产品与参考，将插画构成分为了背景、中景与前景，并在画面不充分或者构图不和谐时使用点缀元素，以此规范来保证画面整体的和谐统一。

4-构图分类.png

插画系统

插画构成的详细介绍

人物比例

在人物比例上，男生采用接近真实比例的8头身，女生则同样接近8头身，没有采用7.5头身的原因是在排版时，可以使人物基本在同一水平线上。

5-人物比例.png

三视图展示

制定好基本的结构，并以此为基础进行人物动作的延展。

6-人物比例_男.png

7-人物比例_女.png

动作延展

人物的设定上没有添加太多细节，没有设置表情和特定服饰，在适配上可以尽可能多地适配公司多种业务和场景。

8-动作延展.png

背景层组件

背景层以展现大场景为主，列为通用、城市、室内、商户等，主要结合业务场景，给出大的氛围方向，在视觉层级上为最弱。

9-背景组件.png

中景层组件

展现B端中常出现的数据分析、电脑、手机、云等元素，增强画面的凝聚力。

10-工具层组件.png

点缀层组件

点缀层作为氛围补充之用，同样是围绕常见的氛围元素，例如时间、钱包、礼物、盆栽、植物、气泡等，用来丰富画面。

11-点缀层.png

组合示例

下图给出组合规范，对于常用场景的规范搭建，不过基于当前处于业务拓展期，场景和业务会不断迭代，仅作为参考示范。

12-组合示例.png

总结

此次插画库设计有两个比较大的问题，一是人物动作与比例的统一，二是关于整体场景的适配与适用性。人物比例的统一于协调是插画库的关键，基本上所有的场景都与人物有关，因此在人物动作上也是尽可能多地进行延展，不过当前人物主要以正面和3/4侧面为主，之后还需要尽可能多的补充不同的角度。此外，插画库比较适用一些重复性、普适性强的场景，若有其他业务场景，或者当前插画库不能适配的，需要根据实际场景或者业务需求进行绘制。