一、背景

隨著移動互聯網的快速發展和智能設備的普及，企業的用戶需求也在不斷變化和擴大。在多品牌（跨主題）及多框架（跨端）的背景下，企業需要一種全面的設計系統來應對不同品牌、不同設備的用戶需求，實現品牌形象的一致性和用戶體驗的統一。

多品牌多框架的企業級設計系統，是一種可以支持多個終端（PC、移動端等）和多個品牌（子品牌、合作品牌等）的設計系統。它可以為企業提供一種高效、可靠、統一的設計管理方案，實現設計的復用和資源的共享。這不僅可以提高設計的效率和質量，還可以節約企業的設計成本。 

在需求多樣化的背景下，傳統的單一品牌、單一終端的設計系統已經無法滿足企業的需求，跨端多品牌企業級設計系統的出現成為了必然趨勢。

二、問題分析

攜程作為行業領先的在線旅游服務平臺，擁有多個子品牌和合作品牌，且需要在 PC 和移動端提供一致的用戶體驗。面對多品牌、多終端的復雜設計需求，設計效率低下、資源浪費和品牌不一致性成為亟待解決的問題。

2.1 品牌一致性問題

攜程盡管各業務線共享相同的核心設計理念，但由于不同設計團隊和研發團隊在實際應用中的執行差異，導致視覺樣式和元素的不一致。相同的設計語言在不同業務中呈現出不同的表現形式，這不僅影響了品牌的一致性和整體調性，還降低了品牌的識別度和信任感。

因此，確保設計語言的一致性至關重要。通過制定統一的設計標準和規范，企業可以在多品牌環境中實現視覺和功能的一致性，從而提升用戶體驗，增強品牌的識別度和信任感。

2.2 跨平臺兼容性問題

在現代業務環境中，構建產品通常需要使用多種技術棧，以適應不同的應用場景。隨著前端技術的不斷發展，為了實現性能優化和多平臺兼容，我們必須不斷更新和遷移技術棧。這種多樣性給研發人員帶來了額外的工作負擔，因為在不同平臺上使用不同的技術棧可能導致代碼的重復和冗余。

研發人員需要深入研究和掌握多種技術，以快速適應技術的更新和變化。此外，確保不同技術棧之間的兼容性和一致性是一個重要挑戰。不同平臺上的技術差異可能導致代碼邏輯和接口的不一致，影響產品的兼容性和可維護性。

為了解決這些問題，我們的目標是設計一種通用的解決方案，以便在不同技術棧中輸出一致的代碼結果，并能夠適應未來可能出現的新技術棧。前端開發人員必須充分考慮通用的設計規范和標準化的開發流程。在編寫代碼時，需要遵循一致性原則，并進行全面的兼容性測試和優化。通過這些措施，我們可以在多技術棧環境中實現更高效的開發和更優質的產品體驗。

2.3 組件復用性問題

在企業級應用程序的快速發展過程中，UI組件的開發數量不斷增加。然而，這些組件往往難以實現復用，導致開發人員不得不重復創建類似的組件，從而降低了開發效率和質量。

重復造輪子導致的重復工作和冗余代碼，不僅增加了開發成本，還降低了應用程序的可維護性和可擴展性。相同功能的 UI 組件在多個技術棧中被重復開發，進一步凸顯了組件復用性的問題。解決這些問題可以顯著提升企業的開發效率和產品質量。

三、解決方案

為了應對多品牌、多框架環境下的復雜設計需求，攜程開發了一套創新的設計系統。該系統通過模塊化設計、跨平臺組件庫和自動化流程，提供了高效且靈活的解決方案。

3.1 模塊化設計與主題配置

攜程的設計系統采用模塊化設計原則，將設計元素拆分為獨立模塊，實現品牌間的復用和獨特性。通過靈活的主題配置，設計師可以快速調整品牌視覺風格，確保品牌形象一致。

