編輯導(dǎo)語：有效地利用 B 端設(shè)計(jì)系統(tǒng)，產(chǎn)品設(shè)計(jì)師將可以更高效地做出更好的交互設(shè)計(jì)。那么前段時間發(fā)布的 Arco Design 設(shè)計(jì)系統(tǒng)，和已有的阿里 Ant Design 系統(tǒng)，二者有什么區(qū)別呢？本文作者對兩大設(shè)計(jì)系統(tǒng)典型頁面發(fā)表了他的看法，一起來看一下。

簡介

前兩周字節(jié)發(fā)布了自己的中后臺設(shè)計(jì)系統(tǒng) Arco Design，在仔細(xì)閱讀官網(wǎng)文檔了過后，想和大家聊聊我自己對于 Arco Design 設(shè)計(jì)系統(tǒng)的與阿里的 Ant design 的一些對比和差異分析。

ArcoDesign 是一套設(shè)計(jì)系統(tǒng)的簡稱，是基于字節(jié)跳動所有的中后臺產(chǎn)品。ArcoDesign 主要服務(wù)于字節(jié)跳動旗下中后臺產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)，主要由 UED 設(shè)計(jì)和開發(fā)同學(xué)共同構(gòu)建及維護(hù)。

Ant Design 是阿里打磨出的一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計(jì)體系， 通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。

總覽

Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue，設(shè)計(jì)價(jià)值觀和設(shè)計(jì)原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開放」的設(shè)計(jì)價(jià)值觀，試圖建立務(wù)實(shí)而浪漫的工作方式。在「設(shè)計(jì)價(jià)值觀」的堅(jiān)持上，Ant Design 有四點(diǎn)與眾不同：「自然」、「確定性」、「意義感」、「生長性」。

我的個人理解 Arco Design 是站在設(shè)計(jì)規(guī)范的基礎(chǔ)出發(fā)點(diǎn)考慮，希望給用戶傳遞出來的價(jià)值出發(fā)，讓用戶深刻感受到系統(tǒng)是「清晰」、「一致」、「韻律」和「開放」的，而 Ant Design 所傳遞出來的價(jià)值觀似乎更加玄學(xué)或者說格局更高，上升到更高的思維境界，即大自然思想和社會責(zé)任。

當(dāng)然這部分的內(nèi)容相對比較虛，每個人側(cè)重點(diǎn)想法都不同，大家可以自己去理解一下這部分內(nèi)容。

B 端典型頁面分析

接下來會從工作臺、表格、表單幾個典型高頻的 B 端界面進(jìn)行分析，看看兩者的差別。

1. 工作臺

1）布局

Arco 的卡片列布局靈活，基于 24 柵格進(jìn)行布局，將整個柵格區(qū)域 2:2:1 的比例進(jìn)行分割，信息卡片的寬度根據(jù)柵格寬度進(jìn)行自適應(yīng)，這樣的工作臺頁面既靈活也能夠滿足業(yè)務(wù)需求。

Ant 的卡片列布局采用 3:2 比例進(jìn)行布局，同樣是基于 24 柵格。目前主流的 B 端頁面都是以 24 柵格為基礎(chǔ)進(jìn)行設(shè)計(jì)。3:2 還是 2:2:1 這兩種卡片布局方式?jīng)]有絕對的優(yōu)劣，主要是根據(jù)我們頁面的信息量以及行業(yè)屬性去確定。如果工作臺所展示的單個信息量較多可采用少列大寬度進(jìn)行布局，滿足信息展示的最優(yōu)布局。

作為 B 端的工作臺頁面，核心訴求是能夠清晰找到用戶想要的信息，想要做的內(nèi)容，所以我們設(shè)計(jì)師要優(yōu)先保證用戶能夠快速定位到核心的信息，快速到達(dá)要到達(dá)的功能。

2）信息展示

Arco 針對同系列的模塊設(shè)計(jì)了兩種尺寸的間距，例如歡迎問候信息與下方的數(shù)據(jù)信息之間是大間距，數(shù)據(jù)信息與下方的團(tuán)隊(duì)動態(tài)最近項(xiàng)目之間是小間距。

格式塔心理學(xué)的接近原則指出：接近的事物會被認(rèn)為是同一個整體，擁有相似的功能或特征。所以在這里設(shè)計(jì)師通過兩種間距的留白對我們視覺進(jìn)行暗示，強(qiáng)調(diào)信息之間的關(guān)聯(lián)程度，便于區(qū)分信息層級。

Ant 在卡片方面沒有為卡片間距設(shè)置兩種尺寸，從上下到左右都是一種尺寸，這樣做的好處可以讓視覺更加對齊，顯得頁面更加規(guī)整，不好的一點(diǎn)就是內(nèi)容區(qū)域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦，顯得內(nèi)容區(qū)域很散。標(biāo)題方面沒有進(jìn)行加粗重色強(qiáng)調(diào)，將內(nèi)容進(jìn)行突出，使用戶更加聚焦于內(nèi)容。

