2019年，全新的携程设计语言问世了，这套系统为在线旅游业务场景提供了新的设计解决方案，凝聚了携程设计师的集体智慧，为携程集团未来的设计体系发展和设计品质提升奠定了基础。本文将为您全面介绍这套设计语言系统的诞生。
源起
携程集团正在高速推进以高质量(Great Quality) 和全球化(Globalization)为标志的“G2战略”，而携程的设计团队需要在这个战略背景下，用一套全新的设计体系，支持集团的高速发展。因此，由平台UED发起，在集团众多设计团队的全力支持下，启动了携程的第一个设计语言系统项目。
2019年2月，通过携程产品委员会立项之后，项目正式启动。项目组成员聚在专为项目而设的war room，基于用研分析报告，从最基础的制定设计原则入手，一步步分析讨论，确认最终方案。经过将近一年的工作，完成了这套设计语言。
完成后的整个设计语言系统包含常规设计规范和UI组件；明确的设计标准、模式和可复用组件；可快速组装和构建任何数量的产品，并保持用户体验的一致性。
设计原则
项目团队一致认为，确立基本设计原则，是推进项目的基础，因此，在项目启动不久，就确立了携程的设计原则，包含：
体验一致
与现实生活一致：系统与现实生活的逻辑和操作一致，遵循用户习惯的语言和概念在界面中一致： 可复用的控件开发成组件供各业务线调用，确保UI一致性，提高可用性降低重复学习和设计的成本
清晰聚焦
设计干净简洁，文案清晰易读，让信息传达明确而直接
适配全面准确，动效明快有趣，让画面呈现完整而丰富
功能准确易用，操作简便快捷，让产品使用方便而有效
用户为先
用户决定需要什么，不要试图操纵用户
给用户最直接的操作反馈，并呈现他所期待的结果
保持诚恳和透明，对于所发生问题的及其原因，与其遮掩不如以诚相告
视觉识别
视觉识别是设计系统的核心，也是构成各类组件的基础。通过定义12项基本的视觉识别元素，为携程设计语言系统奠定了良好的基础。每个视觉识别元素的确定都经过了完善的认证和细致的雕琢。包括了：
色彩
定义了色彩语言（产品级色彩系统），包含：色板，主色调，辅助色，灰度色，渐变色的定义及使用规范。
文字
从字体、字号、字高、行高、字色这几个方面对文字的展现形式进行统一标准，并分系统研究并制定了字体规范。
间距
本次设计语言规定了间距统一使用4的倍数，通过总结常用间距尺寸间距制定档位规则提供给设计师来提升设计效率。
栅格系统
定义了符合携程业务需求的栅格系统，各业务界面使用一致的网格，确保界面布局的一致性。
投影
阴影本身可以用来表达层级，它是一种用来建立组织关系和联系的视觉元素，我们通过建立Z轴的深度来赋予不同的层级关系。
卡片样式
我们以屏幕宽度作为卡片分类的标准，主要分为两大类卡片，不同的卡片应搭配相应的圆角尺寸，但卡片圆角必须坚持间距规则使用4的倍数。
标签
标签作为界面中模块的标识，能帮助用户迅速知晓当前模块的特点或功能。清晰的标签层级能快速唤起用户认知，帮助用户更快地理解并进行选择。
按钮
行动召唤按钮应该醒目突出并有吸引用户点击的冲动，并且在用户进行相应的点击操作后有相应的反馈。按业务场景可分为基础通用型（蓝色按钮）和突出关键行动点（橙色渐变按钮）两种。
图标
使用比喻准确，含义清晰的图标，不对用户理解造成困扰；在比喻准确的基础上，尽量保持图形的简洁，减少多余的装饰；遵循更加统一的设计规则，保持一套图标整体的一致性和体量感。
点评样式
点评系统根据不同情绪阶段的面部模式，采用拟人化的设计方法。一共定义5个阶段，发怒，生气，平淡，微笑，大笑。抬头微扬的表情元素，幸福感逐渐递增。
图片规则
图片作为一种信息展示形式，应用场景非常广泛，这次携程视觉语言对于图片通用场景进行了梳理和规范建议。
视频规则
视频内容相较于图片和文字对用户吸引的优势更大，选择那些具有焦点的、色彩明快的、令人愉悦的视频可以提升用户体验。
团队在5月底完成了对以上基础视觉元素的定义，为之后组件和界面统一奠定了良好的基础，也是整个项目一个非常重要的里程碑。
组件
有了全新的视觉元素作为基础，项目组的交互和视觉设计师联手协作，针对携程App的特点和实际应用场景，对18项基础组件和14项功能组件进行了视觉优化和规范定义。这些组件可以帮助设计师快速复用基础组件，并且在跨BU的通用模块上，保证设计及用户体验的一致性，降低用户学习成本。
资源与工具
这次项目的另一大产出是为携程设计新建和整合了iconfont、携程图库、插画库、动效库、字体库、文案库和用户研究馆等共享资源，同时还为整个集团的设计团队提供了交互和视觉项目管理和发布工具CDP、提升设计师工作效率的Sketch插件以及减少重复开发量的设计代码化等工具。关于这部分将另有专文介绍。
全新的工作模式
相较设计系统的大量产出，我们从这个项目中的另一个重要收获是建立了一种新的合作模式。与之前的各自为战不同，在这个项目中几乎每个BU的设计师都参与其中，贡献能力，尤其是机票、酒店、度假和用车等BU的设计师和平台UED团队共同作战，才能获得今天的成果。这种集体赋能的工作模式也为将来的合作项目提供了方向。
携程设计语言系统的诞生只是一个起点，还将不断进化，成为携程整体设计提升的推进器。
本篇文章来源于微信公众号: TripDesign
