美文网首页@产品@IT·互联网0岁的产品经理
设计更好的数据报表 - Design Better Data T

设计更好的数据报表 - Design Better Data T

作者: 50e05fa2c3fc | 来源:发表于2017-05-12 21:33 被阅读1173次


    设计更好的数据报表

    一个成功数据报表的用户界面设计组件

    Andrew Coyle      翻译: Kevin嚼薯片

    没有可视化表达和处理,数据将变得无用。未来产业的成功,依赖于具有更好用户体验的数据采集和数据报表。

    好的数据报表允许用户进行浏览、分析、比较、筛选、排序,以及通过处理信息从而获得启发和执行命令。本文展示了一系列的表单结构,交互模式,和设计技巧来帮助你去设计更好的数据报表。

    顶部行标题固定

    当用户垂直滚动时固定顶部行标题,能提供用户所在列的相关信息。

    水平滚动

    水平滚动在展示大量数据集时是不可避免的。把识别信息放到第一列是一种好方法。作为一种比较高阶的功能,允许锁定个别的列从而让用户与多个固定识别信息进行对比。

    尺寸可变的报表列

    调整列的尺寸,能让简略的数据展示完整。

    报表行的样式

    条纹样式,线条分割,无限制样式。

    行的样式能帮助用户快速浏览数据。对于数据量较少的报表,去掉条纹和线条能减少视觉负担。但对数据量较大的报表,用户在查阅时会错位。线条分割能帮助用户避免错位。交替行(条纹样式)能帮助用户在浏览较长的水平数据信息时不错位。即便这种样式在行数少时会因高亮的行比较明显而导致可用性问题。

    显示密度

    更小的行高允许用户不需要滚动便能查看更多的数据。然而这会影响可读性,从而导致查看解析错误。这就是为什么许多成功的数据报表设计会加上能控制显示密度的功能。

    可视化数据报表概要

    可视化数据报表概要往往会提供一个用于整体概述查看的附加表单。它通过整合的方式让用户在进行意见汇总前,找到数据模型和关键点。

    页面行数

    页行数能展现当前页面的行数,同时也有对行数进行设置的功能。上面是能够自定义每个视图行数的例子。这种模式经常被无限滚动的方式所取代。无限滚动是指当用户滚动时逐渐加载数据。无限滚动非常适合探索网站,但这对应用程序的优化往往是一个灾害。

    悬停效果

    当用户将鼠标悬停时才展示额外的操作行为,能减少视觉上的混乱。然而这会导致可发现性问题,因为用户需要与报表进行操作交互才能把隐藏的操作行为展现出来

    报表内编辑

    报表内编辑能允许用户直接修改数据,而无需进入到另外一个单独的详情页面。

    可展开的报表行

    可展开的行,能让用户在保持语境的前提下去查看附加信息

    快捷视图看板

    就像可展开的行,快速视图看板允许用户查看附加信息并保持语境。

    模态

    模态允许用户停留在报表界面,但可以让注意力更集中在附加信息和操作行为中。

    多模态

    多模态的强大之处在于能让活跃用户执行一系列的操作行为,或比较不同项目的细节。

    报表行的详细信息

    点击行上的链接将表格转换成左边列表项和右边细节信息的视图。它允许用户去分析对比大量数据集合,以及在不丢失语境的情况下展示更多项目内容。

    可排序的报表列

    列的排序能允许用户有组织字母和数字。

    基本过滤

    基本过滤允许用户控制报表中的数据呈现。

    过滤报表列

    这个设计模式允许用户对特定的列进行参数过滤。

    可搜索的报表列

    这个设计模式允许用户对特定在每个列的值进行搜索。

    添加报表列

    这种模式允许用户从一个设置集合中添加报表列。它是一种使报表数据保持有限基本信息数据的方法,同时允许用户根据使用场景去添加额外的报表列。

    可自定义的报表列

    可自定义列的功能允许用户选择他们想看到的报表列,并进行对应的排序。这个功能可以保持后续扩展的能力。

    为什么数据报表值得关注?

    数据正在成为全球经济发展的原料。数据同时能驱动过时的产业进行改造。能源业、媒体、制造业、物流、医疗、零售业、金融业、甚至政府都在经历着一个数字转换的过程。

    然而,没有可视化和执行性的数据是没有意义的。未来十年能生存的公司将不仅拥有优质数据,还应该拥有优质的用户体验。

    好的用户界面设计是基于用户的目标和行为习惯。深层的设计决策是基于受用户界面所影响的行为习惯。用户体验以微妙和无意识的方式改变了人类做决定的方法。它是什么,它在哪里,以及它所提供的交互方式影响着我们的行为。而重要的是我们做的设计决策将导致一个更美好的世界,尽管仅仅只是一个数据表单的设计。

    我是Flexport设计主管,我们正在设计全球贸易的未来形态。如果你有兴趣从事复杂的数据驱动难题从而影响现实世界,欢迎申请Flexport的职位。


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

    get到新技能后,欢迎在下面【赞赏支持】。

    赞赏后,可以继续观看我简书中其他产品运营设计类文章。阅读更多>> 

    相关文章

      网友评论

        本文标题:设计更好的数据报表 - Design Better Data T

        本文链接:https://www.haomeiwen.com/subject/iwcwtxtx.html