3）導(dǎo)航方式

兩個系統(tǒng)默認(rèn)都采用側(cè)邊欄導(dǎo)航方式，側(cè)邊導(dǎo)航在國內(nèi)的 B 端產(chǎn)品當(dāng)中最為常見的。將菜單欄放置在左側(cè)，頁面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。側(cè)邊欄導(dǎo)航擴(kuò)展性強(qiáng)、展示靈活、能夠快速定位，缺點(diǎn)是不易閱讀、閱讀沉浸感低。

Arco 導(dǎo)航區(qū)域與內(nèi)容區(qū)域都使用同類淺色，采用線的方式進(jìn)行分割，整體視覺比較清爽。Ant 導(dǎo)航區(qū)域使用了傳統(tǒng)的重色與內(nèi)容區(qū)進(jìn)行區(qū)分。

目前的設(shè)計(jì)趨勢流行淺色導(dǎo)航，有幾個產(chǎn)品的 WEB 端進(jìn)行了一系列的大改，YouTube、Twitch、Twitter 都進(jìn)行了重新設(shè)計(jì)，他們不約而同地將塊面去除，去掉多余的的灰色，通過留白和空間將頁面拉開。這否是下一個 WEB 端所要追尋的趨勢，我還不得而知，但是對于導(dǎo)航層級多的側(cè)邊欄導(dǎo)航，我仍然建議使用深色背景區(qū)分導(dǎo)航欄。

有一個細(xì)節(jié)，在頁面背景有一個以登錄的用戶名形成的一個背景水印，在 B 端的頁面中，對信息的保密程度要求很高，這里是為了防止公司核心數(shù)據(jù)資料泄露，在截圖的時候會有水印的存在，增強(qiáng)了信息的保密級別，這是一個很好的設(shè)計(jì)洞察點(diǎn)。

2. 表格

1）表格樣式

表格作為組織整理數(shù)據(jù)的手段，可以有效地向用戶展示數(shù)據(jù)信息，是 B 端產(chǎn)品中出現(xiàn)最高頻的模塊之一。

用戶主要通過表格瀏覽獲取信息、對數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷地實(shí)現(xiàn)以上場景中的訴求。

Arco 和 Ant 的表格設(shè)計(jì)樣式與市面上多數(shù)產(chǎn)品都類似，采用表格列無分割線條、表頭與內(nèi)容左對齊、數(shù)字右對齊的方式。

合格的表格設(shè)計(jì)要定義合理的表格行高，在具體設(shè)定表格行高時，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。

文字行高可以設(shè)定為字號的 1.2~1.8 倍，文字與分割線間距離可以設(shè)定為字號的 1~1.5 倍。

2）信息展示

表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。

在 B 端用戶使用場景中，數(shù)據(jù)量極大的表格的展示問題是體驗(yàn)優(yōu)劣的關(guān)鍵因素。對于 1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數(shù)的感知不強(qiáng)，但對于 1366×768、1280*720 等這類小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對比的效率就會有所降低。在設(shè)計(jì)前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對性的設(shè)置行高。

B 端產(chǎn)品的特點(diǎn)之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現(xiàn)密度的訴求經(jīng)常是有所差異的。產(chǎn)品為了讓不同用戶都能獲得較好的體驗(yàn)，可以考慮把表格疏密度的設(shè)置開放給用戶，建議不是完全開放給用戶去調(diào)整尺寸，而是給出一定階梯度的快速選項(xiàng)，例如舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿足用戶需求。

Ant 的表格功能很齊全，很多功能都是 B 端產(chǎn)品的痛點(diǎn)，例如表格可以通過調(diào)整單元格行高來調(diào)整密度，緊湊模式下可以顯示更多的數(shù)據(jù)。

3）操作路徑

作為一個查詢表格，我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置，而將明顯的左上角放一個添加按鈕，如果存在多個查詢條件是不是要從右往左放置呢？這里我不是很理解，大家也可以說一下自己的想法，相互探討一下。

Ant 的表格使用路徑符合 F 型視覺動線布局，在 B 端的市場中這種表格的設(shè)計(jì)方式已經(jīng)符合用戶的操作習(xí)慣了。

在 2006 年時候，尼爾森諾曼發(fā)表了一篇人們?nèi)绾螔呙韬烷喿x網(wǎng)站習(xí)慣的分享，他們通過研究發(fā)現(xiàn)，用戶傾向于一種 F 模式去查看網(wǎng)站。F 模式，能很好地幫我們創(chuàng)建好的視覺層次結(jié)構(gòu)設(shè)計(jì)，因?yàn)檫@是人們可以輕松掃描設(shè)計(jì)一種布局，它能讓大多數(shù)用戶感到舒適，因?yàn)槲覀冇脩粢恢睆纳系较?，從左到右閱讀。

