好的用戶界面設(shè)計(jì)是基于人類的目標(biāo)和行為。用戶界面反過(guò)來(lái)影響行為，設(shè)計(jì)決策也是基于此。

一個(gè)成功數(shù)據(jù)表的用戶界面設(shè)計(jì)所需的必備要素

沒(méi)有可視化和易操作的數(shù)據(jù)是無(wú)用的。未來(lái)行業(yè)的成功將是將先進(jìn)數(shù)據(jù)集與更好的用戶體驗(yàn)相結(jié)合，其數(shù)據(jù)表格包含了大部分用戶體驗(yàn)。

好的數(shù)據(jù)表格允許用戶對(duì)信息進(jìn)行掃描、分析、過(guò)濾、分類和操作，以獲取深刻見(jiàn)解和提交操作。本文介紹了設(shè)計(jì)結(jié)構(gòu)、交互模式和技術(shù)列表，以便你更好的設(shè)計(jì)數(shù)據(jù)表。

固定頁(yè)眉

將行標(biāo)題修改為用戶滾動(dòng)條為用戶提供所在列的環(huán)境。

水平滾動(dòng)

呈現(xiàn)大型數(shù)據(jù)集時(shí)，水平滾動(dòng)是不可避免的。將標(biāo)識(shí)符數(shù)據(jù)放在第一列中是個(gè)好動(dòng)作習(xí)慣。作為高級(jí)功能，可以對(duì)列進(jìn)行單獨(dú)鎖定，以便用戶將數(shù)據(jù)與多個(gè)錨定標(biāo)識(shí)符進(jìn)行比較。

可調(diào)整大小的列

調(diào)整列大小允許用戶查看完整的縮寫數(shù)據(jù)。

行風(fēng)格

斑馬條紋，行分類，免費(fèi)表格。

行風(fēng)格幫助用戶掃描數(shù)據(jù)。通過(guò)刪除行線或斑馬條紋來(lái)減少視覺(jué)噪音對(duì)小數(shù)據(jù)集有效。解析較大的數(shù)據(jù)集時(shí)，用戶會(huì)在他們的位置走失。行分類會(huì)幫助用戶保持自己的位置。交替行（又名斑馬條紋）可幫助用戶在掃描長(zhǎng)的水平數(shù)據(jù)集合時(shí)保持其自身的位置。因?yàn)樯倭康男袝?huì)導(dǎo)致可用性問(wèn)題，所以用戶會(huì)將其含義歸咎于突出的行。

顯示

較小的行高讓用戶無(wú)需滾動(dòng)頁(yè)面就能查看到更多的數(shù)據(jù)。但可掃描性的效果導(dǎo)致視覺(jué)解析錯(cuò)誤。這就是為什么許多成功的數(shù)據(jù)表設(shè)計(jì)包含了控制顯示密度的能力。

表格可視化總結(jié)

視覺(jué)數(shù)據(jù)的總結(jié)提供了附表的概述。它允許用戶在操作總結(jié)見(jiàn)解之前發(fā)現(xiàn)模式和問(wèn)題的集合。

分頁(yè)

分頁(yè)通過(guò)在視圖中呈現(xiàn)出的一定數(shù)量的行數(shù)，且具有導(dǎo)航到另一行的能力。上述示例提供了每個(gè)視圖行數(shù)的自定義功能。這種模式經(jīng)常被無(wú)限滾動(dòng)所替代。隨著用戶滾動(dòng)，無(wú)限滾動(dòng)逐漸加載結(jié)果。無(wú)限滾動(dòng)對(duì)于發(fā)現(xiàn)網(wǎng)站是很好，但對(duì)于優(yōu)先化的應(yīng)用程序往往是災(zāi)難性的。

懸停操作

當(dāng)提出額外的操作時(shí)，用戶懸?？梢詼p少視覺(jué)雜亂。但它也可能導(dǎo)致可發(fā)現(xiàn)性問(wèn)題，因?yàn)橛脩粜枰员┞恫僮髋c表格進(jìn)行交互的呈現(xiàn)。

行內(nèi)編輯

行內(nèi)編輯允許用戶可以更改數(shù)據(jù)，而無(wú)需導(dǎo)航到單獨(dú)的信息視圖上。

展開(kāi)行

展開(kāi)行允許用戶評(píng)估附加信息，而不會(huì)迷失其所在頁(yè)面。

快速瀏覽

與展開(kāi)行類似，快速瀏覽可讓用戶在其頁(yè)面查看其他信息。

模態(tài)

模態(tài)允許用戶留在表格視圖中，且更多地關(guān)注附加信息和操作。

多模態(tài)

多模態(tài)功能對(duì)于主動(dòng)使用的用戶來(lái)說(shuō)很有用，他可以通過(guò)一系列操作，比較不同項(xiàng)目的細(xì)節(jié)。

行細(xì)節(jié)

單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目視圖和右側(cè)的其他詳細(xì)信息。這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到許多項(xiàng)目時(shí)也不會(huì)丟失它們的位置。

列的排序

用戶按字母順序和數(shù)字進(jìn)行列的排序。

基本過(guò)濾

基本過(guò)濾允許用戶操縱表中提供的數(shù)據(jù)。

篩選列

此設(shè)計(jì)模式允許用戶將過(guò)濾參數(shù)分配給特定列。

搜索列

此設(shè)計(jì)模式允許用戶搜索每列內(nèi)的特定值。

添加列

此模式允許用戶從數(shù)據(jù)集中添加列。這是一種將表格的數(shù)據(jù)限制為基本信息的方法，并允許用戶給予他們的案例來(lái)添加其他列。

自定義列

自定義列的讓用戶可以自由選擇要查看的列，并對(duì)其進(jìn)行相應(yīng)排序。該功能包括保留預(yù)設(shè)以備以后使用的功能。

表格的重要性

數(shù)據(jù)正在成為全球經(jīng)濟(jì)的原材料。數(shù)據(jù)推動(dòng)了傳統(tǒng)行業(yè)的革新。能源、媒體、制造業(yè)、物流業(yè)、保健業(yè)、零售業(yè)、金融業(yè)甚至政府正在進(jìn)行數(shù)字化轉(zhuǎn)型。

但是，如果沒(méi)有可視化和易操作的能力，數(shù)據(jù)也是沒(méi)有意義的。在未來(lái)十年中幸存的公司不僅會(huì)擁有卓越的數(shù)據(jù)，還將擁有卓越的用戶體驗(yàn)。

好的用戶界面設(shè)計(jì)是基于人類的目標(biāo)和行為。用戶界面反過(guò)來(lái)影響行為，設(shè)計(jì)決策也是基于此。以微妙和無(wú)意識(shí)的方式，用戶體驗(yàn)改變?nèi)祟惖娜绾稳プ鰶Q定、會(huì)看到的是什么、在哪里呈現(xiàn)、以及如何交互，影響操作。重要的是我們做出的設(shè)計(jì)決策，將會(huì)導(dǎo)致一個(gè)更美好的世界。

譯者：SKYUI

原文作者：Andrew Coyle

原文地址：https://uxdesign.cc/design-better-data-tables-4ecc99d23356

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。