表格是桌面應(yīng)用中常見(jiàn)的內(nèi)容型組件，它包含大量的信息和豐富的交互形式，表格具有極高的空間利用率，結(jié)構(gòu)化的展示保證了數(shù)據(jù)可讀性。高效、清晰且易用是進(jìn)行表格設(shè)計(jì)的原則性要求。本文將從表格的內(nèi)容組織到交互作一次匯總，作為數(shù)據(jù)類(lèi)產(chǎn)品的設(shè)計(jì)總結(jié)。

初次設(shè)計(jì)數(shù)據(jù)表格，建議閱讀 Material Design 關(guān)于 Data Tables 的內(nèi)容，包含了對(duì)表格設(shè)計(jì)基礎(chǔ)而全面的指導(dǎo)。

Data tables?material.io

1 系統(tǒng)化表格需求

我們?cè)谶x擇信息的展示形式時(shí)，需要思考的是「用戶的需求」以及「不同交互模式的特點(diǎn)」。

除卻基本表格組織，根據(jù)用戶需求，表格需要增加一些額外的功能，例如標(biāo)記預(yù)警/異常值（常見(jiàn)于數(shù)據(jù)監(jiān)測(cè)系統(tǒng)）、展現(xiàn)數(shù)據(jù)變化趨勢(shì)的圖標(biāo)（快速理解數(shù)據(jù)意義）等。

結(jié)合數(shù)據(jù)特征，我們可以梳理出一份包含數(shù)據(jù)內(nèi)容、展現(xiàn)形式和交互的功能架構(gòu)圖，便于指導(dǎo)表格設(shè)計(jì)和開(kāi)發(fā)。

譯自參考鏈接1 有刪改

2 信息組織

2.1 行

• 固定標(biāo)題行

保證在垂直滾動(dòng)時(shí)，能夠及時(shí)獲取數(shù)據(jù)的指標(biāo)含義。

• 合理使用斑馬紋

斑馬紋強(qiáng)化了水平分割線的功能，特別在寬表格/行樣式復(fù)雜中，能夠引導(dǎo)閱讀視線，現(xiàn)今辦公軟件中的默認(rèn)表格樣式也依舊采用了斑馬紋。但在大型結(jié)構(gòu)化數(shù)據(jù)集中，斑馬紋帶來(lái)了額外的視覺(jué)負(fù)擔(dān)，且會(huì)與單元格背景色沖突。需要按照?qǐng)鼍皺?quán)衡是否使用斑馬紋。

斑馬紋表格 VS 水平分割線表格

• 淺色分割線

分割線可以在更小縱向空間內(nèi)將數(shù)據(jù)分隔開(kāi)，需要注意分割線色值，防止干擾數(shù)據(jù)閱讀并造成版面視覺(jué)過(guò)重。

各大設(shè)計(jì)規(guī)范分割線色值

• 減少重復(fù)的元素

常出現(xiàn)在數(shù)據(jù)單位和操作文案上，為了保證清晰簡(jiǎn)潔，設(shè)計(jì)時(shí)考慮調(diào)整重復(fù)樣式和精簡(jiǎn)交互文案。

2.2 列

• 「F型」 布局

在左→右閱讀習(xí)慣中，將數(shù)據(jù)維度按照重要性高低從左至右排列，遵循「F型」布局方便瀏覽時(shí)快速定位重要指標(biāo)。

• 固定列

首列（或多列）一般為樣本身份標(biāo)志（例如名稱(chēng)、ID號(hào)），與固定首行相似，能夠方便用戶對(duì)應(yīng)樣本名稱(chēng)，理解數(shù)據(jù)含義（特別在存在水平滾動(dòng)條時(shí)）。 可以使用陰影樣式和水平滾動(dòng)條作為視覺(jué)線索。

• 列分割線

當(dāng)表格的表頭和內(nèi)容整潔對(duì)齊時(shí)，表格自然形成視覺(jué)秩序，合適的間距可以取代縱向分割線。相對(duì)地，當(dāng)表格水平空間較小或是有著復(fù)雜表頭時(shí)，縱向分割線可以幫助數(shù)據(jù)識(shí)別。

• 對(duì)齊方式

