數據表的用戶界面最佳設計:設計結構、交互模式、技術列表淺析

9 評論 29869 瀏覽 299 收藏 9 分鐘

好的用戶界面設計是基于人類的目標和行為。用戶界面反過來影響行為,設計決策也是基于此。

一個成功數據表的用戶界面設計所需的必備要素

沒有可視化和易操作的數據是無用的。未來行業的成功將是將先進數據集與更好的用戶體驗相結合,其數據表格包含了大部分用戶體驗。

好的數據表格允許用戶對信息進行掃描、分析、過濾、分類和操作,以獲取深刻見解和提交操作。本文介紹了設計結構、交互模式和技術列表,以便你更好的設計數據表。

固定頁眉

將行標題修改為用戶滾動條為用戶提供所在列的環境。

水平滾動

呈現大型數據集時,水平滾動是不可避免的。將標識符數據放在第一列中是個好動作習慣。作為高級功能,可以對列進行單獨鎖定,以便用戶將數據與多個錨定標識符進行比較。

可調整大小的列

調整列大小允許用戶查看完整的縮寫數據。

行風格

斑馬條紋,行分類,免費表格。

行風格幫助用戶掃描數據。通過刪除行線或斑馬條紋來減少視覺噪音對小數據集有效。解析較大的數據集時,用戶會在他們的位置走失。行分類會幫助用戶保持自己的位置。交替行(又名斑馬條紋)可幫助用戶在掃描長的水平數據集合時保持其自身的位置。因為少量的行會導致可用性問題,所以用戶會將其含義歸咎于突出的行。

顯示

較小的行高讓用戶無需滾動頁面就能查看到更多的數據。但可掃描性的效果導致視覺解析錯誤。這就是為什么許多成功的數據表設計包含了控制顯示密度的能力。

表格可視化總結

視覺數據的總結提供了附表的概述。它允許用戶在操作總結見解之前發現模式和問題的集合。

分頁

分頁通過在視圖中呈現出的一定數量的行數,且具有導航到另一行的能力。上述示例提供了每個視圖行數的自定義功能。這種模式經常被無限滾動所替代。隨著用戶滾動,無限滾動逐漸加載結果。無限滾動對于發現網站是很好,但對于優先化的應用程序往往是災難性的。

懸停操作

當提出額外的操作時,用戶懸??梢詼p少視覺雜亂。但它也可能導致可發現性問題,因為用戶需要以暴露操作與表格進行交互的呈現。

行內編輯

行內編輯允許用戶可以更改數據,而無需導航到單獨的信息視圖上。

展開行

展開行允許用戶評估附加信息,而不會迷失其所在頁面。

快速瀏覽

與展開行類似,快速瀏覽可讓用戶在其頁面查看其他信息。

模態

模態允許用戶留在表格視圖中,且更多地關注附加信息和操作。

多模態

多模態功能對于主動使用的用戶來說很有用,他可以通過一系列操作,比較不同項目的細節。

行細節

單擊行鏈接將表格轉換為左側的列表項目視圖和右側的其他詳細信息。這讓用戶能夠解析大型數據集,而且在涉及到許多項目時也不會丟失它們的位置。

列的排序

用戶按字母順序和數字進行列的排序。

基本過濾

基本過濾允許用戶操縱表中提供的數據。

篩選列

此設計模式允許用戶將過濾參數分配給特定列。

搜索列

此設計模式允許用戶搜索每列內的特定值。

添加列

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

自定義列

自定義列的讓用戶可以自由選擇要查看的列,并對其進行相應排序。該功能包括保留預設以備以后使用的功能。

表格的重要性

數據正在成為全球經濟的原材料。數據推動了傳統行業的革新。能源、媒體、制造業、物流業、保健業、零售業、金融業甚至政府正在進行數字化轉型。

但是,如果沒有可視化和易操作的能力,數據也是沒有意義的。在未來十年中幸存的公司不僅會擁有卓越的數據,還將擁有卓越的用戶體驗。

好的用戶界面設計是基于人類的目標和行為。用戶界面反過來影響行為,設計決策也是基于此。以微妙和無意識的方式,用戶體驗改變人類的如何去做決定、會看到的是什么、在哪里呈現、以及如何交互,影響操作。重要的是我們做出的設計決策,將會導致一個更美好的世界。

 

譯者:SKYUI

原文作者:Andrew Coyle

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

本文由 @SKYUI 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 你好,這句話,我不是很理解 “無限滾動對于發現網站是很好,但對于優先化的應用程序往往是災難性的?!蹦茉俸唵握f說嗎

    來自廣東 回復
  2. 寫的很好,簡單易懂

    來自上海 回復
  3. 棒,收藏

    來自上海 回復
  4. 寫的真好,圖文并茂~

    來自北京 回復
  5. 太棒了

    來自四川 回復
  6. 要是能把展開行,快速瀏覽,模態三個仔細區分一下就好了作者

    回復
  7. 非常有用~

    來自北京 回復
  8. :mrgreen:

    來自廣東 回復
  9. 剛好在做后臺,mark一下

    來自廣東 回復