译文 | 设计更好的数据表格

不具备可视化和可操作性的数据是毫无用处的,未来技术的成功将使高级数据收集与更好的用户体验相结合,数据表格应该结合更多的用户体验。

良好的数据表格允许用户对信息进行扫描,分析,比较,过滤,排序和操作,操作信息得出结论和提交操作。 本文介绍了一系列的设计结构,交互模式和技术,以帮助你设计更好的数据表格。

固定表头

固定的表头为帮助用户在滚动时清楚所在列的属性

水平滚动

当需要呈现一个大的数据集时,水平滚动时必然的。将标识数据放在第一列中是个好习惯,而作为高级功能,可以对列进行单独锁定,以便用户将数据与多个锚定数据列进行比较。

可调整大小的列宽

调整列大小允许用户查看完整的缩写数据。

行风格——斑马线,线条分割,自由形式

行风格帮助用户浏览数据。对于小的数据集,可以删除分割线或者斑马线来减少视觉干扰;但是数据较多时,用户则会容易迷失位置。使用线条分割可以让用户记住自己阅读的位置,而当用户浏览较长的水平数据时,斑马线可以使用户记住自己的位置。

显示密度

较小的行高可以让用户不用滚动就可以浏览更多的数据,然而这种可扫描的模式会导致视觉的解析偏差。这就是为什么优秀的表格设计会有可以控制列表密度的控件。

可视化的图表汇总

可视化的图表汇总提供了附表的概述。它允许用户在操作之前识别模式,了解主要问题。

分页

分页通过在视图中呈现设置的行数,具有导航到另一数据集的能力。 上述示例提供了自定义每个视图的行数的功能, 这种模式经常被无限滚动所取代。 随着用户滚动,无限滚动逐渐加载结果。 无限滚动对于浏览性网站很好,但对于数据优先的应用程序通常是灾难性的

悬停操作

当用户悬停时出现额外的操作可以减少视觉混乱。然而,它可能导致可见性的问题,因为用户需要与表格进行交互以才会呈现操作

行内编辑

行内编辑允许用户不用跳转到单独的详情页,就可以改变数据。

可展开的行

可展开的行允许用户查看附加的信息,而不用离开当前场景。

快速浏览

和展开的行有同样的功能,快速浏览模式可以让用户不离开当前场景就查看更多附加内容

弹窗模式

模态的弹窗允许用户留在列表视图中,同时把注意力聚焦在附加信息和操作上。

多窗口模式

多窗口模式对主动用户来说很有用,可以进行多个操作或者对条目的信息进行对比

行到详情

单击行内链接将表格转换为左侧为列表项目视图,右侧为附加详细信息的视图。它使用户能够解析大型数据列表,查看多个项目而不会丢失用户的视觉位置

可排序的列

列排序允许用户按字母顺序和数字排序

基本筛选

基本筛选允许用户操做表中提供的数据

筛选列

此设计模式允许用户将筛选参数分配给特定列

可搜索列

此设计模式允许用户搜索每列内的特定值

增加列

此模式允许用户在数据集中添加列。这种方法将表格数据限制在必要的信息下,并且允许用户根据自身需要增加额外的列

定制列

可定制的列功能使用户可以选择要查看的列,并进行相应排序。该功能应该包括保存预设功能以备用户以后使用

为什么表格很重要?

数据正在成为全球经济的原始材料,数据的兴起推进着传统行业的革新。能源,媒体,制造业,物流,医疗,零售,金融乃至政府都在进行数据转型。

然而,如果没有可视化和可操作的能力,数据将毫无意义。在未来十年生存下去的企业不仅要有优越的数据,也应该拥有优越的用户体验。

好的用户界面设计应该建立在人类的目标和行为之上,用户界面反过来影响行为,进一步为设计建立依据。以微妙和无意识的方式,用户体验改变人类如何作出决定。看到什么,在哪里呈现,以及如何交互,都影响着行为。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容