比對出行時長

每天，世界上有40億人在城市中穿行，這個不斷增長變化的群體占據了世界人口的一半還多。了解人們如何出行以及出行的演變對于改善我們的城市、環境和數十億人的生活至關重要。我們創建了 Uber Movement，來幫助大家增進理解。

視頻地址：https://youtu.be/bszvEIMVsIc （需翻墻）

目前，Uber已在全球700多個城市提供服務，所有出行數據不僅能幫助我們提高服務質量，也有可能幫助到城市規劃師，以及那些渴望提高城市建設水平的人。Uber Movement允許用戶以多種方式查看數據：用戶可以查看某個日期某次出行的平均耗時，也可以查看某個區域不同日期范圍內的平均耗時，或者可以對比同一個區域不同的兩個行程的耗時。

圖1：從華盛頓市中心出發到各地所需的出行時長

圖1中的截圖展現了從華盛頓市中心到達城市其他區域的平均耗時（在2016年3月16日鐵路運輸因維修而暫停服務）。截圖a中顯示了晚高峰的耗時情況，截圖b顯示了兩周前鐵路運輸未中止的耗時情況，截圖c則比對了兩個時段下的數據，指示出鐵路服務暫停對路面交通帶來的嚴重影響。如圖示，在上述情況下，晚高峰時段從1400 K St NE區到1500 Kearny St NE區的平均出行時間增加了67.8％。

對于需考慮在哪里新增公交線路的公共交通機構，以及那些判別什么時候主干道需要進行道路養護的城市機構，都能夠通過這些數據了解到什么時候減少車道會對交通的影響最小，應向駕駛者提供哪些替代路線。

眼見為實

為了讓這些數據有價值，必須讓它們有使用價值。這就需要數據可視化的加持了。作為負責 Uber Movement 的產品設計師，我需要確保我們分享的數據是盡可能清晰易懂的。

我們遇到了一個有趣的問題：如何展示兩個不同卻又有關聯的可視化元素?！笗r長熱力圖」展現了在一個特定的日期（例如，2016年1月11日星期一下午）下，從任一起始點到某個位置的耗時（以分鐘為單位）；也可以是一個跨度長達幾個月（例如，2016年3月至5月的工作日早晨）的平均耗時。這個熱力圖使用了相鄰色，基于相同的顏色來調整色調由亮至暗（如下圖1所示，淺藍色至深藍色）。

「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度，哪一個時段下的耗時更少，少多少？對于該熱力圖，我們使用了對比色（如圖2）來表現數據由0至兩極（快與慢）。如果差值為零，則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。

我們的用戶會在這兩種熱力圖中連續反復切換，所以我們需要將這兩種模式從視覺上明確區分出來。

圖2：早期設計的5階色（左側單位為絕對耗時，右側單位為相對耗時比）

在早期的設計中（如圖2），5階相鄰色（由淡綠色至藍色）被用來表現路程的絕對耗時，而5階對比色（由綠至淡黃再到紅色）則用來表現兩種條件的對比。

初期嘗試使用五個顏色梯度，但在可用性測試中發現地圖的色彩辨識度低（見下圖3）。主要有以下幾個問題：

• 我們通過顏色表現由A點至B點的路程耗時，每一個目的地區域根據時間被賦予5階范圍中的一個顏色，并有20%的透明度，疊加在地圖上。這樣的設計呈現出由中心至外圍的漸變效果，區塊之間對比度較低，使它們看起來糊在一塊，讓色彩背后的數據以及地圖上的標簽都不那么易讀。
• 結果就是，5階色彩沒有足夠的對比度將中心至邊緣的區塊區分開來。
• 另外，5階色彩不足以滿足不同城市，不同時間段耗時的有效展示。

顯而易見，可用性測試的參與者難以從地圖判斷出耗時，特別是當地圖縮放聚焦在市中心時，也難以區分兩種模式（耗時熱力圖/對比熱力圖），見圖3。

圖3：西雅圖的出現時長

圖3，以早期的設計效果（5階相鄰色）查看從西雅圖市中心至其他區域的平均耗時，截圖a 展現了西雅圖所有區域的耗費時長，顏色讓區塊看起來“糊在一塊兒”。截圖b則展現了縮放聚焦至市中心區域時的效果，難以區分不同區域。

設計探索

通過多步的探索實驗，我將這個復雜的設計難題拆解為幾個不同的小挑戰，并驗證不同的方案，最終獲得一個色彩系統達到易讀性最理想的熱圖效果。

1.通過相鄰色和對比色兩個樣本有效區分耗時熱力圖和對比熱力圖

由于同時應用相鄰色與對比色，所用的配色就必須是“四色系”配色方案以明確區分。（譯注：tetradic color 的翻譯可能不合適，根據定義，其為一種大膽的配色方案，四種顏色對立均等地分布在色輪的四個方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作為相鄰色的基準色，然后使用 Paletton.com 列舉了幾組“四色系”配色方案，將四種顏色分配為兩對互補組合。

圖4：為實驗準備的色階方案

2.根據時長間隔等比或是梯度增加色組的色彩階層數

早期設計從5階色彩范圍開始（如圖2、3），兩種模式的熱圖都產生了一種“糊在一塊兒”的漸變效果。我們希望這個系統可以滿足不同體量的城市，從市中心到外圍區域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現0至1.5小時，顯然不足以讓用戶有效辯識地圖上的時間跨度。

我實驗性地將色彩范圍的階層從5增加到9，11，13。時間間隔分別以等比增加與梯度增加羅列（梯度增加以30分鐘為總時長）。

表1：5、9、11、13色階方案（左側為等距增加，右側為非等距增加）

之所以選擇了梯度增加，是因為根據我們與城市規劃者的溝通，了解到他們是基于「交通分析區（TAZ）」這種交通規劃模型來進行分析的，它將每個區域以人口密度劃分。城市區域的人口密度相比郊區會高很多?；谑袇^人口密度高，在市區對交通狀況進行定義時，以每5分鐘為間隔相比在郊區更有效。

顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續性（見圖5）。圖中左側（方案1）使用了單色系，右側（方案2）則通過不同色調的顏色組合增加色組內的對比度。

圖5：用于實驗的2個色階（左側為淡色系，右側為多色系）

3.嘗試通過提升對比度去除掉區間的漸變效果

我將不同的顏色方案放到測試環境中去看看實際效果。為了去除漸變效果，在不受時間值和透明度影響的情況下，使用了彩色比例尺上的離散色值（見圖6右側的效果）。這樣處在相同色彩尺度區間的區域看起來合并了，能夠很好地辨別出區域之間耗時的異同。

圖6：采用離散色值消除漸變色。（從左側變為右側）

早期的配色方案是基于「耗時」調整的色值，并且使用了20%的透明度，由此顯示出一種「漸變效果」，導致鄰近區域過于相近，用戶難以根據顏色判斷數值差異。新的配色方案則取消了以上兩點，這使得相同時間的區域合并，清晰的色帶使其更易讀。

我還開發了個程序用來計算鄰近色組的對比度（見下方表2），方案2配色中的9階色彩范圍表現出最佳的平均對比度，其次是11階?？紤]到平均路程耗費時長在不同城市會有較大的差異，方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比，新方案的對比度提高了30%。

從上面的圖表可以看到，方案2配色有更高的對比度。其中，顏色階次越少，對比度也越高。

4.在測試環境中對比顏色方案

基于以上的結果，我將方案1（單色系）排除了。我們將方案2放到測試環境中查看了兩種間隔取色策略的效果。（譯注：這里的兩種策略指的是上面圖表1呈現的兩種取色方案。一種是例如每10分鐘遞進一個色階，等分；另一種則是會變化，例如前30分鐘每5分鐘遞進一個色階，超過30分鐘則每10分鐘遞進一個色階。）

表2：鄰近色組的對比度計算

下圖7展示了波士頓城整體區域的熱圖效果，讓我們再看看聚焦到市中心的效果如何。

圖7：波士頓城整體區域的熱圖效果

圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。

圖8：「變化時間間隔取色」后的效果

5.對配色色階進行微調

在這一系列的實驗之后，才明確了這個方案（方案2中的11階色彩）屬最佳效果。能夠很好地滿足視圖中大跨度時間差的呈現。不論是城市的整體縱覽或是聚焦在市中心區域，都能提供最佳的對比度。

我們的內部團隊對實驗進行了評審和測試，并最終敲定了色彩范圍（見圖表1），結果將在近期發布。

隨著越來越多的用戶在 Uber Movement 中探索他們的城市，我們也在不斷的學習與迭代，讓數據更有效地為大家所用。

因效用而美

數據可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時，創作物的美學不是附屬品，而是一種內在價值。美感不只是粉飾。當數據可視化被合理地創造時，它因效用而美。

我們以一種微小的方式，通過不斷試錯與探索，試圖讓人們以一種全新的視角看看這個世界。它是有效的，也即是美的。

文章來源：UXRen    作者：Dawei Huang

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

在B端產品中，數據主要通過表格的形式展現。本文是我從實際工作出發，結合項目和過去經驗對于復雜業務類的表格設計的一次總結。

1、表格的介紹

1.1表格的定義

表格（Table），又稱為表，是用來收集、整理、組織、分析數據的二維矩陣。它既是一種可視化交流模式，又是一種組織整理數據的手段。

1.2表格的構成元素

通常表格的組成元素以及相關元素會有多個部分，筆者根據自己設計表格的工作經驗將表格概括為容器、篩選區、功能性按鈕、表頭、表體以及底欄等六個部分，其各個部分包含的相關元素如圖所示。

容器：包含表格的所有內容。

篩選區：包括搜索和條件篩選。方便用戶快速查詢定位數據，一般位于表格上方。

功能性按鈕：比如常見的[新增]按鈕和各種批量操作按鈕。

表頭：說明數據的內容，可以包含篩選、排序等功能。

表體：包含行和列數據，按列可以分為多選列、數據列、操作列。（多選列=多選框；數據列=呈現業務展現需要的信息；操作列=針對單行數據的操作按鈕，比如管理、編輯信息等。）

底欄：包含數據量、單頁條目、總條目、分頁等，底欄數據也可以放置在表格頂部。

1.3表格的樣式

1）幾種常見的風格樣式

a.網格型：表格有均勻而明顯的分割線，邊框單元格比較明顯。

b.水平線型：僅顯示水平線可減少整個網格的視覺噪聲。

c.斑馬條紋型：隔行交替使用不同底色來區分數據。

d.自由形式：移除所有分割線，通過盡可能減少視覺噪聲來創建極簡外觀。

2）關于樣式的選取技巧

網格型：對于數據之間的關系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關系的。

水平線型：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度。因此對于所有數據集大小，此樣式都是最常見的。

斑馬條紋型：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法。對于較大的數據集，建議使用此樣式，在較大的數據集中，交替模式將很清晰，并且不會引起特定行突出顯示的混亂。

自由形式：對于小型數據集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。

信息內容的有效傳達是表格設計的本質，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上。所以，邊框的顏色應非常淡，不能妨礙快速瀏覽。

2、表格的設計技巧

表格是為可讀性而生的，一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此，設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。

下面我將以公司財務中臺的表格改版為例，逐步說明表格中每個結構的設計。

這是改版前后樣式對比圖：

2.1篩選區設計

篩選區可以看作表格的導航，由搜索和篩選這兩部分組成。一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位。搜索更多的是對單一或者包含某個字段的的數據來進行定位；篩選則是用來查詢一類數據。

根據MECE分析法，篩選區可以有以下的表現形式：

• 常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選項，篩選少可以展示出來；

• 搜索和篩選都常用，可以將搜索和篩選都展示出來；

• 常用篩選少用搜索，篩選和搜索同時展示；

• 篩選和搜索都不常用，展示搜索隱藏篩選。

1）搜索

在樣式上，搜索可以分為簡單搜索、標簽搜索、高級搜索等三類。

• 簡單搜索：由一個搜索框和一個按鈕組成。可以輸入一個或多個條件進行搜索。

• 標簽搜索：在簡單搜索的基礎上加上標簽，即先選標簽，在輸入搜索內容。

• 高級搜索：即點擊更多展開其他搜索條件，減少了更多條件對用戶的干擾，但降低了易發現性。

  
  

2）篩選