設計語言（design tokens）作為視覺元素的基礎單位，涵蓋顏色、字體、間距等，確保不同品牌在視覺風格上的統一。設計語言被靈活應用于各品牌的視覺系統中，既保持整體一致性，又允許個性化表達。

這種方法提升了設計效率，增強了用戶對品牌的識別和信任。通過標準化設計語言，攜程實現了多品牌間的視覺統一，為用戶提供一致且流暢的體驗，同時保留品牌獨特性。

圍繞集團層面的設計規范，攜程建立了一致、靈活的設計系統，增強 UI 界面一致性，減少設計到開發的信息差，提升設計研發效率。

設計語言分為基礎變量、功能變量和組件變量。基礎變量定義樣式選項，功能變量用于通用場景語義，組件變量用于特定組件。通過設計語言的分類和應用，攜程實現了復雜場景下的視覺一致性和靈活性。

此外，我們需要去根據多個品牌對齊一些組件狀態內部的屬性，在組件狀態中取了并集。

例如 Button 按鈕中，Ctrip 具有常規、次級、輔助三種類型按鈕，Trip 具有線性和填充兩種類型按鈕，合并后為五種狀態：常規、行動點、支付、次級、輔助。對應關系更加清晰，且易于設計語言迭代或者微調。

3.2 跨平臺開發解決方案

為了在 H5、PC、小程序和 APP 之間保持一致的用戶體驗，攜程設計并開發了跨平臺的組件庫解決方案，以滿足不同開發團隊的需求。組件庫采用響應式設計和自適應布局技術，確保在不同設備上提供一致的視覺和交互體驗。

3.2.1 xTaro 跨端解決方案

xTaro 是攜程參考開源框架 Taro 的跨端理念研發的一套具有攜程特色的、完整的跨端解決方案，旨在實現多框架兼容的靈活集成。其核心目標是確保在不同設備和技術棧中提供一致的用戶體驗。作為一套完整的跨端解決方案，xTaro 提供了：多端構建工具、多端統一的API和組件庫、統一開發標準和規范、跨端工具鏈、自動化構建及部署等功能。

使用 xTaro 跨端解決方案開發前端項目，可以實現書寫一套代碼，通過編譯運行在多個平臺上，從而大幅提高研發效率、提升代碼復用率、靈活性和擴展能力，并確保產品在不同平臺上體驗和功能的統一性。以下是這一解決方案的詳細描述。

高復用性、可擴展的模塊架構

xTaro 跨端解決方案通過創建模塊化、可擴展的模塊架構（如下圖所示），將功能模塊劃分為4層結構：對外模塊、多端抹平、平臺擴展和底層基礎。實現方案如下：

• 對外模塊、多端抹平：提供多端契約一致、功能完善的 API 和組件庫，可以減少重復性工具、便于一套代碼開發多端項目。
• 平臺擴展：遵循組件庫命名和開發規范進行開發，可以實現快速添加相應的擴展功能模塊。
• 底層基礎：將多端 API 及組件的實現下沉到各端的底層，基于統一的契約、固定的導出方式實現了底層基礎模塊。

在上述實現的基礎上， xTaro 構建項目或組件庫時，會根據目標平臺和端類型，根據現有模塊層級，自上而下逐層查找使用到的功能模塊，從而實現多層模塊降級和各端差異性模塊的引用。

一碼多端開發方案

xTaro通過提供多端融合技術框架和構建工具，實現一套代碼多端運行，幫助開發者專注于業務需求開發。這些基于以下內容：

• 統一的開發模板：提供統一的項目模板、組件庫模板，為一碼轉多端奠定堅實基礎。
• 統一的開發規范：提供全新的 DSL 、制定的代碼編寫規范和標準組件開發方案，可以促進多端統一組件及API庫的復用，在解決平臺差異性問題的前提下支持其靈活擴展。

