一、背景

隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展和智能設(shè)備的普及，企業(yè)的用戶需求也在不斷變化和擴(kuò)大。在多品牌（跨主題）及多框架（跨端）的背景下，企業(yè)需要一種全面的設(shè)計(jì)系統(tǒng)來應(yīng)對不同品牌、不同設(shè)備的用戶需求，實(shí)現(xiàn)品牌形象的一致性和用戶體驗(yàn)的統(tǒng)一。

多品牌多框架的企業(yè)級設(shè)計(jì)系統(tǒng)，是一種可以支持多個(gè)終端（PC、移動(dòng)端等）和多個(gè)品牌（子品牌、合作品牌等）的設(shè)計(jì)系統(tǒng)。它可以為企業(yè)提供一種高效、可靠、統(tǒng)一的設(shè)計(jì)管理方案，實(shí)現(xiàn)設(shè)計(jì)的復(fù)用和資源的共享。這不僅可以提高設(shè)計(jì)的效率和質(zhì)量，還可以節(jié)約企業(yè)的設(shè)計(jì)成本。 

在需求多樣化的背景下，傳統(tǒng)的單一品牌、單一終端的設(shè)計(jì)系統(tǒng)已經(jīng)無法滿足企業(yè)的需求，跨端多品牌企業(yè)級設(shè)計(jì)系統(tǒng)的出現(xiàn)成為了必然趨勢。

二、問題分析

攜程作為行業(yè)領(lǐng)先的在線旅游服務(wù)平臺(tái)，擁有多個(gè)子品牌和合作品牌，且需要在 PC 和移動(dòng)端提供一致的用戶體驗(yàn)。面對多品牌、多終端的復(fù)雜設(shè)計(jì)需求，設(shè)計(jì)效率低下、資源浪費(fèi)和品牌不一致性成為亟待解決的問題。

2.1 品牌一致性問題

攜程盡管各業(yè)務(wù)線共享相同的核心設(shè)計(jì)理念，但由于不同設(shè)計(jì)團(tuán)隊(duì)和研發(fā)團(tuán)隊(duì)在實(shí)際應(yīng)用中的執(zhí)行差異，導(dǎo)致視覺樣式和元素的不一致。相同的設(shè)計(jì)語言在不同業(yè)務(wù)中呈現(xiàn)出不同的表現(xiàn)形式，這不僅影響了品牌的一致性和整體調(diào)性，還降低了品牌的識別度和信任感。

因此，確保設(shè)計(jì)語言的一致性至關(guān)重要。通過制定統(tǒng)一的設(shè)計(jì)標(biāo)準(zhǔn)和規(guī)范，企業(yè)可以在多品牌環(huán)境中實(shí)現(xiàn)視覺和功能的一致性，從而提升用戶體驗(yàn)，增強(qiáng)品牌的識別度和信任感。

2.2 跨平臺(tái)兼容性問題

在現(xiàn)代業(yè)務(wù)環(huán)境中，構(gòu)建產(chǎn)品通常需要使用多種技術(shù)棧，以適應(yīng)不同的應(yīng)用場景。隨著前端技術(shù)的不斷發(fā)展，為了實(shí)現(xiàn)性能優(yōu)化和多平臺(tái)兼容，我們必須不斷更新和遷移技術(shù)棧。這種多樣性給研發(fā)人員帶來了額外的工作負(fù)擔(dān)，因?yàn)樵诓煌脚_(tái)上使用不同的技術(shù)?？赡軐?dǎo)致代碼的重復(fù)和冗余。

研發(fā)人員需要深入研究和掌握多種技術(shù)，以快速適應(yīng)技術(shù)的更新和變化。此外，確保不同技術(shù)棧之間的兼容性和一致性是一個(gè)重要挑戰(zhàn)。不同平臺(tái)上的技術(shù)差異可能導(dǎo)致代碼邏輯和接口的不一致，影響產(chǎn)品的兼容性和可維護(hù)性。