根據篩選的位置，可以分為標簽篩選、表頭篩選兩類。

3）案例小講堂

對于數據集較大的B端系統來說，往往篩選條件比較多，都將其展示出來會導致空間占比過大，影響了用戶對表格信息的獲取。下面以我公司的財務中臺為例，講講如何優化篩選區，希望對大家有所啟示。

3.2.3 版本中篩選區樣式

篩選條件全部展開，目的是讓用戶對信息進行快速的查詢、過濾，以快速準確完成目標任務。但業務復雜，數據集過多少，篩選條件也相應增加（空間占比大），看起來非常冗余，不利于快速定位目標。為了平衡掃描、查詢、過濾、分析等這些操作，復雜業務的表格區篩選需要進行一定的優化處理，這樣才能滿足滿足業務需求同時，又符合用戶心智模型。

方案A  整齊劃一

整合篩選項，采用表頭篩選+標簽篩選的樣式，縮減篩選區的頁面空間占比。

討論結果：雖然這個方案使篩選區的空間占比縮小，整體頁面也看似整潔不少。但表頭篩選在復雜的業務系統中存在幾個弊端：

a.數據集往往很龐大，表格不能展示所有字段，往往采用列固定的形式來呈現數據的完整性。以財務中臺為例，高頻篩選功能已被遮擋（如上圖），篩選前需先對表格進行橫向滾動，無端增加操作；

b.應無法展示全部字段，用戶無法清晰的感知到篩選了哪些內容，增加認知學習成本；

c.表頭中的屬性并不是都可以進行篩選，用戶不可感知哪些可以篩選，需要滑動表格檢索。

方案B 強調主次關系

采用展開式的標簽篩選樣式，對不常用的篩選項做隱藏處理。但因業務場景的復雜度，高頻篩選功能還是很多，沒有解決本質的問題，如下圖：

方案C 分狀態展示（逐漸呈現）

在方案B的基礎上進行了優化。提煉與流程相關的狀態，按步驟顯示，每一步只顯示當前需要關注的內容，如圖：

狀態的提煉過程

1）整理每個單據的狀態，理清關系

結合業務流程可以很明顯的注意到，單據只有通過了審核才能收款，只有收款才能進行核銷。狀態是一種遞進關系（審核 ?? 收款 ?? 核銷）。

2）結合財務人員的工作流，提煉出單據的以下幾種狀態，之前存在到問題（表格中單行數據的操作不一致），也得到了完美的解決。如圖：

2.2功能區按鈕設計

1）按鈕的表現形式

建議在復雜系統設計中使用圓角矩形的按鈕樣式。

理由如下：

a.人眼處理圓角更容易（認知負荷說）

Jürg N?nni（Visual Perception的作者）表示，視網膜中區處理正圓形的時候是最快速的，而處理邊邊角角的時候則比較費力，大腦處理的速度也較慢。于是，長得圓潤的圓角矩形相較于一般矩形，對于使用者來說就容易接納許多。

Barrow Neurological Institute （巴羅神經病學研究）的研究也顯示，一個物體的顯著度與邊角的角度呈線性變化，銳角相較于鈍角要顯得更明顯突出。換句話說，角度越尖銳，物體就看起來越明亮；而越明亮的物體就越難以直視。

如上圖所示角度越尖銳，看起來越顯眼，在視覺上也比較令人感到明亮，不適，大腦的認知符合也越高。

b.使相似的內容更容易被區別

舉個例子，如下圖所示，即便間距相同，B 排的圓角矩形辨識度還是明顯比A 排的矩形高。

這是為什么呢？

首先，第一眼看過去的時候，A 排的矩形整體是連在一起的，中間找不到斷點。而B 排矩形，因為有圓角的關系，所以斷點很明顯。

其次，兩種矩形的視覺聚焦：A 排由于直角的關系，視覺聚焦向外推，整體的效果比較發散。這會使得第一眼看過去的時候，容易分不清楚哪一條邊框屬于哪一塊矩形。反之B 排因為圓角收攏的關系，視覺聚焦向中心推，區塊就比較容易區別開來。

綜上所示，圓角矩形是非常有效率的容器，在復雜場景業務中（存在很多種功能型按鈕），按鈕采用圓角矩形樣式最提效。

這里要注意，圓角不是越大越好

在相同面積中，按鈕的可操作區域隨著圓角的增大而遞減，因此在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。

同時在實際業務中，按鈕常常被當作原子與下拉框聯動組成下拉菜單控件。如若使用半圓按鈕則無疑增加了下拉框的設計難度并且匹配起來也會略顯突兀。

2）批量操作按鈕的位置思考

來看個舉個例子（針對財務中臺批量操作的優化方案）

現存問題

方案A  信息前置

批量操作按鈕全部展開不做折疊處理，信息前置來降低認知成本，方便用戶記憶。

討論結果：對于復雜業務來說，會有很多批量操作功能，按鈕很多，造成頁面擁擠，進而影響用戶操作體驗；一個位置出現2個主按鈕樣式，不推薦。

方案B 沉浸式操作體驗

對于一開始不可用的批量操作按鈕進行隱藏，勾選激活狀態，顯示在篩選區。

討論結果：方案B的阻斷性強 — 無法兼顧批量操作和數據篩選功能，無法滿足復雜系統的場景操作。

方案C 上內容下操作，前2個方案的優化 

不做隱藏，類灰布置于底部。勾選觸發操作條件，未做勾選時，用戶點擊時給出引導操作提示

為什么選擇方案C？理由如下：

首先，根據古騰堡原則，用戶的在做表格操作的時候，視覺流是左做到右，從上到下，方案A和方案B的視覺落腳點在表格的上方，顯然是不符合眼動規律的。

其次，批量操作的功能屬于財務中臺的核心功能點，隱藏不是第一選擇，而是類置灰的特除處理（在按鈕旁給提示信息）

2.3表頭設計

表頭在能夠概括的情況下，盡量簡練、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。如果精簡后的生僻字段難以自我解釋，可以跟一個釋義標識，鼠標懸停時出現該字段的詳細解釋，同時滿足新手用戶、普通用戶以及專家用戶的需求。

2.4表體設計

1)數據對齊方式

在數據的對齊方式上，有以下3個建議：

a.文本左對齊

b.數字右對齊

c.表頭與信息內容對齊方式一致

文本左對齊，符合正常的心智模型（閱讀習慣從左到右）；表頭與內容對齊一致，則是為了簡化和降低視覺噪音，以便更好的獲取數據信息。數字右對齊，有利于數據間的對比。

要注意的一個細節，例如，當列數＝2的時候，由于列與列直接的間距過大，導致兩者的關聯性較弱，如圖：

這時又該如何處理？

為了增強列與列之間的相關性，當鼠標hover在行的時候，產生高亮。這種方式可能不是最優的，但目前只能想到這種方法，如果讀者有更好的想法歡迎留言。

2)數字的字體選擇

建議選用：Helvetica Neue、Helvetica、Arial、sans-serif.

蘋方在數字字符上，不同數字寬度不一致，導致千位分隔符不在一條線上。而Helvetica Neue數字等寬，千位分隔符有序的排列在一條線上。所以，選擇Helvetica Neue作為數字字體的首選字體。數值上下對比的時候，相同位置的數字在同一條豎線上，更加容易對比。

3)對操作項進行“解耦”處理

在財務中臺系統中，常常由于權限的不同或者單據狀態不同這兩種原因，使得每行的數據擁有不同的操作項，如下圖所示：

存在的問題：

• 當信息過載，操作項這個list非常長的話，頁面將會非常擁擠；

• 文字按鈕因為視覺特征比較明顯，造成了不必要的分散注意力；

• 誤操作率相對較高，同樣因為表格空間有限，當操作區非常靠近，很容易一不小心就點錯了。

針對這個問題所出的解決方案，如下：

方案A 下拉框樣式

討論結果：下拉框中可能存在不同操作，同樣避免不了誤操作這個問題。

方案B 錯位顯示

討論結果：首先，這樣的設計浪費大量的屏幕空間；其次，浪費開發工作量！因為在列表中實現一系列權限判斷和操作，在詳情界面中往往還需要再開發一次相同的權限判斷和操作；再次，不同單據可能存在操作順序不一樣，上下移動鼠標會存在不同操作，用戶代價非常高。

方案C  以不變應萬變

回歸『一個界面一個用戶任務』的原則，列表中的單行數據只保留[查看]或[管理]操作，所有其它的單獨操作都去往該單據的詳情界面完成。

討論結果：從開發的角度上看，此方案界面高度解耦，功能迭代方便，節約開發工作量；從認知成本上看，列表界面操作高度一致性，利于養成用戶習慣；從操作效率上看，在詳情頁用戶會明顯確認目標單據，幾乎不會誤操作； 同時此方案節約了大量屏幕空間，更有利于用戶對信息的獲取；

4)關于表格中套表格的解決方案

場景：在財務中臺中，有這樣一種用戶，需要對表格內的數據進行對比并編輯。

來看看之前的頁面：

這樣處理的不足點：

• 1.在查看和編輯信息時，無效的信息太多。降低了獲取信息的效率；

• 2.切換單條數據時，頁面出現跳動，無法快速檢索到相對應的信息；

對此，在3.3.2版本中，我們對其做了相應的優化。運用側視圖（快速視圖）的方式來呈現信息。一旦選擇一個單據，它就會從側面彈出的。

這個方案，它可以保持上下文，易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。同時信息呈現的地方是固定的，利于檢索，查找。

5)行高的制定方法

開始之前首先明確一下開發是怎么實現行高的。

從上圖可以看出，開發在實現設計稿時，通常是按照行高來寫的。

因此，表格行高=文字行高+上下間距。其中，文字行高可以設定為字號的1.2~1.8倍，上下間距可以設定為字號的1~1.5倍。

行高影響每行信息的易讀性。除了上述的做法外，還有以下2種做法，來保證各場景下獲取信息的效率與易讀性。

做法1：不同分辨率使用不同行高

設計兩套不同的行高，在大分辨率下顯示較高的行高，給數據間提供更多呼吸的空間；在小分辨率下顯示較小的行高，使一屏內可以看到更多的行高。Gmail就是這樣設計的，如下圖所示：

做法2：自定義行高

自定義行高為興奮需求，可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設計設置行高的形式，可以放置在設置按鈕里，也可以在外部按鈕較少的情況下展示出來。

2.5底欄設計

最后是表格的底欄，底欄也是不可缺少的一部分，承載的作用主要是告訴用戶數據條數以及當前位置。分頁的設計是根據不同的場景進行選擇最優的設計方案。在不需要定點跳轉的場景，建議建議刪除跳頁，刪除多于的功能，使頁面簡潔、清爽。

3、其他設計細節

3.1 空白單元格的處理

表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。

3.2減少圖形元素的使用

盡量減少視覺符號的使用，因為視覺符號可能會使你的用戶界面復雜，產生難以理解的內容。去除不必要的視覺干擾，例如不必要的圖標、無規律的色彩等。

3.3省略 （氣泡展示位置）

當列表中數據過長時，我們需要根據屏幕寬度調整列表展示方式，超過列表默認寬度的內容可以省略，通常用...表示，鼠標移入后出現氣泡展示全部內容。

位置：建議展示在上方，因為我們的閱讀順序是從上到下，鼠標向下移動時不會被上面的氣泡遮擋住。氣泡面積不宜過大，根據屏幕尺寸控制在一定比例，一版不超過內容區的四分之一，展示不下的內容可以在氣泡中增加滾動條。

4、后記

感謝閱讀！本文結合了實際項目經驗對表格設計做了一次總結，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。如果你還有什么好的想法和建議，可以在評論里留言討論。

文章來源：站酷     作者：Hi_Nick 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

作為公民，我們在用我們擅長的設計去服務社會，在這個過程中形成自己的積淀。這是不可用金錢來衡量的價值。

作者：藍藍

  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

蘋果WWDC 2020在6月23日通過線上形式召開，本次開發者大會沒有發布太多硬件產品。不過macOS的新版本macOS big Sur依舊引來了大波關注，坦誠的講這次版本更新屬實是很震驚，這可能是近10年蘋果第二次顛覆性的改變，上次還是2013年的iOS 7開始全面扁平化，從而引發了設計圈「扁平擬物大戰」。

