編輯導(dǎo)語：產(chǎn)品設(shè)計這一環(huán)節(jié)至關(guān)重要，它關(guān)乎到最終的用戶使用體驗。此時，若能降低設(shè)計和開發(fā)之間的溝通損耗，提升二者的協(xié)作效率，將可以有效保障產(chǎn)品落地后的用戶體驗。那么，不妨來看看文章里介紹的企業(yè)級設(shè)計系統(tǒng)——ArcoDesign。

在圣經(jīng)的故事里，傳說曾經(jīng)全人類都講同一種語言，并計劃建造一座通天的巴別塔。為了阻止巴別塔的建成，上帝打亂了人類的語言。由于在建造過程中無法溝通交流，巴別塔的建造狀況百出，最后不了了之。

一款互聯(lián)網(wǎng)產(chǎn)品的誕生，往往要經(jīng)過需求分析、產(chǎn)品分析、產(chǎn)品規(guī)劃、產(chǎn)品設(shè)計和產(chǎn)品落地五個階段，需要產(chǎn)品經(jīng)理、UI、前端、后端之間的密切協(xié)作。其中，產(chǎn)品設(shè)計直接關(guān)乎到產(chǎn)品落地的形態(tài)和最終的用戶體驗，如何消除協(xié)作中面臨的溝通信息損耗，讓設(shè)計和開發(fā)的協(xié)作更加容易和高效，一套統(tǒng)一的“語言”或?qū)⑵鸬绞卤豆Π氲淖饔谩?/p>

近日，一款名為ArcoDesign的企業(yè)級設(shè)計系統(tǒng)，在由稀土掘金技術(shù)社區(qū)主辦的首屆稀土開發(fā)者大會上全新開源。設(shè)計系統(tǒng)是一種思維，也被視作設(shè)計師與前端開發(fā)溝通的一種語言。據(jù)ArcoDesign的開發(fā)者、來自字節(jié)跳動GIP UED和前端架構(gòu)技術(shù)團隊介紹，讓設(shè)計和開發(fā)無縫協(xié)作，專注用戶體驗的提升，是ArcoDesign要重點解決的問題之一。

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

一、關(guān)于ArcoDesign

在正式推出并開源之前，ArcoDesign 曾經(jīng)以技術(shù)中臺的形式在字節(jié)跳動內(nèi)部運行了三年，已經(jīng)支持了字節(jié)內(nèi)部超過 4000 個項目，是字節(jié)內(nèi)部使用規(guī)模最大的設(shè)計系統(tǒng)。

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

二、ArcoDesign想解決哪些問題

在過去的 3 年里，字節(jié)跳動內(nèi)部中后臺產(chǎn)品業(yè)務(wù)量的迅速增長對傳統(tǒng)的設(shè)計與開發(fā)方式提出了很大的挑戰(zhàn)。隨著項目變大，模塊和頁面變多，視覺風(fēng)格和交互越來越難以統(tǒng)一。

同一個業(yè)務(wù)平臺下，不同模塊的視覺風(fēng)格和前端開發(fā)框架都可能大相徑庭，這對于用戶體驗和平臺的一致性造成了巨大的困擾。

ArcoDesign的初衷就是想從源頭上去解決平臺的差異性和一致性問題，又快又好地提升各個平臺的設(shè)計質(zhì)量。

具體來看，ArcoDesign在個性化定制能力、二次開發(fā)+復(fù)用能力、設(shè)計+開發(fā)更好地協(xié)作方面有所突破。

1. 個性化定制能力

不同的團隊風(fēng)格，不同的業(yè)務(wù)場景，對視覺風(fēng)格會有不同的需求。

以往，不論有沒有設(shè)計參與，整體的技術(shù)選型都是比較自由的，有的團隊選擇 React ，有的選擇 Vue；有的組件庫是面性設(shè)計，有的組件庫是線性設(shè)計。當(dāng)設(shè)計給出設(shè)計圖，開發(fā)需要在項目里進行各式各樣的樣式魔改。

在項目變多之后，為了更小成本的維護和代碼重用，一般會基于所選組件庫封裝一個新的組件庫，這個二次開發(fā)的組件庫對組件的風(fēng)格樣式和默認行為進行魔改，魔改需要開發(fā)花費大量的時間成本，但基本是唯一的解決方案。

然而，只要涉及到魔改，就不可避免地會遇到升級問題。只要升級底層組件庫，就有可能導(dǎo)致樣式甚至功能出現(xiàn)出現(xiàn)不可預(yù)知的改變，為了求穩(wěn)，就需要鎖版本，鎖了版本又沒辦法享受版本升級帶來的新特性和 bug 修復(fù)，陷入一個惡性循環(huán)的怪圈。

