譯文 | 設計更好的數(shù)據(jù)表格

不具備可視化和可操作性的數(shù)據(jù)是毫無用處的衣陶,未來技術的成功將使高級數(shù)據(jù)收集與更好的用戶體驗相結合溶浴,數(shù)據(jù)表格應該結合更多的用戶體驗。

良好的數(shù)據(jù)表格允許用戶對信息進行掃描蔬芥,分析,比較控汉,過濾笔诵,排序和操作,操作信息得出結論和提交操作姑子。 本文介紹了一系列的設計結構乎婿,交互模式和技術,以幫助你設計更好的數(shù)據(jù)表格街佑。

固定表頭

固定的表頭為幫助用戶在滾動時清楚所在列的屬性

水平滾動

當需要呈現(xiàn)一個大的數(shù)據(jù)集時谢翎,水平滾動時必然的。將標識數(shù)據(jù)放在第一列中是個好習慣沐旨,而作為高級功能森逮,可以對列進行單獨鎖定,以便用戶將數(shù)據(jù)與多個錨定數(shù)據(jù)列進行比較磁携。

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

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

行風格——斑馬線,線條分割,自由形式

行風格幫助用戶瀏覽數(shù)據(jù)璃搜。對于小的數(shù)據(jù)集拖吼,可以刪除分割線或者斑馬線來減少視覺干擾;但是數(shù)據(jù)較多時这吻,用戶則會容易迷失位置吊档。使用線條分割可以讓用戶記住自己閱讀的位置,而當用戶瀏覽較長的水平數(shù)據(jù)時唾糯,斑馬線可以使用戶記住自己的位置怠硼。

顯示密度

較小的行高可以讓用戶不用滾動就可以瀏覽更多的數(shù)據(jù),然而這種可掃描的模式會導致視覺的解析偏差移怯。這就是為什么優(yōu)秀的表格設計會有可以控制列表密度的控件香璃。

可視化的圖表匯總

可視化的圖表匯總提供了附表的概述。它允許用戶在操作之前識別模式舟误,了解主要問題葡秒。

分頁

分頁通過在視圖中呈現(xiàn)設置的行數(shù),具有導航到另一數(shù)據(jù)集的能力嵌溢。 上述示例提供了自定義每個視圖的行數(shù)的功能眯牧, 這種模式經(jīng)常被無限滾動所取代。 隨著用戶滾動赖草,無限滾動逐漸加載結果学少。 無限滾動對于瀏覽性網(wǎng)站很好,但對于數(shù)據(jù)優(yōu)先的應用程序通常是災難性的

懸停操作

當用戶懸停時出現(xiàn)額外的操作可以減少視覺混亂秧骑。然而版确,它可能導致可見性的問題,因為用戶需要與表格進行交互以才會呈現(xiàn)操作

行內(nèi)編輯

行內(nèi)編輯允許用戶不用跳轉到單獨的詳情頁乎折,就可以改變數(shù)據(jù)绒疗。

可展開的行

可展開的行允許用戶查看附加的信息,而不用離開當前場景笆檀。

快速瀏覽

和展開的行有同樣的功能忌堂,快速瀏覽模式可以讓用戶不離開當前場景就查看更多附加內(nèi)容

彈窗模式

模態(tài)的彈窗允許用戶留在列表視圖中盒至,同時把注意力聚焦在附加信息和操作上酗洒。

多窗口模式

多窗口模式對主動用戶來說很有用,可以進行多個操作或者對條目的信息進行對比

行到詳情

單擊行內(nèi)鏈接將表格轉換為左側為列表項目視圖枷遂,右側為附加詳細信息的視圖樱衷。它使用戶能夠解析大型數(shù)據(jù)列表,查看多個項目而不會丟失用戶的視覺位置

可排序的列

列排序允許用戶按字母順序和數(shù)字排序

基本篩選

基本篩選允許用戶操做表中提供的數(shù)據(jù)

篩選列

此設計模式允許用戶將篩選參數(shù)分配給特定列

可搜索列

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

增加列

此模式允許用戶在數(shù)據(jù)集中添加列酒唉。這種方法將表格數(shù)據(jù)限制在必要的信息下矩桂,并且允許用戶根據(jù)自身需要增加額外的列

定制列

可定制的列功能使用戶可以選擇要查看的列,并進行相應排序痪伦。該功能應該包括保存預設功能以備用戶以后使用

為什么表格很重要侄榴?

數(shù)據(jù)正在成為全球經(jīng)濟的原始材料雹锣,數(shù)據(jù)的興起推進著傳統(tǒng)行業(yè)的革新。能源癞蚕,媒體蕊爵,制造業(yè),物流桦山,醫(yī)療攒射,零售,金融乃至政府都在進行數(shù)據(jù)轉型恒水。

然而会放,如果沒有可視化和可操作的能力,數(shù)據(jù)將毫無意義钉凌。在未來十年生存下去的企業(yè)不僅要有優(yōu)越的數(shù)據(jù)咧最,也應該擁有優(yōu)越的用戶體驗。

好的用戶界面設計應該建立在人類的目標和行為之上御雕,用戶界面反過來影響行為窗市,進一步為設計建立依據(jù)。以微妙和無意識的方式饮笛,用戶體驗改變?nèi)祟惾绾巫鞒鰶Q定咨察。看到什么福青,在哪里呈現(xiàn)摄狱,以及如何交互,都影響著行為无午。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末媒役,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宪迟,更是在濱河造成了極大的恐慌酣衷,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件次泽,死亡現(xiàn)場離奇詭異穿仪,居然都是意外死亡,警方通過查閱死者的電腦和手機意荤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門啊片,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人玖像,你說我怎么就攤上這事紫谷。” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵笤昨,是天一觀的道長祖驱。 經(jīng)常有香客問我,道長瞒窒,這世上最難降的妖魔是什么羹膳? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮根竿,結果婚禮上陵像,老公的妹妹穿的比我還像新娘。我一直安慰自己寇壳,他們只是感情好醒颖,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著壳炎,像睡著了一般泞歉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上匿辩,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天腰耙,我揣著相機與錄音,去河邊找鬼铲球。 笑死挺庞,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的稼病。 我是一名探鬼主播选侨,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼然走!你這毒婦竟也來了援制?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤芍瑞,失蹤者是張志新(化名)和其女友劉穎晨仑,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拆檬,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡洪己,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了秩仆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片码泛。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡猾封,死狀恐怖澄耍,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤齐莲,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布痢站,位于F島的核電站,受9級特大地震影響选酗,放射性物質發(fā)生泄漏阵难。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一芒填、第九天 我趴在偏房一處隱蔽的房頂上張望呜叫。 院中可真熱鬧,春花似錦殿衰、人聲如沸朱庆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽娱颊。三九已至,卻和暖如春凯砍,著一層夾襖步出監(jiān)牢的瞬間箱硕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工悟衩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留剧罩,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓座泳,卻偏偏與公主長得像斑响,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子钳榨,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容