從系統連續性上看AirPods可以在不同設備上無縫切換，不同設備直接可以復制粘貼等等，顯而易見的一件事是，蘋果啟動了macOS的「 iOS化」，所以回歸到設計上，這次的升級對設計語言上的影響概括來說有以下幾個方面：

• 全局設計調整（iOS/iPad化）
• 擬物設計風格再次復蘇了么？
• 降低視覺復雜性-布局結構的簡化處理
• 重塑feedback設計
• 信息提取效率進一步優化

全局設計調整

逐步 iOS 化的 macOS

不知道大家有沒有這種感覺：以前從諾基亞（或Android手機）切換到iPhone，動機是cool～，漂亮的外觀讓人第一面就愛上了，恨不得馬上就拿起來把玩?，F在給你個選擇切換回Android手機，不管那款手機有多漂亮多美好看，心里第一句話很有可能是：「XXX手機很棒，但我已經離不開蘋果的生態了哦！」（我就是這種德行，嘗試了N次還是回來了哈哈哈哈哈。）

這大概就是蘋果在系統打通的層面下的功夫，更加注重生態的維護，在不同的設備間尋找更多場景產生更多聯系。從設計的層面來看，iOS化的macOS對iPhone用戶更加友好，有相同的操作習慣，不必在mac和iOS上來回的切換。其實在Material Design推行的過程中就有相似的做法，Chrome的全面MD化，讓整個設計語言貫穿在移動設備和個人電腦中。

1. 完全繼承iOS基因的控制中心/通知中心和dock

全新的control center，可以看的出繼承了iOS/iPad OS的語言，UI和交互幾乎是沒有任何變化，整合系統一致性的初衷是甚好，在當下這個情況，不得不說亮度和聲音的調節我更依賴于物理鍵盤（或touchBar），不太清楚硬整合在一起的理由（難不成是過度解讀了，也許人家就想繼承繼承）。

從蘋果對產品的終局目標來看，也許會在硬件上取消物理控制按鍵或者更加優化 touchBar 去操控必要的屬性（也有傳聞說這是在為觸控版本的 macOS 做準備）。

同樣iOS化的通知中心（講真，用戶實際的桌面未必這么干凈，真是擔心本身在電腦側使用頻率就不是那么高的通知中心被混亂的文件夾淹沒）

2. 進一步強調的沉浸式氛圍

全局設計中最令我欣喜的是menu Bar的更進一步的優化！我在sketch里模擬了下效果（非嚴謹模擬哦），大概得出的結論是加高了背景模糊值，減少了本身的填充透明度，達到了現在的效果。

感官上來看的話是一個微小的改動，但從層級整合的角度這是蘋果設計的一大提升，通過光影等自然世界的隱喻抽象設計來減少硬性層級劃分，也符合Alan Dye（蘋果用戶界面設計副總裁）提出的「深度，陰影和半透明性用于創建層次結構」。

擬物設計風格再次復蘇？

除了壁紙以外，圖標是最引人矚目的變化啦！iOS化的圖標規格的約束不用多說了，還有就是「新擬態」的第一次亮相。新擬態出現一定意義上是對這個時代獲取信息時枯燥感的厭煩與反抗，舉個例子：就像當你日復一日的穿基本款T恤的時候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。

△ 左圖為新擬態，右圖為MD

icon的設計植入了新的設計理念，更突出去表現現實環境下的真實狀態，注重光影和厚度的變化，尤其是光影。細看每一個icon，嚴格遵循同一個光源（正頂光）去設計。

但話說回來，很難講這套icon是否成功，有幾個明顯的弊端也暴露出來了：

1. 可用性與美感的平衡

新擬態更重注光感的細膩程度，但對信息的有效呈現打了一定的折扣，這塊蘋果權衡決策下放棄了些許的美感，增強了有效的信息傳遞。

△ 圖片來源dribbble

2. 統一性

對一個生態來講，最最理想的是每一個生活在內的成員要和諧的相處，新的擬態風格相比扁平時代的圖標顯然給第三方開發者增加了難度，這種難度極有可能對沒有太多設計資源但又想好好開發應用的創業團隊造成一定的打擊（換句話說催生了設計外包的工作也不錯哈哈哈哈哈）。

總的來說，優勢和弊端同時存在吧，啥事都沒有完美的不是么～下圖是這次改版里我相對還比較喜歡的幾組icon了。

降低視覺復雜性

布局結構的簡化處理

從官方的HIG介紹中，sidebar被重點提到了。透過去看，其實是布局的底層邏輯發生了變化，10.15的時候上下兩段左右分欄的方式會存在一定的誤區：全局action控制當前試圖的交互？？？

從層級關系上也可以勉勉強強講得通，但實在是太牽強了，特別是前進后退按鈕存在所有文件之上這個蜜汁布局居然維持了這么久。層級清晰的梳理后帶來的一大優勢就是視覺的復雜性被降低了，借助現在這種列表視圖，很大程度上前進后退都用不到了。

另外要提及的是設計師可以思考的問題，下一代模糊效果-漸進模糊。這種模擬現實生活的真實模糊包括陰影/反光/相互透出，同時要考慮光源/角度/環境等等，不再單純的只是黑色/透明度（有興趣的話可以在sketch里模擬下或者留言討論討論～）。

重塑feedback設計

人腦是需要一個提示來識別物體，我們稱之為反饋設計，這是人機交互中非常重要的一個環節，這也是為什么許多按鈕仍帶有陰影的原因。但是，這版本的macOS工具欄圖標丟失了形狀以消除視覺復雜性，所以重塑后的反饋會鼓勵用戶去操作。

對于設計師來講，不要害怕不強調所有選項，并非每個按鈕都需要具有形狀。只要設計足夠的反饋一樣可以起到被點擊的效果，例如當用戶將鼠標懸停在其表面上時，可能會出現更多的色彩更有趣的動畫，并盡可能消除視覺上的復雜性。

信息提取效率進一步優化

這次升級除了設計上的優化外，safari的變化也足夠令人欣喜，可以快速通過 tab 知道當前網頁的內容的功能真是令人欣喜（雖然我記得之前Yandex瀏覽器就是這么做的哈哈哈哈）。

可以預知時間地點的apple map：

悄悄的說，感覺蘋果越來越像騰訊了，有些小微企業的創新功能一受用戶喜歡不是買過來就是抄過來，有一種壟斷的感覺，想想悲催的Alfred和workflow都是這種命運。

總結

macOS big Sur 的升級可以說是蘋果對未來的進一步探索，站在設計師的角度，有幾個值得學習的點：

• 具備完成的設計語言的概念植入執行當中，不管是對真實生活的隱喻（光影）還是高度抽煉（材料設計），要時刻具備宏觀視角，不以一兩個頁面論英雄哈～
• UI/UX的本質是對信息的規劃編排，一定要保證用戶的提取效率。

• 預期與反饋是極重要的一環，包括我在內通常在做設計的時候只沉浸于界面當中，忽視了界面里的互動設計。

文章來源：優設    作者：Nana的設計錦囊

什么是B端產品？

B 端產品也叫 2B（to Business）產品，使用對象一般為企業客戶或組織。B 端產品幫助企業或組織通過協同辦公，解決某類管理問題，承擔著為企業或組織提升效率、降低成本、控制風險從而提高企業收入，減少企業內部損耗的重要職責。B 端產品的工作是合理實現企業需求，提高產品核心競爭力，并提升市場價值。在國內互聯網語境中，B 端產品的狹義解釋也基本可以和面向企業的 「網頁程序」 等同，用更接地氣的稱呼可以叫「管理平臺」、「管理端」 。

B 端產品大致分為兩類，一種是支撐前臺產品的，一種是管理各種資源的，前者就是我們熟悉的后臺產品，后者就是給各個企業服務，提高各個企業工作效率的 B 端產品。

1. 支撐前臺產品的：

C 端產品線的后臺產品，比如我們常用的淘寶、微信、餓了么、美團這種 C 端產品，他都需要有個后臺進行各種前端信息的管理。

平臺級工具產品，比如微信公眾號、頭條號等對用戶和文章的數據實時統計，可編輯文章，回復消息等

2. 管理各種資源的:

• OA 辦公系統（OA 系統是通過程序的形式使辦公流程自動化的解決方案）
• CRM 系統 （CRM 是企業專門用來管理客戶的工具）
• SaaS 系統（SAAS 通常它指第三方提供給企業的線上軟件服務，它既可以包含前面幾種服務類型，也可以是一些更細化的需求。）
• ERP 系統（ERP 是對企業所擁有、調動的資源進行統一管理的平臺）
• WMS 系統（WMS 是倉庫管理系統的縮寫，通過入庫業務、出庫業務、倉庫調撥、庫存調撥和虛倉管理等功能，綜合批次管理、物料對應、庫存盤點、質檢管理、虛倉管理和即時庫存管理等功能綜合運用的管理系統）
• TMS 系統（TMS 是運輸管理系統能夠對物流公司的所有車輛進行實時跟蹤（結合 GPS 系統），保持信息流和物流的暢通。）
• 呼叫中心客服系統
• FMS 財務管理系統

B端和C端的區別

1. 從定義上：

• B 端：To B 就是 To business，面向企業或者特定用戶群體的企業級別產品；
• C 端：To C 就是 To customer，產品面向普通大眾消費者。

2. 從用戶群體上：

• B 端：產品一般是多種角色，有決策者、管理者和執行者，B 端往往是基于公司層面多人對某一問題解決方案進行整體評估。
• C 端：用戶群體較單一，或者是專注于某一領域群體，可根據性別，職業或行為偏好等關鍵屬性進行分類。

3. 業務場景

• B 端：業務場景多、邏輯復雜，根據每個人角色需要有不同的解決方案
• C 端：業務場景較單一，或者專注于某個垂直的使用場景。

4. 用戶的訴求：

• B 端：控制成本、提率，注重安全和穩定
• C 端：重視人性和用戶體驗

5. 盈利模式：

• B 端：有明確的盈利模式和用戶群體。
• C 端：大部份 C 端產品都是使用免費，以此吸引用戶使用，等積累到一定數量需要探索變現的路徑，或者尋找其他變現的路徑。

B端產品該如何設計？

了解了 B 端和 C 端的區別，B 端產品的實用性大于美觀性，能切實解決問題、配置資源的 B 端產品才是一個好的 B 端產品。在設計上對于操作和展示內容無關的元素，越少越好。很多人剛開始接觸 B 端，會熱衷于以 C 端視覺標準進行設計，對于真實的使用體驗來說顯得過于冗余、炫技。那么在 B 端設計中該如何思考去設計呢？下面我以設計前、中、后的三個方向去闡述我在做 B 端設計中的一些思考：

1. 設計前：

需求分析

• 分析產品的背景是什么，要做什么，要給用戶怎樣的視覺感受？他的競品狀況是怎樣的進行一些分析（一般 b 端的產品競品是極少的），了解一些行業內的資料。
• 目標用戶群有哪些？不同角色的用戶有哪些具體的權限？（這里簡要了解下大概的人群，沒必要像 c 端產品那種那么明確）
• 設計的產品主要解決用戶或者業務上的哪些具體痛點，復現分析下使用場景，在需求分析階段，要對產品本身和行業本身有一些基本的認知。

使用場景、硬件情況

• 了解用戶的使用場景，可以有助于我們復現分析用戶是如何使用我們設計的界面的。
• 用戶的硬件情況，了解主流用戶的屏幕分辨率是多少，根據主流分辨率做設計稿?，F在 PC 主流的分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。這里也不是必需，如果用戶全部都是用小屏筆記本辦公，在 1920 設計稿上做適配可能小屏幕上展示會出現滾動條，會比較擁擠。

梳理交互流程：拿到需求后切勿打開花瓣站酷一陣擼，一定要對需求進行梳理（有的公司有專門的交互設計來做）做 B 端產品最重要的是對業務的理解，在梳理過程中一定要跟產品隨時溝通，產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？充分理解了業務再去做設計就會有事半功倍的效果。

情緒版，定義風格：梳理完需求就可以定義設計風格了，在設計風格上盡量做到簡潔，B 端產品實用性大于美觀性，減少不必要的裝飾元素給用戶操作上帶來干擾。這里可以運用情緒版去定義設計風格，大概的流程就是，根據產品業務背景定義設計關鍵詞、根據關鍵詞去找參考圖片定義設計風格，產品的主題色也可以根據情緒版來去定義。