為了解決這些問題，我們的目標(biāo)是設(shè)計(jì)一種通用的解決方案，以便在不同技術(shù)棧中輸出一致的代碼結(jié)果，并能夠適應(yīng)未來可能出現(xiàn)的新技術(shù)棧。前端開發(fā)人員必須充分考慮通用的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)化的開發(fā)流程。在編寫代碼時(shí)，需要遵循一致性原則，并進(jìn)行全面的兼容性測試和優(yōu)化。通過這些措施，我們可以在多技術(shù)棧環(huán)境中實(shí)現(xiàn)更高效的開發(fā)和更優(yōu)質(zhì)的產(chǎn)品體驗(yàn)。

2.3 組件復(fù)用性問題

在企業(yè)級應(yīng)用程序的快速發(fā)展過程中，UI組件的開發(fā)數(shù)量不斷增加。然而，這些組件往往難以實(shí)現(xiàn)復(fù)用，導(dǎo)致開發(fā)人員不得不重復(fù)創(chuàng)建類似的組件，從而降低了開發(fā)效率和質(zhì)量。

重復(fù)造輪子導(dǎo)致的重復(fù)工作和冗余代碼，不僅增加了開發(fā)成本，還降低了應(yīng)用程序的可維護(hù)性和可擴(kuò)展性。相同功能的 UI 組件在多個(gè)技術(shù)棧中被重復(fù)開發(fā)，進(jìn)一步凸顯了組件復(fù)用性的問題。解決這些問題可以顯著提升企業(yè)的開發(fā)效率和產(chǎn)品質(zhì)量。

三、解決方案

為了應(yīng)對多品牌、多框架環(huán)境下的復(fù)雜設(shè)計(jì)需求，攜程開發(fā)了一套創(chuàng)新的設(shè)計(jì)系統(tǒng)。該系統(tǒng)通過模塊化設(shè)計(jì)、跨平臺(tái)組件庫和自動(dòng)化流程，提供了高效且靈活的解決方案。

3.1 模塊化設(shè)計(jì)與主題配置

攜程的設(shè)計(jì)系統(tǒng)采用模塊化設(shè)計(jì)原則，將設(shè)計(jì)元素拆分為獨(dú)立模塊，實(shí)現(xiàn)品牌間的復(fù)用和獨(dú)特性。通過靈活的主題配置，設(shè)計(jì)師可以快速調(diào)整品牌視覺風(fēng)格，確保品牌形象一致。

設(shè)計(jì)語言（design tokens）作為視覺元素的基礎(chǔ)單位，涵蓋顏色、字體、間距等，確保不同品牌在視覺風(fēng)格上的統(tǒng)一。設(shè)計(jì)語言被靈活應(yīng)用于各品牌的視覺系統(tǒng)中，既保持整體一致性，又允許個(gè)性化表達(dá)。

這種方法提升了設(shè)計(jì)效率，增強(qiáng)了用戶對品牌的識別和信任。通過標(biāo)準(zhǔn)化設(shè)計(jì)語言，攜程實(shí)現(xiàn)了多品牌間的視覺統(tǒng)一，為用戶提供一致且流暢的體驗(yàn)，同時(shí)保留品牌獨(dú)特性。

圍繞集團(tuán)層面的設(shè)計(jì)規(guī)范，攜程建立了一致、靈活的設(shè)計(jì)系統(tǒng)，增強(qiáng) UI 界面一致性，減少設(shè)計(jì)到開發(fā)的信息差，提升設(shè)計(jì)研發(fā)效率。

設(shè)計(jì)語言分為基礎(chǔ)變量、功能變量和組件變量?；A(chǔ)變量定義樣式選項(xiàng)，功能變量用于通用場景語義，組件變量用于特定組件。通過設(shè)計(jì)語言的分類和應(yīng)用，攜程實(shí)現(xiàn)了復(fù)雜場景下的視覺一致性和靈活性。

此外，我們需要去根據(jù)多個(gè)品牌對齊一些組件狀態(tài)內(nèi)部的屬性，在組件狀態(tài)中取了并集。

