如何设计并落地一个插画系统? - 图1写在前面

    拥抱变化,是互联网人的座右铭。
    小步迭代,快速响应,只为降低成本、提升效率。
    一切都在变,对效率的追求不变。
    插画,作为一种高效的视觉设计形式,自然备受互联网公司的青睐。

    如何设计并落地一个插画系统? - 图2

    但是,“插画”真如我们想象的那么“高效”吗?
    不,答案是否定的,未经整合形成系统的插画,会造成元件重复设计、无法最大程度提升公司的生产效率,并且会影响品牌一致性。
    我们要拥抱的高效插画,不仅是一个高效的单次产出,更是一个高效的生产系统。

    围绕效率,滴滴CDX品牌设计将为大家介绍:

    • 插画风格该如何选择?
    • 插画系统的效率究竟有多高?
    • 十几个部门该如何协作共建?

    插画所服务的业务目标是什么?

    在滴滴,插画系统与图片、三维合成等视觉形式,共同构建出了一个综合的“画面视觉系统”,这三个系统所服务的传播目标侧重点有所不同。

    如何设计并落地一个插画系统? - 图3

    1.传播目标是品牌品质,实景图⽚是最适合的画⾯形式
    如何设计并落地一个插画系统? - 图4
    实景拍摄可以体现足够高的画面品质。但成本高,效率低,在时间紧或预算不足的项目中,难以执行。

    2.传播目标是促销促活,氛围活跃的三维合成是更有效的画面形式
    如何设计并落地一个插画系统? - 图5
    日常的促销类项目,要求视觉氛围热闹活跃,作为实景拍摄的简化版,三维合成适合表现活跃的氛围,且效率⼤幅提升。

    3.传播⽬标是教育说明,插画是最适合的选择
    如何设计并落地一个插画系统? - 图6
    从去年开始,滴滴教育类传播项目⽇渐增多。这类项目的目标是功能演示、行为解说。通过⻆色间肢体互动传达信息。插画具有灵活的肢体表现力,轻松、直⽩、易懂,⼗分适合以图解(illustration)的形式出现在传播中。

    如何选择⻛格?

    明确了插画的主要目标是图解说明后 ,我们选择了能够表达丰富肢体语言的插画风格,在此基础上,考虑到滴滴的产品属性,我们讨论出了四个限制条件,作为插画⻛格选择的依据:大众产品属性、出⾏属性、互联⽹属性和效率属性。

    大众产品属性——平均风格
    滴滴⼤众产品的属性,意味着需兼顾各类群体⽤户的审美偏好。

    如何设计并落地一个插画系统? - 图7

    个性过于强烈的风格,会形成⼀部分⽤户极喜欢,⽽另⼀部分极不喜欢的争议形设计。
    所以在保证美观性的同时,人物形象的设计应该保持平均风格,避免过度抽象和夸张。
    如何设计并落地一个插画系统? - 图8
    如何设计并落地一个插画系统? - 图9
    出⾏属性——平稳亲和
    安全、舒适和轻松是用户出行的情感需求,插画⻛格要避免过于冲击性的构图和奇特的人物外形,使用平和的动作营造平稳感,使用圆润的造型营造亲和感。

    如何设计并落地一个插画系统? - 图10
    如何设计并落地一个插画系统? - 图11
    互联网属性——简洁扁平
    采⽤互联⽹主流的扁平化画法,形体在⾼度简化概括的同时,尽量避免出现线条,运⽤形状与纯⾊表现形体轮廓。
    如何设计并落地一个插画系统? - 图12
    如何设计并落地一个插画系统? - 图13
    如何设计并落地一个插画系统? - 图14

    兼顾效率——平⾏透视,斜侧⾯⻆度
    为了最⼤程度复⽤元件,元件采⽤平行透视和⽔平视角,形体优先斜侧面展示,尽量避免正⾯和侧⾯视角。
    如何设计并落地一个插画系统? - 图15
    如何设计并落地一个插画系统? - 图16

    插画的应⽤
    **

    如何设计并落地一个插画系统? - 图17
    端内传播极端天气项⽬

    如何设计并落地一个插画系统? - 图18
    端内产品插图

    如何设计并落地一个插画系统? - 图19
    国内运营插图

    关于业务支持效率

    时间、人力和预算不足,是互联网公司的常态。可复用易延展的插画系统,满足了互联网公司迫切的效率需求。

    如何设计并落地一个插画系统? - 图20

    以实景拍摄项目为例,往往需要投入内部1-2名高阶设计师,从前期layout、模特服饰选择、勘景、到现场跟拍、再到后期修图定稿,需要一周以上的执行周期。
    并且涉及外部供应商,每张画面的平均成本要在1W-10w不等。时间、人力、经费的高投入,决定了实景拍摄不可能作为日常传播的主要画面视觉系统。
    而在日常的项目中,插画则优势巨大:一位中阶设计师,一天内可以完成一幅插画设计。如果直接使用元件,1小时内即可完成设计。
    也正是出于对成本的考虑,插画也经常替代实拍图片、三维合成等画面视觉系统,被设计师应用到品牌和运营传播中。

    国际化:如何在全球市场应用?

    在与国际化业务的合作中,效率需求尤为迫切。2018年滴滴国际化业务发力,在海外⼴阔的市场战役中,前线对高效率低成本的设计支持有极⾼的需求。
    作为总部的创意设计中⼼,⾸先要做的就是⾼效输出画面视觉系统,协助各个国家和地区高效运转,并接受反馈。跨团队共建,以点线⾯的协作方式达到全球品牌一致性的整合。

    插画在澳新市场的应用
    **

    如何设计并落地一个插画系统? - 图21

    以澳洲市场为例,通过使⽤插画系统,⼀位设计师在两周内快速产出50余套传播模板,⾼效且有力的⽀持了国际化前线的市场推广。

    插画在日本市场的应用

    如何设计并落地一个插画系统? - 图22

    英文版插画在大陆市场的应用

    如何设计并落地一个插画系统? - 图23

    插画系统的⾼效性,不仅体现在节省时间和外包成本上。
    在沟通⽅面,设计师可以直接与合作方快速交换想法,省去⼤量提案和协调外部供应商的时间,在跨语言、跨时差的高难度沟通任务下,⼤幅提高沟通效率,协助前线同事快速推展业务。

    如何团队协作?

    插画系统的早期⻛格定义,由平台品牌设计和网约⻋体验设计两个团队共同完成,使得插画系统从根源上具备了线上线下跨平台传播的良好兼容性。
    插画系统主要应⽤在网约⻋部门,⽹约⻋创意团队的视觉设计师,根据绘制规则,延展贡献出更多的插画元件,定期会被收录到插画库中,并且同步到其他设计团队。

    如何设计并落地一个插画系统? - 图24

    插画应用的实践中,设计师也会产⽣很多疑问和建议,我们以⽉为单位,组织跨团队设计师会议,共同讨论规则和使⽤的难点,达成下⼀步优化的共识。

    如何设计并落地一个插画系统? - 图25

    一些思考

    1.团队协作意识
    插画系统的顺利推进,得益于设计体系各个团队间协调一致、积极共建意识。
    2.形式服务目标
    插画系统肢体灵活性强,修改成本低,十分适合教育类传播的图解表意目标,这也是该体系在教育类传播中⼤量使用的原因。
    3.效率成就⼀致
    插画由于执行的⾼效性,被各部门设计师和需求方广泛接受,自下⽽上自发延展使⽤,沉淀为⼀个规范级的画⾯视觉系统,达成了品牌一致性的价值。

    挑战:如何增加区分性?

    ⼤众产品和互联⽹属性,使得插画⻛格必须兼容各类⼈群喜好,限制夸张特异的视觉语言,加上互联⽹主流的扁平画法,使得插画更趋近于平均风格。在图形上难免会面临同质化的挑战。
    为了增加滴滴传播画⾯的识别特性,在形状和质感之外,我们选择使⽤⾊彩和辅助图形来增加插画的区分性。

    如何设计并落地一个插画系统? - 图26

    准确使⽤品牌⾊彩和辅助图形,在形成相对独特且有区分性的插画风格的同时,也能够有助于树⽴品牌形象。这部分内容未来还会有文章进行深⼊探讨。

    写在最后

    作为设计人,我们始终记得,设计是为了解决问题(传播目标,成本效率),从这个根源出发,并重视团队共建,一个系统才能自下而上生长整合,才更有机会演化成为一个被广泛接受的画面视觉系统,并最终帮助品牌一致性的提升。

    后续还会有多篇关于插画系统的文章,将分别从品牌区分度、用户喜好度、效率工具化角度展开讨论,欢迎关注。