项目背景
插画在UI中运用已经不是什么新鲜事,但是在项目中大家都擅长不同的设计风格,在图形化的工作协同中,风格难复现和统一。所以为了保持图形化设计输出的一致性,建立插画库就显得尤为重要。
产品概述
慧徕店是专为商户推出的数字化管理系统,具有商品管理、会员管理、经营分析、聚合支付、库存管理、营销管理等多种新零售解决方案。
产品定位
对产品有了清晰的了解之后,我们来大致梳理一下产品定位,有了统一清晰的产品定位之后,也可以更好的定位设计目标和设计方向。
情绪板
在进行插画库设计之前,需要先做好准备工作,对项目有充分的了解和调研,找到合理的设计目标。情绪板可以有效统一大家对产品的理解,并且也可以让非设计工作人员参与进来,在关键词的脑暴过程中可以更多的去了解大家的想法,从而再有效的进行
关键词
从用户属性、行业属性和产品诉求3个方面进行关键词的分析,提炼出了衍生关键词,再按照指定关键词进行参考图的收集与整理。
对关键词我们再次进行分析和整理,对于用户来说,简洁实用才是第一位的,且由于B端产品的属性,整体界面并不会像C端那样色彩丰富,不过由于B端业务场景的多样化,对于插画库的要求也需要能应对较为多样化的场景。
设计风格参考
B端插画相对来说对质感要求不高,所以一开始就将目标锁定在了扁平插画范畴,在参考时,除了插画的设计风格,还包括人物的衣服、发型、动作、配色、构图等等。从以下参考中了解当前主流扁平插画的运用,从而运用到项目当中。
构图分类
结合产品与参考,将插画构成分为了背景、中景与前景,并在画面不充分或者构图不和谐时使用点缀元素,以此规范来保证画面整体的和谐统一。
插画系统
插画构成的详细介绍
人物比例
在人物比例上,男生采用接近真实比例的8头身,女生则同样接近8头身,没有采用7.5头身的原因是在排版时,可以使人物基本在同一水平线上。
三视图展示
制定好基本的结构,并以此为基础进行人物动作的延展。
动作延展
人物的设定上没有添加太多细节,没有设置表情和特定服饰,在适配上可以尽可能多地适配公司多种业务和场景。
背景层组件
背景层以展现大场景为主,列为通用、城市、室内、商户等,主要结合业务场景,给出大的氛围方向,在视觉层级上为最弱。
中景层组件
展现B端中常出现的数据分析、电脑、手机、云等元素,增强画面的凝聚力。
点缀层组件
点缀层作为氛围补充之用,同样是围绕常见的氛围元素,例如时间、钱包、礼物、盆栽、植物、气泡等,用来丰富画面。
组合示例
下图给出组合规范,对于常用场景的规范搭建,不过基于当前处于业务拓展期,场景和业务会不断迭代,仅作为参考示范。
总结
此次插画库设计有两个比较大的问题,一是人物动作与比例的统一,二是关于整体场景的适配与适用性。人物比例的统一于协调是插画库的关键,基本上所有的场景都与人物有关,因此在人物动作上也是尽可能多地进行延展,不过当前人物主要以正面和3/4侧面为主,之后还需要尽可能多的补充不同的角度。此外,插画库比较适用一些重复性、普适性强的场景,若有其他业务场景,或者当前插画库不能适配的,需要根据实际场景或者业务需求进行绘制。