在設(shè)計(jì)之前，我們先要去確定哪些內(nèi)容最重要，明確信息的優(yōu)先級，只有清楚知道你希望用戶看到什么，才能將它們放在用戶視線熱點(diǎn)中。

個人認(rèn)為在表格設(shè)計(jì)的完整度和設(shè)計(jì)的合理性方面來看，阿里的 Ant 系統(tǒng)做得比字節(jié)的 Arco 更好。

3. 表單

表單在界面中主要負(fù)責(zé)數(shù)據(jù)采集的功能，任何一個表單都可以被拆解成三個最基本要素：

標(biāo)簽（標(biāo)題）、輸入框和按鈕。

1）表單布局

Arco 的表單屬于復(fù)雜表單，當(dāng)表單條目數(shù)在 7 個以上，可歸類到復(fù)雜表單，這時候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的分組方式，進(jìn)行歸納簡化，降低表單填寫負(fù)荷。采用 3 列布局，便簽與文本框上下左對齊，這樣的對齊方式有利于用戶瀏覽的效率、對齊的美觀以及國際化拓展頁面的對齊問題。

Ant 的表單也是較為常規(guī)的布局方式，有一點(diǎn)差異就是文本框并沒有右對齊，這里阿里自己也做出了解釋：文本框是根據(jù)需要填寫的字段進(jìn)行長度展示的，需要填寫內(nèi)容比較長的文本框就會比較長。實(shí)際業(yè)務(wù)中，大部分 input 所需填寫內(nèi)容都存在理想長度，input 的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負(fù)擔(dān)。

2）標(biāo)簽對齊方式

Arco 和 Ant 都使用了頂標(biāo)簽的形式對齊。

標(biāo)簽分為左標(biāo)簽、右標(biāo)簽、頂標(biāo)簽三種，不同的對齊方式，使用場景不同。

該如何選擇呢？我們需要從 3 個方面進(jìn)行考慮：操作效率、標(biāo)簽長度、屏效、視覺對齊。

① 操作效率

根據(jù) Matteo Penzo 的研究總結(jié)得到的瀏覽時間表發(fā)現(xiàn)，標(biāo)簽移動到輸入框的時間，頂部對齊最快只要 50ms，其次是右對齊 240ms，左對齊耗費(fèi)時間最長 500ms。

因此當(dāng)以操作效率為主時，推薦使用頂對齊的方式。

② 標(biāo)簽長度

當(dāng)標(biāo)簽長度超過 8 個字，或者需要考慮中英文雙版本時，推薦使用頂對齊的方式，其容納的標(biāo)簽文字更多，拓展性更好，比如 Ones 的建任務(wù)的標(biāo)簽，就采用標(biāo)簽頂對齊的方式：

③ 屏效

如果只考慮屏效，那么標(biāo)簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那么推薦使用標(biāo)簽右對齊的方式，比如蜂鳥匯報(bào)：

顏色主題配置

Arco 的顏色主題配置可以說是讓人眼前一亮了，可調(diào)整的范圍非常廣非常牛逼。可以編輯的維度從基礎(chǔ)的顏色、字體、陰影、 到組件的按鈕、導(dǎo)航、分類、表格 一共有接近 40 款組件的樣式，并且都是可以進(jìn)行可視化編輯與實(shí)時預(yù)覽的。

如果你用了 Arco 過后，或許不用苦苦地站在前端后面，讓他幫忙調(diào)整頁面，作為設(shè)計(jì)師自己就能夠搞定，并且每一個組件可以調(diào)整的粒度是非常之細(xì)，包含各種寬度、圖標(biāo)大小、顏色、投影，等等…在這里可以編輯自己的主題，也可以在商城社區(qū)查看到別人發(fā)布的主題，真的是很方便啊。

真的有些 amazing！假如你需要去設(shè)計(jì)一套官方的設(shè)計(jì)系統(tǒng)，完全可以通過 Arco 進(jìn)行設(shè)計(jì)和預(yù)覽、落地。

Ant 并沒有做這方面的功能，顏色主題配置這一塊確實(shí)是 Arco 很大的亮點(diǎn)。

總結(jié)

無論是 Arco Design 還是 Ant Design 設(shè)計(jì)系統(tǒng)，都代表了字節(jié)跳動和阿里兩家互聯(lián)網(wǎng)巨頭公司在 B 端領(lǐng)域的沉淀和競爭。對于 B 端交互設(shè)計(jì)師來說，兩個設(shè)計(jì)系統(tǒng)都值得我們?nèi)パ芯亢蛯W(xué)習(xí)，建議大家都去看看設(shè)計(jì)規(guī)范里面的內(nèi)容，對于我們認(rèn)識和熟悉控件以及和開發(fā)對接都很有幫助。

文章來源：優(yōu)設(shè) 作者：哄哄
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)