B端工作台應該如何設計？本篇文章從需求分析、信息架構、可視化圖表和視覺設計這四個方面，為我們完整解析了一個B端工作台的設計流程和方法，快來看看吧。

舉着 Case 當火把，照亮五彩斑斓的黑~

一、需求分析

在設計一個産品的時候，我們要透過現象看本質。

我們是為誰？解決什麼問題？分析的結果将直接影響到方案的好壞。這裡推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說是一種場景創造分析法。

5W1H分析法包含如下幾個方面：

• Why：為什麼要做，是原因。
• What：做什麼、做成什麼，是目标。
• Where：在哪兒做，是地點。
• When：什麼時候做，是時間。
• Who：誰來做，是執行對象。
• How：怎麼做，是方法。

通過上述分析我們可以（假設）知道：我們的用戶是技術人員、基層管理人員；做這個頁面的目的是為了讓用戶随時掌握各項工作的進展情況，快速進入需要處理的工作事項。根據結論可以得出工作台是一個導航頁面或者綜合管理頁面，它是用戶感知産品價值的重要“門面”，使用者有一定的經驗，屬于高級用戶。從設計角度來看，首頁工作台是整個系統規範與視覺風格的核心場景。

使用角色：主要是技術人員、基層管理人員。

内容主次(根據需求得出)：

• P0:各類數據指标的彙總、我的動态
• p1:總量趨勢、數據排名、操作彙總
• p2:分發彙總、待辦事項

設計要求：重點突出、簡潔、清晰。

二、信息架構

1. 優先級處理

下面這張圖是産品給的原型，也是B端面試題中經常會遇到的題目。如果你打算就按照産品給的原型直接做美化，那估計很難被選中。

做需求分析的目的之一就是為了做信息處理，這裡要提到一個詞叫“屏效”。B端産品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁面縮短。

比如：上面原型中有兩個top10排名，如果一行展示會比較擁擠，也體現不了top10排名。考慮“易讀性”我們會放兩行，但這樣又占據了屏幕空間，在與産品溝通後我們把它整合到一起，利用按鈕組切換進行查看。同時排名也是業務人員需要關注的，所以我們把它們往上放。

頂部個人信息内容比較少，也沒必要占一整行，我們把它移到右邊；各類指标因前3個是不能點擊的，為了和後面可點擊按鈕做區分，我們整合到一個卡片上；待辦事項與産品溝通後說不太重要，移動到了最下面，操作彙總模塊往上移。

到這裡模塊之間的信息優先級基本處理完成，下面就要對單個模塊進行拆解處理。

首先我們要觀察哪個是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息幹擾。

最後一個模塊原型上隻有一個标題，這真是驗證了一句話：“巧婦難為無米之炊”，所以又去找産品溝通，為什麼單個模型可以點擊查看更多？用戶在這個地方想要獲取什麼樣的數據？

經過一番溝通，拿到了一些“米”，巧婦終于可以幹活了。為了體現“易發現性”，我們在後面這個模塊上加了一個詳情按鈕。

2. 栅格化處理

其實上面的圖是我處理過的，産品的原型可不長這個樣子，模塊大小、間距都是随便給的。你如果也按照産品給的原型模塊大小做，估計研發會“罵娘”，因為這樣沒法按照比例進行換算，也就沒法做自适應。

這一步主要就是做栅格化處理，我們需要定義每個模塊的占比與間距。B端産品通常選用24栅格布局，也就是24欄 23水槽 2頁邊距。

我遇到的工作台頁面有兩種，一種是帶左側樹，一種是不帶，這兩種對應的栅格化數值不太一樣。按照目前常用的尺寸1440*900來計算：不帶左側樹我采用的是1440=2*20 43*24 16*23。

如果大家做的是帶左側樹，可以參考下圖數據。

三、可視化圖表

重點來了，我個人覺得這一節才是工作台、數據分析頁面的核心，但很多人都忽略了，覺得不就是幾個圖表，唰唰唰一下就搞定了……

上面我們提到過B端測試題給的都是原始數據（表格），需要設計師自己根據數據找合适的可視化圖形進行展示。

如果你對可視化圖表不熟悉，不知道什麼時候該用柱圖、折線圖、餅圖；不知道随時間變化該用什麼圖形；不知道體現排名的數據該用什麼圖形。那你很難輸出一份有理有據的作品。

因圖表類型太多，詳細的留到後面文章讨論，這次隻對原型中使用的到圖表進行分析。

1. 柱圖

柱狀圖是常用的數據可視化圖形之一，可用于随時間變化而産生變量的數據統計，也可用于數據類别的對比、排名。

如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應出不同時間段的情況，并通過圖形能夠快速了解 分布最多和最少的省份。

（1）優點

人眼對長短（高度）比較敏感，可以直觀體現數據差異性。

（2）缺陷

分類過多時數據的展示效果會降低。

（3）設計要點

