大廠技術(shù)  高級前端  Node進階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

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 的原子組件?；谪S富的原子組件，Arco 提供了除風格配置平臺、物料平臺的定制化工具外還包括圖標平臺、品牌庫、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)體系的各項能力。

科學的暗黑模式

Arco 支持一鍵開啟暗黑模式，無縫切換，流暢體驗。

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

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

開箱即用的體驗

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

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

極致的個性化定制能力

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

底層組件

底層組件上，Arco 提供了細致的 樣式定制 和 默認行為定制 。

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

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

上層平臺

在底層能力的加持下，Arco 的上層平臺再次將定制能力無限放大。

Arco 提供了樣式可視化編輯的 「風格配置平臺」 。基于風格配置平臺 所見即所得 的組件配置能力，用戶可以對全局樣式和組件樣式做細粒度的調(diào)整，實現(xiàn) 「  Arco  Design   to Any Design」 。在配置完成之后，用戶可一鍵發(fā)布主題到主題市場，提供優(yōu)秀的主題風格給社區(qū)。在主題市場上，用戶可以瀏覽所有主題，自由地進行選用。

沉浸式文檔體驗

在 Arco 組件文檔上，用戶可以一鍵安裝風格配置平臺上的所有主題，快捷地將個人主題應(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)平臺

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

開發(fā)工具

• Webpack 插件：幫助開發(fā)者在 Webpack 構(gòu)建中方便地使用主題、實現(xiàn)按需加載、替換組件內(nèi)置圖標。
• 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ù)指定顏色通過算法智能生成明亮以及暗黑模式下的梯度色板。
• 為了提高制作圖標的效率，Arco 提供了一鍵拖拽使用 Arco 圖標的 Figma 插件功能，在線顏色、線寬、尺寸調(diào)整，靈活配置，游刃有余。
• 為了降低設(shè)計師制作 Figma 變體的成本，提高設(shè)計師產(chǎn)出符合設(shè)計系統(tǒng)規(guī)范的設(shè)計稿的效率，Arco 探索了 Code to Design，提供了以組件為維度的 Figma 插件功能，設(shè)計師可以通過在插件里配置組件屬性，自動生成對應(yīng)的設(shè)計元素。同時打通了風格配置平臺，讓設(shè)計稿可以輕松實現(xiàn) 「一鍵換膚」。
• 為了方便設(shè)計師管理圖標，Arco 推出了 Iconbox 圖標平臺，旨在讓設(shè)計師可以在該平臺上高效地管理自己的圖標。并且提供了圖標上傳的 Figma 插件功能，支持設(shè)計師在 Figma 中直接選中圖標一鍵上傳至圖標平臺。

優(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 組件庫、風格配置平臺和圖標平臺，智能生成適合多種業(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 自有的圖標及品牌資源，火山翻譯在短時間內(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