2. 設計中：

布局上根據導航可分為以下三種：

水平導航布局：類似于普通網頁的布局樣式導航，順應了從上至下的正常瀏覽 順序，方便瀏覽信息；頂部寬度限制了導航的數量和文本長度。適用于導航較少，頁面篇幅較長的產品。

垂直導航布局：可將導航欄固定在左側，提高導航可見性，方便頁面之間切換；頂部可放置常用工具，如搜索條、幫助按鈕、通知按鈕等。菜單欄還可以展開收起，適用于結構簡單的產品。

混合導航布局：結合了水平導航和垂直導航的特點，層級可以擴展到二、三級菜單，且能夠更加清晰地區分常用業務功能操作和輔助操作。適用于功能模塊較多、較復雜的工具類型后臺。

不同形態的布局，適配方式也不同。在做設計之前了解下適配的原理，避免在不同設備上出現視覺上的誤差。水平導航布局，在適配方案中做法是對兩邊留白區域進行最小值的定義，當留白區域到達限定值之后再對中間的主內容區域進行動態縮放。如圖：

垂直導航布局和混合型導航布局，在適配方案中常見的做法是將左邊的導航欄固定，對右邊的工作區域進行動態縮放。如圖：

最后說一下布局上的柵格，柵格會使整體頁面更加工整簡潔，內容區域采用 24 柵格（并非固定數值，參照案例 24 柵格布局），就不一一敘述柵格的定義與運用了，大家可以參考下網上有好多關于柵格的文章，如圖：

顏色

顏色上大致分為品牌色（可以結合業務屬性）、功能色（比如紅黃綠藍燈成功、出錯、失敗、提醒、鏈接等。功能色的選取需要遵循用戶對色彩的基本認知）、 中性色（如深灰中灰淺灰，文字部分應用居多，此外背景、邊框、分割線、等場景中也非常常見） 其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。

字體

在 B 端系統中優先使用系統默認的界面字體，常用中文字體有微軟雅黑、蘋方、思源黑體，英文字體有 Arial、Helvetica 系統不同展示的字體也不相同。

字體大小常見的有 12px、13px、14px、16px、20px、24px、30px 等。

規范

一份好的規范能夠讓設計和開發更加的工作，并且能夠指引一些設計的細節，通過對大小、顏色、邊距等、呼吸感等一些細節點的標注，可以讓新加入的設計師快速上手設計。一個項目會有多個設計師的參與，規范化的設計語言，避免因設計控件混亂而影響設計輸出。好的設計規范還能統一在產品中不同頁面的相同板塊的樣式問題，為開發組件庫奠定基礎。

如何建立一份規范呢？大概總結以下幾點：

• 首先是要梳理產品中不同板塊所出現的場景進程收集（收集產品所有出現過的場景進行整理）
• 其次是把收集完的板塊歸納分類（不同的樣式、狀態等可以分成不同的種類）
• 最后就可以定義規范了。

定義好設計規范能大大提高設計師的工作效率，在同一個項目中也能更好的把控項目的視覺規范，幫助設計師復用及設計延展。

組件

B 端產品的決策方是老板和管理層，在設計 B 端產品中往往也是大多數情況下會有接到比較緊急的需求的情況，所以在設計過程中就需要我們設計師更加去注重效率，提高產能。做東西時要有組件化思維，去總結分析頁面模塊中的一些共性，跟開發共同完成產品的組件庫。

如果沒有前端工程師，我們的設計組件庫就是 PNG。所以，在開工前，一定要和那個技術不錯的前端工程師聊聊做設計組件庫的事情，其中最重要的是確定好：選擇什么樣的前端框架。

如果組件庫服務的是 B 端或者中后臺系統，那其實有很多可參考的開源組件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技術不一樣，兼容的瀏覽器版本也不一樣，這要根據你們技術情況做選擇。如果覺得開源框架的風格和你們的產品不統一，那就需要二次設計和開發封裝。

下面是螞蟻金服組件庫，如圖根據組件的功能特點做出了分類：通用、布局、導航、數據錄入、數據展示、反饋、其他等。大家可以去官網查看，這里就不再一一做闡述了。

這個是餓了么的組件庫：

推薦幾個官方組件庫：

• 餓了么官方組件庫：https://element.eleme.cn/#/zh-CN/component/installation
• 螞蟻金服官方組件庫：https://ant.design/docs/spec/introduce-cn
• layui 官方組件庫：https://www.layui.com/admin/std/dist/views/
• 阿里官方組件庫：https://fusion.design/component/doc/102
• iviewui官方組件庫：https://www.iviewui.com/components/menu

做之前大家一定要去多去查看這些大廠做的已成型的開源組件庫，然后再結合工作業務特色做出自己公司特有的定制化組件庫。有了組件庫之后，再接到緊急需求，我們就可以做到事半功倍的效果。先去分析頁面的構成，然后花費 80% 的時間去設計需求中 20% 的頁面，剩下的通用型頁面就可以直接用組件庫堆出來了。

3. 設計后：

設計走查

在完成設計后，要整體對設計頁面進行走查。從信息層級、文字、圖標、圖片等方面進行多次設計驗證與測試。

高質量設計交付

設計稿命名一定要清晰規范，現在好多切圖標注的插件，一鍵生成切圖標注?，F在就沒有必要單獨整理切圖標注了，但是設計稿在交付前切圖的命名一定要在設計稿里整理清楚，規范命名方便開發查閱。

推薦幾款比較常用的切圖標注的插件：

• 藍湖：https://lanhuapp.com/mac
• pxcook像素大廚：https://www.fancynode.com.cn/pxcook
• Sketch Measure：https://oursketch.com/plugin/sketch-measure

設計追蹤、校驗

設計稿給到開發在設計過程中，要隨時跟開發溝通。項目上線后要對線上效果進行實時 UI 校驗，保證開發同學對設計稿的高度還原。還有就是對設計上線后的驗證工作，用戶使用和反饋是優化產品的重要途徑，針對性地在一些主流的頁面模塊按鈕進行一些數據的埋點，統計下用戶的點擊狀況，實時對數據進行一些跟進，為下次頁面改版優化，提供有力的數據支撐，提升產品的用戶體驗。

總結

不管 B 端還是 C 端，設計的價值在于通過視覺表現的方式去助力公司、助力產品實現用戶的需求、幫助用戶解決問題。B 端產品相對而言，場景、功能、業務流程、信息架構要比 C 端更復雜，面對的異常情況也比較多，所以 B 端在設計風格上盡量做到簡潔，B 端產品實用性大于美觀性，在每一個功能的設計都需要你去思考很多方面：用戶易用、信息層級、未來擴展，你都要做出取舍，而對于每個模塊都需要你思考、結合用戶場景。所以想要做好 B 端設計，一定要去了解業務，了解用戶需求。

文章來源：優設    作者：小六可視化設計

導航菜單對于用戶的使用來說尤為重要，本文是我從實際工作出發，結合自身產品和過去經驗對于導航進行的一次全面總結。

在任意一個 B 端后臺系統中，導航菜單都是不可或缺的一部分，每個導航菜單都有其固定位置，通常這個位置是不可撼動的。所以說：導航菜單是 B 端產品層級重要的交互控件。

對于 B 端產品的用戶而言，他們使用導航菜單的目的性很強。

到后臺主要是對具體功能進行操作，導航菜單在功能的引導中發揮了巨大作用。因此，其主要的功能就是對 B 端產品進行分發、引導；幫助用戶在復雜的后臺頁面中，尋找出自己真正想要的功能。

合理規劃

1. 遵循7±2原則

導航菜單建議最多不要超過 9 個，最少不要低于 5 個。

原則解釋：1956 年喬治米勒對短時記憶能力進行的定量研究，他發現人類頭腦最好的狀態能記憶含有 7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。

在生活中我們經常會把一長串的數字分成 7 個左右的數組來記憶，這樣會使難度降低很多，米勒稱這種單位為「組塊」。

是不是通過分組記憶以后，自己能記住的更多？這就是 7±2 原則的分組。

通過上面 7±2 原則描述我們明確到：在導航菜單當中，超過 9 個會給用戶查找時帶來困難，低于 5 個說明導航菜單的分發效率不夠。

有人會說，在實際業務中，不會有那么理想，如果需要超過 9 個時，應該怎么辦？

超過 9 個時，一定要對菜單進行分組，因為導航過多，用戶尋找會十分迷茫，通過分組的方式，能夠對菜單進行再次分類，提高查找效率。

舉個例子：

比如在微盟、有贊、小鵝通的導航設計當中，微盟、小鵝通有很大不足，我們來一一拆解。

• 小鵝通：共有 14 個導航菜單， 且菜單之間形式不同，表現也會有所差異， 也因此對于用戶而言使用起來會產生很強的疑惑感。
• 微盟：一共有 11 個一級菜單，不符合 7±2 原則，同時也能夠感受到在視覺層面上，微盟的導航菜單沒有分組，難以尋找和記憶。
• 有贊：雖然在導航的數量上也是有 9 個以上，但是它對菜單進行分組，有效提高了用戶查找時的效率，因此在設計上更加合理。

2. 導航菜單不能隱藏超過兩級

導航菜單隱藏超過兩級時，代表著產品在用戶的使用規劃中，沒有深入思考整個用戶體驗

導航菜單層級越多，用戶體驗就會越差，你會發現一些擁有三級導航的菜單，都會通過設計優化來實現隱藏導航的合并，從而減少用戶操作負擔。

比如有贊就是一個典型例子，在有贊零售的導航菜單中其實是有三個層級，但是通過交互層面的優化，將二、三級菜單直接展示出來，形成一個整體，提升了用戶體驗避免用戶層層尋找。

同時在交互上，采用懸停+點擊結合的形式，用戶既可以通過懸停鼠標進行快捷操作。同時又可以通過點擊，確定跳轉查看該一級導航下的菜單，能夠提高用戶的操作效率。

3. 鼠標懸停還是鼠標點擊

作為導航來說，其操作本身并不多，但是設計上，點擊與懸停（hover）之間，還是存在很大差距。

這里想要說明這兩個操作本身而言，并沒有對與錯，但是適用場景的不同，導致在設計屬性上存在著較大差異。

鼠標懸停操作

鼠標在懸停時觸發的操作時間太短暫，會給用戶帶來很強烈的挫敗感，同時在懸停選擇下一級菜單時，鼠標移動懸停也同樣會造成這樣的結果。因此在設計時，對鼠標懸停時的操作要格外留意。通常在懸停操作當中，只適用于只有一個菜單層級的菜單選項，這樣用戶在操作時更加方便。

鼠標點擊操作

鼠標點擊操作多發生于多級導航進行操作，同時鼠標點擊的形式，會給用戶正向的反饋，用戶點擊后明確知道菜單欄不會隱藏，因此在兩個操作之間進行選擇操作時一定要多加思考。

確定菜單廣度和深度

導航菜單廣度和深度的區別：

• 菜單廣度，導航菜單中每一個層級包含的菜單項數目為廣度。
• 菜單深度，導航菜單層級的數目為深度。

深廣度平衡幫助用戶進行快速選擇，能夠對整個產品架構有著第一眼的認識。

1. 當菜單廣度過大時，怎么辦？

當菜單廣度過大，我們也能夠通過設計的方法來優化導航菜單。

我舉一個比較具有代表性的例子：騰訊云。

騰訊云目前擁有大概 100+ 個云產品，他們都分布在導航菜單上，因此在導航設計上，它采取一種新的模式：全部菜單導航、搜索菜單、自定義導航。

在全部菜單中，展示了騰訊云 100+ 個云產品項目，通過搜索進行篩選得到用戶想要的菜單。同時在導航欄上，支持用戶去自定義 5 個菜單選項，也因此用戶將常用的菜單添加至此，更方便用戶去尋找。這樣在滿足業務的前提下，通過一些個性的設計，使 100+個菜單也能夠塞得進整個導航中。

2. 菜單深度過深時，怎么辦？

當面臨菜單深度過深時，通常需要從以下幾個方面去考慮。

與產品經理溝通是否到位

