編輯導語：有效地利用B端設計系統，産品設計師将可以更高效地做出更好的交互設計。那麼前段時間發布的Arco Design設計系統，和已有的阿裡Ant design系統，二者有什麼區别呢？本文作者對兩大設計系統典型頁面發表了他的看法，一起來看一下。

前兩周字節發布了自己的中後台設計系統 Arco Design，在仔細閱讀官網文檔了過後，想和大家聊聊我自己對于 Arco Design設計系統的與阿裡的Ant design的一些對比和差異分析。

ArcoDesign 是一套設計系統的簡稱，是基于字節跳動所有的中後台産品。ArcoDesign 主要服務于字節跳動旗下中後台産品的體驗設計和技術實現，主要由UED設計和開發同學共同構建及維護。

Ant Design是阿裡打磨出的一個服務于企業級産品的設計體系， 通過模塊化解決方案，降低冗餘的生産成本，讓設計者專注于更好的用戶體驗。

Ant和Arco兩者的前端框架都是基于React和Vue，設計價值觀和設計原則也有所不同。Arco Design 基于「清晰」、「一緻」、「韻律」和「開放」的設計價值觀，試圖建立務實而浪漫的工作方式。在「設計價值觀」的堅持上，Ant Design 有四點與衆不同：「自然」、「确定性」、「意義感」、「生長性」。

我的個人理解Arco Design是站在設計規範的基礎出發點考慮，希望給用戶傳遞出來的價值出發，讓用戶深刻感受到系統是「清晰」、「一緻」、「韻律」和「開放」的，而Ant Design所傳遞出來的價值觀似乎更加玄學或者說格局更高，上升到更高的思維境界，即大自然思想和社會責任。

當然這部分的内容相對比較虛，每個人側重點想法都不同，大家可以自己去理解一下這部分内容。

接下來會從工作台、表格、表單幾個典型高頻的B端界面進行分析，看看兩者的差别。

1. 工作台

1）布局

Arco的卡片列布局靈活，基于24栅格進行布局，将整個栅格區域2:2:1的比例進行分割，信息卡片的寬度根據栅格寬度進行自适應，這樣的工作台頁面既靈活也能夠滿足業務需求。

Ant的卡片列布局采用3:2比例進行布局，同樣是基于24栅格。目前主流的B端頁面都是以24栅格為基礎進行設計。3:2還是2:2:1這兩種卡片布局方式沒有絕對的優劣，主要是根據我們頁面的信息量以及行業屬性去确定。如果工作台所展示的單個信息量較多可采用少列大寬度進行布局，滿足信息展示的最優布局。

作為B端的工作台頁面，核心訴求是能夠清晰找到用戶想要的信息，想要做的内容，所以我們設計師要優先保證用戶能夠快速定位到核心的信息，快速到達要到達的功能。

2）信息展示

Arco針對同系列的模塊設計了兩種尺寸的間距，例如歡迎問候信息與下方的數據信息之間是大間距，數據信息與下方的團隊動态最近項目之間是小間距。

格式塔心理學的接近原則指出：接近的事物會被認為是同一個整體，擁有相似的功能或特征。所以在這裡設計師通過兩種間距的留白對我們視覺進行暗示，強調信息之間的關聯程度，便于區分信息層級。

Ant在卡片方面沒有為卡片間距設置兩種尺寸，從上下到左右都是一種尺寸，這樣做的好處可以讓視覺更加對齊，顯得頁面更加規整，不好的一點就是内容區域外間距與卡片之間的間距一樣寬視覺上并沒有聚焦，顯得内容區域很散。标題方面沒有進行加粗重色強調，将内容進行突出，使用戶更加聚焦于内容。

3）導航方式

兩個系統默認都采用側邊欄導航方式，側邊導航在國内的 B 端産品當中最為常見的。将菜單欄放置在左側，頁面布局上基本為左右結構，将導航菜單放置左側固定。側邊欄導航擴展性強、展示靈活、能夠快速定位，缺點是不易閱讀、閱讀沉浸感低。

Arco導航區域與内容區域都使用同類淺色，采用線的方式進行分割，整體視覺比較清爽。Ant導航區域使用了傳統的重色與内容區進行區分。

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

有一個細節，在頁面背景有一個以登錄的用戶名形成的一個背景水印，在B端的頁面中，對信息的保密程度要求很高，這裡是為了防止公司核心數據資料洩露，在截圖的時候會有水印的存在，增強了信息的保密級别，這是一個很好的設計洞察點。

