2020-8-7 ui設(shè)計分享達(dá)人
在B端產(chǎn)品中，數(shù)據(jù)主要通過表格的形式展現(xiàn)。本文是我從實際工作出發(fā)，結(jié)合項目和過去經(jīng)驗對于復(fù)雜業(yè)務(wù)類的表格設(shè)計的一次總結(jié)。
表格（Table），又稱為表，是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。
通常表格的組成元素以及相關(guān)元素會有多個部分，筆者根據(jù)自己設(shè)計表格的工作經(jīng)驗將表格概括為容器、篩選區(qū)、功能性按鈕、表頭、表體以及底欄等六個部分，其各個部分包含的相關(guān)元素如圖所示。
容器：包含表格的所有內(nèi)容。
篩選區(qū)：包括搜索和條件篩選。方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方。
功能性按鈕：比如常見的[新增]按鈕和各種批量操作按鈕。
表頭：說明數(shù)據(jù)的內(nèi)容，可以包含篩選、排序等功能。
表體：包含行和列數(shù)據(jù)，按列可以分為多選列、數(shù)據(jù)列、操作列。（多選列=多選框；數(shù)據(jù)列=呈現(xiàn)業(yè)務(wù)展現(xiàn)需要的信息；操作列=針對單行數(shù)據(jù)的操作按鈕，比如管理、編輯信息等。）
底欄：包含數(shù)據(jù)量、單頁條目、總條目、分頁等，底欄數(shù)據(jù)也可以放置在表格頂部。
1）幾種常見的風(fēng)格樣式
a.網(wǎng)格型：表格有均勻而明顯的分割線，邊框單元格比較明顯。
b.水平線型：僅顯示水平線可減少整個網(wǎng)格的視覺噪聲。
c.斑馬條紋型：隔行交替使用不同底色來區(qū)分?jǐn)?shù)據(jù)。
d.自由形式：移除所有分割線，通過盡可能減少視覺噪聲來創(chuàng)建極簡外觀。
2）關(guān)于樣式的選取技巧
網(wǎng)格型：對于數(shù)據(jù)之間的關(guān)系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關(guān)系的。
水平線型：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進(jìn)行大量數(shù)據(jù)對比時的速度。因此對于所有數(shù)據(jù)集大小，此樣式都是最常見的。
斑馬條紋型：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法。對于較大的數(shù)據(jù)集，建議使用此樣式，在較大的數(shù)據(jù)集中，交替模式將很清晰，并且不會引起特定行突出顯示的混亂。
自由形式：對于小型數(shù)據(jù)集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。
信息內(nèi)容的有效傳達(dá)是表格設(shè)計的本質(zhì)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上。所以，邊框的顏色應(yīng)非常淡，不能妨礙快速瀏覽。
表格是為可讀性而生的，一個結(jié)構(gòu)清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此，設(shè)計易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計的首要目標(biāo)。
下面我將以公司財務(wù)中臺的表格改版為例，逐步說明表格中每個結(jié)構(gòu)的設(shè)計。
這是改版前后樣式對比圖：
篩選區(qū)可以看作表格的導(dǎo)航，由搜索和篩選這兩部分組成。一般搜索和篩選會同時出現(xiàn)，但是兩者一般很少同時使用來對數(shù)據(jù)進(jìn)行定位。搜索更多的是對單一或者包含某個字段的的數(shù)據(jù)來進(jìn)行定位；篩選則是用來查詢一類數(shù)據(jù)。
根據(jù)MECE分析法，篩選區(qū)可以有以下的表現(xiàn)形式：
常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選項，篩選少可以展示出來；
搜索和篩選都常用，可以將搜索和篩選都展示出來；
常用篩選少用搜索，篩選和搜索同時展示；
篩選和搜索都不常用，展示搜索隱藏篩選。
1）搜索
在樣式上，搜索可以分為簡單搜索、標(biāo)簽搜索、高級搜索等三類。
簡單搜索：由一個搜索框和一個按鈕組成?？梢暂斎胍粋€或多個條件進(jìn)行搜索。
標(biāo)簽搜索：在簡單搜索的基礎(chǔ)上加上標(biāo)簽，即先選標(biāo)簽，在輸入搜索內(nèi)容。
高級搜索：即點擊更多展開其他搜索條件，減少了更多條件對用戶的干擾，但降低了易發(fā)現(xiàn)性。
2）篩選
根據(jù)篩選的位置，可以分為標(biāo)簽篩選、表頭篩選兩類。
3）案例小講堂
對于數(shù)據(jù)集較大的B端系統(tǒng)來說，往往篩選條件比較多，都將其展示出來會導(dǎo)致空間占比過大，影響了用戶對表格信息的獲取。下面以我公司的財務(wù)中臺為例，講講如何優(yōu)化篩選區(qū)，希望對大家有所啟示。
3.2.3 版本中篩選區(qū)樣式
篩選條件全部展開，目的是讓用戶對信息進(jìn)行快速的查詢、過濾，以快速準(zhǔn)確完成目標(biāo)任務(wù)。但業(yè)務(wù)復(fù)雜，數(shù)據(jù)集過多少，篩選條件也相應(yīng)增加（空間占比大），看起來非常冗余，不利于快速定位目標(biāo)。為了平衡掃描、查詢、過濾、分析等這些操作，復(fù)雜業(yè)務(wù)的表格區(qū)篩選需要進(jìn)行一定的優(yōu)化處理，這樣才能滿足滿足業(yè)務(wù)需求同時，又符合用戶心智模型。
方案A 整齊劃一
整合篩選項，采用表頭篩選+標(biāo)簽篩選的樣式，縮減篩選區(qū)的頁面空間占比。
討論結(jié)果：雖然這個方案使篩選區(qū)的空間占比縮小，整體頁面也看似整潔不少。但表頭篩選在復(fù)雜的業(yè)務(wù)系統(tǒng)中存在幾個弊端：
a.數(shù)據(jù)集往往很龐大，表格不能展示所有字段，往往采用列固定的形式來呈現(xiàn)數(shù)據(jù)的完整性。以財務(wù)中臺為例，高頻篩選功能已被遮擋（如上圖），篩選前需先對表格進(jìn)行橫向滾動，無端增加操作；
b.應(yīng)無法展示全部字段，用戶無法清晰的感知到篩選了哪些內(nèi)容，增加認(rèn)知學(xué)習(xí)成本；
c.表頭中的屬性并不是都可以進(jìn)行篩選，用戶不可感知哪些可以篩選，需要滑動表格檢索。
方案B 強(qiáng)調(diào)主次關(guān)系
采用展開式的標(biāo)簽篩選樣式，對不常用的篩選項做隱藏處理。但因業(yè)務(wù)場景的復(fù)雜度，高頻篩選功能還是很多，沒有解決本質(zhì)的問題，如下圖：
方案C 分狀態(tài)展示（逐漸呈現(xiàn)）
在方案B的基礎(chǔ)上進(jìn)行了優(yōu)化。提煉與流程相關(guān)的狀態(tài)，按步驟顯示，每一步只顯示當(dāng)前需要關(guān)注的內(nèi)容，如圖：
狀態(tài)的提煉過程
1）整理每個單據(jù)的狀態(tài)，理清關(guān)系
結(jié)合業(yè)務(wù)流程可以很明顯的注意到，單據(jù)只有通過了審核才能收款，只有收款才能進(jìn)行核銷。狀態(tài)是一種遞進(jìn)關(guān)系（審核 ?? 收款 ?? 核銷）。
2）結(jié)合財務(wù)人員的工作流，提煉出單據(jù)的以下幾種狀態(tài)，之前存在到問題（表格中單行數(shù)據(jù)的操作不一致），也得到了完美的解決。如圖：
1）按鈕的表現(xiàn)形式
建議在復(fù)雜系統(tǒng)設(shè)計中使用圓角矩形的按鈕樣式。
理由如下：
a.人眼處理圓角更容易（認(rèn)知負(fù)荷說）
Jürg N?nni（Visual Perception的作者）表示，視網(wǎng)膜中區(qū)處理正圓形的時候是最快速的，而處理邊邊角角的時候則比較費力，大腦處理的速度也較慢。于是，長得圓潤的圓角矩形相較于一般矩形，對于使用者來說就容易接納許多。
Barrow Neurological Institute （巴羅神經(jīng)病學(xué)研究）的研究也顯示，一個物體的顯著度與邊角的角度呈線性變化，銳角相較于鈍角要顯得更明顯突出。換句話說，角度越尖銳，物體就看起來越明亮；而越明亮的物體就越難以直視。
如上圖所示角度越尖銳，看起來越顯眼，在視覺上也比較令人感到明亮，不適，大腦的認(rèn)知符合也越高。
b.使相似的內(nèi)容更容易被區(qū)別
舉個例子，如下圖所示，即便間距相同，B 排的圓角矩形辨識度還是明顯比A 排的矩形高。
這是為什么呢？
首先，第一眼看過去的時候，A 排的矩形整體是連在一起的，中間找不到斷點。而B 排矩形，因為有圓角的關(guān)系，所以斷點很明顯。
其次，兩種矩形的視覺聚焦：A 排由于直角的關(guān)系，視覺聚焦向外推，整體的效果比較發(fā)散。這會使得第一眼看過去的時候，容易分不清楚哪一條邊框?qū)儆谀囊粔K矩形。反之B 排因為圓角收攏的關(guān)系，視覺聚焦向中心推，區(qū)塊就比較容易區(qū)別開來。
綜上所示，圓角矩形是非常有效率的容器，在復(fù)雜場景業(yè)務(wù)中（存在很多種功能型按鈕），按鈕采用圓角矩形樣式最提效。
這里要注意，圓角不是越大越好
在相同面積中，按鈕的可操作區(qū)域隨著圓角的增大而遞減，因此在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。
同時在實際業(yè)務(wù)中，按鈕常常被當(dāng)作原子與下拉框聯(lián)動組成下拉菜單控件。如若使用半圓按鈕則無疑增加了下拉框的設(shè)計難度并且匹配起來也會略顯突兀。
2）批量操作按鈕的位置思考
來看個舉個例子（針對財務(wù)中臺批量操作的優(yōu)化方案）
現(xiàn)存問題
方案A 信息前置
批量操作按鈕全部展開不做折疊處理，信息前置來降低認(rèn)知成本，方便用戶記憶。
討論結(jié)果：對于復(fù)雜業(yè)務(wù)來說，會有很多批量操作功能，按鈕很多，造成頁面擁擠，進(jìn)而影響用戶操作體驗；一個位置出現(xiàn)2個主按鈕樣式，不推薦。
方案B 沉浸式操作體驗
對于一開始不可用的批量操作按鈕進(jìn)行隱藏，勾選激活狀態(tài)，顯示在篩選區(qū)。
討論結(jié)果：方案B的阻斷性強(qiáng) — 無法兼顧批量操作和數(shù)據(jù)篩選功能，無法滿足復(fù)雜系統(tǒng)的場景操作。
方案C 上內(nèi)容下操作，前2個方案的優(yōu)化
不做隱藏，類灰布置于底部。勾選觸發(fā)操作條件，未做勾選時，用戶點擊時給出引導(dǎo)操作提示
為什么選擇方案C？理由如下：
首先，根據(jù)古騰堡原則，用戶的在做表格操作的時候，視覺流是左做到右，從上到下，方案A和方案B的視覺落腳點在表格的上方，顯然是不符合眼動規(guī)律的。
其次，批量操作的功能屬于財務(wù)中臺的核心功能點，隱藏不是第一選擇，而是類置灰的特除處理（在按鈕旁給提示信息）
2.3表頭設(shè)計
表頭在能夠概括的情況下，盡量簡練、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來進(jìn)行減短簡化，以達(dá)到節(jié)省表格頭部空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。如果精簡后的生僻字段難以自我解釋，可以跟一個釋義標(biāo)識，鼠標(biāo)懸停時出現(xiàn)該字段的詳細(xì)解釋，同時滿足新手用戶、普通用戶以及專家用戶的需求。
在數(shù)據(jù)的對齊方式上，有以下3個建議：
a.文本左對齊
b.數(shù)字右對齊
c.表頭與信息內(nèi)容對齊方式一致
文本左對齊，符合正常的心智模型（閱讀習(xí)慣從左到右）；表頭與內(nèi)容對齊一致，則是為了簡化和降低視覺噪音，以便更好的獲取數(shù)據(jù)信息。數(shù)字右對齊，有利于數(shù)據(jù)間的對比。
要注意的一個細(xì)節(jié)，例如，當(dāng)列數(shù)＝2的時候，由于列與列直接的間距過大，導(dǎo)致兩者的關(guān)聯(lián)性較弱，如圖：
這時又該如何處理？
為了增強(qiáng)列與列之間的相關(guān)性，當(dāng)鼠標(biāo)hover在行的時候，產(chǎn)生高亮。這種方式可能不是最優(yōu)的，但目前只能想到這種方法，如果讀者有更好的想法歡迎留言。
2)數(shù)字的字體選擇
建議選用：Helvetica Neue、Helvetica、Arial、sans-serif.
蘋方在數(shù)字字符上，不同數(shù)字寬度不一致，導(dǎo)致千位分隔符不在一條線上。而Helvetica Neue數(shù)字等寬，千位分隔符有序的排列在一條線上。所以，選擇Helvetica Neue作為數(shù)字字體的首選字體。數(shù)值上下對比的時候，相同位置的數(shù)字在同一條豎線上，更加容易對比。
3)對操作項進(jìn)行“解耦”處理
在財務(wù)中臺系統(tǒng)中，常常由于權(quán)限的不同或者單據(jù)狀態(tài)不同這兩種原因，使得每行的數(shù)據(jù)擁有不同的操作項，如下圖所示：
存在的問題：
當(dāng)信息過載，操作項這個list非常長的話，頁面將會非常擁擠；
文字按鈕因為視覺特征比較明顯，造成了不必要的分散注意力；
誤操作率相對較高，同樣因為表格空間有限，當(dāng)操作區(qū)非?？拷?，很容易一不小心就點錯了。
針對這個問題所出的解決方案，如下：
方案A 下拉框樣式
討論結(jié)果：下拉框中可能存在不同操作，同樣避免不了誤操作這個問題。
方案B 錯位顯示
討論結(jié)果：首先，這樣的設(shè)計浪費大量的屏幕空間；其次，浪費開發(fā)工作量！因為在列表中實現(xiàn)一系列權(quán)限判斷和操作，在詳情界面中往往還需要再開發(fā)一次相同的權(quán)限判斷和操作；再次，不同單據(jù)可能存在操作順序不一樣，上下移動鼠標(biāo)會存在不同操作，用戶代價非常高。
方案C 以不變應(yīng)萬變
回歸『一個界面一個用戶任務(wù)』的原則，列表中的單行數(shù)據(jù)只保留[查看]或[管理]操作，所有其它的單獨操作都去往該單據(jù)的詳情界面完成。
討論結(jié)果：從開發(fā)的角度上看，此方案界面高度解耦，功能迭代方便，節(jié)約開發(fā)工作量；從認(rèn)知成本上看，列表界面操作高度一致性，利于養(yǎng)成用戶習(xí)慣；從操作效率上看，在詳情頁用戶會明顯確認(rèn)目標(biāo)單據(jù)，幾乎不會誤操作； 同時此方案節(jié)約了大量屏幕空間，更有利于用戶對信息的獲?。?
4)關(guān)于表格中套表格的解決方案
場景：在財務(wù)中臺中，有這樣一種用戶，需要對表格內(nèi)的數(shù)據(jù)進(jìn)行對比并編輯。
來看看之前的頁面：
這樣處理的不足點：
1.在查看和編輯信息時，無效的信息太多。降低了獲取信息的效率；
2.切換單條數(shù)據(jù)時，頁面出現(xiàn)跳動，無法快速檢索到相對應(yīng)的信息；
對此，在3.3.2版本中，我們對其做了相應(yīng)的優(yōu)化。運(yùn)用側(cè)視圖（快速視圖）的方式來呈現(xiàn)信息。一旦選擇一個單據(jù)，它就會從側(cè)面彈出的。
這個方案，它可以保持上下文，易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。同時信息呈現(xiàn)的地方是固定的，利于檢索，查找。
5)行高的制定方法
開始之前首先明確一下開發(fā)是怎么實現(xiàn)行高的。
從上圖可以看出，開發(fā)在實現(xiàn)設(shè)計稿時，通常是按照行高來寫的。
因此，表格行高=文字行高+上下間距。其中，文字行高可以設(shè)定為字號的1.2~1.8倍，上下間距可以設(shè)定為字號的1~1.5倍。
行高影響每行信息的易讀性。除了上述的做法外，還有以下2種做法，來保證各場景下獲取信息的效率與易讀性。
做法1：不同分辨率使用不同行高
設(shè)計兩套不同的行高，在大分辨率下顯示較高的行高，給數(shù)據(jù)間提供更多呼吸的空間；在小分辨率下顯示較小的行高，使一屏內(nèi)可以看到更多的行高。Gmail就是這樣設(shè)計的，如下圖所示：
做法2：自定義行高
自定義行高為興奮需求，可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設(shè)計設(shè)置行高的形式，可以放置在設(shè)置按鈕里，也可以在外部按鈕較少的情況下展示出來。
2.5底欄設(shè)計
最后是表格的底欄，底欄也是不可缺少的一部分，承載的作用主要是告訴用戶數(shù)據(jù)條數(shù)以及當(dāng)前位置。分頁的設(shè)計是根據(jù)不同的場景進(jìn)行選擇最優(yōu)的設(shè)計方案。在不需要定點跳轉(zhuǎn)的場景，建議建議刪除跳頁，刪除多于的功能，使頁面簡潔、清爽。
表格中經(jīng)常會出現(xiàn)空數(shù)據(jù)或無數(shù)據(jù)的情況，留白處理會給用戶造成一定的困惑和誤解，是系統(tǒng)沒有加載出來嗎？明智的做法，是無數(shù)據(jù)時用「-」來填充顯示，數(shù)據(jù)為零時與上下數(shù)據(jù)單位、小數(shù)點相同的0來顯示。
盡量減少視覺符號的使用，因為視覺符號可能會使你的用戶界面復(fù)雜，產(chǎn)生難以理解的內(nèi)容。去除不必要的視覺干擾，例如不必要的圖標(biāo)、無規(guī)律的色彩等。
當(dāng)列表中數(shù)據(jù)過長時，我們需要根據(jù)屏幕寬度調(diào)整列表展示方式，超過列表默認(rèn)寬度的內(nèi)容可以省略，通常用...表示，鼠標(biāo)移入后出現(xiàn)氣泡展示全部內(nèi)容。
位置：建議展示在上方，因為我們的閱讀順序是從上到下，鼠標(biāo)向下移動時不會被上面的氣泡遮擋住。氣泡面積不宜過大，根據(jù)屏幕尺寸控制在一定比例，一版不超過內(nèi)容區(qū)的四分之一，展示不下的內(nèi)容可以在氣泡中增加滾動條。
感謝閱讀！本文結(jié)合了實際項目經(jīng)驗對表格設(shè)計做了一次總結(jié)，在具體項目中，你可能需要根據(jù)產(chǎn)品特性和用戶需求進(jìn)行調(diào)整。如果你還有什么好的想法和建議，可以在評論里留言討論。
文章來源：站酷 作者：Hi_Nick
藍(lán)藍(lán)設(shè)計( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.cqzjtgb.com