這里主要是想通過與產品經理的溝通，了解到菜單的架構設計的原因，以及能否為你的設計進行一次重新的梳理，尋找一些值得優化的點。

建議在尋找產品經理之間，自己能夠通過一些思維導圖的軟件將自己產品的菜單目錄全部羅列出來，能夠先多思考，為下面的溝通節約時間、提率。

用戶體驗地圖的繪制

在一個 B 端產品中，用戶的目的雖然復雜，但是研究用戶每一步操作，還是會查找出一些規律，我們可以從這些規律中做些文章。

比如我們之前在一個醫療系統中，根據角色的不同，將醫療角色分為：前臺、咨詢師、醫生、老板這四種角色，每個角色所關心的點都會有所不同。

老板最關心每個門店目前的情況數據，比如門店營業額、門店待客數、每個醫生的治療量以及治療最少的醫生。這些都代表著他不同場景下使用的習慣。

將這些情況分析以后，提煉出核心的需求點。

然后繪制完成他們的用戶地圖后，根據角色，明確每一個角色的日常操作有哪些，從而確定我們所有菜單所展示的位置以及整個菜單的層級關系。

菜單層級有區分

我將常見的導航區分進行總結，分為以下三種形式。

1. 顏色區分

顏色區分作為最直接最有效的一種形式，這種形式也是后臺頁面最初的狀態，我通常會用顏色區分和移動端頂部狀態欄的演變史做對比，就其功能而言他們都有很多相似的點。

微信在 2018 年 12 月份時，發布微信 7.0，將頂部導航由黑色轉變為白色，引得大家爭論不休，而經過時間不斷洗禮，大家也逐漸接受了這個事情，漸漸忘去。

延伸閱讀：

2019 年也有類似的事情發生，有幾個產品的 WEB 端進行了一系列的大改，YouTube、Twitch、Twitter 都進行了重新設計，他們也不約而同的將塊面去除，去掉多余的灰色，通過留白和空間將頁面拉開。

這是否是下一個 WEB 端所要追尋的趨勢，我還不得而知。

如果 WEB 端都有此改變，那么 B 端產品還會遠嗎？

說回 B 端設計，顏色上的區分和移動端類似，更多體現在導航層和內容層之間的區別，因為從本質上講，這兩個本身就屬于不同的業務模塊，通過顏色的區分，是最為直接，最簡單的一種方式。

這種形式常見于很多復雜系統，例如：飛書。

左側導航為深色，能夠讓用戶獲得更沉浸的體驗，因為屏幕邊緣都為深色，用戶在使用時能夠真正做到有區分。

2. 投影區分

在現如今的移動端產品，投影大行其道，彌散投影，高級投影隨處可見，也逐漸影響更多 WEB 端的產品使用投影，增加自身產品 Z 軸空間。

Z 軸空間給導航帶來了縱深感，同時也能夠在功能層級上，通過分層設計，使頁面層級關系明確，引導用戶使用導航。

Material Design 設計的出現，正是 Z 軸空間的鼻祖，在我們的屏幕中開辟了第三個設計維度，在 Z 軸上展示增加了更多的交互形式。在幾何體系中，Z 軸是 X 軸和 Y 軸之外垂直于屏幕的軸，我們通過引入 Z 軸在交互設計中呈現三維的物理空間感，使頁面內容能夠得到有效區分。

比如 Teambiton 在頁面中運用投影，強化了頁面層級的關系：

3. 分割線區分

分割線針對導航功能性不高，同時要滿足很高設計感的產品。

分割線太深，頁面十分割裂，分割線太淺，頁面劃分又不明確，因此需要設計師對分割線的把控十分合理。

分割線在 Dribbble 上見到過很多，通過簡單的線條加上空間的分割，將導航區與內容區分開，形成很好的視覺感受。如果你是剛開始嘗試做導航，不太建議嘗試這種形式，因為對于頁面空間的把控要十分苛刻。

導航可配置

B 端產品易操作性中，導航可配置操作算得上是一個重要的點。其中最主要是通過配置操作實現導航易用性的提升，而如何讓菜單可配置，通常的做法有兩種。

1. 我的菜單

如果你的產品是針對多數角色不同的用戶進行設計，那么在導航設計時，可以考慮增加一個菜單選項：我的菜單，對于菜單進行標簽處理。

設置一個我的菜單，將用戶常用的菜單進行添加，能夠滿足每一位用戶的菜單快速選擇的需求，通過這樣的自定義，用戶在常用的菜單下，能夠通過我的菜單進行快速跳轉。

舉個例子：在印象筆記當中，其快捷方式就是可以將用戶想要的模塊放置在此，可以快速跳轉。

2. 角色配置

如果你的產品是為特定幾類角色進行服務，那么在導航設計時，可以考慮根據用戶角色的不同，給用戶不同的導航展示。

通過角色的篩選，對復雜導航進行簡化，同時管理員可以根據自身公司的業務不同，給用戶配置出不同的角色權限予以滿足用戶的導航需求，這樣在設計層面上能夠減少很多不必要的麻煩。

四種常見導航菜單

1. 側邊導航

側邊導航是國內的 B 端產品當中最為常見的。

將菜單欄放置在左側，頁面布局上基本為左右結構，將導航菜單放置左側固定。

因為側邊導航在國內產品中最為常見，因此把它優先提出來講，國內廠商對于側邊欄導航尤為偏愛，在很多人心目中，感覺就只有側邊導航和其他導航兩種導航形式，也就造成了在 B 端產品的發展也逐漸趨同。不過現階段大家對于 B 端產品的重視，在設計上也開始多元化。話不多說，我們先來看看側邊導航的優點有哪些。

優點

• 擴展性較強：多級導航可以流暢展示，可以涵蓋很多大而全的產品。
• 展示靈活：側邊導航可收折，收折過后用戶的橫向核心空間將會增大，頁面展示效率也會大大提高。
• 快速定位：視覺起始線統一，用戶可以根據首字進行查找，快速便捷。

缺點

• 不易閱讀：側邊導航文字垂直排列，有悖于眼動的正常視覺方向。
• 閱讀沉浸感低：側邊導航容易打斷用戶的正常閱讀順序，使閱讀感降低。

線上產品：我們拿有贊零售進行舉例，他就是一個典型例子。

菜單欄+功能菜單共有 15 個，然后通過導航的間隔將菜單進行分組，最多一個導航菜單共 9 個，滿足 7±2 原則。

同時可以看到，有贊在使用三級導航時，通過右側面積統一展示二、三級導航，方便了用戶導航展示的同時，優化了用戶的使用體驗。

為什么國內B端產品大多數是側邊導航？

我在我的設計剪貼板中有回答過這一個問題，直接分享給大家。

2. 頂部導航

頂部導航在國外的產品當中，算是較為常見的。

將菜單欄放置在頂部，頁面布局上基本為上下結構，將導航菜單放置上方固定。

頂部導航早期出現于各類門戶網站，比如企業官網，各種咨詢類的網站經常會采取這樣的導航形式。說回 B 端產品中，頂部導航通常在 B 端產品中也是十分常見的，其中以國外產品最為集中，比如國外 CRM 三劍客：salesforces、hubspot、zoho 都是采取的頂部導航的形式。

優點

• 滿足閱讀習慣：導航為水平布局，閱讀方式更貼近眼動的正常閱讀順序。
• 沉浸感強：頂部導航通常不會打斷用戶的閱讀行為，對用戶的干擾少。
• 設備影響?。簩Ш巾敳?，整體頁面穩定，頁面對于用戶顯示器分辨率影響較小。

缺點

• 通用性差：同時受導航欄標題文字限制，對于每一個菜單的字數限制嚴格。
• 橫向 Tab 數量少：承載不了太多菜單數量，超過 7 個后菜單排布會十分困難，橫向空間利用率差。
• 擴展性差：水平導航最好不要超過二級菜單，超過二級菜單，用戶使用成本高。

線上產品：

△ salesforce

銷售 CRM 傳奇人物，千億美元估值，每年營收百億美元，無疑是 B 端產品當中的一個標桿。

如果你是做 CRM，或者是 B 端產品，必看的一個競品。

salesforce 采取的就是一個頂部導航，只是不同的是，salesforce 的頂部導航更多是將頁頭的功能進行合并疊加，雖然 salesforce 的交互方式不算優秀，但是因為其業務線不斷龐大，這樣才能支撐其整條業務線。就因為這樣的問題，需要設計師在設計時，要考慮到整個系統的一個擴展性問題。做 B 端產品的交互設計有點類似后端同學寫代碼，我們現在設計的這個交互最少要滿足未來一到兩年公司的已規劃好的產品的擴展問題。

△ hubspot

Hubspot 采取就是頂部菜單，二級菜單下拉展示，同時 Hubspot 是按照角色去劃分頂部菜單，能夠給用戶減輕認知負擔，更好的被用戶所使用。同時在一些設計小細節上，比如頂部的主題色，既可以提升品牌感，同時在適當時可以作為進度進行一個展示，使用戶能夠更加深入地感知到其設計。

3. 混合導航

在 B 端產品中，感覺混合導航也是一個后起之秀。

它的頁面布局為頂部和側邊，簡單來講，就是將頂部導航與側邊導航進行結合。通常將一級導航菜單放置頂部，通過一級菜單的點擊后，展示側邊的二、三級菜單。在一些擁有復雜的邏輯關系，菜單之間關系分明的產品中，混合導航也越來越被大眾所接受。在很多復雜的系統當中，混合導航真的是很不錯的一個選擇，我們來看看他的優缺點

優點

• 承載大型業務：在導航上，他能夠展示 3 級甚至 4 級菜單，對于很多大型 B 端項目，混合導航算是更加合理的選擇。
• 擴展性強：對以后有規劃大量功能的產品，用混合導航，能使之后菜單擴展性更強。

缺點

• 占用面積大：要切換多個菜單，所以頂部和左側會占用大量的空間。
• 菜單交互路徑長：一、二級菜單間來回交互成本高，操作繁瑣。

線上產品

云產品其實就是一個很好的例子，比如阿里云，他們因為自身產品線眾多，對于導航的設計也是以復雜著稱，多數情況下，面對這種復雜的導航時都會采取混合導航。他們能夠通過混合導航，使用戶對于導航每一個功能模塊都有一個深刻的認識。

金蝶-星空定位就以 Paas 進行定制銷售，分析過他的產品你就會了解到，他一共有 100+ 個菜單，同時算是金蝶的王牌產品，因此對于此類產品，應該著重去了解，也因此，對于每一個模塊，都是通過大標題+小標題的形式進行設計，使用戶在使用時能夠明確知道自己想要什么。

現在各大復雜的產品都會采取混合導航，這樣對于產品的架構以及各類菜單層級的分析也會起到很大的幫助。

4. 平臺類導航的新趨勢

平臺類導航是我們團隊內部自己的取名，給他的定義通常是擁有很多模塊，比如 Teambition、明道云，擁有很多個模塊，通過一個統一的平臺進行內容的分發，比如移動端的釘釘、企業微信、紛享銷客都采用同樣的方式，但在 WEB 端當中，平臺導航通常伴隨著其他導航同時出現。

比如最近很火的明道云，就是使用了平臺導航，他們將自己的產品分別陳列在頁面的核心區域，通過對于工作臺的設計，形成對頁面的展示，同時形成一個平臺類的導航，于此相對應的還有釘釘后臺管理頁面，以及企業微信后臺管理頁面，他們都是通過一個個平臺類的模塊對導航進行分發的。

文章來源：優設

左右布局響應策略動態演示?？紤]到gif被壓縮后效果不理想，所以做了一小段視頻來幫助大家更好的理解響應策略。視頻如果看著不清晰，選擇清晰度為1080p藍光觀看即可

一、什么是響應式？

按照本人自己的理解，響應式就是通過合理的設計方案配合規范的技術實現策略，使同一個Web頁面在各個終端（設備）不同分辨率屏幕上都能有最佳的用戶體驗。

這里說是用戶體驗而不是視覺效果是因為用戶體驗包含了性能、交互、效率等多方面內容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用后臺系統時的效率與體驗。而這里我提到的“合理的設計方案”就是本篇文章跟大家分享的重點：如何利用柵格系統完成后臺頁面的響應式設計。對于交互與性能方面內容，本篇文章不做介紹，因為兩者涉及到我不太了解的技術相關知識。我提出這個觀點主要希望大家在執行設計時，能有更全局的考慮，多跟交互與開發溝通，協力打造更好的用戶體驗