2. 表格

1）表格樣式

表格作為組織整理數據的手段，可以有效地向用戶展示數據信息，是B端産品中出現最高頻的模塊之一。

用戶主要通過表格浏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多複雜操作、對比數據的差異與變化（關聯和區别）。好的表格信息展示設計，應當是能夠輔助用戶高效便捷地實現以上場景中的訴求。

Arco和Ant的表格設計樣式與市面上多數産品都類似，采用表格列無分割線條、表頭與内容左對齊、數字右對齊的方式。

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

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

2）信息展示

表格行高決定屏幕内能呈現的行數，即用戶在一屏内能獲取信息的數量，主要影響用戶縱向對比數據的效率。

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

B端産品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。産品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設置開放給用戶，建議不是完全開放給用戶去調整尺寸，而是給出一定階梯度的快速選項，例如舒适、标準、緊湊三種高度來滿足用戶需求。

Ant的表格功能很齊全，很多功能都是B端産品的痛點，例如表格可以通過調整單元格行高來調整密度，緊湊模式下可以顯示更多的數據。

3）操作路徑

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

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

在2006年時候，尼爾森諾曼發表了一篇人們如何掃描和閱讀網站習慣的分享，他們通過研究發現，用戶傾向于一種F模式去查看網站。F模式，能很好地幫我們創建好的視覺層次結構設計，因為這是人們可以輕松掃描設計一種布局，它能讓大多數用戶感到舒适，因為我們用戶一直從上到到下，從左到右閱讀。

在設計之前，我們先要去确定哪些内容最重要，明确信息的優先級，隻有清楚知道你希望用戶看到什麼，才能将它們放在用戶視線熱點中。

個人認為在表格設計的完整度和設計的合理性方面來看，阿裡的Ant系統做得比字節的Arco更好。

3. 表單

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

标簽（标題）、輸入框和按鈕。

1）表單布局

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

Ant的表單也是較為常規的布局方式，有一點差異就是文本框并沒有右對齊，這裡阿裡自己也做出了解釋：文本框是根據需要填寫的字段進行長度展示的，需要填寫内容比較長的文本框就會比較長。實際業務中，大部分 input 所需填寫内容都存在理想長度，input 的寬度應該向用戶暗示所需輸入内容的長度來減輕判斷負擔。

2）标簽對齊方式

Arco和Ant都使用了頂标簽的形式對齊。

标簽分為左标簽、右标簽、頂标簽三種，不同的對齊方式，使用場景不同。

該如何選擇呢？我們需要從3個方面進行考慮：操作效率、标簽長度、屏效、視覺對齊。

① 操作效率

根據Matteo Penzo的研究總結得到的浏覽時間表發現，标簽移動到輸入框的時間，頂部對齊最快隻要50ms，其次是右對齊240ms，左對齊耗費時間最長500ms。

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

② 标簽長度

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

③ 屏效

如果隻考慮屏效，那麼标簽左對齊右對齊均可，但是如果還考慮表單錄入效率，那麼推薦使用标簽右對齊的方式，比如蜂鳥彙報：

Arco的顔色主題配置可以說是讓人眼前一亮了，可調整的範圍非常廣非常牛逼。可以編輯的維度從基礎的顔色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近40款組件的樣式，并且都是可以進行可視化編輯與實時預覽的。

如果你用了 Arco 過後，或許不用苦苦地站在前端後面，讓他幫忙調整頁面，作為設計師自己就能夠搞定，并且每一個組件可以調整的粒度是非常之細，包含各種寬度、圖标大小、顔色、投影，等等…在這裡可以編輯自己的主題，也可以在商城社區查看到别人發布的主題，真的是很方便啊。

真的有些amazing！假如你需要去設計一套官方的設計系統，完全可以通過 Arco 進行設計和預覽、落地。

Ant并沒有做這方面的功能，顔色主題配置這一塊确實是Arco很大的亮點。

無論是Arco Design還是Ant Design設計系統，都代表了字節跳動和阿裡兩家互聯網巨頭公司在B端領域的沉澱和競争。對于B端交互設計師來說，兩個設計系統都值得我們去研究和學習，建議大家都去看看設計規範裡面的内容，對于我們認識和熟悉控件以及和開發對接都很有幫助。

本文由 @晨屹 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!