网站策划

您的位置:首页 > 网站专题 > 网站策划 > 详细内容

Web页面中的表格设计,远没那么简单

2017-09-16 15:00   来源:网络整理 [ ]

Web页面中的表格设计,远没那么简单

作为页面布局的重要组成部分,表格的身影随处可见。了解与熟知To B业务平台软件设计的工作人员都应该知道,表格在平台应用中的重要性。表格出现的概率不是一般的多,内容信息的排列布局、大量数据的展示、众多功能操作的按钮摆放,一般都会用到相应的表格,而且表格的样式类别也是多种多样。表格的设计也远远没你想象中的那没简单,可以说要想设计出满足业务需求、符合用户心智模型的表格不是那么的轻而易举。

Web页面中的表格设计,远没那么简单

本文就来详细聊一聊表格。聊之前,我们应该明确三个词的概念:列表、表格、表单。

列表,英文释义为List。百度释义为:以表格为容器,装载着文字或图表的一种形式,叫列表。如,班主任点名的花名册,就是一个列表;QQ软件的好友列表等等。

表格,英文释义为Table,又称为表,即是一种可视化交流模式,又是一种组织整理数据的手段,主要承载数据的归纳、展示与对比的功能,是列表的一种。

表单,英文释义为Form。表单在网页中主要负责数据采集功能。如当我们注册某个网站的账号时,填写个人信息的页面,就是一个表单。

表格经常和其他界面元素一起协同使用,用于展示和操作结构化数据,并经常用于详情信息的入口。通常表格的组成元素以及相关元素会有多个部分,笔者根据自己设计表格的工作经验将表格概括为筛选区、表头、正文以及底栏等四个部分,其各个部分包含的相关元素如图所示。

Web页面中的表格设计,远没那么简单

接下来,我们对表格的每一个部分进行讲解。

一、筛选区

筛选区可以看作表格的导航。筛选区主要包括两部分,一是筛选,二是搜索。其目的相同,都是将操作者所关注的数据展示到前面,便于查看。

1、筛选  

筛选是将一类数据展示出来,而将其他类型的数据隐藏。当表格数据的类型多于两种时,则考虑采用筛选条件。

(1)筛选案例1

筛选条件在顶部,共七个。因为筛选条件存在交叉,所以都展示在顶部。选择条件以后,需点击才能触发筛选。

Web页面中的表格设计,远没那么简单

(2)筛选案例2

筛选条件在顶部,因为筛选条件不存在交叉,所以实时筛选。

Web页面中的表格设计,远没那么简单

(3)筛选设计建议

对于筛选条件没有交叉的场景,当条件少于五个,制作成table切换;超过五个少于二十个,采用下拉选择;多与二十五个,为下拉选择添加模糊匹配设置,并配备实时刷新;

对于筛选条件有交叉的场景,建议采用展开形式,并配备手动加载刷新。

对于需输入筛选条件的场景,如日期筛选条件,单独处理,展示出来。

2、搜索

搜索是目的在于定点查看。搜索的使用场景是操作者要查看某一特定数据,输入相应的条件,进行搜索,页面对所搜索的数据进行展示。

(1)搜索案例1

搜索框紧跟筛选条件,并配有确定搜索按钮。

Web页面中的表格设计,远没那么简单

(2)搜索案例2

当存在多个搜索输入框时,用高级搜索打包收起,点击展开,同时,配备搜索与重置按钮。点击右上角的漏斗可以设置高级搜索条件的显示与隐藏。

Web页面中的表格设计,远没那么简单

(3)搜索设计建议

搜索输入框尽量采用模糊搜索,不要让用户去辨认、识别要输入的内容;

对于多个搜索条件交叉搜索的场景,建议采用高级搜索按钮,将其打包收起,并配置重置按钮,便于一键清空所有搜索条件,便于接下来的搜索。

二、表头

表头是对表格数据的操作,包括行标签、操作工具等。有些简单表格,将表头与筛选区合并,将筛选条件、搜索杂糅在一起。

1、固定

表头固定,目的在于向下滚动表格时,表头出现在页面顶部,时刻指示出该列数据的类别属性。