三、響應式的目的是什么?

后臺系統做響應式設計的目的：提高屏幕利用率，最大化操作效率

1、提高屏幕利用率最簡單的理解就是在大屏幕上顯示更多內容，在小屏幕上通過數據篩選展示關鍵信息。一直以來大家普遍認為移動端碎片化嚴重，但實際上桌面端設備的分辨率也是有著不太均勻的分布，而隨著新設備的更新，更多高分辨率屏幕不斷加入，這種碎片化的趨勢會更加明顯，因而要想利用好每一塊屏幕，讓不同分辨率的用戶都有好的體驗，顯然傳統固定的布局是做不到了。

2、后臺系統的應用特性，決定了響應式在后臺設計中具有很高的實用價值。后臺系統有兩大主要功能：查看與操作。查看主要是各種數據，是系統自動生成的內容；操作是需人工干預、人工決策的任務，查看的數據為操作提供了依據，而操作支撐了公司或部門業務的正常運行。所以后臺系統設計最基礎的目標之一是如何通過良好的數據展示幫助用戶提高操作、決策效率，而充足的展示空間顯然是實現這一目標的基礎，響應式設計通過為每個分辨率設定合理的版式布局，使數據在每塊屏幕上都盡可能展示的最佳。優化后的數據展示，幫助用戶更獲取信息，從而提高了用戶使用后臺系統的效率與體驗。

四、為何要利用柵格系統來進行響應式設計

響應式可以響應的前提有兩點：1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較快捷，所以響應式與柵格化天生一對好搭檔

柵格系統頁面布局具有規律性、元素寬高可用百分比表示

五、利用柵格系統完成后臺頁面響應式設計的步驟

1、確立設計稿基準尺寸

設計稿基準尺寸是指我們從哪一個分辨率開始設計，也就是我們新建畫板時畫板的尺寸應該是多大。而這個尺寸確定的主要依據是我們后臺系統所面向的主要用戶的屏幕分辨率；我們分兩大類情況來討論這個問題。

（1）、如果我們的系統是給公司內部員工使用，由于公司批量采購設備的原因，公司內部員工的屏幕分辨率往往會比較統一，這種情況下我們需要拿到這個數據，然后以它作為基準尺寸開始設計。因為雖然響應式設計的目標是讓頁面在每個分辨率下都有最佳的體驗，但實際開發中畢竟存在損壞，設計還原很難100%，因而大多數情況下還是基于基準尺寸的設計與開發，在用戶端顯示效果最佳、體驗最好

。

（2）、如果我們的系統是平臺級面向全網用戶，或者雖然是公司內部使用，但是并不能統計到內部員工屏幕分辨率情況，就可以以1440*900作為基準尺寸開始設計。從統計數據來看，目前國內PC端用戶屏幕分辨率排名前三的分別是1920*1080、1366*768、1400*900；1440的尺寸實際上是處于中間位置，如果以它為基準設計，最終向上向下響應適配后，相對誤差最小，從而達成用戶體驗的最大公約數。

2、確定頁面布局結構

頁面的布局結構，是頁面基本框架，后續的設計都是在這個大的框架下完成的，所以確定頁面基準設計尺寸后，需要跟交互設計師或產品經理配合，根據實際業務情況討論確定頁面布局結構。一般來講，后臺系統有兩種最典型的頁面布局結構：左右布局與上下布局（這兩種布局是最典型也是最基礎的布局形式，其余布局，下期內容講）

上下布局

上下布局的結構在傳統網頁中非常常見，而在后臺系統中并不常用。這種布局的優點是符合用戶認知，遵循用戶從上而下瀏覽頁面獲取信息的習慣；貫穿全屏的導航欄設計也使頁面顯得正式穩重，除卻導航欄之后相對較大的空間也為內容展示提供了比較充足的空間。缺點是頂部一級導航受頁面寬度限制，數量會比較局限，同時導航層級較深時，交互效率也不夠理想。所以該布局適合那些導航層級較少，內容展示充分的后臺系統設計

左右布局

擁有側邊導航的左右布局頁面結構，是在后臺系統中更常見的頁面布局形式。側邊導航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內容，因此側邊導航比頂部導航能容納更多一級內容，而層疊式的內容展示也使得一、二、三級導航內容關聯更為順暢，可擴展性也得到加強；由于側邊欄可以常駐在頁面左側，所以對于右側內容的指示性也優于頂部導航，切換起來也更加方便。但同時，因為側邊欄的常駐，導致右側內容區域空間被擠掉部分，所以相對上下布局的結構，左右布局的結構，內容區域空間會比較小；一般為了與頁面其它區域做區分，導航部分會用更深的顏色、安排更多的圖標和文字，這也導致了在視覺上左右布局的頁面不夠平衡，會有左邊重右邊輕的感覺。

3、對內容區域建立柵格系統

根據不同的布局類型，對頁面內容區域建立柵格系統。對于一個利用柵格系統做響應式設計的頁面來講，主要有三大數值需要規范：Column、Gutter、Margin；對于Column、Gutter我們在上一期內容中已經有很詳細的介紹，不再贅述，而Margin是頁邊距，主要確定了內容區域距離頁面邊緣的距離，它分布在內容區域的兩側，主要作用是通過留白把內容區域與周圍環境隔離出來，從而突出內容區域的顯示，此外還可通過Margin值來調整內容區域顯示比例，使頁面在視覺上有更好的呈現效果。所以一個用于響應式的柵格系統事實上由Columns、Gutters、Margins三部分組成。

上下布局結構與其對應的柵格系統

左右布局結構與其對應的柵格系統

4、根據實際業務內容確定盒子（Box）比例

上下布局結構的盒子

左右布局結構的盒子

5、確定響應策略

響應策略就是當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。

為了方便直觀的向開發工程師與團隊里的其它小伙伴溝通，我們可以把這個響應策略制作成如下的表格，并在頁面中標注說明相關元素的變化規律，供自己與開發參考。

由于帶左側導航的響應式規則相對復雜，所以我先以它為例跟大家交流下響應策略如何制定

左右布局響應策略表

如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下Columns、Gutters、與Margins的響應策略，也就是說Viewport Min-width是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。

每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用于觸發的關鍵值起了個名字叫“Breakpoint”，每個Breakpoint觸發一種響應策略，而每個策略持續（保持）的寬度范圍就是圖中綠色矩形的范圍。以圖中第二行矩形為例，該矩形代表的響應策略是：欄目數是8、水槽寬度16（SM）、頁邊距32、側邊欄收起且僅展示圖標，當點擊側邊欄展開圖標時側邊欄以Push的方式展開,該策略觸發的Breakpoint是768，保持范圍是577~768。也就是當視窗寬度縮放至768時，欄目數量由上一級的12變為8，水槽寬度由24變為16，側邊導航由完全展開狀態自動收起文字部分，僅保留圖標，然后保持這些關鍵數值不變，直到視窗寬度達到另一個Breakpoint。需要特殊說明的是，第一行矩形中0~576（Min&Fixed）這個范圍的視窗寬度是固定的，也就是在該套響應策略中，頁面最小響應到576的頁面寬度，當視窗到達這個寬度時，瀏覽器會限制視窗進一步縮小，因為當頁面寬度比它還小時已經無法有效展示數據了，所以進一步的縮放是毫無意義的。

左右布局響應策略動態演示

考慮到gif被壓縮后顯示效果不理想，所以我做了一小段視頻來幫助大家更好的理解上述響應策略在實際頁面中如何發揮作用。視頻如果看著不清晰，選擇清晰度為1080p藍光觀看即可

左右布局響應策略標注

對于上下布局的后臺系統我們根據內容區域（Container）寬度定義的不同方式，可以把它們分為兩類：

1、內容區域定寬的后臺系統（ Fixed-width Container ）

內容區域定寬是指內容區域在每一組視窗寬度區間內，都會設定一個最大值（Max-with），當內容區域寬度小于最大值時，區域內元素會響應視窗的變化；達到最大值后，內容區域不再響應視窗的變化，而是寬度保持該最大寬度值不變，此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin就是應對此情況的動態頁邊距。

 上下布局響應策略表（內容區域定寬（ Fixed-width Container ））

2、內容區域寬度流式 (fluid-width Container) 

內容區域寬度流式 (fluid-width Container) 的后臺系統，它的內容區域 (Container) 距離頁面兩側的頁邊距Margin是定值，因此視窗有多大內容區域就展示多大。

Q&A

1、后臺系統必須做成響應式么？

并不是必須的，是否要做響應式主要是根據后臺產品面向的用戶來定的。如果是公司內部使用的系統，且員工配備的桌面設備都是有統一的分辨率，就可以不做響應式；如果是面向全網用戶的后臺產品（比如淘寶商家的后臺管理系統，阿里云的控制臺）或公司（部門）內部的桌面設備并沒有統一的分辨率規格，那么就需要做成響應式。當然了，更實際的環境中是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮，有時為了盡快的讓業務運營起來，后臺系統會做的比較“簡陋”

2、為什么柵格系統沒有適配到移動端的分享？

因為后臺管理系統的使用場景主要是工作時間在桌面設備上使用，由于龐雜的數據內容在移動設備上展示困難、操作不便，因而很少有公司會把后臺系統響應到移動端使用，所以我們今天說的后臺響應式僅針對桌面設備屏幕。

3、對于iMac4k、5K這類超高分辨率的屏幕如何做響應式設計？

對于左右布局的后臺系統，實際上它是全屏展示的，也就是屏幕有多大就展示多大，因而iMac的響應策略也是按照左右布局響應策略表里的策略來響應對于上下布局，內容區域定寬的后臺系統，iMac的響應策略使用上下布局響應策略表里的策略來響應即可；

對于內容區域寬度流式的后臺系統，iMac的響應策略可以參考左右布局的響應策略表來處理欄目、水槽的變化，頁邊距保持定值即可。

4、在以8為原子單位的柵格中，Margin需要按8n的規律變化么？

能以8n的規律變化是最好的，如果無法做到也可以使用其它數值。Margin是頁邊距，主要作用是通過留白的方式將頁面內容區域與周圍環境隔離區分出來，從而突出內容；一般我們會優先考慮內容區域匹配8n的變化規律，安排完內容區域后剩余的空間自然成為頁邊距（margin）

5、響應策略制定的時機是什么？如何去制定？文中示例的策略表我可以借鑒套用么？

響應策略表一般是在主要頁面設計完成，要交付開發實現的時候來跟開發一起商定。這塊需要注意兩點：

1、如果開始設計時就已確定頁面是要具備響應式的能力，那么最好開始設計時就去跟開發溝通，看他們現有技術是如何來做響應式的，因為他們很有可能是在用Bootstrap、Foundation這類組件庫來做開發，而這些組件庫一般都有自己現成的響應規則，這種情況下我們需要了解開發他們的規則，讓自己的設計匹配已有的策略。當然了，如果他們的規則并不能很好滿足我們的業務需要，一般也是可以在這些組件的基礎上讓開發去修改調整的。

2、響應策略表只是對響應方式的結果的呈現，而這個策略的制定事實上是從設計開始執行時就要去考慮的，從我個人經驗來講，我一般會挑兩類頁面來做響應策略的研究與適配，一個是控制臺（Dashboard）頁面，另一個是表單（Form）頁面。優先規劃這兩個頁面的設計，考慮他們在各個Viewport下如何布局如何展示如何縮放變化，并且跟開發溝通想法，聽取意見，制定初步的響應計劃，當這兩個頁面設計完成，就可以更大范圍的執行設計。

3、文中示例的策略表是基于我自己項目經驗總結而來，具有實際應用價值，可以借鑒。但我更想做的是通過那個表希望跟大家分享一種與開發交流、溝通的方法和技巧。實際工作中我們并非一定要做出那么一個經過精心設計細致考慮的表，我們可能會找張紙畫一畫給開發看就可以了，這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發工程師。所以那張表是啟發而非標準。

控制臺（Dashboard）頁面示例（素材圖片作者：Coderthemes）

表單(Form)頁面示例

關于柵格系統文章不少，但鮮有專門針對柵格系統在后臺設計中相關應用的介紹。本文拋磚引玉，希望引起更多同行的交流與討論

