表格和網(wǎng)格一直是產(chǎn)品和后臺(tái)面板的重要UI組件。然而，即使到了今天，也很容易找出設(shè)計(jì)不當(dāng)或用戶體驗(yàn)不好的數(shù)據(jù)表。

 

今天我們邀請(qǐng)了 Gil Bouhnick ，來(lái)跟大家一起聊一聊「如何設(shè)計(jì)出一個(gè)可觀的數(shù)據(jù)表」。

 

接下來(lái)，就進(jìn)入正題吧～

 

我使用過(guò) 30 多種 SaaS 工具和 SDK ，經(jīng)常用它們的后臺(tái)面板看數(shù)據(jù)，觀察到了一些問(wèn)題并做了反饋。實(shí)話說(shuō)，它們?cè)赨I設(shè)計(jì)和基本功能上，對(duì)表格的展現(xiàn)形式還挺糟糕的（雖然它們都是很好的Saas產(chǎn)品）。

鑒于我開(kāi)發(fā)使用表格 20 年的經(jīng)驗(yàn)，決定為大家來(lái)總結(jié)一下最基本的處理表格的UI / UX規(guī)則了。

 

本文將從功能、UI設(shè)計(jì)和美觀性，這三個(gè)方面來(lái)闡述。

數(shù)據(jù)表設(shè)計(jì)之功能

1.從排序和篩選開(kāi)始： 

是的，我也知道排序和篩選很煩人，我也討厭他們，但必須先說(shuō)它們。除非你打算做一個(gè)不到十條記錄或者類似情況的精美表格。

 

排序和篩選不僅是可用性或易用性的功能，更是摘要數(shù)據(jù)的關(guān)鍵：了解趨勢(shì)，比較記錄，查找特定值，沒(méi)有排序和篩選就無(wú)法完成這些工作。

 

如果添加基于列的篩選（如日期，布爾值，字符串等元數(shù)據(jù)）成本太高，那么可以從更基本的內(nèi)容開(kāi)始篩選，例如現(xiàn)代搜索框或一些常用的硬編碼。

2.確保列的大小可調(diào)整

這是一種查看信息的方法，無(wú)需深入研究每條記錄。

 

不管你的列寬有多大，也不要將列表固定住，因?yàn)橛袝r(shí)候用戶需要進(jìn)一步擴(kuò)展。

             

3.允許列重新排序 

對(duì)于大型表格，不能一種大小適用于所有情況。

通過(guò)重新排序列，用戶可以設(shè)置符合它們特定需求的表格。這個(gè)相對(duì)小的功能可以減少混亂，并節(jié)省一些來(lái)回滾動(dòng)。

 

這時(shí)，列的名稱體現(xiàn)了大量信息。重新排序列能夠使用戶可以專注于特定區(qū)域并理解小塊信息。

 

4.內(nèi)聯(lián)的編輯

有許多用于編輯單元格的UI解決方案：內(nèi)聯(lián)框，彈出窗口，可擴(kuò)展節(jié)等。

 

我不認(rèn)為上面的方案是最佳的，因?yàn)樗蕾囉诠δ?、?shù)據(jù)類型、使用案例。從用戶角度出發(fā)，我最喜歡的方案是側(cè)視圖（快速視圖）。

 

一旦選擇一個(gè)項(xiàng)目，它就會(huì)從側(cè)面彈出的方法。

這個(gè)方案，我最喜歡的是它可以保持上下文（與彈出窗口不同），易于使用，即使是在垂直滾動(dòng)視圖中顯示大量字段的情況下也效果良好。

數(shù)據(jù)表設(shè)計(jì)之交互設(shè)計(jì)

 

5.小屏幕設(shè)計(jì)

當(dāng)然，大顯示器看表格，設(shè)計(jì)和開(kāi)發(fā)都會(huì)很爽，但是還是有人在用筆記本電腦或iPad！他們又做錯(cuò)了什么！/手動(dòng)狗頭

 

不停的滾動(dòng)、縮小的列、隱藏的文本，這些都會(huì)干擾用戶體驗(yàn)，所以一定要在小屏幕上驗(yàn)證你的設(shè)計(jì)，并且盡可能使用上一段時(shí)間去切實(shí)體驗(yàn)用戶使用情況（而不是隨意測(cè)試）。

 

如果確實(shí)很糟糕，你可能需要在解決問(wèn)題上發(fā)揮自主創(chuàng)造力，不過(guò)前提是你很了解它。

 

6.彩色交替行 

使用大型數(shù)據(jù)表時(shí)，很容易丟失。

 

斑馬紋的表格可以幫助用戶保持其位置，但是彩色的行必須非常淺，否則會(huì)引起誤導(dǎo)，看起來(lái)像選定的行。

使用淺色時(shí)，應(yīng)該將所有內(nèi)容設(shè)置為淺灰色，避免使用黑色線條和深色邊框。

 

7.使用固定表頭和“凍結(jié)”列錨定一些標(biāo)識(shí)符

 

我認(rèn)為在任何屏幕上顯示大量數(shù)據(jù)時(shí)，表格都應(yīng)該能正常瀏覽。

 

要瀏覽數(shù)據(jù)，用戶就需要經(jīng)常滾動(dòng)，這意味著需要一些錨點(diǎn)來(lái)輔助：

 

• 向下滾動(dòng)時(shí)，列標(biāo)題必須固定（這是最基本的）

• 第一列應(yīng)該被鎖定（MS Excel和Google Sheets稱其為“凍結(jié)”），因?yàn)?，?dāng)你水平滾動(dòng)時(shí)，需要該行聯(lián)系上下文。 

• 一個(gè)全行選擇選項(xiàng)，用于在水平滾動(dòng)時(shí)標(biāo)記重要行。

8.設(shè)置固定的行高

表格和網(wǎng)格是體現(xiàn)結(jié)構(gòu)化信息的，但是，當(dāng)表格的列寬、行高不同時(shí)，就會(huì)變得混亂，信息也就會(huì)變得沒(méi)有體系。

 

因此，為了整體的可用性和美觀性，我覺(jué)得不管內(nèi)容如何，所有行都應(yīng)具有完全相同的高度。

為了更好地支持多行文本塊，請(qǐng)考慮以下事項(xiàng)：

• 用換行替換為空格，并將整個(gè)文本變成一行（通過(guò)調(diào)整列寬的大小）

• 將（所有行的）行高設(shè)置為2行而不是1行（可以解決某些情況）

• 使用工具提示（可以用，但是最好不要用）

• 通過(guò)單擊行來(lái)展開(kāi)/折疊（剛需）

• 采用浮動(dòng)側(cè)視圖顯示所選行的詳細(xì)信息。

數(shù)據(jù)表設(shè)計(jì)之UI

美學(xué)設(shè)計(jì)可以帶來(lái)更好的使用感。

 

以下是通過(guò)簡(jiǎn)單的UI設(shè)計(jì)修改來(lái)消除雜亂并提高內(nèi)容可讀性的幾種方法：

9.增加單元格填充 

使用空格。

 

加載信息的表，正是用戶想要看到更多空白的地方，即使這會(huì)花費(fèi)他們一些額外的滾動(dòng)時(shí)間。         

10.消除不必要的邊框

一旦數(shù)據(jù)結(jié)構(gòu)良好并且留有空白，就該擺脫那些多余的邊框，或者讓邊框線條變得超細(xì)且顏色淺。

 

文章來(lái)源：優(yōu)設(shè)網(wǎng)    推薦：墨刀_MockingBot

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)