在剛結束的2021稀土開發者大會上，頭條和抖音的母公司字節跳動開源了ArcoDesign / SemiDesign 兩款 UI 組件庫，本文主要介紹 ArcoDesign。
關於 ArcoDesign
ArcoDesign 基於字節跳動公司內部的 Byte Design 升級而來，在打磨了近 3 年之后，通過字節內部大量業務沉淀和驗證，在前兩天由掘金舉辦的《稀土開發者大會2021》上開源了，這不僅僅是一款 UI 組件庫，而是一個能力全面的企業級產品設計系統。
arco-design 官網
ArcoDesign 主要解決在打造中后台應用時，讓產品設計和開發無縫連接，提高質量和效率。目前 ArcoDesign 主要服務於字節跳動旗下中后台產品的體驗設計和技術實現，主要由 UED 設計和開發同學共同構建及維護。
ArcoDesign 的亮點
- 提供系統且全面的設計規范和資源，覆蓋產品設計、UI 設計以及后期開發
- React 和 Vue 同步支持。同時提供了 React 和 Vue 兩套 UI 組件庫。Vue 組件庫基於 Vue 3.0 開發
- 支持一鍵開啟暗黑模式，無縫切換
- 提供了最佳實踐 Arco Pro，整理了常見的頁面場景，幫助用戶快速初始化項目和使用頁面模板，從 0 到 1 搭建中后台應用
上手體驗和使用建議
ArcoDesign 官方介紹和文檔寫得很磅礴，內容超多，格局很大，容易讓人眼花繚亂，對於一個設計系統或者是一套 UI 組件庫，每個人的看法不一樣，下面我提取一些我比較在意的點。
UI 設計觀感
ArcoDesign 提供的這套組件設計風格很時尚新潮，配色鮮明，細節處理優雅，細微的交互動效讓人很舒服，不需要投入太多的設計工作就可以搭建一個品質很高的應用。當然對於設計能力強的團隊，ArcoDesign 也提供了很多快速且精准的樣式定制工具。
arco-design 組件
如果你是一個 UI 設計師，官方詳盡的設計指南不僅是一個參考手冊，還是一部高水平的 UI 設計教程，非常值得去細啃。相比去看軟件使用技巧、圖標按鈕制作教程，很多 UI 設計師更需要的是理念和設計水平的提高。
設計指南
設計資源方面，ArcoDesign 自帶一套圖標庫，但數量不是很多，目前正常使用很大概率會缺圖標。同時也提供了 Figma / Sketch / Axure 文件格式的設計源文檔來方便設計師和產品經理取用。
前端開發
ArcoDesign UI 組件庫的使用文檔很詳盡，上手簡單，代碼例子充足，使用體驗和 AntDesign 、Element UI 類似。
arco-design 設計/開發資源
基於 ArcoDesign 這套組件庫，官方提供了中后台的最佳實踐 Arco Design Pro，技術棧為 React / ES2015+ / TypeScript / bizcharts / Arco Design，估計是新上線，文檔也比較簡單，有興趣可以深入研究。
從底層組件到上層平台，Arco 提供了極致的定制能力。比如樣式方面，ArcoDesign 從設計之初就通過細致的拆分，將影響組件視覺的樣式都抽離為上千個獨立的 token 變量，並基於這些變量完成了從全局樣式到組件樣式的全面配置。這樣對開發帶來的好處是，二次開發省事，復用方便，大大提高了效率。
官網還有很多特性的說明，作為一個介紹文章沒法展開篇幅說明，總的來說，ArcoDesign 是一個可用性很強的中后台應用設計系統，但就是橫空出世，要做的事情太多了，借用知乎果木的話：
鋪得太開，要做的事情太多，從 Design System、組件庫（甚至還要適配不同框架）、主題配置系統、組件上層物料、工程構建……真心太多了，長期投入一定跟不上，希望能更聚焦點，把單點能力做深做好。
開源真心不易，值得尊重。但面向社會的開源產品和面向內部是不一樣的，需要投入大量的精力，目前我們看到了 ArcoDesign 的優秀和可用性，衷心希望 ArcoDesign 不要淪落為大廠秀肌肉的 kpi 項目。
免費開源說明
ArcoDesign 是由字節跳動開源的產品設計系統，其中 UI 組件庫源碼基於 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費使用。