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

表格的 UI 交互模式指南 许多人都认同这样一个现象：表格虽然是用户界面设计中的一个重要部分，但是它们却经常会被 忽视。表格应该显示让用户更易读，更易扫视，更易比较的结构化数据，但在很多情况下，表格数 据却显得模糊不清。这就是很多人不喜欢表格的原因。 用户的日常工作经常使用表格，但是谁会需要让他们崩溃的东西呢。要改变这样的现状，下面给出 一些使表格易用的指南。 行交替样式 Alternating rows styling 这是很明显的，但是事实如此吗？看看今天的 WEB 应用，你就会发现很多并不适用。因此，行交替 样式并不明显，这就是把他列为第一个来阐述的原因。 在数据较多的多行多列表格里用不同样式交替显示不同的行，这会提高用户区分数据的能力。可以 采用背景色或者背景图片，如果采用背景色，背景颜色应该比页面颜色浅或者深一点。图像背景 应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格 的header 和footer 部分应该易于识别，可以采用比表格行深或者浅的颜色。 BlinkCampaign 的表格行采用了浅一点的亮绿色， header 采用了稍微暗一点的绿色。 整行选择 Full row selection 如果需要对某一行的局部做操作，让整行都可被单击选中。这种做法增大了点击区域减少了界面的 混乱。一个应用的实例是，每一行只有 查看详情“ ”可操作，鼠标悬停到这一行的时候整行样式都应 该不同。有好几种方法可以实现这个效果，推荐 jQuery 插件的 RowSelect 。 CrazyEgg 应用了整行选择的方法展开当前选中行的详情（稍后我们会谈及该模式），鼠标悬停的行 会高亮显示。我很喜欢他们对这块区域以及其他的应用的设计。 表格组节 Table sections 当你想把相关的行组合在一起的时候可以考虑使用表格组节，组节把相关数据组合在一起，是表格 的一部分。所有组节应用同样的列设置。举个例子，在一个显示国家列表的表格里，地区就是行组 合的自然方式。所有的表格组节样式要有差别，并且能够收缩和展开。如果有需要，在每个组节里 可以显示数据概要。 PulseApp 用表格组节显示一级和二级的收支详情，每一级都可以再展开。 排序 Sorting 如果不知道关键字，用户需要从大数据量的表格里查询某行时会很困难。用户在比较相近信息的时 候通常会对表格列进行升降序排列。 对表格排序常用的是让表格标题可点击。排序的列应该有标记，通常是在列标题文字边放置一个三 角箭头，指明当前列的顺序（升序或降序）。每次单击顺序会相反。 排序的列和不排序的列应该有明显区分。对某个重要列进行默认的排序。 TableSorter 是个简单易用的插件。该插件可以对多种类型数据进行分类，你也可以自定义。该插件 还支持多列排序，不过我对此不是很感冒。 OneHub 应用清晰地标明了排序的列和顺序。我喜欢这个设计的原因是，即使是在如此小的区域， 细节部分也做得很具体。 过滤 Filtering 当有大量数据要处理的时候过滤就很有用。使用下拉列表，单选按钮或者复选框进行过滤选择。 在 下面的例子里， builditwith.me 使用下拉列表来对用户的职业兴趣和当前状态进行过滤。 然而这种过滤只能事先定义好过滤值。例如，你可以对工作类型按全职 /兼职，设计 / 开发分类，你 就不能按照姓 /名来分类，因为这个值有无限多。在这种情况下可以应用关键字对数据进行过滤。输 入任意关键字会得到按照关键字进行过滤的结果。 Builditwith.me 提供了好几种过滤方式，每一种过滤方式有对应的列表显示。 分页显示 Pagination 表格有大量数据的时候应该采用分页显示。分页很常见，但有时候效果并不好。分页适用于搜索 引擎，但是并不意味着在任何情况下都适用。 Product Planner 采用了标准的分页显示，有页码数字，有上一页下一页。但是，你能告诉我第 2页 是什么？ 第 3页？当然你不能。不用担心，标准分页可以得到改善。如下所示，通讯录很庞大，他 们使用了数字和字母来分页。在这个例子里显示所有的页和隐藏页一样好。你可以以此类推应用到 其他条件相似的表格。如果表格以日期来分类，你可以以日期范围来替代传统