起點學院課程

B端表格設計實戰指南

18 評論 6310 瀏覽 153 收藏 27 分鐘
15天0基礎極速入門數據分析,掌握一套數據分析流程和方法,學完就能寫一份數據報告!了解一下>>

編輯導語:在B端產品中,數據主要通過表格的形式展現,表格的易讀性和易操作性設計,對提升B端用戶的操作效率來說十分重要;本文是作者從實際工作出發,結合項目和過去經驗對于復雜業務類的表格設計的一次總結。

一、表格的介紹

1. 表格的定義

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

2. 表格的構成元素

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

其各個部分包含的相關元素如圖所示:

  • 容器:包含表格的所有內容。
  • 篩選區:包括搜索和條件篩選。方便用戶快速查詢定位數據,一般位于表格上方。
  • 功能性按鈕:比如常見的[新增]按鈕和各種批量操作按鈕。
  • 表頭:說明數據的內容,可以包含篩選、排序等功能。
  • 表體:包含行和列數據,按列可以分為多選列、數據列、操作列。(多選列=多選框;數據列=呈現業務展現需要的信息;操作列=針對單行數據的操作按鈕,比如管理、編輯信息等。)
  • 底欄:包含數據量、單頁條目、總條目、分頁等,底欄數據也可以放置在表格頂部。

3. 表格的樣式

1)幾種常見的風格樣式:

  • a.網格型:表格有均勻而明顯的分割線,邊框單元格比較明顯。
  • b.水平線型:僅顯示水平線可減少整個網格的視覺噪聲。
  • c.斑馬條紋型:隔行交替使用不同底色來區分數據。
  • d.自由形式:移除所有分割線,通過盡可能減少視覺噪聲來創建極簡外觀。

2)關于樣式的選取技巧

  • 網格型:對于數據之間的關系緊密(列信息較多而沒有足夠空間用留白來分割信息)且有對比關系的。
  • 水平線型:它能顯著減輕表格在垂直方向的視覺重量,提升用戶進行大量數據對比時的速度;因此對于所有數據集大小,此樣式都是最常見的。
  • 斑馬條紋型:每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法;對于較大的數據集,建議使用此樣式,在較大的數據集中,交替模式將很清晰,并且不會引起特定行突出顯示的混亂。
  • 自由形式:對于小型數據集,如果用戶在閱讀時不需要幫助就可以保持位置,則建議使用此樣式。

信息內容的有效傳達是表格設計的本質,就表格本身而言應該是隱型的,應該讓用戶注意力聚焦在核心內容上。

所以,邊框的顏色應非常淡,不能妨礙快速瀏覽。

二、表格的設計技巧

表格是為可讀性而生的,一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度。

因此,設計易讀、易掃視、易比較、易操作的表格結構是表格設計的首要目標。

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

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

1. 篩選區設計

篩選區可以看作表格的導航,由搜索和篩選這兩部分組成。

一般搜索和篩選會同時出現,但是兩者一般很少同時使用來對數據進行定位——搜索更多的是對單一或者包含某個字段的的數據來進行定位;篩選則是用來查詢一類數據。

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

  • 常用搜索少用篩選:若篩選項多,可以選擇隱藏篩選項,篩選少可以展示出來;
  • 搜索和篩選都常用:可以將搜索和篩選都展示出來;
  • 常用篩選少用搜索:篩選和搜索同時展示;
  • 篩選和搜索都不常用:展示搜索隱藏篩選。

1)搜索

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

  • 簡單搜索:由一個搜索框和一個按鈕組成,可以輸入一個或多個條件進行搜索。
  • 標簽搜索:在簡單搜索的基礎上加上標簽,即先選標簽,在輸入搜索內容。
  • 高級搜索:即點擊更多展開其他搜索條件,減少了更多條件對用戶的干擾,但降低了易發現性。

2)篩選

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

3)案例小講堂

對于數據集較大的B端系統來說,往往篩選條件比較多,都將其展示出來會導致空間占比過大,影響了用戶對表格信息的獲取。

下面以我公司的財務中臺為例,講講如何優化篩選區,希望對大家有所啟示。

① 版本中篩選區樣式:

篩選條件全部展開,目的是讓用戶對信息進行快速的查詢、過濾,以快速準確完成目標任務。但業務復雜,數據集過多少,篩選條件也相應增加(空間占比大),看起來非常冗余,不利于快速定位目標。

為了平衡掃描、查詢、過濾、分析等這些操作,復雜業務的表格區篩選需要進行一定的優化處理,這樣才能滿足滿足業務需求同時,又符合用戶心智模型。

方案A:整齊劃一

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

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

  • 數據集往往很龐大,表格不能展示所有字段,往往采用列固定的形式來呈現數據的完整性。以財務中臺為例,高頻篩選功能已被遮擋(如上圖),篩選前需先對表格進行橫向滾動,無端增加操作;
  • 應無法展示全部字段,用戶無法清晰的感知到篩選了哪些內容,增加認知學習成本;
  • 表頭中的屬性并不是都可以進行篩選,用戶不可感知哪些可以篩選,需要滑動表格檢索。

方案B:強調主次關系

采用展開式的標簽篩選樣式,對不常用的篩選項做隱藏處理。

但因業務場景的復雜度,高頻篩選功能還是很多,沒有解決本質的問題,如下圖:

方案C:分狀態展示(逐漸呈現)

在方案B的基礎上進行了優化。

提煉與流程相關的狀態,按步驟顯示,每一步只顯示當前需要關注的內容,如圖:

狀態的提煉過程

整理每個單據的狀態,理清關系:

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

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

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的視覺落腳點在表格的上方,顯然是不符合眼動規律的。

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

3. 表頭設計

