第 3 章 表格

第 3 章 表格

图像说明文字

  • 常见表格模式
    基本表格(Basic Table)、无表头表格(Headerless Table)、固定列表格(Fixed Column)、概览加数据型表格(Overview plus Data)、行分组表格(Grouped Rows)、带有视觉指示器的表格(Tables with Visual Indicators)、可编辑表格(Editable Tables)

本书第1版中,我在本章开头提到,我公司的许多企业客户都需要用表格展示密集数据。由于对使用表格阅读数据非常熟悉,所以他们充满好奇,很想知道我们会怎样把那些表格搬到移动设备上。和现在一样,我的回答是“我们不打算那样做”。至少,我们不会不予说明移动设备本身的因素给设计师提出的要求。

在移动端显示表格数据是一个挑战,同时也是一个机会。挑战在于,要找到在小屏幕上显示数据的可用办法。而机会在于,我们可以更严苛地审视数据,从而确定用户真正需要从中获得的是什么,然后研究出创新性的解决方案来显示数据,这样的表格甚至比传统表格更有用。

再来看看我在本书第1版中用过的例子——一张记录学生测验结果的长表格。这个表格用图表的形式可以表现出更好的效果,用户可以在钟形曲线图的分数区间上点击查看该区间内全部学生的分数。

图3-1 重新设计的表格:转换成一张交互式图表也许更有用

我们可以用另一种视图来展现这些信息,即利用具有动态搜索功能的无表头表格,用户可以快速查看特定学生的测验结果。

图3-2 带有动态搜索的无表头表格:钟形曲线图的另一种表现形式

虽然这些模式在很大程度上和前几年没有什么差别,但设计师们已能更自如地运用它们来清晰而优雅地展示表格数据了。一旦确定了你的应用中需要显示的关键数据,就要了解下面这些表格模式,从中找到灵感。

基本表格

基本表格模式就是带有固定列表头及网格布局的标准表格。设置不同的表格行颜色(这种形式也称为“斑马纹”),或者在两行之间用细线分隔,都能提高表格的可读性。

现在普遍省略垂直网格线以减少视觉噪音。这样做没有问题,但要保证列对齐。对比ESPN SportsCenter应用和Stock Trainer表格的可读性,就能看出列对齐的重要性。

{%}

图3-3 安卓版ESPN SportsCenter和Stock Trainer:如果去掉垂直网格线,就要保证列对齐

说明

不要使用深色的网格线。如果不用垂直网格线的话,要确保列对齐。文字左对齐,数字右对齐。如果要在一屏内显示大量信息,请考虑采用其他的表格模式。

无表头表格

无表头表格的特征是,用较宽的行显示某一对象的多个变量,且没有列标签。常见的做法是突出显示行标识符(信息的关键部分)。BillGuard采用了图标,而Gas Guru则使用了更大、颜色更深的字体来突出行标识符。

图3-4 iOS版BillGuard和安卓版Gas Guru:醒目的行标识符

无表头表格非常适合用来显示项目集合(比如存货清单、菜谱、专辑等),也很适合显示搜索结果。FlightBoard显示选定机场的航班信息。当用户点击一行时,航班详情会在行内显示出来,而不是跳转到新的页面。

无表头表格和列表一样,都是为了快速浏览并执行操作。对齐、字体和颜色这些视觉设计元素极为重要。举例来说,Realtor.com中的表格就比Redfin中的表格更易于浏览。

说明

去除噪音(图标和边框等多余的视觉元素),并设计精确对齐的表格以方便浏览。在不那么重要的细节上使用较小和颜色较浅的字体。不要猜测最重要的信息是什么,要征询客户的意见,然后通过测试确定该项设计。

图3-5 iOS版FlightBoard:无表头表格,点击行内展开详情

图3-6 在安卓平台上对比Realtor.com和Redfin:清晰的设计和美观的排列在无表头表格中极为重要

固定列表格

对较大的表格来说,固定列表格模式或许是一个可行的解决方案。在Roambi和Fidelity的例子中,当用户不是垂直滚动屏幕的时候,最左侧的列固定,其他列可左右滑动。由于Roambi的超扁平化设计,乍看之下要分辨出左侧为固定列有点困难,但你可以看出右边有更多的信息。Fidelity设计中的视觉功能可见性能让我们知道首列是固定的且按顺序排列。

说明

