起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端設計師必看：聊聊B端兩大設計系統典型頁面
編輯導語：有效地利用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端典型頁面分析
接下來會從工作臺、表格、表單幾個典型高頻的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的顏色主題配置可以說是讓人眼前一亮了，可調整的范圍非常廣非常牛逼?？梢跃庉嫷木S度從基礎的顏色、字體、陰影、 到組件的按鈕、導航、分類、表格 一共有接近40款組件的樣式，并且都是可以進行可視化編輯與實時預覽的。
如果你用了 Arco 過后，或許不用苦苦地站在前端后面，讓他幫忙調整頁面，作為設計師自己就能夠搞定，并且每一個組件可以調整的粒度是非常之細，包含各種寬度、圖標大小、顏色、投影，等等…在這里可以編輯自己的主題，也可以在商城社區查看到別人發布的主題，真的是很方便啊。
真的有些amazing！假如你需要去設計一套官方的設計系統，完全可以通過 Arco 進行設計和預覽、落地。
Ant并沒有做這方面的功能，顏色主題配置這一塊確實是Arco很大的亮點。
五、總結
無論是Arco Design還是Ant Design設計系統，都代表了字節跳動和阿里兩家互聯網巨頭公司在B端領域的沉淀和競爭。對于B端交互設計師來說，兩個設計系統都值得我們去研究和學習，建議大家都去看看設計規范里面的內容，對于我們認識和熟悉控件以及和開發對接都很有幫助。
本文由 @晨屹 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
很好 碼！
你別張口就來啊 你好好看看表格哪里，acrod的數字哪有右對齊。操作項也是左對齊，這對么？
挺好的，收藏了！我就喜歡這種圖片舉例解釋的文章，清晰明了，看著也不會太累
B端產品也是需要注重設計體驗的，作者的分享非常實用。follow了，期待后續更多干貨分享。
謝謝~
作者對字節Arco Design設計系統及阿里Ant design系統進行了對比分析，非常清晰易懂
謝謝~大家共同進步