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

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

Data tables?material.io

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

我們在選擇信息的展示形式時，需要思考的是「用戶的需求」以及「不同交互模式的特點」。

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

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

譯自參考鏈接1 有刪改

2 信息組織

2.1 行

• 固定標(biāo)題行

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

• 合理使用斑馬紋

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

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

• 淺色分割線

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

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

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

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

2.2 列

• 「F型」 布局

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

• 固定列

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

• 列分割線

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

• 對齊方式

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

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

對齊方式

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

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

懸停顯示完整信息

3 表格交互

• 篩選

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

• 排序

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

可點擊范圍

• 批量操作

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

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

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

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

• 分頁器

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

---

文章列舉了目前設(shè)計工作中常見的表格設(shè)計點，除此之外還有許多需要優(yōu)化和權(quá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个设计点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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