网页表格的表现形式和易用性设计指南(3)
http://www.itjxue.com 2015-08-07 21:29 来源:未知 点击次数:
展开行Expandable rows
关于这种模式我写过一篇文章，也建了一个可以轻松实现的jQuery小插件。 这种模式的关键点就是可以给表格增加更多相关信息功能。以BuySellAds为例，展开行显示了出版商的广告详细信息，同时始终显示主行里的重要信息。
行的操作Row actions
对于海量数据来说，表格远比一个普通的占位符所能展现的多。表格内可以进行一些特定的交互操作。可以对某一行（或多行）进行操作。操作在行内显示，以鼠标悬停或者菜单的形式表现出来。
行内操作
把操作放在每一行数据的开头或结尾，是个简单方法。如下所示，Mixx把操作放在了每一行的末尾，这样很容易进行投票的操作。
鼠标悬停操作
如果有多重操作，可以采取鼠标悬停操作方式，该方式是由行内操作引申而来。鼠标悬停和鼠标离开分别显示和隐藏操作，通过这种方式可以节省界面空间。Project Estimator by Astuteo 对每一行都有编辑和删除操作，鼠标悬停到某一行的时候则显示操作按钮图标，离开则不显示。
菜单操作
如果每一行里都有多种操作，可以通过鼠标悬停或者单击行的时候显示这些操作。DropBox通过一个二级菜单展示了每个文件的多种操作，有效地使用了这种方式。
这种方式可以很好地让用户批量完成多行的操作。选中每一行前面的复选框，点击批量操作链接或按钮，用户可以选中多行进行操作。还是以DropBox为例，用户可以选中多条文件，点击菜单进行批量操作。
选项提供全选和全不选功能。
结束语
本文基本包括了常见的表格形式，并且辅以实例。建议阅读另外两篇关于表格的文章：Big Table issue试图为庞大的表格找到能适应视图的方法；15 Tips for Designing Terrific Tables揭示了表格可以应用的不同分层。
感谢Theresa Neil，Designing Web Interfaces的作者之一，你可以从她的书里看到表格的三种模式：行内编辑，超宽表格和按列过滤。
(责任编辑：IT教学网)
上一篇：跨浏览器兼容测试有关的大量资源