• 多端構建工具：將一套代碼編譯為多端產物，實現一套代碼運行在多端并保持原有性能。
• 平臺差異支持策略：支持開發者使用多端文件、多端代碼兩種方式，編寫平臺差異化代碼。xTaro 在編譯時，會根據當前目標編譯平臺類型，優先提取相應的平臺文件和代碼，實現項目中不同平臺的業務邏輯差異化處理。

3.2.2 組件庫資源抽象

在 xTaro 跨平臺方案中，組件庫資源的抽象是確保組件在多平臺和多框架中保持一致性和可復用性的關鍵步驟。通過系統化的抽象過程，攜程實現了高效的組件開發和維護。以下是這一過程的詳細描述。

首先，為了實現組件的跨平臺一致性，需要進行全面的需求分析。通過識別不同平臺和框架的共性和差異，我們能夠確定核心組件和功能。這一步驟確保了組件庫能夠滿足大多數使用場景的需求。

接下來，建立通用模型是實現抽象的核心。通過創建一個通用的組件模型，我們定義了組件的基本屬性和行為。這個模型通過抽象層將具體實現與框架無關的邏輯分離，形成統一的組件接口。這種設計不僅提高了組件的可復用性，還簡化了未來的擴展和維護。

為了確保組件的一致性和可維護性，制定標準化流程至關重要。通過制定標準化的開發流程和規范，并使用自動化工具進行代碼生成和測試，我們大大提高了開發效率。這一過程確保了組件庫的高質量和穩定性。

通過上述抽象過程，我們得到了以下關鍵產出物：

1）視覺組件屬性定義：這是一套通用的視覺標準，涵蓋組件的外觀、交互和狀態。該定義確保了組件在不同設備和框架中保持一致的視覺效果，提升了用戶體驗。

2）組件庫研發接口定義：提供了標準化的組件接口，確保組件在不同框架中的無縫集成。詳細的接口文檔幫助開發者快速理解和使用組件，提高了開發效率。

3）視覺設計規范：包括顏色、字體、間距等元素的統一標準。這一規范確保了設計的一致性，增強了用戶體驗和品牌識別度。

通過這些系統化的抽象和標準化的產出物，xTaro組件庫不僅實現了跨平臺的一致性，還為未來的技術擴展和演進提供了堅實的基礎。這種方法確保了組件庫的高效開發和長期維護，推動了技術架構的持續發展。

3.3 自動化設計與開發流程

在自動化設計與開發流程中，實現組件庫的高效開發和維護至關重要。我們依賴一系列工具和方法來提高開發效率，并確保設計與實現的一致性。

首先，前端的D2C（Design to Code）工具在這一過程中發揮核心作用。它們能夠將設計稿直接轉換為代碼，減少手動編碼的工作量，從而快速將視覺設計轉化為可用的前端組件。這種自動化轉換不僅提高了效率，還顯著減少了人為錯誤。

其次，視覺設計語言標注工具在設計階段明確組件的視覺規范和交互行為。這些工具提供顏色、字體、間距等詳細信息，確保設計師和開發者有統一的參考標準。通過自動化工具，這些標注可以直接生成設計變量，供開發團隊使用，確保設計語言的一致性。此外，主題配置工具允許開發者根據不同品牌需求快速調整視覺風格，通過定義主題變量實現多品牌的視覺一致性。

最后，設計語言的多品牌設計適應不斷變化的用戶需求和技術趨勢。自動化工具使設計語言的更新能夠快速傳播到整個組件庫中，確保所有組件保持最新的設計標準。這種自動化更新機制減少了手動調整的工作量，提高了響應速度。通過這些工具的集成，企業能夠實現組件庫開發的自動化，提升開發效率和產品質量。

四、技術實現

基于以上的解決方案，我們最終落地了一套攜程的設計系統（Design System），這是一套綜合性的指導原則、組件和相關規則，幫助團隊以一致且高效的方式設計和開發數字產品。包含以下幾個關鍵元素：