能把圖形視覺與體驗都兼顧好，才能體現設計師的價值。設計師的能力不僅體現在技法上，更多的是體現在思考能力上。圖形擴展性設計和創新性設計都需要設計師做缜密的思考，隻有這樣才會有出彩的設計結果。

（4）信息層級

（5）視覺展示

2個人站在一起我們除了對比高度、顔值，還有會對比胖廋。那麼，柱狀體的粗細和間距如何定義呢？在圖中，中間柱狀圖的柱子間距過于疏散沒有規律；右邊圖中的柱子間距又過小，視覺上顯得擁擠，并且當分類過多時，過小的間距會導緻柱狀體之間沒有獨立性，不易閱讀。

定義柱狀體的間距可以用5分原則設計法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。如圖所示。這也是很多界面設計中常用的技法，其原理就是接近黃金比例，視覺上較為舒适。同時，在保證界面元素整體協調性的情況下，盡可能把柱子的寬度設計成N，這樣視覺上最為協調。

另外，在設計圖形前，設計師最好能了解到真實數據，這樣才能結合真實的數據來設計圖形，盡可能還原落地後的樣子。在圖中，圖形的設計和落地後的樣子存在較大的差異。問題就出在設計前設計師沒有了解數據的真實情況，前端工程師按照設計圖把X軸的數值固定了。

（6）相似圖表

• 堆積柱狀圖：堆積柱狀圖可以展示兩個或多個數據的變化，以及數據之間的綜合比較情況。
• 分組柱狀圖：分組柱狀圖可以在同一數軸上展示各個分類下的不同分組數據。
• 有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現數據的排名情況。

2. 折線圖

折線圖常用于表示一個連續時間段内數據的變化趨勢，主要功能是能夠清晰地反映出數據随時間變化的趨勢。

如圖，折線圖不僅能展示不同月份的價格趨勢，還能清晰呈現數據的峰值和低谷。折線圖也可以是多條線，用來分析多組數據随時間變化的趨勢及數據間的趨勢比較。

（1）優點

直觀反映數據變化趨勢。

（2）缺陷

無序的類别無法展示數據特點。

（3）設計要點

折線圖可以用于展示數據的趨勢變化，通過折線的起伏波動可以幫助人們探究數據背後的邏輯。但如果折線圖的設計不夠合理，在視覺上會讓人産生錯誤的認知。

在圖中，有的折線圖的刻度值設置不合理，如中間折線圖的刻度值未從0開始，導緻折線的呈現誇大；右邊折線圖的刻度值過高，趨勢變化呈現過于平緩，這些都是在不客觀地表達數據。

正确的方式應該是刻度值從0開始，随着數據的增減，刻度值也做相應的變化。

（4）視覺展示

在折線圖設計中，還需要注意折線的粗細要适中。

在圖中，其中一條折線過細，這會降低數據可視化的表現；另一條過粗，就會損失折線中的數據波動細節。在産品的圖形設計中，一般網格線和起始線都是1像素，折線一般用2像素，這樣的粗細會有較好的視覺表現。

（5）相似圖表

階梯線圖：線在數據點之間形成一系列步驟。

面積圖：與折線圖唯一不同的是，其自變量數據和坐标軸之間有顔色填充，這樣能更加突出數據的趨勢變化。

3. 餅圖

提到數據的占比，相信你第一個就會想到餅圖，主要用來展示數據分布情況。餅圖是展示占比數據最直觀的圖形，通過弧度大小來表示分類的占比多少。

但餅圖有一定的局限性，當占比數值接近或占比分類過多時，在視覺上就不容易辨别各個類别占比的大小。在數據可視化産品中，因為餅圖是大面積的色塊，視覺上會非常突顯，很容易搶走重要數據的風頭，所以使用時要酌情考慮。

（1）優點

直觀顯示各項占總體的占比，分布情況，強調整體與個體間的比較。

（2）缺陷

分類過多，則扇形越小，無法展現圖表。

（3）設計要點

每個圖形都有自己的設計規範，如當餅圖分類過多時，一般不把文字放在圖形元素上，因為一旦出現幾個相對較小的占比數據，字就很容易溢出，不容易辨别指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數據，或者加示例圖展示。

（4）視覺展示

另外，餅圖的分類最好從12點鐘的位置開始，這樣較為符合人的閱讀習慣，即從上到下、從左到右，如圖中。如果餅圖随意從不同位置開始展示，就會缺少規範，這樣當多個餅圖同時展示時容易出現混亂。

同時，在餅圖的分類中如果沒帶排序，如1月、2月……那麼占比最好能夠從大到小依次排列，這樣還能直觀地呈現出分類的排名情況。任何時候，如果有“其他”這項分類，無論其占比多少都要放在最後，因為其數據通常是最不被關注的數據。

（5）相似圖表

• 嵌套圈餅圖：用于一個指标在不同維度的占比。
• 跑道圖：看到占比的同時，可以直觀看到指标在當前維度下的排名情況。

4. 表格