柵格系統的目的

柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；柵格化提高了頁面布局的一致性跟復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。

但實際應用中，由于對柵格系統理解的不充分，很多設計師在應用柵格系統的實踐中產生了各種問題，本來幫助設計的工具現在反而成了設計中需要解決的問題。結合我自己后臺設計的經驗，本篇文章跟大家聊聊柵格系統在后臺設計中如何應用。

建立柵格系統的方法與規則

1、第一步：確立柵格系統的原子單位（網格）

如圖，一個比較完整的柵格系統是由許多規格一致的小網格組成，這些網格輔助我們更規范的排版、布局。

后臺系統設計中，由于后臺頁面主要以Web形式呈現，而對于web，用戶已習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此，在不考慮內容優先級的情況下，Web可以實現豎直方向的“無限”加載，即豎直方向可以無限延伸，因此基于Web的后臺頁面，它的柵格系統在水平方向的柵格可以不體現出來，我們在執行設計時只要在豎直方向保持規律的變化就可以了。標準的柵格系統簡化為適用于Web后臺的設計如下圖所示

如上圖，對于后臺設計來講，柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，欄目（Column）是接納網頁內容的容器，水槽（Gutter）用來調節相鄰兩個欄目間距，把控頁面留白；由于欄目跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的第一步需要先定義好柵格的原子單位“網格”的大小。根據本人的設計實踐以及其它已有規范經驗，目前后臺柵格系統網格大小定義為8是最普適易用的。具體原因有以下幾點：

（1）目前主流桌面設備的屏幕分辨率在豎直與水平方向基本都可以被8整除，使用8作為最小原子足夠普適.

我們選取4、6、8、10、12為柵格的候選原子單位，然后用目前主流屏幕分辨率與其相除，判斷各個分辨率在豎直（Y）與水平 (X)方向能否被候選原子整除，統計結果如圖。

顯然，對于目前市場桌面設備屏幕而言，4是整除率最高的一個原子，接下來依次是8、10、6、12。但4作為基本原子實在過于小了，太小的步進單位將導致我們決策成本的增加，因為我們將元素間間距增加4px或者減小4px視覺感受到的差異并不明顯，這種情況下我們為了找到那個“合適、滿意”的間距，就需要反復調試，這就造成了時間上的浪費，尤其對于沒有經驗的新人，這點會更為突出。但這種調整并不合適，原因是后臺管理系統設計重點在于面向用戶使用的效率與邏輯，其次才是視覺呈現，使用柵格系統的目的之一也是想減少設計師在“細節”上的糾結，希望設計師站在更全局的角度看待設計，合理安排時間，因此我們舍棄4。在剩下的6、8、10、12四個單位中，8的整除率最高（80%），以8像素作為一個步進單位的變化，我們視覺上也是能感受到較為明顯的差異，因此選取整除率最高的8做為柵格系統的原子單位。

（2）以8為單位符合“偶數原則”。偶數原則可以在頁面縮放中的避免類似于0.5、0.75、1.25等次像素的出現，從而使頁面各類元素在大多數場景下都能有比較精致的細節表現

雖然對于后臺設計而言，通常設計師是直接在目標尺寸下進行設計，并在此基礎上標注、切圖給開發實現，并不存在像移動端那樣需要對各種尺寸、各種像素密度的設備進行適配的情況，但對于Web頁面來講，仍存在向上向下適配的可能，因而從頁面的兼容性、可擴展性及可維護性層面來講，我們設計師還是有必要考慮的更加長遠，遵循“偶數原則”可以上避免各種潛在的問題。

（3）開發工程師使用的前端開源組件庫比如Metronic、Antdesign等也是基于8的原子單位來設計，因此如果設計師也使用以8為基本單位的柵格系統，開發與設計師相互對接就會更加方便，開發實現頁面時也能更高品質的去還原我們設計師的稿件

2、第二步：建立基于原子單位的柵格系統

經過第一步討論，我們現已確定后臺設計的原子單位為8，而我們也知道柵格系統是由欄目（Column）跟水槽（Gutter）交替分布形成的，所以接下來我們要利用原子單位確定欄目跟水槽在具體的頁面中如何分布以及它們各自的寬度。

通常，在一套后臺設計系統中，水槽寬度會是幾個比較固定的數值（因為后臺系統的頁面相對于其它類型的Web頁面，表現的更加整齊、規律，所以留白的方式比較固定，加之后臺往往有大量的數據、內容需要呈現，所以要盡可能提高頁面利用率，可以留白的空間也比較有限）；而欄目寬度更加靈活，它可以根據頁面水平方向尺寸的改變而增大或減小以響應頁面的變化（遵循8n的變化規律，此處變化規律在下期文章《柵格化與響應式》里會詳細介紹）。

當我們做后臺設計的時候首先需要確定在什么樣的分辨率下做設計，也就是首先需要確定設計稿的尺寸，當設計稿尺寸確定后，便可建立基于該尺寸的柵格系統。假設頁面內容區域寬度為W，欄目個數為A，水槽個數為B，欄目（Column）寬度為C，水槽（Gutter）寬度為G，則W=A*C+B*G。柵格系統建立初期，由于我們并不確定之后會有什么樣的內容呈現我們的頁面上，所以為了讓柵格更加靈活、普適，我們先假定單個欄目與水槽的寬度是相同的，即C=8n（n=1、2、3、4...）=G，然后以此將頁面內容區域等分，形成初步的柵格，之后再按實際內容需要，按比例調整兩者寬度或者按比例對兩者進行組合，形成承載業務內容的盒子。目前有兩種比較主流的等分方式：12等分與24等分。

12等分的柵格系統在流行的前端開發開源工具庫Bootstrap與Foundation中廣泛使用，適用于業務信息分組較少，單個盒子內信息體積較大的中后臺頁面設計；

24等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對12柵格系統，24柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。

柵格系統的應用

1、頁面布局與版式設計

（1）、了解承載業務內容的盒子模型（Box Model）

建立好柵格系統后，就可以根據自己的實際業務，在柵格系統上安排內容了。頁面上最終承載內容的其實是一個個“盒子（Box）”,這個盒子的高度由盒子要容納的內容與頁面版式設計決定，按8n規律變化；寬度則由欄目與水槽按比例組合得到。

在柵格系統上容納業務內容的容器我們把它稱之為盒子（Box），柵格系統上的盒子其實跟前端工程師寫頁面時用到的盒子是一致的。如圖所示，當我們瀏覽任何一個網頁時，右鍵>檢查元素（審查元素），然后在style菜單下就可以看到這個盒子結構了。其中Padding就是主體內容（Element）距離盒子外側的距離，我把它稱之為內邊距，（Element可以是一個按鈕，一段文本、一張圖片或者一個表格等；）而Margin就是相鄰兩個盒子間的距離，對應在后臺柵格系統中其實就是水槽的大小。了解完柵格系統的盒子模型之后，下一步我們需要根據具體業務內容來確定盒子的寬度，也就是如何利用柵格系統做實際內容的布局與版式設計

（2）、根據業務內容分配頁面比例，確定盒子寬度

以24柵格系統為例，一個24柵格系統可以根據業務需要被2等分、3等分、4等分、6等分、8等分、12等分，還可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定，我們此處所說的比例實際上就是盒子的寬度。

上圖展示了盒子在24柵格系統上的分布情況，圖中只列舉了部分比例，實際業務中，同一個頁面上使用一到兩組比例值的組合來布局是比較合適的（如下圖），組合形式過多頁面就會顯得瑣碎、雜亂，不利于閱讀和使用。因為盒子的高度根據內容來定，故下圖中沒有體現高度這一維度的變化規律。

當我們完成上圖規劃后，需要做的便是根據實際內容往每個盒子里安排內容，做視覺與交互的落地了。

2、元素對齊與間距設定

柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。

柵格系統輔助對齊的作用類似于各種設計軟件中的參考線，它能讓我們更直觀的安排、調整內容的位置及對齊方式，可以使內容變得規律、有序，方便用戶瀏覽閱讀，幫助用戶提高獲取信息的效率。

柵格系統對于元素間間距設定的幫助是直觀的，當我們定義了柵格原子單位為8時，這意味頁面上各元素間距的變化也應遵循8n的規律，一致的變化規律讓頁面富有節奏感跟韻律感，在提高頁面一致性的同時也減少了設計決策成本。我們知道，柵格系統中水槽與欄目的變化也遵循8n的變化規律，此處n為大于0的正整數，即n=1、2、3...；但是用于規范元素間距的8n，n可以是0.5、1.5這類包含二分之一8的情況，原因是實際工作中，我們面臨的情況是復雜的，這樣處理可以讓間距的設定適應一些特殊的場景，從而使其更靈活普適。

注意事項

1、水槽寬度的設定

確定好內容模塊比例后，我們會發現由于之前等分的緣故，此時水槽較寬，我們需要調整水槽寬度到一個合適的值。

水槽的寬度是8n,也就是水槽可以以8為基本單位去增加或減小。為了減少設計決策成本，我們會事先設定好一系列水槽寬度，并定義好每個寬度對應的使用場景，然后設計中根據每個場景使用對應數值就可以了。我定義了一組水槽的值是8、16、 24、32 、40，為了區分它們的使用場景我們依次為其命名為XS、SM、MD、LG、XL。根據實踐經驗，正常情況下，兩個盒子間距（水槽）的值為24（MD）時，視覺上是最為舒適。

柵格化工具推薦（插件請在附件中下載）

Ps柵格系統工具

1、PS自帶柵格系統設定：新建參考線版面（重點推薦）

Ps有個功能叫做“新建參考線版面”，打開這個面板后，在預設這里可以看到Ps已經預設了8列、12列、16列、24列的柵格系統，選擇對應列數就可以看到頁面上參考線的變化。預設中“裝訂線”的寬度即柵格系統中水槽的寬度。默認均為20px,我們可以根據之前討論的8的倍數原則，將其手動更改為24；

如果預設的柵格系統無法滿足我們工作需要，我們也可以自定義柵格系統，并能將柵格參數保存為預設，這樣就可以重復利用自定義的柵格系統了；柵格系統還可以選擇將其應用在當前畫板或者所有畫板，十分方便易用。由于是Ps自帶的參考線，所以它可以通過快捷鍵靈活的控制顯示或隱藏

2、利用Ps標注工具Assistor Ps 進行柵格系統的建立

Assistor Ps在之前主要是一款頁面標注工具，但是隨著藍湖等自動標注工具的流行，這個小軟件基本沒人用了，但我發現它設置參考線的功能還是很強大的，可以媲美大名鼎鼎的guideguid（這款插件目前對Ps cc 2017及以上版本貌似已經不支持，軟件本身安裝也挺麻煩），所以就介紹給大家。（安裝包在文末下載，Win&Mac，解壓后跟常規裝軟件一樣，正常安裝就行）。但是這個插件由于很多數值都要自己算，實際上沒有Ps自帶的新建參考線面板的功能好用。算是一個工具的補充吧

Sketch柵格系統工具

1、Sketch自帶柵格系統設定：Layout Settings

Sketch端利用sketch自帶的柵格工具Layout Settings即可完成柵格系統的設置，由于sketch的柵格工具是自帶的，與Ps類似，它也可以通過快捷鍵快速顯示或隱藏，點擊左下角“Make Default”還可以將自定義的柵格系統設置為默認的柵格系統，方便以后重復調用，但sketch貌似只能儲存一組柵格系統的數值，而Ps可以儲存多組。

2、Sketch柵格系統插件：BootstrapGrid-maste

BootstrapGrid是一個專門用于建立柵格系統的插件（插件在文末附件中下載），插件可以對柵格系統的基本數據做個性化的設定，可以對多個形狀同時建立柵格系統，還可以通過快捷鍵快速調用。具體用法：先選中要建立柵格的畫板或者畫板里的形狀（可以多選），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）

柵格系統參數設計

單個形狀（畫板）建立柵格系統動圖演示

多個形狀（畫板）建立柵格系統動圖演示

跨平臺的web端柵格工具 http://grid.guide/

GridGuide 最大優點是可以針對一種柵格系統生成4組不同水槽寬度的柵格化方案，能比較直觀的比較不同水槽寬度下各個柵格系統的視覺感受。使用方法：在右上角設置好頁面寬度以及欄目數量，頁面內就會自動生成可以下載為png圖片的柵格。