例如 Button 按鈕中，Ctrip 具有常規(guī)、次級、輔助三種類型按鈕，Trip 具有線性和填充兩種類型按鈕，合并后為五種狀態(tài)：常規(guī)、行動(dòng)點(diǎn)、支付、次級、輔助。對應(yīng)關(guān)系更加清晰，且易于設(shè)計(jì)語言迭代或者微調(diào)。

3.2 跨平臺(tái)開發(fā)解決方案

為了在 H5、PC、小程序和 APP 之間保持一致的用戶體驗(yàn)，攜程設(shè)計(jì)并開發(fā)了跨平臺(tái)的組件庫解決方案，以滿足不同開發(fā)團(tuán)隊(duì)的需求。組件庫采用響應(yīng)式設(shè)計(jì)和自適應(yīng)布局技術(shù)，確保在不同設(shè)備上提供一致的視覺和交互體驗(yàn)。

3.2.1 xTaro 跨端解決方案

xTaro 是攜程參考開源框架 Taro 的跨端理念研發(fā)的一套具有攜程特色的、完整的跨端解決方案，旨在實(shí)現(xiàn)多框架兼容的靈活集成。其核心目標(biāo)是確保在不同設(shè)備和技術(shù)棧中提供一致的用戶體驗(yàn)。作為一套完整的跨端解決方案，xTaro 提供了：多端構(gòu)建工具、多端統(tǒng)一的API和組件庫、統(tǒng)一開發(fā)標(biāo)準(zhǔn)和規(guī)范、跨端工具鏈、自動(dòng)化構(gòu)建及部署等功能。

使用 xTaro 跨端解決方案開發(fā)前端項(xiàng)目，可以實(shí)現(xiàn)書寫一套代碼，通過編譯運(yùn)行在多個(gè)平臺(tái)上，從而大幅提高研發(fā)效率、提升代碼復(fù)用率、靈活性和擴(kuò)展能力，并確保產(chǎn)品在不同平臺(tái)上體驗(yàn)和功能的統(tǒng)一性。以下是這一解決方案的詳細(xì)描述。

高復(fù)用性、可擴(kuò)展的模塊架構(gòu)

xTaro 跨端解決方案通過創(chuàng)建模塊化、可擴(kuò)展的模塊架構(gòu)（如下圖所示），將功能模塊劃分為4層結(jié)構(gòu)：對外模塊、多端抹平、平臺(tái)擴(kuò)展和底層基礎(chǔ)。實(shí)現(xiàn)方案如下：

• 對外模塊、多端抹平：提供多端契約一致、功能完善的 API 和組件庫，可以減少重復(fù)性工具、便于一套代碼開發(fā)多端項(xiàng)目。
• 平臺(tái)擴(kuò)展：遵循組件庫命名和開發(fā)規(guī)范進(jìn)行開發(fā)，可以實(shí)現(xiàn)快速添加相應(yīng)的擴(kuò)展功能模塊。
• 底層基礎(chǔ)：將多端 API 及組件的實(shí)現(xiàn)下沉到各端的底層，基于統(tǒng)一的契約、固定的導(dǎo)出方式實(shí)現(xiàn)了底層基礎(chǔ)模塊。

在上述實(shí)現(xiàn)的基礎(chǔ)上， xTaro 構(gòu)建項(xiàng)目或組件庫時(shí)，會(huì)根據(jù)目標(biāo)平臺(tái)和端類型，根據(jù)現(xiàn)有模塊層級，自上而下逐層查找使用到的功能模塊，從而實(shí)現(xiàn)多層模塊降級和各端差異性模塊的引用。

一碼多端開發(fā)方案

xTaro通過提供多端融合技術(shù)框架和構(gòu)建工具，實(shí)現(xiàn)一套代碼多端運(yùn)行，幫助開發(fā)者專注于業(yè)務(wù)需求開發(fā)。這些基于以下內(nèi)容：

• 統(tǒng)一的開發(fā)模板：提供統(tǒng)一的項(xiàng)目模板、組件庫模板，為一碼轉(zhuǎn)多端奠定堅(jiān)實(shí)基礎(chǔ)。
• 統(tǒng)一的開發(fā)規(guī)范：提供全新的 DSL 、制定的代碼編寫規(guī)范和標(biāo)準(zhǔn)組件開發(fā)方案，可以促進(jìn)多端統(tǒng)一組件及API庫的復(fù)用，在解決平臺(tái)差異性問題的前提下支持其靈活擴(kuò)展。

