B端領(lǐng)域中簡(jiǎn)單粗暴的產(chǎn)品設(shè)計(jì)時(shí)代已經(jīng)過(guò)去，產(chǎn)品如何提高體驗(yàn)、效率擺在了所有設(shè)計(jì)者的臺(tái)面。那么，一個(gè)優(yōu)秀的表格具備什么特征呢？本文作者對(duì)此進(jìn)行了分析，一起來(lái)看一下吧。

B端領(lǐng)域中簡(jiǎn)單粗暴的產(chǎn)品設(shè)計(jì)時(shí)代已經(jīng)過(guò)去。產(chǎn)品如何提高體驗(yàn)、效率擺在了所有設(shè)計(jì)者的臺(tái)面。

存量競(jìng)爭(zhēng)的時(shí)代里，我們應(yīng)該思考如何讓客戶/用戶“既吃得飽，又吃得好”。因此，作者想通過(guò)本文，詳細(xì)跟大家分享表格在B端系統(tǒng)中的設(shè)計(jì)實(shí)例與思考。

一、認(rèn)識(shí)表格

表格，一種常見(jiàn)的信息組織整理手段。常用于信息展示、歸納、分析等活動(dòng)。

1. 表格的組成

表格是被公認(rèn)的展示結(jié)構(gòu)化數(shù)據(jù)，最清晰、最高效的形式。

表格頁(yè)由按鈕、搜索、篩選、視圖、單元格、分頁(yè)等元素構(gòu)成。

2. 表格的樣式

如何有效地傳達(dá)信息內(nèi)容，是表格設(shè)計(jì)的核心。

需要明確的是，表格本身應(yīng)該是隱性的，如何讓用戶注意力集中在核心內(nèi)容上才是表格設(shè)計(jì)的重點(diǎn)。

常見(jiàn)3種表格樣式：

1）網(wǎng)格型

特征：表格有均勻而明顯的分割線，邊框單元格比較明顯，類似于Excel。

優(yōu)點(diǎn)：

• 適合展示大量的數(shù)據(jù)，能夠清晰地呈現(xiàn)數(shù)據(jù)的結(jié)構(gòu)和關(guān)系。
• 可以展示復(fù)雜的數(shù)據(jù)關(guān)系，如多層次的數(shù)據(jù)結(jié)構(gòu)。
• 可以清晰地表達(dá)時(shí)間的先后順序，適合展示具有時(shí)間序列的數(shù)據(jù)。

缺點(diǎn)：

• 網(wǎng)格線會(huì)增加表格的復(fù)雜度，使得表格顯得更加擁擠，不易于閱讀和理解。
• 如果數(shù)據(jù)量較少，使用網(wǎng)格型的表格會(huì)顯得過(guò)于復(fù)雜，不必要地增加了閱讀的難度。
• 如果表格中存在大量的空白單元格，使用網(wǎng)格型的表格會(huì)顯得浪費(fèi)空間。

2）水平線型

特征：僅對(duì)行進(jìn)行分割，通過(guò)空白間距與對(duì)齊的方式對(duì)列進(jìn)行分割。

優(yōu)點(diǎn)：

• 適合展示相對(duì)較少的數(shù)據(jù)，易于閱讀和理解。
• 易于比較同一行內(nèi)的數(shù)據(jù)，方便找出數(shù)據(jù)的規(guī)律和趨勢(shì)。

缺點(diǎn)：

• 不適用于展示復(fù)雜的數(shù)據(jù)關(guān)系，如多層次的數(shù)據(jù)結(jié)構(gòu)列與列之間的邏輯與對(duì)比）。
• 不適用于展示具有時(shí)間序列的數(shù)據(jù)，因?yàn)檫@種表格無(wú)法清晰地表達(dá)時(shí)間的先后順序。

3）斑馬條紋型

特征：使用不同低飽和度顏色并隔行交替來(lái)區(qū)分?jǐn)?shù)據(jù)。

優(yōu)點(diǎn)：

• 能夠使表格的數(shù)據(jù)更加清晰明了，易于閱讀和理解。
• 能夠減少閱讀時(shí)的視覺(jué)疲勞，提高閱讀效率。
• 能夠突出表格的結(jié)構(gòu)和層次，使得數(shù)據(jù)的關(guān)系更加明顯。

缺點(diǎn)：

• 不適合展示大量的數(shù)據(jù)，其背景色或者文本顏色的變化會(huì)增加表格的復(fù)雜度。
• 不適合展示復(fù)雜的數(shù)據(jù)關(guān)系，如多層次的數(shù)據(jù)結(jié)構(gòu)。
• 不適合展示具有時(shí)間序列的數(shù)據(jù)，因?yàn)檫@種表格形式無(wú)法清晰地表達(dá)時(shí)間的先后順序。

二、優(yōu)秀表格具備的特征

1. 設(shè)計(jì)目標(biāo)

2. 設(shè)計(jì)案例

1）自定義篩選與列信息

數(shù)據(jù)表格，本身信息繁多，且需要滿足不同行業(yè)不同角色的需求。

結(jié)合上述場(chǎng)景與席克定律，米勒法則，可提供通用字段指標(biāo)的同時(shí)，為用戶提供自定義字段指標(biāo)的功能；

讓表格與篩選具備彈性化的特征，以此滿足個(gè)性化訴求，滿足不同角色不同維度的篩選、統(tǒng)計(jì)、核對(duì)需求。

交互小知識(shí)：

2）固定表頭

當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。

結(jié)合場(chǎng)景與菲茨定律，將表頭固定，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。

交互小知識(shí)：

3）精煉表頭與聚合同類項(xiàng)

① 精煉表頭

