ArcoDesign 是什么？

ArcoDesign 由字節(jié)跳動 GIP UED & 架構(gòu)前端團隊聯(lián)合打造的一款企業(yè)級設(shè)計系統(tǒng)。團隊先后負責(zé)過多款億萬級用戶產(chǎn)品的體驗設(shè)計和新產(chǎn)品的孵化探索，包括今日頭條、西瓜視頻、火山引擎 ToB 平臺業(yè)務(wù)等。

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

https://arco.design/?

1. 設(shè)計理念

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

ArcoDesign 有哪些亮點 ？

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

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

2. 智能連接 · 全面的生態(tài)平臺

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

3. 風(fēng)格配置平臺 （Design Lab）

這是一個旨在提升設(shè)計和開發(fā)效率的平臺，通過可視化的流程協(xié)助用戶和團隊構(gòu)建個性化設(shè)計風(fēng)格，幫助用戶更好的創(chuàng)建和管理自己的風(fēng)格主題甚至設(shè)計系統(tǒng)。我們從三個維度來定義了風(fēng)格配置：

Level 1 全局樣式

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

Level 2 組件級樣式

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

Level 3 設(shè)計系統(tǒng)

對于一些團隊來講，他們不僅希望有自己團隊的風(fēng)格，也希望有自己團隊的品牌。基于這個，我們已經(jīng)上線了組件頁面的封面、每個組件頁頭的定制。并且新增了一個設(shè)計語言的模塊，讓用戶維護自己的設(shè)計語言，甚至可以生成自己的站點（預(yù)覽模式）。

4. 物料市場 （Material Market）

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

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

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

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

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

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

6. 色彩配置工具（Palette）

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

更多開發(fā)優(yōu)勢

1. React 和 Vue 同步支持

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

2. 科學(xué)的暗黑模式

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

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

3. 開箱即用的體驗

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

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

4. 沉浸式文檔體驗

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

5. 二次開發(fā)和復(fù)用能力

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

6. 完善的輔助開發(fā)工具鏈

Arco 希望通過完善的生態(tài)體系，提升設(shè)計、開發(fā)全流程工作體驗。

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

7. 設(shè)計和開發(fā)更好的協(xié)作

設(shè)計體系的主要用戶群體還包括設(shè)計師。Arco 一直在探索如何基于 Arco 的周邊生態(tài)提升設(shè)計師的工作效率?；诠緝?nèi)主流的設(shè)計交付工具 Figma 的設(shè)計工具集 Toolbox 提供了一鍵輕松找到目標(biāo)組件的設(shè)計資源以及開發(fā)資源、配色工具、圖標(biāo)資源上傳及托管、以及提高設(shè)計師產(chǎn)出效率，輸出符合設(shè)計系統(tǒng)規(guī)范的設(shè)計稿的效率的 Code to Design 等工具插件。

未來有哪些展望 ？

1. 設(shè)計系統(tǒng)的未來不只組件庫

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

我們服務(wù)哪些用戶 ？

Arco 致力于探索更優(yōu)質(zhì)的設(shè)計體系，以解決復(fù)雜的業(yè)務(wù)以及冗余的溝通帶來的體驗問題，徹底解放開發(fā)及設(shè)計師的雙手。在字節(jié)內(nèi)部，我們服務(wù)了 4000+ 項目實現(xiàn)高效高質(zhì)的產(chǎn)品搭建流程。是從實踐中孵化而來，也廣泛服務(wù)于內(nèi)部業(yè)務(wù)的產(chǎn)品。

ArcoDesign 最佳實踐

1. 火山引擎- 復(fù)雜控制臺場景體驗設(shè)計

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

2. 頭條 MP-創(chuàng)作者后臺搭建

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

3. BytedEffects - 移動端場景

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

4. 火山翻譯官網(wǎng) - 風(fēng)格化 landing page 搭建

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

5. 星夜 Starry - 復(fù)雜交互的設(shè)計工具

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

6. 火山同傳-設(shè)計賦能 AI 場景

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

開放和共建

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

• ArcoDesign 官網(wǎng)： 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

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

歡迎關(guān)注作者微信公眾號：「今日頭條UED」