菜单

移动表:比较和其他数据表

通过 艾米沙德2017年9月17日

摘要:锁定标头并允许用户根据需要选择数据子集,使大型数据表可用于移动设备。


在小屏幕上显示大数据是一项艰巨的挑战How do we make a large amount of data fit on a small screen? Other than limiting the number of rows or columns of data, what other options are available to display tables on small screens? What does a usable table look like on mobile?

(The general problem of having more data than fits on the screen is not specific to mobile: information-visualization researchers have struggled for years with the topic of showing data that has more columns (or rows) that can fit on the user’s screen — be it a large monitor, an array of monitors, or a small mobile display然而,屏幕越小,我们就越有可能遇到麻烦对于任何给定的数据集,都需要仔细考虑manbetx官方网站手机版,以尽量减少可用性问题。)

在我们的文章中比较表,我们介绍了提供数据的关键要素,例如需要内容的一致性提出有意义的属性给用户由于一次可见的数据量很少,因此对于移动桌来说,两者都同样重要,甚至更重要你必须首先为大屏幕创建一个可用的表在将其翻译成小的之前The need to make a table work on a smaller screen may be a good reason, excuse, or impetus to reevaluate the content and attributes in your table, regardless of screen size, and to improve content for all users. 

列足够清晰易读

The number of columns that fit on a mobile screen without scrolling will depend on the width of those columns物品需要清晰易读,无需用户放大

对于复杂或冗长的条目,例如比较表中的条目,只有2列可以清晰地放在狭窄的移动屏幕上对于数量较多的表,较窄的列可能有效,允许更多列可见 

全国橄榄球联盟的球员统计数据是数字的,允许在屏幕上显示11列而不进行水平滚动请注意,这是通过仅使用第一列中对方团队的徽标和列标题中的统计信息的缩写来实现的,这对于不熟悉此简写的用户来说将是一个问题。也就是说,只有橄榄球狂热分子可能会首先对这些详细的球员统计数据感兴趣。

Rotating the Phone Is a Last Resort 

旋转手机可以同时显示更多列信息但是,你在列空间中获得的东西,你会在行空间中丢失此外,如果您指定他们必须如何握住手机,这可能会给用户带来麻烦仔细考虑获得宽度的收益是否平衡了下行空间烦扰用户并丢失数据行的空间

要比较Citi.com上的信用卡,用户需要按照说明操作,旋转设备以继续使用比较信用卡功能 一旦手机旋转,大部分屏幕高度专用于信用卡的大图像,当用户滚动时,信用卡锁定到位,只留下很少的空间用于比较表数据(这是需要的经典例子重新考虑在移动版网站中使用图像:虽然信用卡照片可能是桌面用户的良好列标题,但对于移动用户来说,它们应该被抑制或缩小,而使用仅限名称的列标题可能会更好。)

棒柱接头到位

对于任何填充多个垂直屏幕的表格,粘性列标题可帮助用户了解他们正在查看的内容Without sticky headers, it is easy to lose the context of what the table is displaying. 

左:BestBuy.com的这个比较表没有锁定列标题或行标题,这使得理解表格中的数据变得更加困难Right: The screenshot shows the table scrolled, with no labels visible. 

清楚地指出是否需要水平滚动

当数据不适合纵向移动屏幕的宽度时,用户可能需要水平滚动才能看到完整信息(而水平滚动对桌面和移动用户来说一般来说都很讨厌,对于移动屏幕上的大表来说这是可以接受的。)

但是,对于这种滚动工作,它必须是显然有更多的数据超出了横向折叠旋转木马, arrows or cut-off elements convey this information best. 有时使用点, but are typically harder for users to notice and understand than arrows or cut-off elements. 

在eBag的网站上,最终产品列被切断,表明可以使用水平卷轴。
Subaru网站使用数据表上方的点和箭头向用户显示更多内容屏幕可用在这样的manbetx官方网站手机版中经常会忽略点,这里有点令人困惑,因为两个点突出显示“当前位置”(即,当前可见两列)此外,如果放置在数据显示内,而不是在页面顶部,箭头将更有效。

将左列固定到位

如果用户必须水平滚动以查看所有数据,则最左边的列(通常是行标题列)应锁定到位,以便用户可以看到必要的标签at all times. 

富达为用户锁定了投资名称和列标题The last column was slightly cut off to help users realize they could scroll to see more information. 
Officeworks.com.au locked the first product in the comparison table in place, so users could compare other items against that first oneThe idea here was that the first item in the comparison was the “primary” item (shown by the label 主要比较 )作为比较中的参考用户可以用不同的主项替换所选的主项Arrows within the body of the table indicated that users could scroll the data left and right. 

让用户选择要查看的数据

如果数据不适合屏幕,则用户可能没有时间或希望看到所有数据所以问题就变成了如何向他们提供与他们需求相关的信息。

该问题的答案取决于用户任务和数据类型,并且通常比移动界面允许的更复杂(了解有关我们信息可视化解决方案的更多信息应用设计 course).  Here are two strategies that limit the amount of data displayed on the screen and work in a variety of situations:

  • 允许用户精确地完善所需的数据集在看之前数据
  • 让用户控制数据视图他们正在看到数据

如果用户需要,第一种方法可行查看数据,但不需要比较它他们可以在显示之前将数据选择范围缩小到所需的特定信息For instance, users may only want the features of a specific model of car, the nutrition information for a specific food item, or the statistics for a particular player, rather than comparing that information across multiple items. 

要从Jamba Juice查看冰沙的营养信息,用户首先需要选择感兴趣的饮料,然后显示特定于该项目的数据A toggle between 介质 , and  allows users to select which option they are interested in, but does not aid comparison between the three(For example, to find out the difference in calories between a medium and a small drink, the user would first have to commit the number “410” to memory, then switch to the table for the medium drink, and finally do the math subtracting the remembered number from the newly displayed number — engaging in lots of mental work that people are notoriously bad at.)

第二种解决方案是为用户提供服务控制他们看到的具体细节For instance, some may be interested in the similarities or differences between two products; others may care only about certain attributes of your data — for example, they may need to compare the trunk capacity or safety features, but not the noise level of two vehicles The ability to select what rows or columns are shown on the screen lets users focus on the subset of data that is of interest to them.

左图:在戴尔的网站上,用户可以通过页面顶部的菜单选择最感兴趣的产品规格默认显示所有规格中心:用户可以选择任何产品规格Right: The resulting view showed only the user's selection.

数据组的手风琴

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

  • 请参阅表中可用数据类型的概述
  • 直接访问 to information of interest 
在Samsung.com上,比较表显示所有规格,仅显示产品之间的相似性或差异,或用户自己选择的标准该网站使用手风琴对相关属性进行分组,使用户可以控制在什么时间查看哪些数据The accordions also acted as an overview of content, letting users know what information was available about products. 

帮助用户找到他们需要的东西

在小屏幕上,用户只能看到大数据表的一小部分诸如锁定标题之类的路标在用户滚动数据时定向用户,并且根据用户指定的标准缩小内容范围的工具允许他们以有意义的方式查看数据。

Learn more in our day-long course on 针对不同屏幕尺寸的manbetx官方网站手机版