web表格设计攻略

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

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

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

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

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

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

（1）表头固定

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

（2）首列固定

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

（3）自定义固定列

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

（4）固定表尾和底栏

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

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

（1）展开行

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

（2）表格组节

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

（3）弹窗

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

（4）表格内部侧边展开

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

（5）视图切换

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

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

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

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

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

（1）按操作对象分

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

（2）按显隐性分

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

底栏紧跟在表格正文之后，主要展示正文中的数据量以及单页数据条目信息，同时，兼具一些导航的功能，指示当前所在页面以及跳转到指定页面。所以底栏最重要的元素就是分页，分页可以放在上部、下部或上下部均有，而分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。无限滚动有时可以替代分页，但更适用于发现型网站，但对于功能优先的应用程序未必合适。

分页可分为整体页码平铺式、全功能版、简易版等，需要根据不同的场景选择最优的设计方案，比如有的时候并不需要定点跳转，因为用户怎么可能记住自己想要的数据在哪一页。

1.Web页面中的表格设计，远没那么简单

2.产品设计中关于表格设计的一些经验分享

3. 表格设计的六种打开方式，正确提升表格的阅读效率

4. 糟糕的数据表格设计，它们到底问题出在哪里？

5. 数据表的用户界面最佳设计：设计结构、交互模式、技术列表浅析

6. 提高表格可读性的一些技巧

7. 浅析7类数据表格的筛选设计

8. 表格的UI交互模式指南

9. 表格可读性提升分析

文章作者系 @张鹏涛TAO未经许可，禁止转载。

（编辑：东莞站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!