web表格设计攻略(3)

在样式上，搜索可以分为简单搜索、标签搜索、列标签搜索、高级搜索等四类。简单搜索由一个搜索框和一个按钮组成，搜索框内有提示语告诉用户可以输入哪些内容，支持模糊查询，可以实时搜索或触发点击搜索。特殊情况下，可以输入多个条件同时筛选，取并集或取交集。标签搜索指的是先选择搜索种类，再输入内容，由于每次只能对单一条件进行搜索，因此准确性更高。列标签搜索是指在一些特定标签上加上搜索框。高级搜索即点击更多展开更多筛选条件，减少了更多条件对用户的干扰，但降低了易发现性。

筛选按照触发方式可分为触发筛选和实时筛选，一般情况下，筛选条件存在交叉时使用触发筛选，不存在交叉时使实时筛选。但是在后台条件允许的情况下，发现型网站一般建议实时筛选，也可以根据筛选条件的数量选择合适的触发方式，比如条件少时用实时筛选，条件多时用触发筛选。

对于筛选条件有交叉的场景，建议采用展开形式，并手动触发刷新。对于筛选条件没有交叉的场景，当条件少于五个，采用tab切换；超过五个少于二十个，采用下拉选择；多于二十五个，为下拉选择添加模糊匹配，并且实时刷新。

其中，tab切换适合没有交集的内容，需要按照特定顺序分类，并保证分类覆盖所有情况，也不宜过多。对于需输入筛选条件的场景，如日期筛选条件，展示出来。下拉选择比tab占的空间小，但建议把重要项默认显示，下拉列表内也可以加入单选按钮或者复选框。表头筛选更节省空间，不过一次只能筛选一类条件。全部显示筛选项适用于输入项相对很少的情况。

为了满足多个角色在不同情况下的业务需求，系统往往采取宁多勿少的原则尽可能提供详细的数据给用户，结果造成表格指标过多，难以在一个屏幕内展示完全，需要横向拉伸，降低了易读性。在这个问题上可以采用的方法是给默认表格提供通用的字段指标，然后用户可根据自身所需添加或调整系统所提供的其它字段指标，让弹性化的表格满足用户的个性化需求。

这样做首先可以让用户在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况；其次，用户可以根据自己的需要，自由选择所要显示的指标，隐藏不必要指标，减少干扰。有的表格除了自定义列，还允许自定义排序。

通过排序可以快速发掘出用户关注的信息，帮助用户发现信息条目之间的关系，提高关键条目的优先级。排序的列和不排序的列应该有明显区分，最好对某个重要列进行默认的排序。排序可以增加表格活力，一般有升序和降序两种方式。比较常见的是上下空心箭头表示默认，上箭头为升序，下箭头为降序。这种方式占空间较少，但认知有一定困难，且不适合排序方式较多的情况。排序方式较多时应采用下拉选择，因为这样信息展示最直接有效，且能减少反复操作的次数。

随着行和列的增加，用户的瞬时记忆会达到极限，超过“7±2原则”的范围，用户需要依靠辅助信息去阅读表格内的数据，防止遗忘某列数据的意义。设计大数据量表格时，不得不通过拖拽横向或纵向滚动条来阅读数据，此时，固定表格的表头或行标题列，可以帮助用户在阅读过程中清晰知晓单元格数据的属性。

（1）表头固定

固定表头可以让用户明白当前单元格内信息的属性和含义，体现界面友好性。当数据列差异不大，用户不能直观的根据表格中的数据分辨出数据类型时，尤其需要固定顶部表头。当然，表头有操作时，固定表头更能提升使用效率。

（2）首列固定

呈现大型数据时，横向滚动无法避免。固定属性列（一般为第一列或前几列）更方便信息的对比。

（3）自定义固定列

作为高级功能，可以对列进行单独锁定，以便用户将数据与多个锚定标识符进行比较。

（4）固定表尾和底栏

固定表尾和底栏可以避免页面无数据时的空洞。

精简表格之后如何查看隐藏起来的次要信息呢？

（1）展开行

展开行（Expandable rows）允许用户无需打开新页面即可查看附加信息，防止用户迷失。

（2）表格组节

表格组节（Table sections）把相关的行组合在一起，并且能够收缩和展开，各组节层级要有样式区别。如果有需要，在每个组节里可以显示数据概要。

（3）弹窗

包括模态弹窗和非模态弹窗，模态弹窗可以打开任一个条目进行详细查看，非模态弹窗可以同时打开多个，并允许拖动弹窗位置进行信息对比。

（4）表格内部侧边展开

相比弹窗减少了页面层级和隔离感。

（5）视图切换

可以通过视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看方式。

数据的选择包括单选、多选和全选，一般通过复选框实现选择条目并进行批量操作。也可以进行整行选择，即点击某一行的局部能让整行被选中，这种做法可增大点击区域减少界面的混乱。

单选时必须给出明确的选中样式，而实际上纯粹的单选很少见，使用单选按钮的情况也很少，所以一般也可以使用复选框。多选自然是通过复选框实现，具体设计时，可以按照数据类型进行选择，如已读、未读等。全选时需要对数据范围进行限定，特别是遇到分页时，要明确是当页全选还是整表全选。

复选框一般放在左侧第一列，也有放在第二列（即序号之后）的，甚至放在右侧最后一列（便于用户在查看完一条数据后，决定是否勾选）。

操作项一般存在于条目最后，以及表头位置，分别对应单条操作与批量操作的场景。

（1）按操作对象分

单行操作和批量操作。对于单条数据操作频繁的场景，操作项不多于三个时，操作项跟在条目后面，常见操作仅用ICON，不常见操作用ICON+文字，当超过三个时，建议将操作折叠收起。对于数据批量操作频繁的场景，建议将操作放到表格顶部，与勾选操作配合使用。

（2）按显隐性分

显性操作和隐性操作，显性操作的选项显示在行内，直观明显。隐性操作一般在鼠标悬停时或勾选后才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。

编辑：cherlee