魔改容易造成的惡性循環(huán)

為了解決樣式定制難這個痛點，Arco 從設(shè)計之初就對組件進行了細致的拆分。

組件是設(shè)計系統(tǒng)提供的最底層能力。Arco 提供了 67 個基礎(chǔ)組件，這些基礎(chǔ)組件足以支撐絕大多數(shù)的業(yè)務(wù)需求。

一鍵切換“暗黑模式”

1）風(fēng)格樣式定制

ArcoDesign將影響組件視覺的樣式都抽離到了 token 之中，token 是最小化描述組件樣式的變量，組件庫中是以 less 變量的形式存在。從全局變量到組件級變量，用 token 來解釋組件，用上千個 token 變量，來保證通過配置變量，就能對樣式風(fēng)格進行任意定制。

比如現(xiàn)在越來越多的網(wǎng)站會考慮支持暗色風(fēng)格切換，“暗黑模式”會讓使用者更加專注自己的操作任務(wù)，同時在夜間或暗光環(huán)境使用下可以減少屏幕光對眼睛的刺激，避免在黑暗環(huán)境中長時間注視高亮光源帶來的視覺刺激。ArcoDesign支持一鍵開啟暗黑模式，無縫切換，流暢體驗。

2）默認行為定制

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

值得注意的是，除了上述能力，ArcoDesign還有助于簡化傳統(tǒng)項目上線前反復(fù)驗收的繁瑣流程。

傳統(tǒng)的情況是，當(dāng)設(shè)計確定設(shè)計稿，開發(fā)通過上述提到的樣式定制和默認行為定制去定制符合設(shè)計規(guī)范的基礎(chǔ)組件，在上線之前需要反復(fù)地跟 UI 進行樣式還原驗收，同時從設(shè)計稿到研發(fā)再到 UI 走查驗收。

Arco 提供了樣式可視化編輯的「風(fēng)格配置平臺」。基于風(fēng)格配置平臺所見即所得的組件配置能力，用戶可以對全局樣式和組件樣式做細粒度的調(diào)整，實現(xiàn)「ArcoDesign to Any Design」，大幅提升流程效率。

在配置完成之后，用戶可一鍵發(fā)布主題到主題市場，提供優(yōu)秀的主題風(fēng)格給社區(qū)。在主題市場上，用戶可以瀏覽所有主題，自由地進行選用。

依托系統(tǒng)的 ArcoDesign 設(shè)計規(guī)范，即便是無設(shè)計師參與的平臺產(chǎn)品，ArcoDesign也可以幫助開發(fā)者快速構(gòu)建專業(yè)、一致的體驗。

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

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

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

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

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

1. 生態(tài)平臺

• 風(fēng)格配置平臺：通過協(xié)助用戶構(gòu)建個性化主題，幫助用戶更好地管理不同風(fēng)格的主題配置，提高設(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 色彩算法。

2. 開發(fā)工具

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

3. 設(shè)計功能

• 為了方便設(shè)計師定位資源，Arco 提供了資源定位的 Figma 插件功能，讓設(shè)計師可以一鍵輕松找到目標組件的設(shè)計資源以及開發(fā)資源。
• 為了提高設(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è)計元素。同時打通了風(fēng)格配置平臺，讓設(shè)計稿可以輕松實現(xiàn) 「一鍵換膚」
• 為了方便設(shè)計師管理圖標，Arco 推出了Iconbox 圖標平臺，旨在讓設(shè)計師可以在該平臺上高效地管理自己的圖標。并且提供了圖標上傳的 Figma 插件功能，支持設(shè)計師在 Figma 中直接選中圖標一鍵上傳至圖標平臺。

經(jīng)過了近三年的迭代和眾多產(chǎn)品的驗證，Arco Design已經(jīng)成為字節(jié)跳動內(nèi)部使用量最大的設(shè)計系統(tǒng)，助力眾多字節(jié)優(yōu)秀產(chǎn)品打造高質(zhì)量的產(chǎn)品體驗。未來，可視化建站平臺、D2C 設(shè)計圖轉(zhuǎn)代碼工具、C2D 代碼轉(zhuǎn)設(shè)計圖工具、品牌庫等功能將陸續(xù)上線并開放。

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

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

Github React 組件庫：https://github.com/arco-design/arco-design

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

本文由 @Cindy 投稿發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議