• 多端構(gòu)建工具：將一套代碼編譯為多端產(chǎn)物，實(shí)現(xiàn)一套代碼運(yùn)行在多端并保持原有性能。
• 平臺(tái)差異支持策略：支持開發(fā)者使用多端文件、多端代碼兩種方式，編寫平臺(tái)差異化代碼。xTaro 在編譯時(shí)，會(huì)根據(jù)當(dāng)前目標(biāo)編譯平臺(tái)類型，優(yōu)先提取相應(yīng)的平臺(tái)文件和代碼，實(shí)現(xiàn)項(xiàng)目中不同平臺(tái)的業(yè)務(wù)邏輯差異化處理。

3.2.2 組件庫資源抽象

在 xTaro 跨平臺(tái)方案中，組件庫資源的抽象是確保組件在多平臺(tái)和多框架中保持一致性和可復(fù)用性的關(guān)鍵步驟。通過系統(tǒng)化的抽象過程，攜程實(shí)現(xiàn)了高效的組件開發(fā)和維護(hù)。以下是這一過程的詳細(xì)描述。

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

接下來，建立通用模型是實(shí)現(xiàn)抽象的核心。通過創(chuàng)建一個(gè)通用的組件模型，我們定義了組件的基本屬性和行為。這個(gè)模型通過抽象層將具體實(shí)現(xiàn)與框架無關(guān)的邏輯分離，形成統(tǒng)一的組件接口。這種設(shè)計(jì)不僅提高了組件的可復(fù)用性，還簡化了未來的擴(kuò)展和維護(hù)。

為了確保組件的一致性和可維護(hù)性，制定標(biāo)準(zhǔn)化流程至關(guān)重要。通過制定標(biāo)準(zhǔn)化的開發(fā)流程和規(guī)范，并使用自動(dòng)化工具進(jìn)行代碼生成和測試，我們大大提高了開發(fā)效率。這一過程確保了組件庫的高質(zhì)量和穩(wěn)定性。

通過上述抽象過程，我們得到了以下關(guān)鍵產(chǎn)出物：

1）視覺組件屬性定義：這是一套通用的視覺標(biāo)準(zhǔn)，涵蓋組件的外觀、交互和狀態(tài)。該定義確保了組件在不同設(shè)備和框架中保持一致的視覺效果，提升了用戶體驗(yàn)。

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

3）視覺設(shè)計(jì)規(guī)范：包括顏色、字體、間距等元素的統(tǒng)一標(biāo)準(zhǔn)。這一規(guī)范確保了設(shè)計(jì)的一致性，增強(qiáng)了用戶體驗(yàn)和品牌識別度。

通過這些系統(tǒng)化的抽象和標(biāo)準(zhǔn)化的產(chǎn)出物，xTaro組件庫不僅實(shí)現(xiàn)了跨平臺(tái)的一致性，還為未來的技術(shù)擴(kuò)展和演進(jìn)提供了堅(jiān)實(shí)的基礎(chǔ)。這種方法確保了組件庫的高效開發(fā)和長期維護(hù)，推動(dòng)了技術(shù)架構(gòu)的持續(xù)發(fā)展。

3.3 自動(dòng)化設(shè)計(jì)與開發(fā)流程

在自動(dòng)化設(shè)計(jì)與開發(fā)流程中，實(shí)現(xiàn)組件庫的高效開發(fā)和維護(hù)至關(guān)重要。我們依賴一系列工具和方法來提高開發(fā)效率，并確保設(shè)計(jì)與實(shí)現(xiàn)的一致性。

首先，前端的D2C（Design to Code）工具在這一過程中發(fā)揮核心作用。它們能夠?qū)⒃O(shè)計(jì)稿直接轉(zhuǎn)換為代碼，減少手動(dòng)編碼的工作量，從而快速將視覺設(shè)計(jì)轉(zhuǎn)化為可用的前端組件。這種自動(dòng)化轉(zhuǎn)換不僅提高了效率，還顯著減少了人為錯(cuò)誤。

