在小屏幕上显示大数据是一个令人生畏的挑战。我们如何在小屏幕上进行大量数据?除了限制数据的行数或列数,还可以在小屏幕上显示表格的其他选项?可用的桌子在移动时看起来像什么?

(一般问题的更多的数据比适合在屏幕上并不是特定于手机:信息可视化研究人员已经奋斗了多年的主题显示数据多个列(或行)能够符合用户的屏幕上——一个大显示器,显示器、数组或一个小移动显示。然而,屏幕越小,我们越有可能陷入麻烦对于任何给定的数据集,都需要仔细设计以最小化可用性问题。)

在我们的文章中比较表,我们讨论了显示数据的关键元素,例如需要内容的一致性呈现有意义的属性给用户。两者都同样,如果移动表甚至更重要,因为一次可见的数据量少量。你必须首先为大屏幕创建一个可用的表格在把它翻译成小的之前。让表在更小的屏幕上工作的需求可能是重新评估表中的内容和属性的一个很好的理由、借口或动力,而不管屏幕大小,并为所有用户改进内容。

列大到足以易读

移动屏幕上不滚动的列数取决于这些列的宽度。项目需要易读而不需要用户放大

对于复杂或较冗长的条目,例如比较表中的条目,只有2列可以清晰地符合窄移动屏幕。对于数字沉重的表,较窄的列可以工作,允许更多列可见。

美国国家橄榄球联盟(National Rugby League)的球员统计数据是数字的,允许在屏幕上显示11列,而不需要横向滚动。注意,这是通过在第一列中只使用对方球队的标志和列标题中统计数字的缩写来实现的,这对于不熟悉这种缩写的用户来说是一个问题。也就是说,只有橄榄球狂热者才可能首先对如此详细的球员数据感兴趣。

转动手机是最后的手段

旋转手机可以让更多的信息同时显示。然而,你在列空间中得到的,你在行空间中失去的。此外,如果你规定用户必须如何拿手机,这可能会让他们感到烦恼。仔细考虑增加宽度的收益是否平衡了宽度的坏处讨厌用户和失去数据行的空间

要比较Citi.com上的信用卡,所需的用户需要按照指令,旋转设备以继续使用比较信用卡功能.一旦手机旋转,屏幕的大部分高度就会被用来显示信用卡的大图像,当用户滚动屏幕时,这些图像就会被锁定,只剩下很少的空间用来显示比较表的数据。(这是需要的一个经典例子重新考虑在网站的移动版本中使用图像:虽然信用卡照片对桌面用户来说可能是不错的列标题,但对移动用户来说,它们应该被抑制或缩小,只有名字的列标题可能会更好。)

将列标题放置在适当位置

对于填充多个垂直屏幕的任何表,粘性列标题可帮助用户知道他们正在查看的内容。没有粘滞标头,很容易失去表格显示的上下文。

左:这个来自BestBuy.com的比较表没有锁定列或行标题,这使得理解表中的数据更加困难。右图:屏幕截图显示了滚动的表格,没有可见的标签。

明确指示是否需要水平滚动

当数据不适合肖像视图移动屏幕的宽度时,用户可能需要水平滚动来查看完整的信息。(当水平滚动一般来说是桌面和移动用户的令人作呕的令人讨厌的是,移动屏幕上的大表都可以稍微接受。)

但是,对于这样滚动工作,必须是显然还有更多的数据水平折叠.像旋转木马,箭头或截断元素最能传达这一信息。有时候会用到圆点,但用户通常更难地注意并理解箭头或截止元素。

在eBag的网站上,最终产品栏被剪掉了,这表明水平滚动条可用。
斯巴鲁网站使用数据表上方的点和箭头向用户显示更多屏幕上的内容。在这类设计中,圆点经常被忽视,并且在这里会让人感到困惑,因为突出两个圆点是为了显示“当前位置”(即两列当前可见)。此外,如果箭头放置在数据显示中,而不是在页面顶部,那么效果会更好。

固定左栏

如果用户必须水平滚动才能看到所有数据,那么最左边的一列(通常是一列行标题)应该被锁定在适当的位置,以便用户可以参阅必要的标签每时每刻。

保真锁定投资名称和列标题为用户提供。最后一列被略微切断,以帮助用户意识到他们可以滚动以查看更多信息。
OfficeWorks.com.au将第一个产品锁定在比较表中,因此用户可以将其他项目与第一个产品进行比较。这里的想法是比较中的第一个项目是“主要”项目(标签显示主要比较)作为比较中的参考。用户可以用不同的用户替换所选择的主项目。表格内的箭头表明用户可以左右滚动数据。

让用户选择要查看的数据

如果数据不能显示在屏幕上,用户很可能没有时间或意愿看到所有数据。所以问题就变成了如何向他们提供与他们需求相关的信息。

这个问题的答案取决于用户任务和数据类型,通常比移动界面所允许的要复杂得多。(了解更多关于信息可视化解决方案的信息必威手机app下载课程)。这里有两种策略可以限制屏幕上显示的数据量,并适用于各种情况:

  • 允许用户精确地确定需要哪些数据集之前看到数据
  • 让用户控制数据的视图因为他们看到了数据

如果用户需要,第一种方法有效请参阅数据,但不需要比较它.他们可以在显示之前将数据的选择缩小到所需的特定信息。例如,用户可以只希望汽车特定模型的特征,特定食品的营养信息,或特定玩家的统计数据,而不是比较多个项目的信息。

要查看Jamba Juice的奶昔的营养信息,用户首先需要选择感兴趣的饮料,然后显示特定于该项目的数据。之间的切换小的媒介,允许用户选择他们感兴趣的选项,但不帮助比较三个。(例如,找出不同媒介之间的热量和一个小喝,用户首先需要提交数字“410”内存,然后切换到表中喝,最后计算减去记得号码新显示的号码从事大量人们不擅长的脑力工作。)

第二种解决方案是提供用户控制他们看到的具体细节.例如,有些人可能对两个产品之间的相似或不同感兴趣;其他人可能只关心你数据的某些属性——例如,他们可能需要比较后备箱容量或安全特性,而不是两辆车的噪音水平。通过选择屏幕上显示的行或列,用户可以关注自己感兴趣的数据子集。

左图:在戴尔的网站上,用户可以通过页面顶部的菜单选择他们最感兴趣的产品规格。默认显示所有规格。中心:用户可任意选择产品规格。右:结果视图只显示用户的选择。

数据组的手风琴

如果表包含可以将数据分为逻辑类别的数据,请使用手风琴允许移动用户:

  • 请参阅表中可用数据类型的概述
  • 直接访问到兴趣的信息
在Samsung.com上,比较表显示了所有规格,只有类似的规格或仅在产品中的差异,或用户自己的标准选择。该网站使用手风琴与组相关属性,让用户控制在什么时间看的数据。手风琴还担任内容概述,让用户了解有关产品的信息。

帮助用户找到所需品

在小屏幕上,用户只能看到大数据表的一小部分。当用户滚动数据时,锁定的标题等标志将引导用户,而根据用户指定的标准缩小内容的工具将允许用户以有意义的方式查看数据。

在我们一整天的课程中了解更多设计不同屏幕尺寸