ArcoDesign 是什么？

ArcoDesign 由字節跳動 GIP UED & 架構前端團隊聯合打造的一款企業級設計系統。團隊先后負責過多款億萬級用戶產品的體驗設計和新產品的孵化探索，包括今日頭條、西瓜視頻、火山引擎 ToB 平臺業務等。

在打磨了近 3 年之后，通過字節內部大量業務沉淀和驗證，我們在 10 月 27 日舉辦的首屆稀土開發者大會上，正式開源了 ArcoDesign 設計系統，旨在讓社區聽見更多的聲音，同時讓公司創造“最佳實踐”的設計系統，為更多中小型企業及個人設計師和開發者提效，創造更多高效美觀的 “最佳實踐”。

https://arco.design/?

1. 設計理念

ArcoDesign 以務實浪漫，連接高效與美為愿景，遵從一致（Agreement）、韻律（Rhythm）、清晰（Clear）、開放（Open）的設計原則，幫助連接開發與設計之間的鴻溝，從開發者和設計師視角，以更系統化的思路解決業務問題，通過細致完善的設計資產，簡單流暢的工具集和生態平臺，快速提升工作的效率和愉悅程度。

ArcoDesign 有哪些亮點 ？

1. 靈活定制 · 豐富的原子級組件

基于 Arco 的設計規范和 3 年的業務實踐經驗，我們產出了 67 個原子級基礎組件 ，全面覆蓋布局、數據展示、數據輸入、反饋等交互場景。更豐富細小的組件顆粒度和靈活的定制能力幫助用戶輕松創造契合自身業務的百變主題風格。React、Vue、Mobile 多套開發框架提升開發工作靈活度。

2. 智能連接 · 全面的生態平臺

Arco 提供了一套完整的生態平臺，旨在讓開發者和設計師能夠用一種語言進行溝通，無縫連接上下游工作流。此次開源的平臺包括：風格配置平臺（Design Lab） 和 色彩配置工具（Palette） 支持在線構建并實時預覽個性化主題和色板，讓用戶所見即所得的聚焦于設計創作與應用。物料市場 （Material Market）和圖標平臺（Iconbox）提供了完善的工具和流程幫助業務團隊快速構建業務定制圖標、組件、模塊、頁面等可復用資產。中后臺最佳實踐（Arco Pro） 整理了常見的典型頁面場景，幫助用戶更快速的從 0 到 1 構建項目。

3. 風格配置平臺 （Design Lab）

這是一個旨在提升設計和開發效率的平臺，通過可視化的流程協助用戶和團隊構建個性化設計風格，幫助用戶更好的創建和管理自己的風格主題甚至設計系統。我們從三個維度來定義了風格配置：

Level 1 全局樣式

基本能決定一個組件庫的風格，全局樣式配置包含色板、圓角、字體、自重、尺寸、陰影等能直觀影響視覺的因素，一般通過全局樣式即可配置出適用于不同業務場景的風格。

Level 2 組件級樣式

一般用到組件級樣式配置的，都是對視覺有較大定制需求的，傳統組件庫對于組件樣式定制，一般是靠樣式覆蓋來做，這樣做對于團隊成本最小，但是對于用戶來講成本很大，而且用戶一旦樣式覆蓋了，在版本升級上可能遭遇各種奇怪的問題導致不敢升級。為了徹底解決這個問題，我們設計了上千個組件樣式變量，并且以可視化的形式呈現在了風格配置平臺，用戶可以在線調配組件的任意細節，而不用寫煩人的樣式覆蓋，使后續的維護變得更加舒心。

Level 3 設計系統

對于一些團隊來講，他們不僅希望有自己團隊的風格，也希望有自己團隊的品牌?；谶@個，我們已經上線了組件頁面的封面、每個組件頁頭的定制。并且新增了一個設計語言的模塊，讓用戶維護自己的設計語言，甚至可以生成自己的站點（預覽模式）。

4. 物料市場 （Material Market）

為了滿足更多業務需求并提供復用能力，我們上線了物料市場，物料市場是我們用來解決自定義痛點的另一把利刃。我們也從三個維度定義了物料：

業務組件/組件庫：業務組件用于解決的場景包括封裝團隊業務邏輯的組件，開發使用頻率較低或偏門的組件，開發功能增強版組件，匯總團隊內業務組件的組件庫等。

區塊：產物是代碼片段，通過腳本命令下載到項目中或者通過 AUX 可視化工具添加到項目中，區塊的特點是落地生根，改動了就無法更新區塊的版本，相當于是復制了一份代碼放到了項目中。區塊用于解決的場景包括組件組合和復雜表單等。

頁面：頁面跟區塊沒有本質上的區別，只是添加了路由，它們主要是定義上的區別。不過如果結合 ArcoDesign Pro 就不一樣了，頁面物料會自動處理路由、國際化、狀態管理等，使其完美適配 pro。頁面類型的物料主要解決的場景包括特定場景類的頁面以及包含復雜業務邏輯的中后臺頁面等。

5. 中后臺最佳實踐 （Arco Pro）

ArcoDesign Pro 是一個開箱即用的中后臺前端解決方案，arco 擁有豐富的生態，pro 給出了豐富的示例和最佳實踐，旨在為用戶在使用上提供參考和思路，降低用戶搭建項目的成本。ArcoDesign Pro 包含了豐富的場景頁面，并且跟物料平臺完成了深度打通，支持把頁面上傳到物料平臺，通過 arco 腳手架命令一鍵將頁面下載到項目中。

6. 色彩配置工具（Palette）