表格看起來簡單，但想設計好也不是一件容易事。通常我們見到的（産品中）表格都屬于比較簡單的表格。

在BI系統中有一些複雜的表報，如果直接用組件信息會很難閱讀。我們需要對表格的視覺進行調整，讓信息獲取更高效，這就需要一些設計技巧和原則。

（1）設計要點

表格排版第一大原則：文字左對齊，數字右對齊。表格中文字需要左對齊，因為我們閱讀文字的習慣是從左到右。

而圖中（上圖）的項目名稱長短不一，居中對齊在視覺上會使切入點呈現“Z”字形，影響閱讀效率。左對齊可以使線性結構在視覺上不跳躍，閱讀流暢且更具美感。

表格中的數字需要右對齊，因為當我們在面對一個長數字時，一般會從右往左讀。比如數字¥368,568,023.00，我們一般是從個位到最後的千萬位順序識别數字體量，有的人可以通過千分符迅速判斷數字的體量，但其實也是從右到左的浏覽順序，因此數字右對齊最符合人的閱讀方式。

在圖中（下圖），讓我們感受一下數字左對齊、居中對齊、右對齊的閱讀效率，以及對各個數據體量的對比感知。

文字左對齊和數字右對齊，針對的是長短不一的名稱和大體量的數字，而對于文字數量一樣、體量較小的數字也可以嘗試用居中對齊的方式，對稱的元素本身就具有美感。如圖所示，通過對表格中的文字和數字的重新排版，相信在閱讀效率上會有較大的提高。

雖然提高了閱讀效率，但這相比優秀的表格設計還差得很遠，其中最明顯的是表格的邊框在視覺上過于突出，接下來我們繼續調整。

（2）弱化邊框

如圖（下圖）所示，通過弱化邊框在視覺上能夠突出表格的内容。表格邊框可以讓信息的呈現更有條理，能夠提高易讀性，但在視覺層級上不能高于内容信息。

（3）去掉邊框與分割線

将表格的邊框與分割線去掉，用留白分隔内容，無框勝有框，增大留白可以使表格更有空間感。這樣的設計需要注意的是，元素的間隔不能太小，不然會顯得擁擠。由于去掉邊框後有些問題會被放大，比如标題與内容沒有對比，因此需要增強對比，在整體上要有層次。

（4）強調标題

圖中的表格加強了标題，這樣看起來更有層次。強調标題的方法有很多種，不一定隻是加粗字體或加大字号，還可以給标題欄添加背景，以形成對比。

（5）突出重要信息

如果在一組數據中有重要數據和次要數據之分，那麼就需要在對重要數據的設計上着重突出，表格的設計同樣如此。圖中所示就是把重要的數據信息通過增加背景色與其他元素形成較為突出的對比，這種設計是一種為用戶做選擇的設計方法，容易讓用戶的視覺停留在他本想重點關注的地方。

（6）表格擴展設計

由于人們常常會對熟悉的事物産生審美疲勞，因此設計中有創新才容易給人眼前一亮的感覺。

下圖在背景上面給了一根橫線，來凸顯這一列的數據，這樣除了可以加強信息傳達也可以打破常規的表格樣式（這裡隻是提供一種思路）。

（7）表格字體運用

表格數字最容易出問題的是數字字體的運用，因為很多數字字體不是等距設計，比如數字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數字，就有可能會誤導觀者。

如下圖所示，本來32,118,116,00大于28,558,363,00，但由于不同數字所占寬度不一樣，這樣的設計在視覺上容易誤導用戶。因此，表格中的數字要使用表格字體，因為表格字體每個數字所占面積一緻，這樣就不會出現案例中的問題了。

其實很多表格裡面的數字字體都存在類似問題。下圖是修改數字字體後的設計，這樣就能客觀地呈現數據了。

表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。

四、視覺設計

1. 配色

• 參考631配色法。
• 對有含義的顔色要謹慎使用，例如：紅、黃、綠。

2. 圖标

常用的圖标分為兩類：

（1）工具圖标：包含一定産品功能隐喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解，常用于b端産品裡面。

如圖，裡面來自不同産品的圖标，雖然表現形式不太一樣，風格不太一樣，但都是為了體現圖标後面文字的意思。

（2）裝飾圖标：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于産品宣傳、活動等頁面。

如圖，雲計算、大數據相關的産品，語義都比較複雜，很難通過圖标去表達，既然看不懂，就抽象點。

在 B 端産品中，應用最廣泛的還是工具圖标。可能有人覺得工具類圖标太簡單了，它是看起來簡單，想做好一點都不容易。

首先要保證“一緻性”， 粗細一緻、圓角一緻、透視一緻、大小一緻，同時還要把語義用圖形表達出來。

3. 間距

一般采用8的倍數：8、16、24、32、40、48……

4. 字體

12px、14px、16px、20px、24px，可采用“回退機制”。

五、最終效果

謝謝觀看！

作者：夜莺B端UX設計；公衆号：夜莺B端UX設計

,

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

查看全部