网站表格制作的七种常见方法

发布时间:2022-08-12 点击:300
表格形形色色,默默无闻的呈现着数据,阅读起来如何最为顺畅,如何才能从表格里发掘出重要信息。
行高是表格浏览时的重要参数
行高是表格非常重要的参数,行高间距直接影响着阅读的体验,有如同omniature为了最大限度的放置数据内容,强化数据显示效果而降低行高的情况,也有sugarcrm一样的行高较高可以放置更多文本信息的表格。
斑马线更好的引导阅读
斑马线和悬停时的整行变化也是表格中能引起视觉变化的重要元素,斑马线会使得行与行的界限更为分明,尤其对数据列较多时的横向引导得到加强,这样看行内的内容时不容易错行,而悬停变色行主要是配合操作交互,为杭州网站公司了明确区分出光标所在的行。
选择和操作提升使用效率
对表格数据的选择会有单选多选或者全选的情况,如果遇到数据项很多有翻页,全选的位置就会增加一些选项来确定是当页全选还是整表全选,如同gmail和sugarcrm里的效果,这种表格是将选择区域放置在表格的左侧第一列,也有表格的设计是将选择放在右侧最后一列,像campaign monitor就是这样设计的,好处在于浏览完一行的信息就可以确定是否需要选择该行内容进行下一步操作。
排序使表格活起来
排序是表格里经常需要使用的操作,可以更为快捷的发掘出关注的信息,一般会有升序和降序两种,当前比较常见的是上下空心箭头默认,上箭头为升序,下箭头为降序,也有通过明确说明来提示排序的方式。
重点在于行或者列
表格是由最简单的行、列、单元格构成的,根据浏览的目的和希望突出的信息不同,行、列、单元格都可以通过一些变化进行强调,这是将信息通过表格传达出去的最为根本的使用方式。
邮箱产品就是强调行的表格设计的典范,像gmail、yahoo mail、126邮箱,这些表格没有纵向的线条,用横线构架出行的视觉,数据信息均匀分布,更强调每一行内的信息连续性,不强调行与行的数据对比情况。同时,辅助于背景线条和底色,能够很好的提升阅读的连续性和效率。
条理的对齐
表格内的信息纵向列对齐是能够很好的形成视觉引导线,符合格式塔心理学中相近原则,一般常见的是文本信息左对齐,数字左对齐,金额右对齐,同时表格最右一列右对齐,这样的表格纵向列即长春网站建设哪家价格低?使没有分割线也能很好的起到分隔作用。
对比的数据如果有了明确的对齐方式,会大大提升数据的浏览效率,增加对比的效果,像下面的图中,如果数据居中对齐没有明确的边界,阅读起来就会降低效率。
表头固定提升使用
随着表格的行和列都增加,这时候用户的瞬时记忆会遭遇阈限,根据7±2的原则超过这个范围时,用户需要增加信息来帮助浏览表格内的数据,比如百度的涅槃系统提供了丰富的数据列,而如果缺少表头的说明恐怕会很快遗忘掉该列数据是什么。
表头固定的另一种用途是可以将操作和表格的信息更好的进行联系,选择了表格内的数据行就可以进行相应的操作,提升了使用效率,不用再耗时耗力的寻找操作区域。