字節(jié)最新開源 Arco Design框架，同時支持 Vue 和 React
點擊上方 前端Q，關(guān)注公眾號
回復(fù)加群，加入前端Q技術(shù)交流群
ArcoDesign 簡介
ArcoDesign 是由字節(jié)跳動 GIP UED 團隊和架構(gòu)前端團隊聯(lián)合推出的企業(yè)級設(shè)計系統(tǒng)。在打磨了近 3 年之后，通過字節(jié)內(nèi)部大量業(yè)務(wù)沉淀和驗證，我們開源了 ArcoDesign 設(shè)計系統(tǒng)。旨在讓社區(qū)聽見更多的聲音，為更多中小型企業(yè)及個人設(shè)計師和開發(fā)者提效，創(chuàng)造更多高效美觀的“最佳實踐”。
ArcoDesign 擁有系統(tǒng)的設(shè)計規(guī)范和資源，依據(jù)此規(guī)范提供了覆蓋 React、Vue、Mobile 的原子組件。基于豐富的原子組件，Arco 提供了除風(fēng)格配置平臺、物料平臺的定制化工具外還包括圖標(biāo)平臺、品牌庫、Arco Pro 最佳實踐的資源平臺，旨在幫助設(shè)計師與開發(fā)者解放雙手、提升工作效率、高質(zhì)量地打造符合業(yè)務(wù)規(guī)范的中后臺應(yīng)用。
正如 「Arco」 這個名字一樣，遵循【Agreement / 一致】、【Rhythm / 韻律】、【Clear / 清晰】、【Open / 開放】的理念，Arco 希望能幫助更多的用戶提升工作效率和愉悅程度，打造更好的產(chǎn)品。
ArcoDesign 提供的能力
完善的基礎(chǔ)組件
基于 ArcoDesign 設(shè)計規(guī)范，Arco 提供了 67 個基礎(chǔ)組件，這些基礎(chǔ)組件足以支撐絕大多數(shù)的業(yè)務(wù)需求。同時，Arco 在這些基礎(chǔ)組件的設(shè)計上，也開放了細粒度的配置，方便后續(xù)拓展。
React 和 Vue 同步支持
基于 ArcoDesign 設(shè)計規(guī)范，Arco 同時提供了 React 和 Vue 兩套 UI 組件庫。Vue 組件庫基于 Vue 3.0 開發(fā)，提供了面向未來開發(fā)的能力，且與 React 組件庫底層能力互通，均可完美利用 Arco 生態(tài)體系的各項能力。
科學(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)雅與易用。
開箱即用的體驗
為了幫助用戶更快速地從 0 到 1 搭建項目，Arco 提供了 最佳實踐 Arco Pro ，整理了常見的頁面場景，幫助用戶快速初始化項目和使用頁面模板。
在中后臺項目中，頁面設(shè)計模式較為單一，Arco 提取了典型的業(yè)務(wù)場景，并將其抽離為頁面模板，使用戶通過簡單的復(fù)制和修改就能快速搭建頁面。
極致的個性化定制能力
從底層組件到上層平臺，Arco 提供了極致的定制能力。
底層組件
底層組件上，Arco 提供了細致的 樣式定制 和 默認行為定制 。
樣式 方面，Arco 從設(shè)計之初就通過細致的拆分，將影響組件視覺的樣式都抽離為上千個獨立的 token 變量，并基于這些變量完成了從 全局樣式 到 組件樣式 的全面配置。
默認行為 方面，Arco 支持 60+ 組件默認行為的全局配置，以極大的靈活性，減小維護成本、提升開發(fā)體驗。用戶只需要維護一份全局配置，就能定制每一個組件的默認交互。
上層平臺
在底層能力的加持下，Arco 的上層平臺再次將定制能力無限放大。
Arco 提供了樣式可視化編輯的 「風(fēng)格配置平臺」 。基于風(fēng)格配置平臺 所見即所得 的組件配置能力，用戶可以對全局樣式和組件樣式做細粒度的調(diào)整，實現(xiàn) 「 Arco Design to Any Design」 。在配置完成之后，用戶可一鍵發(fā)布主題到主題市場，提供優(yōu)秀的主題風(fēng)格給社區(qū)。在主題市場上，用戶可以瀏覽所有主題，自由地進行選用。
沉浸式文檔體驗
在 Arco 組件文檔上，用戶可以一鍵安裝風(fēng)格配置平臺上的所有主題，快捷地將個人主題應(yīng)用到 Arco 組件文檔上，進行沉浸式的文檔體驗。
二次開發(fā)和復(fù)用能力
得益于 Arco 組件靈活的 API 設(shè)計以及物料平臺提供的定制化組件解決方案，用戶可以基于 Arco 快速開發(fā)滿足自身特定需求的定制組件。定制化的組件將更好地復(fù)用業(yè)務(wù)代碼，促進團隊協(xié)作，提升開發(fā)效率，更可與社區(qū)共享豐富的物料資源。
全流程完善的生態(tài)體系
Arco 希望通過完善的生態(tài)體系，提升設(shè)計、開發(fā)全流程工作體驗。
生態(tài)平臺
-
風(fēng)格配置平臺：通過協(xié)助用戶構(gòu)建個性化主題，幫助用戶更好地管理不同風(fēng)格的主題配置，提高設(shè)計和開發(fā)的協(xié)作效率。 -
物料平臺：基于 Arco 腳手架工具快速進行定制化的業(yè)務(wù)組件開發(fā)、共享，實現(xiàn)業(yè)務(wù)模塊的解耦與復(fù)用，提升開發(fā)效率，促進團隊協(xié)作。 -
圖標(biāo)平臺 IconBox：提供規(guī)范化、統(tǒng)一化的高質(zhì)量業(yè)務(wù)圖標(biāo)庫。 -
中后臺最佳實踐 Arco Pro：幫助用戶快速的從 0 到 1 搭建項目，支持用戶自由選用常見頁面模版。 -
色彩配置工具 ：幫助設(shè)計師和開發(fā)者在線調(diào)試顏色，探索 Arco 色彩算法。
開發(fā)工具
-
Webpack 插件：幫助開發(fā)者在 Webpack 構(gòu)建中方便地使用主題、實現(xiàn)按需加載、替換組件內(nèi)置圖標(biāo)。 -
Arco CLI 腳手架工具：封裝了物料操作命令，幫助用戶快速創(chuàng)建物料項目并將其發(fā)布至 Arco 物料平臺。 -
VSCode 插件：幫助用戶在編輯器查閱文檔、可視化操作物料等。 -
Figma 插件：聚合了常見的設(shè)計工具，幫助設(shè)計師更方便地使用 Arco 的各項能力。
設(shè)計和開發(fā)更好的協(xié)作
設(shè)計體系的主要用戶群體是設(shè)計師。Arco 一直在探索如何基于 Arco 的周邊生態(tài)提升設(shè)計師的工作效率。
-
為了方便設(shè)計師定位資源，Arco 提供了資源定位的 Figma 插件功能，讓設(shè)計師可以一鍵輕松地找到 Arco 組件的資源文檔和文件。 -
為了提高設(shè)計師的配色效率，Arco 提供了色彩配置的 Figma 插件功能，可以根據(jù)指定顏色通過算法智能生成明亮以及暗黑模式下的梯度色板。 -
為了提高制作圖標(biāo)的效率，Arco 提供了一鍵拖拽使用 Arco 圖標(biāo)的 Figma 插件功能，在線顏色、線寬、尺寸調(diào)整，靈活配置，游刃有余。 -
為了降低設(shè)計師制作 Figma 變體的成本，提高設(shè)計師產(chǎn)出符合設(shè)計系統(tǒng)規(guī)范的設(shè)計稿的效率，Arco 探索了 Code to Design，提供了以組件為維度的 Figma 插件功能，設(shè)計師可以通過在插件里配置組件屬性，自動生成對應(yīng)的設(shè)計元素。同時打通了風(fēng)格配置平臺，讓設(shè)計稿可以輕松實現(xiàn) 「一鍵換膚」。 -
為了方便設(shè)計師管理圖標(biāo)，Arco 推出了 Iconbox 圖標(biāo)平臺，旨在讓設(shè)計師可以在該平臺上高效地管理自己的圖標(biāo)。并且提供了圖標(biāo)上傳的 Figma 插件功能，支持設(shè)計師在 Figma 中直接選中圖標(biāo)一鍵上傳至圖標(biāo)平臺。
優(yōu)秀案例
Arco 致力于探索更優(yōu)質(zhì)的設(shè)計體系，以解決復(fù)雜的業(yè)務(wù)以及冗余的溝通帶來的體驗問題，徹底解放開發(fā)及設(shè)計師的雙手。經(jīng)過近三年的迭代和打磨，在字節(jié)內(nèi)部，我們服務(wù)了 4000+ 項目實現(xiàn)高效高質(zhì)的產(chǎn)品搭建流程。是真正從實踐中孵化而來，也廣泛服務(wù)于內(nèi)部業(yè)務(wù)的產(chǎn)品。
火山引擎
通過 Arco 組件庫、風(fēng)格配置平臺和圖標(biāo)平臺，智能生成適合多種業(yè)務(wù)需求的個性化主題包，助力火山引擎提升各產(chǎn)品線體驗一致性，使其更好的為企業(yè)提供系統(tǒng)化全鏈路解決方案服務(wù)。目前火山引擎控制臺超過 60% 產(chǎn)品使用 Arco 組件庫進行搭建 。
頭條號
使用 Arco 靈活豐富的組件資源，今日頭條快速搭建自媒體平臺頭條號，為創(chuàng)作者提供創(chuàng)作發(fā)布、數(shù)據(jù)分析、收益分析等多場景實用功能。
ByteEffects
使用 Arco mobile 的定制組件與開發(fā)框架，BytedEffects 開發(fā)了對智能圖像創(chuàng)作能力進行展示的移動端應(yīng)用，方便為客戶提供沉浸式的功能預(yù)演和能力試用。
火山翻譯
使用 Arco 自有的圖標(biāo)及品牌資源，火山翻譯在短時間內(nèi)完成了官網(wǎng)落地頁的設(shè)計工作，多樣的視覺內(nèi)容幫助聚焦用戶關(guān)注，引流平臺提供的多語言翻譯服務(wù)。
星夜Starry
基于 Arco 組件的強交互能力，幫助星夜智能建站平臺實現(xiàn)更加靈活智能的建站能力，在活動搭建、中后臺搭建、垂直搭建等多種場景中提效。
未來展望
ArcoDesign 在字節(jié)跳動內(nèi)部還做了更多方面的探索，如可視化建站平臺、D2C 設(shè)計圖轉(zhuǎn)代碼工具、C2D 代碼轉(zhuǎn)設(shè)計圖工具、品牌庫等。上述平臺工具都會在未來陸續(xù)與大家見面，希望大家多多關(guān)注～
反饋和共建
ArcoDesign 現(xiàn)已正式開放，歡迎各位使用和體驗。Arco 非常重視每一位開發(fā)者和用戶的意見，希望大家踴躍反饋，積極共建。
官網(wǎng)：https://arco.design
Github React 組件庫：https://github.com/arco-design/arco-design
Github Vue 組件庫：https://github.com/arco-design/arco-design-vue
往期推薦
最后
歡迎加我微信，拉你進技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認真學(xué)前端，做個專業(yè)的技術(shù)人...
