UED专栏 | 带你认识携程插画系统1.0

本文作者为携程平台UED团队，同时感谢机票、度假、酒店UED团队协同搭建插画系统。

对于每一个设计师来说，插画总是让人喜爱又烦恼。喜爱是因为插画具有特殊的表现力、丰富的图形语言、鲜明的个性特征，运用在设计中能让产品更具感染力并打动人心。而烦恼则因为每幅高质量插画的背后，都需要投入大量的时间和精力。携程插画系统在设计之初，希望能最大限度地体现插画赋予产品的生命力，为设计师减负，提升工作效率。同时插画系统继承携程设计基因，确保各团队在运用插画系统时，保持一致的的视觉风格及品牌感知。

一. 概述

携程插画系统由角色人物、旅游场景、Sketch Library以及插画系统平台这四部分构成。整个系统从无到有，凝聚了多个设计团队的贡献。项目组首先制定了插画设计原则，通过统一的品牌插画设计风格，建立插画系统的独特个性，塑造活泼、积极、可信的品牌形象。同时也对感性的插画赋以理性的应用，整个插画系统可进行元素级拆分，从人物、服饰到场景都可进行自由的调整和组合，从而满足不同业务场景下的各类设计需求。

携程插画系统

1. 品牌识别：插画系统作为品牌识别的一部分，可以在logo、色彩、文字排版之外，加大品牌的识别力和情感价值、表达品牌的精神。

携程旅行品牌视觉识别系统

2. 传情达意：插画不仅是具有美学意义的装饰设计，图片化的信息比文字更容易与用户产生共情，能更有效地传递信息，达到强调、诠释、缓和情绪等作用，提高信息传达的广度和深度。

有效传递信息

3. 提高效率：插画系统绝不是一些设计稿的简单堆砌，通过对所有插画元素的解构，设计师们可以在规范原则指导下进行自由的组合、升级和再创意，用最快的速度创作出符合不同场景的插画。

快速上手，提高效率

二. 人物

人物形象是一个插画系统的基础，携程插画系统中的每个人物都有着自己的特征和个性，这些人物不是凭空而来的，而是源于我们长期以来对用户旅行场景和出行需求的关注，以及对用户的深度理解。

携程的用研团队每年会进行多个产品的用户出行特征调研，并积累了大量的数据。结合用户的主动反馈和数据分析，我们将用户的出行大致分成了以下几个类别。根据这些不同的出行场景和需求，我们设计出了更丰富立体的插画人物形象，同时也通过来源于生活的这些人物与我们的用户建立了情感连接。

人物特征

除了涵盖不同的用户类型，项目组还创造性地制定了以家族为单位的人物关系，赋予了整个插画系统更多的人文温度，更容易激发用户的情感共鸣，同时也为设计师二次创作的情节性，故事性，留出了广阔的空间。

‍‍‍人物关系图

三. 诞生

插画系统诞生过程

1.制定插画风格

项目组成立之初，所有成员基于之前的数据积累，再次对携程品牌的定位进行了深入的了解和研究。同时多个设计团队也进行了灵感和创意的碰撞，最后确定了以亲和力、年轻化、包容性，作为设计的情绪表达，所有的插画也围绕着这三点展开。

人物解构图

谈到插画的风格，颜色、线条、图形尤其重要，也是整个系统重点着墨的部分。

插画系统的颜色源于携程色彩系统，符合携程品牌的设计基因，与携程其他视觉品牌元素保持了一致。

干净的线条简洁的图形有利于设计情绪的完美演绎。饱满而舒缓的曲线，使人物形象更具亲和力和宽容度。简洁大块面的几何图形，不同形体姿态的刻画让信息表达更显直观。

插画风格

2. 整合Sketch Library

插画风格制定完成后，项目组把所有人物以及场景进行元素级的解构，整合成了可以复用的组件库。携程插画系统内包含了300+元素级插画，包括了人物、旅行元素、旅行场景等，使用者可以自由地利用这些元素创作出满足不同业务场景的海量插图。

Sketch Library

3. 搭建插画系统平台

携程集团内部员工可以输入Cfamily/来访问携程插画系统平台。平台包括了设计指南、效果展示，以及刚刚提到的Sketch Library下载。这一系列设计指引可以帮助设计师高效完成设计需求。

平台结构

3.1 设计指南

为了让所有携程的设计师更好的运用和掌握携程插画系统，项目组提供了设计指南，其包括插画原则与插画规范两部分。

3.1.1 插画原则

有用  |  一致  |  友好

 有用： 每个插画元素都与各BU的使用情境相适应，一体化的设计强化品牌调性。

 一致： 系统性的插画保证了风格的一致，建立从线上到线下等多维度用户体验的一致。