表頭在能夠概括的情況下,盡量簡練、準確,一般可根據上下文關系來進行減短簡化,以達到節省表格頭部空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數據本身。

如果精簡后的生僻字段難以自我解釋,可以跟一個釋義標識,鼠標懸停時出現該字段的詳細解釋;同時滿足新手用戶、普通用戶以及專家用戶的需求。

4. 表體設計

1)數據對齊方式

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

  1. 文本左對齊;
  2. 數字右對齊;
  3. 表頭與信息內容對齊方式一致。

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

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

這時又該如何處理?

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

2)數字的字體選擇

建議選用:Helvetica Neue、Helvetica、Arial、sans-serif,

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

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

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

存在的問題:

  • 當信息過載,操作項這個list非常長的話,頁面將會非常擁擠;
  • 文字按鈕因為視覺特征比較明顯,造成了不必要的分散注意力;
  • 誤操作率相對較高,同樣因為表格空間有限,當操作區非??拷?,很容易一不小心就點錯了。

針對這個問題所出的解決方案,如下:

方案A:下拉框樣式

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

方案B:錯位顯示

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

方案C:以不變應萬變

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

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

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

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

來看看之前的頁面:

這樣處理的不足點:

  • 在查看和編輯信息時,無效的信息太多。降低了獲取信息的效率;
  • 切換單條數據時,頁面出現跳動,無法快速檢索到相對應的信息。

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

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

5)行高的制定方法

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

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

因此,表格行高=文字行高+上下間距。

其中,文字行高可以設定為字號的1.2~1.8倍,上下間距可以設定為字號的1~1.5倍;行高影響每行信息的易讀性。

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

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

設計兩套不同的行高,在大分辨率下顯示較高的行高,給數據間提供更多呼吸的空間;在小分辨率下顯示較小的行高,使一屏內可以看到更多的行高。

Gmail就是這樣設計的,如下圖所示:

做法2:自定義行高

自定義行高為興奮需求,可以提高用戶的用戶體驗。

所以我們可以視表格的具體情況來設計設置行高的形式,可以放置在設置按鈕里,也可以在外部按鈕較少的情況下展示出來。

5. 底欄設計

表格的底欄,底欄也是不可缺少的一部分,承載的作用主要是告訴用戶數據條數以及當前位置。

分頁的設計是根據不同的場景進行選擇最優的設計方案;在不需要定點跳轉的場景,建議建議刪除跳頁,刪除多于的功能,使頁面簡潔、清爽。

三、其他設計細節

1. 空白單元格的處理

表格中經常會出現空數據或無數據的情況,留白處理會給用戶造成一定的困惑和誤解,是系統沒有加載出來嗎?

明智的做法,是無數據時用「-」來填充顯示,數據為零時與上下數據單位、小數點相同的0來顯示。

2. 減少圖形元素的使用

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

3. 省略 (氣泡展示位置)

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

位置:建議展示在上方,因為我們的閱讀順序是從上到下,鼠標向下移動時不會被上面的氣泡遮擋住。

氣泡面積不宜過大,根據屏幕尺寸控制在一定比例,一版不超過內容區的四分之一,展示不下的內容可以在氣泡中增加滾動條。

四、后記

感謝閱讀!本文結合了實際項目經驗對表格設計做了一次總結,在具體項目中,你可能需要根據產品特性和用戶需求進行調整。

如果你還有什么好的想法和建議,可以在評論里留言討論。

參考文獻:

data table

Ant Design

web表格設計攻略

Web頁面中的表格設計,遠沒那么簡單

B端設計指南03-按鈕

 

本文由 @Nick 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
起點學院課程
評論
評論請登錄
  1. 很有用!

    回復
  2. 都是平時使用到的場景,滿滿的干貨,作者給力

    回復
  3. 全是干貨,全是細節。高手啊

    回復
  4. 贊,學習了

    回復
  5. 學習了~

    回復
  6. 我有一個疑問,大家普遍在講的是關于篩選條件區域的元素要少,多的要收起來,然后要對齊之類的。但是很少有人講,搜索區域的排列順序應該是怎么樣的?先下拉框再輸入框,還是說按表頭順序排列。還有文字描述和元件框應該是左右布局還是上下布局,如果是左右布局,文字描述太長怎么辦,有中英文怎么辦?

    感覺這些問題都沒什么人討論。

    回復
    1. 這個要看產品,其實很多B端的這個順序都是由業務來定的,即使是同行業都有不同 的習慣,現在一般篩選都可以做成定制選擇,并且自定義排序

      回復
  7. 感謝,希望有更多表單設計的干貨

    回復
  8. 不錯,能否再分享分享表單頁面的設計

    回復
  9. 寫的很好,我還有一個問題,表頭如果很長怎么解決呢?有些字段是不能刪減的。

    回復
    1. 還有一個方案,用“預設場景”方案也就是建立快捷篩選,甚至篩選字段還可以讓用戶自行決定,這樣每個用戶定制化篩選的需求也會相應得到解決

      回復
    2. 我的意思是表單頭部信息較多,都是用戶要求不能刪減的字段,比如xx名稱,xx類型….然后一行表頭已經放不下了,這時候怎么設計表頭和表單呢?謝謝您,期待您之后的解答。

      回復
    3. 1、采用固定列的形式,進行左右滑動;2、逐步展示,先展示最重要的,其他的隱藏,點擊之后再出現;3、根據你的業務進行整合歸納。

      回復
    4. 好的,感謝您的思路提供

      回復
    5. 他好像說了是固定窗口,滑動底部

      回復
  10. 不錯,能否再分享分享表單頁面的設計

    回復
  11. 真好,點贊

    回復
  12. 寫得很精彩,謝謝分享

    回復