网页设计中,表格列太多了如何显示?

个人在工作中碰上如题问题,一个数据量非常繁杂的报表需要展示在网页中,如何处理?


首先,讲一个很重要的屁话:

仔细推敲并沟通确定需求方的目的,只保留真正需要的部分!


好,假定沟通完依然存在非常多列表格,那么以下原则可以作为参照:


- 包容显示,增加横向scrollbar

(包容显示建议加上固定某些关键行和列的功能,以免刷到后面不知所云)

- 动态显示,增加对列显示/隐藏的控制

- 响应式,检测不同屏幕以显示不同项目

- 数据类:长的数据可以用缩写的方式,或保留较少小数位,鼠标悬浮时再用tooltip来展示


不同长度的数据展示方式


- 标题类:行标题或者列标题可以用倾斜的方式来节省列空间

- 内容类:有的内容可以用缩写辅助以颜色的方式来显示,同样达到效果

- 相关多行显示:将相关内容展示在同一列中

(非常实用,原则上依然是用增加行空间的方式来节省列空间。但是由于同一列的相关性,有时候反而比原来分列在易读性上更强。如:姓名、性别和年龄展示在同一个列中,称为用户列。)


根据相关性的多行显示方式

在这种情况下,依然可以通过折叠次要信息来节省行的空间。


相关多行显示后依然可以折叠次要信息


以上部分思考部分整理自ux stackexchange 的问答

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,002评论 25 709
  • 古风 嘉陵夕照 温志龄 嘉陵江上食河鲜,夕阳西下小舟还。 孑影乌蓬摇逝水,山峰倒映水云间。
    碧野牧歌阅读 206评论 0 6
  • 姓名:顾君 单位:宁波大发化纤有限公司 学习组:第234期努力一组 【日精进打卡第6天】 【知~学习】 《六项精进...
    JASONGU_2f28阅读 288评论 0 0
  • 这不是影评。 2016年12月30日到2017年7月3日,185天的杂记而已。 1 几位志同道合的朋友,深夜聚坐在...
    橙子家的小补丁阅读 365评论 0 0