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

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

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

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

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

一、關(guān)于ArcoDesign

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

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

二、ArcoDesign想解決哪些問題

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

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

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

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

1. 個(gè)性化定制能力

不同的團(tuán)隊(duì)風(fēng)格，不同的業(yè)務(wù)場(chǎng)景，對(duì)視覺風(fēng)格會(huì)有不同的需求。

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

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

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

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

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

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

一鍵切換“暗黑模式”

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

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

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

2）默認(rèn)行為定制

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 開發(fā)工具

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

3. 設(shè)計(jì)功能

• 為了方便設(shè)計(jì)師定位資源，Arco 提供了資源定位的 Figma 插件功能，讓設(shè)計(jì)師可以一鍵輕松找到目標(biāo)組件的設(shè)計(jì)資源以及開發(fā)資源。
• 為了提高設(shè)計(jì)師的配色效率，Arco 提供了色彩配置的 Figma 插件功能，可以根據(jù)指定顏色通過算法智能生成明亮以及暗黑模式下的梯度色板。
• 為了提高制作圖標(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ì)師可以通過在插件里配置組件屬性，自動(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)。

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

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

Arco Design 現(xiàn)已正式開放，歡迎使用和體驗(yà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é)議