干货 | 携程从零构建多端一致的设计研发体系实践

作者简介

Sheila，携程资深研发经理，关注前端性能优化、前端智能化。

Wistoon，携程资深软件工程师，关注前端框架创新、跨平台开发。

秋细雨，携程资深软件工程师，关注跨平台开发、前端基础建设架构设计及工程化体系搭建。

雪刃，携程高级研发经理，关注前端工程标准化和协作流程规范。

野原，携程高级视觉设计师，关注界面设计，优化用户体验与视觉细节。

本文深入探讨了如何在多品牌、多终端的环境中，建立一个支持多个平台和品牌的企业级设计系统。该系统不仅提供高效、可靠、统一的设计管理方案，还实现了设计的复用和资源共享，大幅提升设计效率和质量，同时降低设计成本。

• 一、背景

• 二、问题分析

• 2.1 品牌一致性问题

• 2.2 跨平台兼容性问题

• 2.3 组件复用性问题

• 三、解决方案

• 3.1 模块化设计与主题配置

• 3.2 跨平台开发解决方案

• 3.3 自动化设计与开发流程

• 四、技术实现

• 4.1 视觉和研发组件库

• 4.2 开发SDK的对接

• 4.3 设计工具的集成

• 五、实践与应用

• 六、结语

一、背景

随着移动互联网的快速发展和智能设备的普及，企业的用户需求也在不断变化和扩大。在多品牌（跨主题）及多框架（跨端）的背景下，企业需要一种全面的设计系统来应对不同品牌、不同设备的用户需求，实现品牌形象的一致性和用户体验的统一。

多品牌多框架的企业级设计系统，是一种可以支持多个终端（PC、移动端等）和多个品牌（子品牌、合作品牌等）的设计系统。它可以为企业提供一种高效、可靠、统一的设计管理方案，实现设计的复用和资源的共享。这不仅可以提高设计的效率和质量，还可以节约企业的设计成本。 

在需求多样化的背景下，传统的单一品牌、单一终端的设计系统已经无法满足企业的需求，跨端多品牌企业级设计系统的出现成为了必然趋势。

二、问题分析

携程作为行业领先的在线旅游服务平台，拥有多个子品牌和合作品牌，且需要在 PC 和移动端提供一致的用户体验。面对多品牌、多终端的复杂设计需求，设计效率低下、资源浪费和品牌不一致性成为亟待解决的问题。

2.1 品牌一致性问题

携程尽管各业务线共享相同的核心设计理念，但由于不同设计团队和研发团队在实际应用中的执行差异，导致视觉样式和元素的不一致。相同的设计语言在不同业务中呈现出不同的表现形式，这不仅影响了品牌的一致性和整体调性，还降低了品牌的识别度和信任感。

因此，确保设计语言的一致性至关重要。通过制定统一的设计标准和规范，企业可以在多品牌环境中实现视觉和功能的一致性，从而提升用户体验，增强品牌的识别度和信任感。

2.2 跨平台兼容性问题

在现代业务环境中，构建产品通常需要使用多种技术栈，以适应不同的应用场景。随着前端技术的不断发展，为了实现性能优化和多平台兼容，我们必须不断更新和迁移技术栈。这种多样性给研发人员带来了额外的工作负担，因为在不同平台上使用不同的技术栈可能导致代码的重复和冗余。

研发人员需要深入研究和掌握多种技术，以快速适应技术的更新和变化。此外，确保不同技术栈之间的兼容性和一致性是一个重要挑战。不同平台上的技术差异可能导致代码逻辑和接口的不一致，影响产品的兼容性和可维护性。

为了解决这些问题，我们的目标是设计一种通用的解决方案，以便在不同技术栈中输出一致的代码结果，并能够适应未来可能出现的新技术