其次，視覺設(shè)計(jì)語言標(biāo)注工具在設(shè)計(jì)階段明確組件的視覺規(guī)范和交互行為。這些工具提供顏色、字體、間距等詳細(xì)信息，確保設(shè)計(jì)師和開發(fā)者有統(tǒng)一的參考標(biāo)準(zhǔn)。通過自動(dòng)化工具，這些標(biāo)注可以直接生成設(shè)計(jì)變量，供開發(fā)團(tuán)隊(duì)使用，確保設(shè)計(jì)語言的一致性。此外，主題配置工具允許開發(fā)者根據(jù)不同品牌需求快速調(diào)整視覺風(fēng)格，通過定義主題變量實(shí)現(xiàn)多品牌的視覺一致性。

最后，設(shè)計(jì)語言的多品牌設(shè)計(jì)適應(yīng)不斷變化的用戶需求和技術(shù)趨勢。自動(dòng)化工具使設(shè)計(jì)語言的更新能夠快速傳播到整個(gè)組件庫中，確保所有組件保持最新的設(shè)計(jì)標(biāo)準(zhǔn)。這種自動(dòng)化更新機(jī)制減少了手動(dòng)調(diào)整的工作量，提高了響應(yīng)速度。通過這些工具的集成，企業(yè)能夠?qū)崿F(xiàn)組件庫開發(fā)的自動(dòng)化，提升開發(fā)效率和產(chǎn)品質(zhì)量。

四、技術(shù)實(shí)現(xiàn)

基于以上的解決方案，我們最終落地了一套攜程的設(shè)計(jì)系統(tǒng)（Design System），這是一套綜合性的指導(dǎo)原則、組件和相關(guān)規(guī)則，幫助團(tuán)隊(duì)以一致且高效的方式設(shè)計(jì)和開發(fā)數(shù)字產(chǎn)品。包含以下幾個(gè)關(guān)鍵元素：

1）設(shè)計(jì)原則和規(guī)范：這是設(shè)計(jì)決策的基礎(chǔ)，包括品牌指導(dǎo)和用戶體驗(yàn)原則，確保每個(gè)設(shè)計(jì)都符合品牌形象和用戶需求。

2）視覺組件庫：提供了一套預(yù)先設(shè)計(jì)好的用戶界面元素，如按鈕、輸入框和導(dǎo)航欄等，這些元素可以在多個(gè)項(xiàng)目中重復(fù)使用，提高設(shè)計(jì)的一致性和效率。

3）研發(fā)組件：這些與 UI 組件相對應(yīng)的前端代碼，使得設(shè)計(jì)能夠直接轉(zhuǎn)化為軟件開發(fā)中的實(shí)際元素，確保設(shè)計(jì)與開發(fā)的無縫銜接。

4）文檔和指南：詳細(xì)記錄了如何使用設(shè)計(jì)系統(tǒng)的各個(gè)組件和原則，并具有組件的在線預(yù)覽調(diào)試功能，方便使用者隨時(shí)查閱和遵循。

5）工具和資源：我們還提供了支持設(shè)計(jì)和開發(fā)流程的各種工具，如設(shè)計(jì)模板、代碼庫和設(shè)計(jì)軟件的插件，幫助團(tuán)隊(duì)更高效地工作。

4.1 視覺和研發(fā)組件庫

攜程組件庫 atom-design 采用現(xiàn)代化前端技術(shù)棧，并基于 xTaro 跨平臺(tái)方案，開發(fā)了一套高性能、可復(fù)用的 UI 組件。這些組件經(jīng)過嚴(yán)格測試和優(yōu)化，確保在各種終端上提供最佳性能和一致的用戶體驗(yàn)。

4.2 開發(fā)SDK的對接