友好： 对用户友好，人物角色涵盖所有携程用户年龄段，是用户自我形象的映射。家族体系的人物关系，唤起用户的正面情感，有利于建立与用户的情感连接。设计师友好，能方便有效的调用可替换的组件确保可用性的提高，降低重复设计的成本；品牌友好，建立品牌的独特个性，塑造温暖的品牌形象。

3.1.2 插画规范

色彩运用  |  人物比例  |  场景结构

 A. 色彩运用

色彩在维度的选择上与携程设计系统配色基本一致，同时考虑到携程的品牌颜色，插画系统的主色调以蓝色系为主，橙、黄等暖色为辅助色系。为表达活力的氛围，插画系统的颜色多为饱和度高的明亮色为主。

CDS携程设计系统 - 色彩系统

主体层：为保证插画的层次清晰，画面主体通常使用饱和度高的蓝色，占比约60%。主体辅助色占比约20%，同时控制在2-3种颜色。

主体层的颜色占比

辅助层：层级关系应稍弱于主体，颜色应选取色板中Blue-6附近的颜色。可适量使用高饱和蓝色，但占比不宜超过20%。

辅助层的颜色占比

背景层：在画面中的层级靠后，颜色的种类尽量简化。使用色板中低饱和的蓝色表现。

背景层颜色

 B. 人物造型

人物比列图

人物比例：在头身比的处理上，我们的人物更趋近于真实人头比，保留真实人物性别的比例特征。

五官：在远景时，我们只保留了嘴部形态来表达人物情绪。在近景场景中，可根据画面需要，加入眼睛等形态。

肢体刻画：人物在肩部、肘部、膝盖等肢体细节的刻画上，要注意保持线条的圆滑流畅。

 C. 场景构成

场景主要由主体层、辅助层、背景层构成。

场景结构

主体层：也就是面画的视觉中心。可根据画面需求来选择主体物，这里的主体物可以是人物、人物+场景或关键物品等。

辅助层：辅助层通常是画面中的点缀元素。用来丰富画面，烘托整体氛围。

背景层：用于交待场景的时间、地点、天气等。在造型和颜色上应该尽量简洁，不要过度刻画细节。

3.2 效果展示

插画平台目前由9组人物基础形；6组人物场景服饰；60组应用场景构成；除此前介绍的基础人物外，服饰和应用场景则依据了品牌调性，紧贴出游、办公等热门场景进行设计。设计师可以自由地对这些插画元素进行搭配组合，满足不同业务场景的需求。

人物基础形

人物场景服饰

应用场景展示

3.3 Sketch Library下载

可以直接在平台下载Sketch Library进行日常的设计工作。

Sketch Library使用

四. 运用

携程插画系统在设计实践中的运用场景非常广泛，以携程App的空态页为例，在携程插画系统诞生之前，不同的设计师会尝试不同风格的设计。

其他尝试

即使有设计原则作为规范，但设计师总是会不由自主地为插画注入个人的风格，整个App界面还是会呈现一定程度的不统一。而携程插画系统的出现很好地解决这个问题，设计师在将原插画中的人物与插画库中的角色进行替换之后，空态页面便与App中其他使用插画系统组件的页面有了很好的一致性。

新版空态

插画系统独有的人物设定也为空态画面提供了趣味性，插画不再单纯只是辅助元素。为每个人物打造出符合各自性格与设定的“故事”，探讨人物角色在社会中该有的正能量行为，成为我们设计空态时的愿景。

携程设计系统的另一个重要部分 - 携程动效库中，也使用了插画组件来为一些较难用文字表达的动效规则进行图形化的演示。

加速曲线

减速曲线

先加速后减速曲线

携程的插画系统还具备强大的应变能力，2020年初国内处在疫情中时，插画库项目组快速响应，上线抗疫系列。包括了四个相关社会职业及两个医疗场景，可以帮助各个项目高效实现情感化，微小之处传递的是情怀和温度。

抗疫场景

每一位职业角色都会有各自的四视图，多种视角适用于各种场景和构图，也能配合疫情组件防风镜、口罩等，为设计师提供更丰富的插画场景。

携程插画系统还可以为携程的其他产品赋能。TripPal是携程自主研发的办公软件，其IP形象TP，就是建立在插画系统“初级游”的人物角色基础上的，设计师大胆地调整了风格，把概括的大色块改为俏皮活泼的粗线，也替他增加了五官来更好地表达情绪。

TripPal IP

以此基础形象为蓝本，一套萌中带着小贱的表情包受到了很多同事的好评。

TripPal 表情包设计

五. 结语

携程插画系统目前已初具雏形，这是携程众多设计师的智慧结晶，也将为所有设计师赋能提效。随着携程业务的不断发展和人们出游行为的变化，我们将保持插画系统的与时俱进，使其成为携程设计系统不断进化的重要组成。

《携程架构实践》

京东

当当

《携程人工智能实践》

京东

当当

 “携程技术”公众号

  分享，交流，成长