1）設計原則和規范：這是設計決策的基礎，包括品牌指導和用戶體驗原則，確保每個設計都符合品牌形象和用戶需求。

2）視覺組件庫：提供了一套預先設計好的用戶界面元素，如按鈕、輸入框和導航欄等，這些元素可以在多個項目中重復使用，提高設計的一致性和效率。

3）研發組件：這些與 UI 組件相對應的前端代碼，使得設計能夠直接轉化為軟件開發中的實際元素，確保設計與開發的無縫銜接。

4）文檔和指南：詳細記錄了如何使用設計系統的各個組件和原則，并具有組件的在線預覽調試功能，方便使用者隨時查閱和遵循。

5）工具和資源：我們還提供了支持設計和開發流程的各種工具，如設計模板、代碼庫和設計軟件的插件，幫助團隊更高效地工作。

4.1 視覺和研發組件庫

攜程組件庫 atom-design 采用現代化前端技術棧，并基于 xTaro 跨平臺方案，開發了一套高性能、可復用的 UI 組件。這些組件經過嚴格測試和優化，確保在各種終端上提供最佳性能和一致的用戶體驗。

4.2 開發SDK的對接

對于無法用組件覆蓋的部分，我們也通過研發對應的"離子設計"SDK，使開發可以參照設計平臺靈活的調取對應的設計規范參數，讓設計系統可以覆蓋到整個前端項目的每個元素。組件庫和研發SDK相輔相成，構成了整個開發層面的技術實現。

4.3 設計工具的集成

為了切實有效地解決設計開發過程中的一致性問題，我們將設計平臺、設計工具與開發環境緊密集成，提供了一整套的解決方案。

對于設計師而言，他們可以極為便捷地直接從組件庫中調用已有的各類組件進行設計創作，無需耗費時間和精力去重復創建。這樣不僅大大提高了設計效率，還能確保設計的一致性和規范性。當設計師完成設計后，僅需通過插件，即可一鍵將作品快速發布至設計平臺。

而開發人員，則能夠依據設計平臺所提供的詳細組件屬性進行精準開發。通過這種方式，能夠最大程度地確保最終呈現的效果與設計初衷高度一致，避免出現偏差。

與此同時，我們還將設計平臺和組件庫與主題配置系統進行了無縫對接。通過這樣的舉措，建立起了統一的設計規范，明確界定了組件的樣式以及交互行為。無論是色彩搭配、字體選擇，還是按鈕的大小、形狀等，都有了清晰明確的標準。這使得整個設計開發流程更加順暢、高效，同時也為用戶帶來了更加一致、優質的體驗。

五、實踐與應用

在實際業務場景中，應用程序需要具備靈活的界面切換能力，以滿足多樣化的用戶需求。通過使用本方案的組件庫，集成了多框架多品牌主題，實現了界面風格的靈活切換，如暗黑模式、Ctrip 和 Trip 品牌主題。

這種設計不僅顯著提升了用戶體驗，還增強了應用的適應性和市場競爭力。組件庫注重一致性和可擴展性，確保用戶在不同主題下的操作體驗無縫銜接。同時，它允許開發者輕松添加新主題，支持應用的可持續發展，進一步推動了產品在多變市場中的成功。

六、結語

綜上所述，我們通過構建模塊化的設計語言和組件規范，實現了多品牌和多框架環境下的高效適配，為未來可能出現的框架提供了靈活的接口。自研設計工具的引入，不僅提升了設計師的工作效率，還確保了設計與研發的一致性和靈活性。

借助一鍵替換設計語言和實時預覽等便捷功能，設計團隊能夠迅速響應市場變化，滿足不同品牌的需求。整體流程的高效性和靈活性，使企業在競爭激烈的市場中保持領先，實現高質量的組件庫產出。展望未來，隨著技術的不斷進步，這一設計系統將持續優化和擴展，為企業提供更強大的支持和保障。