恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计更好的数据表
0.0°
2017-05-15 自译外文 经验/观点 原作者: Andrew Coyle 举报 2146 21 10 0

固定表头

Image title

当用户滚动表单时,固定表头,这样做的好处是始终让用户明白所查看的列代表了什么


水平滚动

Image title

当展现数据量比较大时,水平滚动在所难免,将标识符摆放在第一列是一个好办法。如果想要拓展高级功能,可以考虑让用户把特定的列给锁定,这样用户可以很方便地对几列数据进行对比


大小可调的列

Image title

大小可调节的页面可以让用户看见完整的缩略信息


列的风格

斑马条/行分割线/自由格式列表

Image title

确定列的风格有助于让用户浏览数据。对于小型数据表而言,使用深浅色间隔的斑马条替代行分割线可以有效降低视觉噪声。

在浏览大型数据表时,用户可能会迷失自己所处的位置,行分割线可以帮助用户定位。

当用户浏览长横向数据串时,斑马条可以让用户明确所处位置,有时候它们也可能会带来一些可用性的问题,例如当数据行比较少的时候,用户可能会直接把整行数据理解为了高亮的那一行


显示密度

Image title

行高较小时,用户不需要滚动数据表就可以看到更多的信息。然而这样做会影响最佳阅读行高,加大视觉理解的错误率。这就是为什么许多成功的数据表设计都融入了显示密度的调整控件。


可视化图表统计

Image title

可视化数据统计表展现了相应数据的概要信息,方便用户在报告分析之前对模块和事件进行宏观定位。


分页

Image title

分页的作用是将若干行数据显示在一个视图中,可以在不同的页面之间进行导航与切换。上图所示的图表可以自定义每个视图中所显示行的数量。这一设计模式经常会被无限滚动所替代。无限滚动的原理是当用户向下滚动时,渐进式地加载更多信息,这种方式通常对于内容探索类的网站非常适用,但是非常不利于app的优化。


鼠标悬停效果

Image title

当用户鼠标悬停在某处时,呈现额外的操作选项,这种设计方式可以降低视觉拥塞。但它也可能带来一些问题,例如用户很难发现隐藏的功能,这是因为用户需要和图表进行交互才能发现更多的操作方式。


内联编辑

Image title

内联编辑可以让用户不用导航到隔离的细节图表状态中去,就可以直接对数据进行更改。


可展开行Image title可向下扩展的行能够让用户掌握行数据的额外附加信息的同时,又能够了解该行数据的上下文信息。


快速预览

Image title

这种模式和可展开行有点类似,快速预览模式可以让用户在不离开原数据表的情况下查看详情


模态窗口

Image title

模态窗口也可以让用户不离开原有数据表单,它的特点是对显示出来的额外信息和操作进行强调。


多重模态窗口

Image title

当用户需要在不同操作之间进行切换,或者需要对不同行的属性进行比较时,多重模态窗口是一个非常不错的选择。


列表模式到详情模式的切换Image title

点击一个行数据链接,这时表单会转变成左边是数据列表,右边是详细信息的模式。这种设计方法可以让用户在不丢失位置信息的情况下分析大数据串,同时参考分析别的条目。


可分类列

Image title

用户可以采用按首字母A-Z的方式或阿拉伯数字排列的方式对列数据进行分类


最基本的筛选

Image title

基础筛选的作用是让用户对列表中的数据进行操作


筛选列

Image title

这种设计模式旨在帮助用户对特定列的参数进行筛选过滤


可搜索列

Image title

可搜索列让用户在每列中搜索特定值


增加列

Image title

这一模式使用户可以向数据集中添加列,这是一种让表单数据保持精简信息的方法,也给用户开放了根据功能需求添加列的权限。


自定义列Image title自定义列的功能让用户可以自由组合想要呈现的属性,可能还包含保存用户自定义列以备日后使用的功能。

更新:2017-05-15

收藏

21人已收藏

euphoria

桃李春风一杯酒

  • 13

    作品

  • 84

    粉丝

  • 38

    关注

  • 临摹作品:PS+AI打造炫酷概念手表
  • 一些手绘练习作品
  • 临摹:游戏萌宠图标设计
  • 勇者行动游戏活动页设计

    猜你喜欢

      2017-05-15 自译外文 经验/观点 原作者: Andrew Coyle 举报 2146 21 10 0

      设计更好的数据表

      0.0°

      你确定要举报设计更好的数据表

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      21
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录