對于無法用組件覆蓋的部分，我們也通過研發(fā)對應(yīng)的"離子設(shè)計(jì)"SDK，使開發(fā)可以參照設(shè)計(jì)平臺(tái)靈活的調(diào)取對應(yīng)的設(shè)計(jì)規(guī)范參數(shù)，讓設(shè)計(jì)系統(tǒng)可以覆蓋到整個(gè)前端項(xiàng)目的每個(gè)元素。組件庫和研發(fā)SDK相輔相成，構(gòu)成了整個(gè)開發(fā)層面的技術(shù)實(shí)現(xiàn)。

4.3 設(shè)計(jì)工具的集成

為了切實(shí)有效地解決設(shè)計(jì)開發(fā)過程中的一致性問題，我們將設(shè)計(jì)平臺(tái)、設(shè)計(jì)工具與開發(fā)環(huán)境緊密集成，提供了一整套的解決方案。

對于設(shè)計(jì)師而言，他們可以極為便捷地直接從組件庫中調(diào)用已有的各類組件進(jìn)行設(shè)計(jì)創(chuàng)作，無需耗費(fèi)時(shí)間和精力去重復(fù)創(chuàng)建。這樣不僅大大提高了設(shè)計(jì)效率，還能確保設(shè)計(jì)的一致性和規(guī)范性。當(dāng)設(shè)計(jì)師完成設(shè)計(jì)后，僅需通過插件，即可一鍵將作品快速發(fā)布至設(shè)計(jì)平臺(tái)。

而開發(fā)人員，則能夠依據(jù)設(shè)計(jì)平臺(tái)所提供的詳細(xì)組件屬性進(jìn)行精準(zhǔn)開發(fā)。通過這種方式，能夠最大程度地確保最終呈現(xiàn)的效果與設(shè)計(jì)初衷高度一致，避免出現(xiàn)偏差。

與此同時(shí)，我們還將設(shè)計(jì)平臺(tái)和組件庫與主題配置系統(tǒng)進(jìn)行了無縫對接。通過這樣的舉措，建立起了統(tǒng)一的設(shè)計(jì)規(guī)范，明確界定了組件的樣式以及交互行為。無論是色彩搭配、字體選擇，還是按鈕的大小、形狀等，都有了清晰明確的標(biāo)準(zhǔn)。這使得整個(gè)設(shè)計(jì)開發(fā)流程更加順暢、高效，同時(shí)也為用戶帶來了更加一致、優(yōu)質(zhì)的體驗(yàn)。

五、實(shí)踐與應(yīng)用

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

這種設(shè)計(jì)不僅顯著提升了用戶體驗(yàn)，還增強(qiáng)了應(yīng)用的適應(yīng)性和市場競爭力。組件庫注重一致性和可擴(kuò)展性，確保用戶在不同主題下的操作體驗(yàn)無縫銜接。同時(shí)，它允許開發(fā)者輕松添加新主題，支持應(yīng)用的可持續(xù)發(fā)展，進(jìn)一步推動(dòng)了產(chǎn)品在多變市場中的成功。

六、結(jié)語

綜上所述，我們通過構(gòu)建模塊化的設(shè)計(jì)語言和組件規(guī)范，實(shí)現(xiàn)了多品牌和多框架環(huán)境下的高效適配，為未來可能出現(xiàn)的框架提供了靈活的接口。自研設(shè)計(jì)工具的引入，不僅提升了設(shè)計(jì)師的工作效率，還確保了設(shè)計(jì)與研發(fā)的一致性和靈活性。

借助一鍵替換設(shè)計(jì)語言和實(shí)時(shí)預(yù)覽等便捷功能，設(shè)計(jì)團(tuán)隊(duì)能夠迅速響應(yīng)市場變化，滿足不同品牌的需求。整體流程的高效性和靈活性，使企業(yè)在競爭激烈的市場中保持領(lǐng)先，實(shí)現(xiàn)高質(zhì)量的組件庫產(chǎn)出。展望未來，隨著技術(shù)的不斷進(jìn)步，這一設(shè)計(jì)系統(tǒng)將持續(xù)優(yōu)化和擴(kuò)展，為企業(yè)提供更強(qiáng)大的支持和保障。