要提供视觉功能可见性,好让用户知道通过滑动可以显示更多的列。页面默认显示最重要的列。

图3-7 iOS版Roambi:注意最左侧一列是固定的(用细微的阴影标识出来) http://epub.ituring.com.cn/Article/CheckIn/2434

图3-8 iOS版Fidelity:功能可见性显示左列固定,通过滑动可显示更多列

概览加数据型表格

概览加数据型表格模式的特点是,表格内容的摘要显示在第一行数据的上方。这种模式在财务类型的应用中十分普遍,但也适用于任何其他应用,只要用户想从中看到总数或随时间变化的趋势。

概览可以是文字形式的,但最常见的是图表式的图像,请看下面这些例子。

图3-9 iOS版Personal Capital和安卓版Runtastic Heart Rate:概览加数据型表格

BillGuard的概览图表是交互式的。如图所示,点击“VS. AUG”1,就会显示对比折线图,并标示出支出金额的变化。

1对比8月数据。(译者注)

图3-10 iOS版BillGuard:交互式概览图表

如果概览用饼图或环形图表示,且图表和图例占用了整个页面,那么采用逐级深入(Drill Down)模式的效果可能会更好,就像Roambi设计的那样。更多示例请参见第6章。

说明

将概览放在数据行区块上方。如果图表概览太大,可以考虑用逐级深入模式代替。若想了解有效的图表设计技巧,可以参见第6章。

图3-11 iOS版Roambi:图表占用了整个页面,所以逐级深入模式比概览加数据模式效果更好

行分组表格

行分组可以让表格数据更易读。一组分组行集可以作为节区头部,比如按年分组(例如Zillow Mortgage Calculator)或按类别分组(例如Mint)的交易记录。

说明

从视觉上将表格的汇总行和其他行区别开来。一般而言,汇总行应该较窄,字体颜色较浅。

图3-12 安卓版Zillow Mortgage Calculator和Mint:行分组表格

带有视觉指示器的表格

带有视觉指示器的表格模式设计中,波形图(Sparklines)和图标可以提升表格的信息显示效果。但一定要注意,不要用没用的图标堆满表格,给数据的显示造成干扰,就像Sleep Charts的设计那样。

图3-13 安卓版Sleep Charts:不要在表格里填满不必要的图标

另一方面,Roambi Sales Reports应用的视觉设计突出了数据,而不是使之模糊不清。关于在移动应用中使用波形图的更多信息,请参见第6章。

图3-14 iOS版Roambi Sales Reports:包括波形图在内的设计元素突出了数据信息

要选择可以快速被识别的视觉指示信息。再强调一次,避免使用不必要的图标。比较一下最近的两个iOS版本的PayPal。较新版的iOS 7设计去掉了过多的图标,增加了更多的空间来展示交易信息。

说明

只有当视觉指示器可以突出表格数据时,才可以使用。否则,应该避免使用。

图3-15 iOS 6版和iOS 7版PayPal:新版的设计丢弃了图标,增强了可读性

可编辑表格

在移动界面设计中,可编辑表格几乎为微软Office、谷歌云端硬盘(Google Drive)和苹果Numbers等电子表格应用所独有。许多网页端可编辑表格的设计规范也适用于移动端:

  • 清晰地指示出选中的单元格和行。
  • 如果单元格有特定的格式,就要提供适当的编辑器(如选择器、下拉菜单、颜色选择器、日期选择器等)。
  • 除非编辑后产生错误提示,否则没有必要为每项编辑都提供确认反馈,只需在保存时要求用户确认即可。

在Windows Phone版的Office中,单击单元格会显示单元格菜单选项。点击功能图标(左上角的fx按钮),以调出功能菜单。

图3-16 Windows Phone版Office:点击fx按钮调出功能菜单

然而,与桌面应用不同的是,移动端的可编辑表格不适合进行大量的数据输入操作,这主要是因为移动设备的键盘不支持屏幕导航,尤其是不能使用Tab键在单元格之间切换。

说明

设计可编辑表格时,可适当地参照网页端和桌面端设计的最佳实践,但是如果要进行批量数据输入,或者可能需要大量的编辑工作,就要避免使用可编辑表格。

图3-17 安卓版谷歌云端硬盘:选择一个单元格时,屏幕底端会显示输入框

图3-18 iOS版Numbers:对数据的输入和格式化分别采用不同的视图和编辑模式

目录