定性內(nèi)容左對(duì)齊，定量?jī)?nèi)容數(shù)位對(duì)齊，表頭應(yīng)用該列對(duì)齊方式。在表格中使用無(wú)襯線字體減少視覺(jué)噪音；涉及數(shù)字時(shí)，注意使用表格字體（或等寬字體），保證數(shù)位對(duì)齊，能更方便閱讀數(shù)字和比較大小。

免費(fèi)數(shù)字字體?blog.graphiq.com

對(duì)齊方式

• 可調(diào)節(jié)的列寬

當(dāng)表格指標(biāo)過(guò)多或內(nèi)容過(guò)長(zhǎng)時(shí)，我們會(huì)使用水平滾動(dòng)條對(duì)實(shí)現(xiàn)信息隱藏。也可以通過(guò)可調(diào)節(jié)的列寬，在一屏寬中展示更多的數(shù)據(jù)指標(biāo)指標(biāo)。設(shè)置最小列寬時(shí)，以能顯示可辨識(shí)的指標(biāo)內(nèi)容的最小寬度為依據(jù)，當(dāng)指標(biāo)文本過(guò)長(zhǎng)時(shí)，設(shè)計(jì)為兩行顯示或懸停顯示完整信息。

懸停顯示完整信息

3 表格交互

• 篩選

篩選功能能夠根據(jù)用戶需要減少展示數(shù)據(jù)，一般分為搜索和條件兩種篩選方式。篩選區(qū)塊設(shè)置在表格頂部，內(nèi)容過(guò)多時(shí)可以收起。

• 排序

可以根據(jù)某個(gè)指標(biāo)維度對(duì)表格樣本進(jìn)行重新排序。排序按鈕一般設(shè)置在指標(biāo)名旁，在設(shè)計(jì)時(shí)，需要注意可點(diǎn)擊范圍。

可點(diǎn)擊范圍

• 批量操作

當(dāng)多行數(shù)據(jù)需要進(jìn)行同一個(gè)操作時(shí)，設(shè)計(jì)表格時(shí)可以歸置為批量操作。

模態(tài)批量操作 ：當(dāng)表格數(shù)據(jù)不全部滿足批量操作觸發(fā)條件時(shí)，可以使用模態(tài)批量操作。在點(diǎn)擊批量操作按鈕后，顯示多選框，不符合條件的數(shù)據(jù)處于禁用狀態(tài)，選擇后「確定」實(shí)現(xiàn)批量操作。

• 內(nèi)聯(lián)操作

內(nèi)聯(lián)操作即直接在單元格內(nèi)進(jìn)行編輯等操作，用戶可以通過(guò)雙擊單元格，或是點(diǎn)擊鼠標(biāo)懸停后出現(xiàn)的功能按鈕完成操作。

• 分頁(yè)器

表格加載有分頁(yè)加載和漸進(jìn)加載兩種方式。使用分頁(yè)加載能夠?qū)崿F(xiàn)數(shù)據(jù)（頁(yè)面）直接跳轉(zhuǎn)，而不用依次加載全部數(shù)據(jù)。當(dāng)表格高度超過(guò)一屏?xí)r，可以在表格上方和下方都設(shè)置分頁(yè)器，實(shí)現(xiàn)靈活瀏覽。

---

文章列舉了目前設(shè)計(jì)工作中常見(jiàn)的表格設(shè)計(jì)點(diǎn)，除此之外還有許多需要優(yōu)化和權(quán)衡之處，例如鍵盤(pán)支持功能的優(yōu)化，Web 端表格的右鍵菜單等。在持續(xù)積累之外，也歡迎各位的討論。

參考鏈接

Slava Shestopalov, How to Design Large and Complex Web Tables, Medium Muz

Jeremiah Lam, 11 data table design guidelines, uxdesign.cc

Matthew Str?m, Design Better Data Tables, Medium

Qubstudio, Data Tables Design Basics, Design Nation

Page Laubheimer, Designing Tables for Desktop Apps with Lots of Data, NNgroup

總結(jié)

以上是生活随笔為你收集整理的JS 打印 data数据_数据表格 Data Table - 复杂内容的15个设计点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。