表頭標(biāo)題在能夠概括的情況下，盡量簡(jiǎn)練、準(zhǔn)確。

可根據(jù)上下文關(guān)系來(lái)進(jìn)行減短簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用。

② 聚合同類項(xiàng)

可根據(jù)表格內(nèi)容的關(guān)系和業(yè)務(wù)含義，將表格內(nèi)容進(jìn)行歸納、分組，并將分組好的信息進(jìn)行合并排列展示。

聚合同類項(xiàng)的目的是為了提高用戶對(duì)表格內(nèi)容的閱讀效率。

信息較多且信息間存在邏輯關(guān)聯(lián)時(shí)，可考慮使用此方式展示信息。

當(dāng)然合并同類項(xiàng)會(huì)使行高變高，使得一屏展示的行信息變少，需根據(jù)場(chǎng)景慎重使用。

4）行與列的平衡與克制

根據(jù)目的及信息主體的不同，通過(guò)行與列的顯隱變化，來(lái)更好地傳達(dá)信息。定向地降低視覺(jué)噪音，提高信息的可讀性。

通過(guò)隱藏表格中縱向的線，強(qiáng)調(diào)“行”的特性，使橫向信息更加連續(xù)通暢，便于橫向閱讀、對(duì)比。

展示縱向的線，增加了“上下行”之間的信息的對(duì)比性。

5）排序

讓無(wú)序信息內(nèi)容進(jìn)行有序排列，排序分為升序和降序，一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。

表頭排序在多個(gè)情況下，排序之間均為互斥，只執(zhí)行一個(gè)命令。

6）內(nèi)聯(lián)操作

允許用戶在表格中直接修改數(shù)據(jù)，而無(wú)需到單獨(dú)的編輯頁(yè)面。

7）水平滾動(dòng)，固定關(guān)鍵數(shù)據(jù)列

表格呈現(xiàn)大量信息時(shí)，水平滾動(dòng)是不可避免的。

結(jié)合米勒、菲茨等原則：

• 將“關(guān)鍵列”固定在表格左右側(cè)，通過(guò)滾動(dòng)查看更多數(shù)據(jù)。
• “列”的數(shù)量控制在5-9列。

8）自定義調(diào)整列寬

結(jié)合奧卡姆剃刀原理，將核心信息展示在列表的同時(shí)，根據(jù)信息的常規(guī)寬度設(shè)置默認(rèn)每列寬。

允許調(diào)整列的寬度來(lái)查看更加完整的縮略數(shù)據(jù)。

或者，被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí) tips 顯示完整數(shù)據(jù)。

9）信息對(duì)齊

結(jié)合格式塔原理之一的對(duì)稱性原則，將表格內(nèi)的信息通過(guò)對(duì)齊，會(huì)更加規(guī)范容易理解。

對(duì)稱，給用戶視覺(jué)上的統(tǒng)一感，同時(shí)視線流動(dòng)順暢，能夠讓人快速地捕捉到所要的內(nèi)容。

10）減少計(jì)算，為用戶多做一步

表格中的數(shù)據(jù)若有計(jì)算與核對(duì)的訴求，可提供數(shù)據(jù)提供歷史數(shù)據(jù)對(duì)比、差值、總計(jì)等處理性的結(jié)果，以此減少用戶心算或者線下處理的麻煩。

11）表格信息減少視覺(jué)噪音

信息內(nèi)容的有效傳達(dá)是表格的服務(wù)本質(zhì)，就表格本身而言應(yīng)該是隱性的，減少用戶注意力，在保證整體結(jié)構(gòu)的基礎(chǔ)上，盡量減少或削弱所謂的視覺(jué)裝飾。

12）空白數(shù)據(jù)，使用“-”填充

表格中出現(xiàn)空數(shù)據(jù)或無(wú)數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒(méi)有加載出來(lái)嗎？

明智的做法，是用“-”來(lái)填充。

13）突出視覺(jué)層級(jí)

結(jié)合防錯(cuò)原則，當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí)，給予變化提示。

特別在信息列數(shù)較多的情況下更為重要，能夠讓人捕捉到所在的位置，從而降低人的心理壓力或增加掌控感。

14）圖形語(yǔ)言表達(dá)操作含義

使用直觀、簡(jiǎn)單的圖形描述“操作”的功能含義，更可讀、更節(jié)省空間。

15）全選與批量操作

若表格是分頁(yè)，在某些情況下全選則需要考慮分為單頁(yè)全選和整表全選，瀑布流式的加載則就不需要做區(qū)分了。

16）固定分頁(yè)

結(jié)合菲茨定律，將分頁(yè)固定，省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。

17）右側(cè)抽屜，展示詳情

點(diǎn)擊文字鏈接，右側(cè)彈出抽屜樣式彈窗，顯示詳細(xì)信息。

彈窗不宜承接展示過(guò)多的信息，

詳情頁(yè)不方便用戶連續(xù)性的查看詳情，操作更為復(fù)雜，

抽屜樣式的詳情既能承接大量數(shù)據(jù)集，又使得用戶感官更為輕松(并未跳脫出主體頁(yè)面)。

三、寫在最后

優(yōu)秀的表格設(shè)計(jì)，都是圍繞“如何提高用戶閱讀、操作效率”這一目標(biāo)，來(lái)設(shè)計(jì)。站在用戶的視角，去設(shè)計(jì)功能、服務(wù)，才是優(yōu)秀的表格設(shè)計(jì)。

最后，文中所用到的交互設(shè)計(jì)原則引用自我的另一篇文章《產(chǎn)品術(shù)與道：交互設(shè)計(jì)7定律的分析應(yīng)用》，歡迎大家查閱與斧正。