編輯導語：產品設計這一環節至關重要，它關乎到最終的用戶使用體驗。此時，若能降低設計和開發之間的溝通損耗，提升二者的協作效率，將可以有效保障產品落地后的用戶體驗。那么，不妨來看看文章里介紹的企業級設計系統——ArcoDesign。

在圣經的故事里，傳說曾經全人類都講同一種語言，并計劃建造一座通天的巴別塔。為了阻止巴別塔的建成，上帝打亂了人類的語言。由于在建造過程中無法溝通交流，巴別塔的建造狀況百出，最后不了了之。

一款互聯網產品的誕生，往往要經過需求分析、產品分析、產品規劃、產品設計和產品落地五個階段，需要產品經理、UI、前端、后端之間的密切協作。其中，產品設計直接關乎到產品落地的形態和最終的用戶體驗，如何消除協作中面臨的溝通信息損耗，讓設計和開發的協作更加容易和高效，一套統一的“語言”或將起到事倍功半的作用。

近日，一款名為ArcoDesign的企業級設計系統，在由稀土掘金技術社區主辦的首屆稀土開發者大會上全新開源。設計系統是一種思維，也被視作設計師與前端開發溝通的一種語言。據ArcoDesign的開發者、來自字節跳動GIP UED和前端架構技術團隊介紹，讓設計和開發無縫協作，專注用戶體驗的提升，是ArcoDesign要重點解決的問題之一。

ArcoDesign官網：https://arco.design

一、關于ArcoDesign

在正式推出并開源之前，ArcoDesign 曾經以技術中臺的形式在字節跳動內部運行了三年，已經支持了字節內部超過 4000 個項目，是字節內部使用規模最大的設計系統。

ArcoDesign 擁有系統的設計規范和資源，依據此規范提供了覆蓋 React、Vue、Mobile 的原子組件?；谪S富的原子組件，Arco 除了提供風格配置平臺、物料平臺的定制化工具外，還提供包括圖標平臺、品牌庫、Arco Pro 最佳實踐的資源平臺，旨在幫助設計師與開發者解放雙手、提升工作效率、高質量地打造符合業務規范的中后臺應用。

二、ArcoDesign想解決哪些問題

在過去的 3 年里，字節跳動內部中后臺產品業務量的迅速增長對傳統的設計與開發方式提出了很大的挑戰。隨著項目變大，模塊和頁面變多，視覺風格和交互越來越難以統一。

同一個業務平臺下，不同模塊的視覺風格和前端開發框架都可能大相徑庭，這對于用戶體驗和平臺的一致性造成了巨大的困擾。

ArcoDesign的初衷就是想從源頭上去解決平臺的差異性和一致性問題，又快又好地提升各個平臺的設計質量。

具體來看，ArcoDesign在個性化定制能力、二次開發+復用能力、設計+開發更好地協作方面有所突破。

1. 個性化定制能力

不同的團隊風格，不同的業務場景，對視覺風格會有不同的需求。

以往，不論有沒有設計參與，整體的技術選型都是比較自由的，有的團隊選擇 React ，有的選擇 Vue；有的組件庫是面性設計，有的組件庫是線性設計。當設計給出設計圖，開發需要在項目里進行各式各樣的樣式魔改。

在項目變多之后，為了更小成本的維護和代碼重用，一般會基于所選組件庫封裝一個新的組件庫，這個二次開發的組件庫對組件的風格樣式和默認行為進行魔改，魔改需要開發花費大量的時間成本，但基本是唯一的解決方案。

然而，只要涉及到魔改，就不可避免地會遇到升級問題。只要升級底層組件庫，就有可能導致樣式甚至功能出現出現不可預知的改變，為了求穩，就需要鎖版本，鎖了版本又沒辦法享受版本升級帶來的新特性和 bug 修復，陷入一個惡性循環的怪圈。

魔改容易造成的惡性循環

為了解決樣式定制難這個痛點，Arco 從設計之初就對組件進行了細致的拆分。

組件是設計系統提供的最底層能力。Arco 提供了 67 個基礎組件，這些基礎組件足以支撐絕大多數的業務需求。

一鍵切換“暗黑模式”

1）風格樣式定制

ArcoDesign將影響組件視覺的樣式都抽離到了 token 之中，token 是最小化描述組件樣式的變量，組件庫中是以 less 變量的形式存在。從全局變量到組件級變量，用 token 來解釋組件，用上千個 token 變量，來保證通過配置變量，就能對樣式風格進行任意定制。

比如現在越來越多的網站會考慮支持暗色風格切換，“暗黑模式”會讓使用者更加專注自己的操作任務，同時在夜間或暗光環境使用下可以減少屏幕光對眼睛的刺激，避免在黑暗環境中長時間注視高亮光源帶來的視覺刺激。ArcoDesign支持一鍵開啟暗黑模式，無縫切換，流暢體驗。

2）默認行為定制