色彩是組件庫的視覺的基石在色彩算法落地之后，我們上線了色彩平臺，展示了 ArcoDesign 官方所有的顏色，也可以在線調整，讓設計和開發都能方便的利用色彩算法的能力。未來我們也會支持一鍵同步色板到風格配置平臺。無障礙色彩對比度也是很重要的一個顏色指標，我們提供了直觀的頁面，供設計和開發在線進行色彩對比度測試。

更多開發優勢

1. React 和 Vue 同步支持

基于 Arco Design 設計規范，Arco 同時提供了 React 和 Vue 兩套 UI 組件庫。Vue 組件庫基于 Vue 3.0 開發，提供了面向未來開發的能力，且與 React 組件庫底層能力互通，均可完美利用 Arco 生態體系的各項能力。

2. 科學的暗黑模式

Arco 支持一鍵開啟暗黑模式，無縫切換，流暢體驗。暗黑模式會讓使用者更加專注自己的操作任務，同時避免在黑暗環境中長時間注視高亮光源導致的視覺刺激。

Arco 在底層設計上，結合了 Less 和 CSS 變量各自的優勢。Less 變量負責編譯時的色彩計算，基于主色計算亮 / 暗兩套梯度色板，CSS 變量負責頁面渲染時的最終引用，從而實現了無縫切換亮 / 暗色風格。用戶既能享受 CSS 變量帶來的絲滑切換體驗，又能享受 Less 變量帶來配置單個主色即可生成整套色板的便捷，兼顧優雅與易用。

3. 開箱即用的體驗

為了幫助用戶更快速地從 0 到 1 搭建項目，Arco 提供了最佳實踐 Arco Pro，整理了常見的頁面場景，幫助用戶快速初始化項目和使用頁面模板。

在中后臺項目中，頁面設計模式較為單一，Arco 提取了典型的業務場景，并將其抽離為頁面模板，使用戶通過簡單的復制和修改就能快速搭建頁面。

4. 沉浸式文檔體驗

在 Arco 組件文檔上，用戶可以一鍵安裝風格配置平臺上的所有主題，快捷地將個人主題應用到 Arco 組件文檔上，進行沉浸式的文檔體驗。

5. 二次開發和復用能力

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

6. 完善的輔助開發工具鏈

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

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

7. 設計和開發更好的協作

設計體系的主要用戶群體還包括設計師。Arco 一直在探索如何基于 Arco 的周邊生態提升設計師的工作效率?；诠緝戎髁鞯脑O計交付工具 Figma 的設計工具集 Toolbox 提供了一鍵輕松找到目標組件的設計資源以及開發資源、配色工具、圖標資源上傳及托管、以及提高設計師產出效率，輸出符合設計系統規范的設計稿的效率的 Code to Design 等工具插件。

未來有哪些展望 ？

1. 設計系統的未來不只組件庫

除了以上此次開源的生態產品外，在未來，我們會陸續開放更多生態平臺，包括圖表可視化平臺 Chartspace、Figma 設計工具集 Toolbox、品牌資源庫 BrandStore、字體庫 Fontmall 等，通過設計工程化（DesignOps）的思路，將開箱即用的資源和生態平臺更智能地連接起來，自動化、工具化實現打通設計師與前端工程師的工作流，提升設計開發效率。

我們服務哪些用戶 ？

Arco 致力于探索更優質的設計體系，以解決復雜的業務以及冗余的溝通帶來的體驗問題，徹底解放開發及設計師的雙手。在字節內部，我們服務了 4000+ 項目實現高效高質的產品搭建流程。是從實踐中孵化而來，也廣泛服務于內部業務的產品。

ArcoDesign 最佳實踐

1. 火山引擎- 復雜控制臺場景體驗設計

通過 Arco 組件庫、風格配置平臺和圖標平臺，智能生成適合多種業務需求的個性化主題包，助力火山引擎提升各產品線體驗一致性，使其更好的為企業提供系統化全鏈路解決方案服務。目前火山引擎控制臺超過 60%產品使用 Arco 組件庫進行搭建。

2. 頭條 MP-創作者后臺搭建

使用 arco 靈活豐富的組件資源，今日頭條快速搭建自媒體平臺頭條號，為創作者提供創作發布、數據分析、收益分析等多場景實用功能。

3. BytedEffects - 移動端場景

使用 arco mobile 的定制組件與開發框架，BytedEffects 開發了對智能圖像創作能力進行展示的移動端應用，方便為客戶提供沉浸式的功能預演和能力試用。

4. 火山翻譯官網 - 風格化 landing page 搭建

使用 Arco 自有的圖標及品牌資源，火山翻譯在短時間內完成了官網落地頁的設計工作，多樣的視覺內容幫助聚焦用戶關注，引流平臺提供的多語言翻譯服務。

5. 星夜 Starry - 復雜交互的設計工具

基于 Arco 組件的強交互能力，幫助星夜智能建站平臺實現更加靈活智能的建站能力，在活動搭建、中后臺搭建、垂直搭建等多種場景中提效。

6. 火山同傳-設計賦能 AI 場景

基于 Arco 輕量化的開發框架，火山同傳實現 AI 實時同聲傳譯客戶端軟件的快速上線，面向線上直播、線下大會等場景提供的一站式智能同傳解決方案。

開放和共建

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

• ArcoDesign 官網： https://arco.design
• Github React 組件庫：
  https://github.com/arco-design/arco-design
• Github Vue 組件庫：
  https://github.com/arco-design/arco-design-vue
• Figma UIKit：
  https://www.figma.com/file/M66cTiLXHa4SVyZIlfY5Pb/arco-Design-System?node-id=8253%3A44145

特別感謝曾經為 Arco 做出貢獻的,目前參與 Arco 建設的每一位同學，以及此次開源籌備創意設計-多媒體、創意設計-品牌團隊的大力支持。

歡迎關注作者微信公眾號：「今日頭條UED」