(1)固定案例1

该案例中每列数据具有明显的差异,数据本身体现出了类型,在不需要表头情况下,用户能够清楚的知道数据类型及意义,不会出现混淆,故没有采用固定表头的设计。

Web页面中的表格设计,远没那么简单

(2)固定案例2

表格中的数据列差异不大,用户不能直观的根据表格中的数据分辨出数据类型,因此采用固定顶部表头,指示出数据类型。

Web页面中的表格设计,远没那么简单

(3)固定表头设计建议

在数据显示超过 40 条时(电脑屏幕一屏无法完全显示,需要滚动查看时),且表格中的数据不能直观的展示出数据类型,建议采用固定表头的形式,时刻显示数据类型;

当字段数量过多,需要横向滚动表格,且需要对比数据时,采用固定属性列字段。

2、字段数量

(1)字段数量案例1

表格的字段过多,且数据分类不明显,因此采用横向滚动形式,将重要数据放在表格左侧,次要数据放到表格右侧。

Web页面中的表格设计,远没那么简单

(2)字段数量案例2

与案例 1 相同,字段过多,采用横向滚动形式。但相比案例一,在向右滚动数据时,纵标签固定,指示数据类型。第一列是时间需要进行对比,固定了第一列使得阅读起来存在一个基础。

Web页面中的表格设计,远没那么简单

(3)字段数量案例3

对数据进行分类显示,做成下拉选择切换形式。将重点数据放置在默认显示页面,次要数据放置在下拉选择的类别中。页面简洁,功能完备且有序。

Web页面中的表格设计,远没那么简单

(4)字段数量案例4

相较于案例3,同样对数据进行分类显示,并制成table切换形式。数据的类型较少,且不存在主次关系,仅进行数据罗列展示。

Web页面中的表格设计,远没那么简单

(5)字段设计建议

对于字段数据没有明确分类,或者有些数据不太重要,可以采用横向滚动条,进而固定左侧属性列,便于数据对比;

对于数据有类别区分,可以采用分类展示,切换button放在顶部或列表中。

3、字段

字段,为表头中的行标签中的字段标识。字数多少以及传达的意义是否明确,对于表格功能的表现至关重要。

(1)字段案例1

采用简单英文单词、单词缩写、词组子母首拼等来传达字段含义。同时,每个字段后面紧跟释义标识。鼠标悬停,即可出现该字段的详细解释,顺畅的满足了新手用户、普通用户以及专家用户的需求。

Web页面中的表格设计,远没那么简单

(2)字段案例2

字段用意义明确的单词、词组来表示。字段数量较少时,用简洁的标识字段数据,界面简洁、意义明确。

Web页面中的表格设计,远没那么简单

(3)字段设计建议

字段在五个以下,且字段的类型较为常见,或能够用简短的文字描述清楚,可采用单词或词组来作为字段;

若字段超过五个,或不常见字段类型,或者简短文字不能阐述清楚,可以考虑使用缩写或者特殊单词做字段,另附解释文字。

4、排序

对表格中的数据进行排序,是让纯粹以展示为目的的表格增添了活力,用户可以改变数据的排序,丰富了数据展示形式。

(1)排序案例1

仅用单向箭头指示出当前的数据表格排序依据,并没有指明排序的形式。在字段较多、且存在帮助标识的情况下,仅仅指示出排序的依据,是比较合适的设计,毕竟排序的依据要比形式重要的多。

Web页面中的表格设计,远没那么简单

(2)排序案例2

上下箭头指示排序,一般上下空心箭头默认,上箭头为升序,下箭头为降序,也有通过明确说明来提示排序的方式。

Web页面中的表格设计,远没那么简单

(3)排序设计建议

字段在五个以下,排序可以采用明确的排序类型指向性明确的ICON;

字段数量大于等于五个时,只显示排序图标,而不显示类型。

三、正文1、分割线

(1)分割线案例1

本页关键词:网站优化,Web优化,WEB页面,

上一篇:如何在新用户引导流程中用好空状态界面? 下一篇:小谈用户体验:让访客反感的12种网页设计