Arco 支持 60+ 組件默認行為的全局配置，以極大的靈活性，減小維護成本、提升開發體驗。用戶只需要維護一份全局配置，就能定制每一個組件的默認交互。

值得注意的是，除了上述能力，ArcoDesign還有助于簡化傳統項目上線前反復驗收的繁瑣流程。

傳統的情況是，當設計確定設計稿，開發通過上述提到的樣式定制和默認行為定制去定制符合設計規范的基礎組件，在上線之前需要反復地跟 UI 進行樣式還原驗收，同時從設計稿到研發再到 UI 走查驗收。

Arco 提供了樣式可視化編輯的「風格配置平臺」?；陲L格配置平臺所見即所得的組件配置能力，用戶可以對全局樣式和組件樣式做細粒度的調整，實現「ArcoDesign to Any Design」，大幅提升流程效率。

在配置完成之后，用戶可一鍵發布主題到主題市場，提供優秀的主題風格給社區。在主題市場上，用戶可以瀏覽所有主題，自由地進行選用。

依托系統的 ArcoDesign 設計規范，即便是無設計師參與的平臺產品，ArcoDesign也可以幫助開發者快速構建專業、一致的體驗。

2. 二次開發和復用能力

得益于 Arco 組件靈活的 API 設計以及物料平臺提供的定制化組件解決方案，用戶可以基于 Arco 快速開發滿足自身特定需求的定制組件。定制化的組件將更好地復用業務代碼，促進團隊協作，提升開發效率，更可與社區共享豐富的物料資源。

3. 設計和開發更好地協作

Arco希望通過提供全流程完善的生態體系，提升設計、開發全流程工作體驗。

三、全流程完善的生態體系

1. 生態平臺

• 風格配置平臺：通過協助用戶構建個性化主題，幫助用戶更好地管理不同風格的主題配置，提高設計和開發的協作效率。
• 物料平臺：基于 Arco 腳手架工具快速進行定制化的業務組件開發、共享，實現業務模塊的解耦與復用，提升開發效率，促進團隊協作。
• 圖標平臺 IconBox：提供規范化、統一化的高質量業務圖標庫。
• 中后臺最佳實踐 Arco Pro：幫助用戶快速的從 0 到 1 搭建項目，支持用戶自由選用常見頁面模版。
• 色彩配置工具 ：幫助設計師和開發者在線調試顏色，探索 Arco 色彩算法。

2. 開發工具

• Webpack 插件：幫助開發者在 Webpack 構建中方便地使用主題、實現按需加載、替換組件內置圖標。
• Arco CLI 腳手架工具：封裝了物料操作命令，幫助用戶快速創建物料項目并將其發布至 Arco 物料平臺。
• VSCode 插件：幫助用戶在編輯器查閱文檔、可視化操作物料等。
• Figma 插件：聚合了常見的設計工具，幫助設計師更方便地使用 Arco 的各項能力。

3. 設計功能

• 為了方便設計師定位資源，Arco 提供了資源定位的 Figma 插件功能，讓設計師可以一鍵輕松找到目標組件的設計資源以及開發資源。
• 為了提高設計師的配色效率，Arco 提供了色彩配置的 Figma 插件功能，可以根據指定顏色通過算法智能生成明亮以及暗黑模式下的梯度色板。
• 為了提高制作圖標的效率，Arco 提供了一鍵拖拽使用 Arco 圖標的 Figma 插件功能，在線顏色、線寬、尺寸調整，靈活配置，游刃有余。
• 為了降低設計師制作 Figma 變體的成本，提高設計師產出符合設計系統規范的設計稿的效率，Arco 探索了 Code to Design，提供了以組件為維度的 Figma 插件功能，設計師可以通過在插件里配置組件屬性，自動生成對應的設計元素。同時打通了風格配置平臺，讓設計稿可以輕松實現 「一鍵換膚」
• 為了方便設計師管理圖標，Arco 推出了Iconbox 圖標平臺，旨在讓設計師可以在該平臺上高效地管理自己的圖標。并且提供了圖標上傳的 Figma 插件功能，支持設計師在 Figma 中直接選中圖標一鍵上傳至圖標平臺。

經過了近三年的迭代和眾多產品的驗證，Arco Design已經成為字節跳動內部使用量最大的設計系統，助力眾多字節優秀產品打造高質量的產品體驗。未來，可視化建站平臺、D2C 設計圖轉代碼工具、C2D 代碼轉設計圖工具、品牌庫等功能將陸續上線并開放。

正如 「Arco」 這個名字一樣，遵循【Agreement / 一致】、【Rhythm / 韻律】、【Clear / 清晰】、【Open / 開放】的理念，Arco 希望能幫助更多的用戶提升工作效率和愉悅程度，打造更好的產品。

Arco Design 現已正式開放，歡迎使用和體驗。Arco 非常重視每一位用戶的意見，希望大家踴躍反饋，積極共建。

Github React 組件庫：https://github.com/arco-design/arco-design

Github Vue 組件庫：https://github.com/arco-design/arco-design-vue

本文由 @Cindy 投稿發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議