web页面中的表格设计，远没那么简单!

《web页面中的表格设计，远没那么简单!》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web页面中的表格设计，远没那么简单!　　表格的设计远远没有想象的那么简单，除了纯粹的数据展示，现在的表格越来越兼顾到一些导航的功能在里面，不仅仅纵向展示数据，在横向方面也做了相应的扩展。本文作者将来详细聊一聊表格。　　　　作为页面布局的重要组成部分，表格的身影随处可见。了解与熟知ToB业务平台软件设计的工作人员都应该知道，表格在平台应用中的重要性。表格出现的概率不是一般的多，内容信息的排列布局、大量数据的展示、众多功能操作的按钮摆放，一般都会用到相应的表格，而且表格的样式类别也是多种多样。表格的设计也远远没你想象中的那没简单，可以说要

2、想设计出满足业务需求、符合用户心智模型的表格不是那么的轻而易举。　　　　本文就来详细聊一聊表格。聊之前，我们应该明确三个词的概念：列表、表格、表单。　　列表，英文释义为List。百度释义为：以表格为容器，装载着文字或图表的一种形式，叫列表。如，班主任点名的花名册，就是一个列表；QQ软件的好友列表等等。　　表格，英文释义为Table，又称为表，即是一种可视化交流模式，又是一种组织整理数据的手段，主要承载数据的归纳、展示与对比的功能，是列表的一种。　　表单，英文释义为Form。表单在网页中主要负责数据采集功能。如当我们注册某个网站的账号时，

3、填写个人信息的页面，就是一个表单。　　表格经常和其他界面元素一起协同使用，用于展示和操作结构化数据，并经常用于详情信息的入口。通常表格的组成元素以及相关元素会有多个部分，笔者根据自己设计表格的工作经验将表格概括为筛选区、表头、正文以及底栏等四个部分，其各个部分包含的相关元素如图所示。　　　　接下来，我们对表格的每一个部分进行讲解。　　一、筛选区　　筛选区可以看作表格的导航。筛选区主要包括两部分，一是筛选，二是搜索。其目的相同，都是将操作者所关注的数据展示到前面，便于查看。　　1、筛选　　筛选是将一类数据展示出来，而将其他类型的数据隐藏。

4、当表格数据的类型多于两种时，则考虑采用筛选条件。　　（1）筛选案例1　　筛选条件在顶部，共七个。因为筛选条件存在交叉，所以都展示在顶部。选择条件以后，需点击才能触发筛选。　　　　（2）筛选案例2　　筛选条件在顶部，因为筛选条件不存在交叉，所以实时筛选。　　　　（3）筛选设计建议　　对于筛选条件没有交叉的场景，当条件少于五个，制作成table切换；超过五个少于二十个，采用下拉选择；多与二十五个，为下拉选择添加模糊匹配设置，并配备实时刷新；　　对于筛选条件有交叉的场景，建议采用展开形式，并配备手动加载刷新。　　对于需输入筛选条件的场景，如日

5、期筛选条件，单独处理，展示出来。　　2、搜索　　搜索是目的在于定点查看。搜索的使用场景是操作者要查看某一特定数据，输入相应的条件，进行搜索，页面对所搜索的数据进行展示。　　（1）搜索案例1　　搜索框紧跟筛选条件，并配有确定搜索按钮。　　　　（2）搜索案例2　　当存在多个搜索输入框时，用高级搜索打包收起，点击展开，同时，配备搜索与重置按钮。点击右上角的漏斗可以设置高级搜索条件的显示与隐藏。　　　　（3）搜索设计建议　　搜索输入框尽量采用模糊搜索，不要让用户去辨认、识别要输入的内容；　　对于多个搜索条件交叉搜索的场景，建议采用高级搜索按钮，

6、将其打包收起，并配置重置按钮，便于一键清空所有搜索条件，便于接下来的搜索。　　二、表头　　表头是对表格数据的操作，包括行标签、操作工具等。有些简单表格，将表头与筛选区合并，将筛选条件、搜索杂糅在一起。　　1、固定　　表头固定，目的在于向下滚动表格时，表头出现在页面顶部，时刻指示出该列数据的类别属性。　　（1）固定案例1　　该案例中每列数据具有明显的差异，数据本身体现出了类型，在不需要表头情况下，用户能够清楚的知道数据类型及意义，不会出现混淆，故没有采用固定表头的设计。　　　　（2）固定案例2　　表格中的数据列差异不大，用户不能直观的根据

7、表格中的数据分辨出数据类型，因此采用固定顶部表头，指示出数据类型。　　　　（3）固定表头设计建议　　在数据显示超过40条时（电脑屏幕一屏无法完全显示，需要滚动查看时），且表格中的数据不能直观的展示出数据类型，建议采用固定表头的形式，时刻显示数据类型；　　当字段数量过多，需要横向滚动表格，且需要对比数据时，采用固定属性列字段。　　2、字段数量　　（1）字段数量案例1　　表格的字段过多，且数据分类不明显，因此采用横向滚动形式，将重要数据放在表格左侧，次要数据放到表格右侧。　　　　（2）字段数量案例2　　与案例1相同，字段过多，采用横向滚动形

8、式。但相比案例一，在向右滚动数据时，纵标签固定，指示数据类型。第一列是时间需要进行对比，固定了第一列使得阅读起来存在一个基础。　　　　（3）字段数量案例3　　对数据进行分类显示，做成下拉选择切换形式。将重点