QAQ(常見問題解答）

（1）當柵格系統中奇數不可避免的出現時，如何處理?

理想狀態下，我們應該調整內容區域的大小，使其盡可能成為可以被8整除的尺寸，但實際應用中，有時會出現無法整除的情況?；趯凶幽Ｐ偷睦斫猓藭r我們保持padding、margin的值不變，改變盒子的大小去適應奇數的頁面（元素）即可,因為一致性跟效率才是柵格化要達成的首要目的，偶爾有一些不“完美”的尺寸是完全允許的，因為用戶在實際使用頁面時，并不能看到我們使用的柵格系統，也很難注意到那幾像素的變化，他們能感受到的是頁面整體呈現出來的節奏與韻律感，以及持續、一致的視覺語言帶給他們的嚴謹、可靠的心里感受。

（2）柵格系統必須以8作為原子單位？使用其它數值是否可以

首先需要指出的是使用其它數值當然也可以，柵格系統只是手段，提升設計效率、減少溝通成本、提高頁面一致性才是最終目的，所以如果你所在團隊有其它柵格化習慣，且一直以來效果良好，那么繼續使用它也是沒問題的。但是對于設計新人來講，如果能理解前人的經驗，并能較好的運用，對于他們來講，是會少一些彎路，更好的完成設計工作。

（3）柵格系統建立初期是否必須使欄目寬度與水槽寬相等，并等分內容區域？

建立柵格系統時并不是必須使欄目寬度與水槽寬相等，并等分內容區域。本篇文章介紹柵格系統時采用這種處理方式是為了讓大家更好的理解柵格系統建立的原理與過程，事實上，欄目的寬度在實際應用中往往大于水槽寬度，我們通常會先計劃好水槽的寬度、內容區域總寬度與欄目的數量，這時候欄目的寬度通過計算可得到，對于響應式頁面，欄目的寬度可以是百分比而不是具體的數值（關于響應式的內容下期文章跟大家分享）。

轉自UI中國-BYMD

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里B端后臺產品UI設計的工作小結，總結一些常見問題、解決方法以及自己的經驗。

寫在前面

作為一個新時代全能打雜，日常工作包括移動端、PC端的UI設計以及各類平面視覺設計，其中自然少不了令人“禿”然的B端后臺產品設計。

畢業兩年來一直都做著B端產品的UI設計工作，參與過的后臺產品設計面對的主要客戶有公司內部、各大企業以及政府機構。工作和學習的過程中走過不少彎路，也在不同的項目中不斷反思和總結。把自己的一些想法和經驗分享出來，總結自己工作中遇到的問題和解決的方法，記錄自己思考和理解的過程，也希望對即將或正在從事B端后臺產品設計的你有一點點啟發或幫助。

希望在日后的工作和學習中，通過實踐來不斷完善自己對B端后臺產品的理解。

目錄

一、明修棧道C和暗度陳倉B

二、后臺產品設計思路

三、后臺產品設計規范

四、經驗觀點及設計資源

正文

一、明修棧道C和暗度陳倉B

1.1初識B端產品和C端產品

按照C端產品和B端產品的專業術語來解釋的話，C端Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。

在我們日常生活中，在手機上使用的大多是C端產品，單一的C端產品通常是為了實現單一的需求，比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。

而面向B端的產品，我個人稱之為“暗度陳倉”，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即C端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。

雖說我們日常使用的更多是C端產品，但是B端產品對我們的影響也是時時刻刻都存在著的。C端產品在明，逐漸改變著現代人的生活方式，B端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。

——“ToB還是ToC？這是個問題......”

——“不管ToB還是ToC，最后都還是ToP（people）。”

1.2B端和C端產品的區別

在我看來，C端產品以消費互聯網為主，B端產品以產業互聯網為主，C端更感性，而B端更理性。

從使用者的角度來說——

C端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；

B端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。

從開發的角度來說——

C端周期短，B端周期長；

C端用戶多，B端用戶少；

C端邏輯簡單，B端邏輯復雜；

C端競品較多，B端競品較少；

C端主戰場是移動端，B端則是PC端；

C端是用戶體驗驅動，B端是解決問題驅動；

C端產品的使用決策權在用戶手中，而B端產品的使用決策權則在客戶手中（B端客戶不一定是用戶）；

C端產品除了產品的體驗以外，也要讓產品更美觀，讓活動更有趣，讓用戶更舒服，產品經理有很強的同理心，B端產品的實用性大于美觀性，能切實解決問題、配置資源的B端產品才是一個好的B端產品，產品經理要具有更強的邏輯思維能力。

1.3后臺產品常見分類

后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在B端產品的范圍之內的，常見的類型包括：

• C端產品的后臺產品線——如淘寶商家版，餓了么商家版，對訂單和用戶進行管理，支持C端產品的業務進展；

• 平臺級工具產品——如微信公眾平臺，對文章和讀者的數據統計和管理；各大互聯網公司的開放平臺，如微博開放平臺等；

• 企業級服務產品——虛擬主機系統（VMware），云主機管理系統（深信服、xensystem、騰訊云）以及各種云SaaS；

• 企業的業務處理平臺——對內有考勤、報銷等OA辦公系統，對外有CRM客戶管理系統，ERP資源及供應鏈管理系統。

二、后臺產品設計思路

2.1初識后臺產品設計

說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多。

后臺產品不同于普通用戶所使用的APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的app，再給他幾個其他的音樂APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。

對于后臺產品來說，首先，所見之少，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業、甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有“保密協議”的使命感，所謂“隔行如隔山”，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。

這大概就是后臺產品相關資源較少、設計難度較大的一些原因。

2.2后臺UI設計工作流程

后臺UI設計的工作，大體分為三個部分：需求分析——設計執行——數據分析。

• 在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。 做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。

• 在設計執行階段，參照PM給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做UI視覺方面的設計，而這時后端同步構思需求的實現方案。UI設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。

• 數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。

2.3制定設計規范的作用

為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。

• 對產品——在項目完成第一版較為穩定的版本時，著手制定設計標準，統一公司視覺設計規范及某些特定交互設計規范。同一個項目會有多個設計師的參與，規范化的設計語言，避免因設計控件混亂而影響設計輸出；

• 對自己——組件化同類元素，提高工作效率，建立公司產品的組件庫，以便不同項目的復用及設計延展；在同一個項目中也能更好的把控該項目的視覺規范，提率；

• 對團隊——設計規范的制定，規范了設計團隊的輸出，同時方便了與開發團隊的交接和協作。通過設計規范的制定，前端實現也能擁有一套可供復用和擴展的組件庫，助力上下游交接及團隊協作；

• 對客戶——制定設計規范的同時需要考慮設計延展性，為不同客戶的定制化需求提供更的輸出。同時在進行產品迭代時，設計規范的組件化調整也大大提高了工作效率。

三、后臺產品設計規范

*以下內容僅供參考和交流，圖片內容不代表真實尺寸，請結合特定產品靈活使用。

3.1頁面布局

1. 統一尺寸——據統計，目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440來設計的話，向上適配或者向下適配誤差會比較小。 適配方案——面向多個客戶，后臺產品設計功能型頁面的尺寸統一為1440*900，按照柵格系統原則向上或向下適配；展示型頁面以1440*900為主，同時設計出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

2. 頁面框架——頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。

3. 柵格布局——柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用24列柵格體系實現，以滿足2，3，4，5，6分比布局等多種情況。固定寬度Column，將間隔Gutter進行動態縮放。需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。谷歌規定模塊和結構之間要以8px為基準，布局間相對間距可采用8px以及8的倍數，但一些小組件(按鈕、間隔、輸入框 )可以以4為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。

4. 尺寸設定——一般在整體區域左上角放置產品LOGO及產品名稱，大部分系統頂部欄高度48+8n，側邊欄寬度200+8n。我常用的是頂部欄高度56px，側邊欄寬度200px，側邊欄收縮狀態寬度56px，右側的側浮窗寬度400px。

5. 相對間隔——定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。

3.2標準色

1. 顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。

2. 品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。

3. 輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

4. 中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。

5. 其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。

   

3.3標準字

1. 后臺系統常用的字體：windows系統，中文Microsoft YaHei，英文Arial；Mac字體，中文PingFang SC，英文Helvetica；除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。

2. 后臺系統中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

3. 行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。

3.4圖標

1. 圖標是UI設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。

2. 除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在iconfont提供的圖標模板上用AI繪制，畫板1024*1024，提供圓形、正方形、矩形形狀(文末提供下載)。圖標尺寸按照8的倍數進行延展，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。

3. 分享一個我個人常用的AI使用小習慣，因為ctrl+q、ctrl+w作為退出和關閉我用的不多，而且有時候手抖會在保存時候不小心點成了關閉，所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯。

3.5按鈕

1. 按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

2. 按鈕的交互狀態包括默認、懸停、點擊和不可用。

3. 按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照8的倍數設定。如高度分別設定為24、32、40px。

4. 規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。

5. 填充按鈕之間間距最小為10px。

3.6導航

1. 導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。

2. 各類導航中的字體大小可進行統一設定。

3. 頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。

4. 側欄菜單為垂直導航菜單，可以內嵌子菜單。

5. 下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。

6. 步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。

7. 分頁的高度設定為24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。

8. 面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。

9. 徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。

   
   

3.7表單

1. 表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。

2. 字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合PC端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。

3. 輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。

4. 輸入框的尺寸可按照8的倍數進行設定，比如24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為20px，有錯誤提示時候豎向增加10px或橫向顯示在輸入框右側（預留出位置）。

5. 表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體14px，文字和左右兩邊邊框的邊距10px。

6. 選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。

7. 搜索框和選擇框的高度為30px或按照8的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕4px，內部文字14px。

8. 單選多選框尺寸16*16px，多個選項橫向排列間距16px，縱向排列間距8px。

9. 開關按鈕外框40*20px，內部圓形16*16px。

3.8表格

1. 表格在后臺產品UI設計中站的比重非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。

2. 表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。 
   表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。

3. 行高——表格行高可設置為表格內字體高度的2~3倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用36、40、48、60等。

4. 行數——表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是20或50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多余每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。

5. 列寬——列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以“...”展示，鼠標懸停出現完整內容（比如詳情、描述）。

6. 列數——表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

7. 對齊方式——表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似IP地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加“復制”圖標，方便用戶調用。

8. 詳情入口——表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。

3.9反饋

1. 包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。

2. 彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。

3. 彈框——彈框出現時，主題內容增加一層遮罩#000，透明度50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。

4. 側滑框——又稱抽屜，出現在右側，固定寬度400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。

5. 骨架屏——為某些特定數據提供數據加載等待時的占位圖形組合。

6. 全局提示——建議停留時間3s，可根據文字字數調整停留時間，文字內容限制在30以內。

7. 警告提示——用不同顏色和樣式展示需要關注的信息。

8. 通知提醒——消息通知和告警信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留3s后自動關閉。

3.10缺省狀態

1. 繪制不同類型的情感畫插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。

2. 頁面需要一個默認的底色，錯誤文字使用14px，與情感化插畫間距20px，與按鈕間距30px；

3.11數據可視化

1. 數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。

2. 功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做的更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。

3. 考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。

四、經驗觀點及設計資源

4.1設計前端一家親

• Ant Design的設計組件，實現框架React、Angular——https://ant.design/docs/spec/layout-cn

• Element的設計組件，實現框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

• iView的設計組件，實現框架Vue——https://www.iviewui.com/docs/guide/theme

• 飛冰的設計組件，實現框架React——https://alibaba.github.io/ice/

• Layui的設計組件——https://www.layui.com/demo/grid.html

• G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

• Echarts可視化圖形組件——https://echarts.baidu.com/

• d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery

• 在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0

4.2不丑也要多讀書

• 《B端產品經理必修課》

• 《交互設計精髓》

• 《U一點料·Ⅱ》

• 《簡約至上:交互式設計四策略》

寫在最后

不管是做C端產品還是B端產品，都是為了實現用戶的需求、幫用戶解決問題。

剛接觸后臺產品的UI設計師工作時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入antdesign和element等開源的設計組件，會使得設計師以及設計師的好朋友前端小哥哥事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。

在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。