字節(jié)跳動(dòng)開(kāi)源 Arco Design

ArcoDesign 簡(jiǎn)介

ArcoDesign 是由字節(jié)跳動(dòng) GIP UED 團(tuán)隊(duì)和架構(gòu)前端團(tuán)隊(duì)聯(lián)合推出的企業(yè)級(jí)設(shè)計(jì)系統(tǒng)。在打磨了近 3 年之后，通過(guò)字節(jié)內(nèi)部大量業(yè)務(wù)沉淀和驗(yàn)證，我們開(kāi)源了 ArcoDesign 設(shè)計(jì)系統(tǒng)。旨在讓社區(qū)聽(tīng)見(jiàn)更多的聲音，為更多中小型企業(yè)及個(gè)人設(shè)計(jì)師和開(kāi)發(fā)者提效，創(chuàng)造更多高效美觀的“最佳實(shí)踐”。

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

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

ArcoDesign 提供的能力

完善的基礎(chǔ)組件

基于 ArcoDesign 設(shè)計(jì)規(guī)范，Arco 提供了 67 個(gè)基礎(chǔ)組件，這些基礎(chǔ)組件足以支撐絕大多數(shù)的業(yè)務(wù)需求。同時(shí)，Arco 在這些基礎(chǔ)組件的設(shè)計(jì)上，也開(kāi)放了細(xì)粒度的配置，方便后續(xù)拓展。

React 和 Vue 同步支持

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

科學(xué)的暗黑模式

Arco 支持一鍵開(kāi)啟暗黑模式，無(wú)縫切換，流暢體驗(yàn)。

暗黑模式 會(huì)讓使用者更加專(zhuān)注自己的操作任務(wù)，同時(shí)避免在黑暗環(huán)境中長(zhǎng)時(shí)間注視高亮光源導(dǎo)致的視覺(jué)刺激。

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

開(kāi)箱即用的體驗(yàn)

為了幫助用戶(hù)更快速地從 0 到 1 搭建項(xiàng)目，Arco 提供了 最佳實(shí)踐 ? Arco ? Pro ，整理了常見(jiàn)的頁(yè)面場(chǎng)景，幫助用戶(hù)快速初始化項(xiàng)目和使用頁(yè)面模板。

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

極致的個(gè)性化定制能力

從底層組件到上層平臺(tái)，Arco 提供了極致的定制能力。

底層組件

底層組件上，Arco 提供了細(xì)致的 樣式定制 和 默認(rèn)行為定制 。

樣式 方面，Arco 從設(shè)計(jì)之初就通過(guò)細(xì)致的拆分，將影響組件視覺(jué)的樣式都抽離為上千個(gè)獨(dú)立的 token 變量，并基于這些變量完成了從 全局樣式 到 組件樣式 的全面配置。

默認(rèn)行為 方面，Arco 支持 60+ 組件默認(rèn)行為的全局配置，以極大的靈活性，減小維護(hù)成本、提升開(kāi)發(fā)體驗(yàn)。用戶(hù)只需要維護(hù)一份全局配置，就能定制每一個(gè)組件的默認(rèn)交互。

上層平臺(tái)

在底層能力的加持下，Arco 的上層平臺(tái)再次將定制能力無(wú)限放大。

Arco 提供了樣式可視化編輯的 「風(fēng)格配置平臺(tái)」 ?；陲L(fēng)格配置平臺(tái) 所見(jiàn)即所得 的組件配置能力，用戶(hù)可以對(duì)全局樣式和組件樣式做細(xì)粒度的調(diào)整，實(shí)現(xiàn) 「 ?Arco ?Design ? to Any Design」 。在配置完成之后，用戶(hù)可一鍵發(fā)布主題到主題市場(chǎng)，提供優(yōu)秀的主題風(fēng)格給社區(qū)。在主題市場(chǎng)上，用戶(hù)可以瀏覽所有主題，自由地進(jìn)行選用。

沉浸式文檔體驗(yàn)

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

二次開(kāi)發(fā)和復(fù)用能力

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

全流程完善的生態(tài)體系

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

生態(tài)平臺(tái)

• 風(fēng)格配置平臺(tái)：通過(guò)協(xié)助用戶(hù)構(gòu)建個(gè)性化主題，幫助用戶(hù)更好地管理不同風(fēng)格的主題配置，提高設(shè)計(jì)和開(kāi)發(fā)的協(xié)作效率。
• 物料平臺(tái)：基于 Arco 腳手架工具快速進(jìn)行定制化的業(yè)務(wù)組件開(kāi)發(fā)、共享，實(shí)現(xiàn)業(yè)務(wù)模塊的解耦與復(fù)用，提升開(kāi)發(fā)效率，促進(jìn)團(tuán)隊(duì)協(xié)作。
• 圖標(biāo)平臺(tái) IconBox：提供規(guī)范化、統(tǒng)一化的高質(zhì)量業(yè)務(wù)圖標(biāo)庫(kù)。
• 中后臺(tái)最佳實(shí)踐 Arco Pro：幫助用戶(hù)快速的從 0 到 1 搭建項(xiàng)目，支持用戶(hù)自由選用常見(jiàn)頁(yè)面模版。
• 色彩配置工具 ：幫助設(shè)計(jì)師和開(kāi)發(fā)者在線調(diào)試顏色，探索 Arco 色彩算法。

開(kāi)發(fā)工具

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

設(shè)計(jì)和開(kāi)發(fā)更好的協(xié)作

設(shè)計(jì)體系的主要用戶(hù)群體是設(shè)計(jì)師。Arco 一直在探索如何基于 Arco 的周邊生態(tài)提升設(shè)計(jì)師的工作效率。

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

優(yōu)秀案例

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

火山引擎

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

頭條號(hào)

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

ByteEffects

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

火山翻譯

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

星夜Starry

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

未來(lái)展望

ArcoDesign 在字節(jié)跳動(dòng)內(nèi)部還做了更多方面的探索，如可視化建站平臺(tái)、D2C 設(shè)計(jì)圖轉(zhuǎn)代碼工具、C2D 代碼轉(zhuǎn)設(shè)計(jì)圖工具、品牌庫(kù)等。上述平臺(tái)工具都會(huì)在未來(lái)陸續(xù)與大家見(jiàn)面，希望大家多多關(guān)注～

反饋和共建

ArcoDesign 現(xiàn)已正式開(kāi)放，歡迎各位使用和體驗(yàn)。Arco 非常重視每一位開(kāi)發(fā)者和用戶(hù)的意見(jiàn)，希望大家踴躍反饋，積極共建。

官網(wǎng)：https://arco.design

Github React 組件庫(kù)：https://github.com/arco-design/arco-design

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