原文标题:Data representation on mobile devices
作者:Tobias van Schneider
译文正文:
如何有效的把表格当中的数据转移到智能手机屏幕上去呈现呢?
起初,只有纸张是承载信息的媒介。人们试着去分析已经收集好数据来观察未来的前景和变化。在所有的数据中,最大和最小的峰值很重要。人们在纸上画数据表格和图解,会考虑到信息的特点。
纸上观察信息的特征
纸张与电脑或者手机设备的屏幕相反,它是静态的。因此,表格包含了最大数量的行与列来展现所有的数据。这些表格难以阅读,但也没可选的余地;读者使用食指或是其他的工具,例如尺子等作为指示物,从视觉上突出重要的地方(desired line)。他们从左到右移动着指示物这么读下去。
人类也有一个特点,他们在单位时间内觉察到的信息量是有限的。读者无法一次就把包括7行3列的整个表格都处理好,所以他们要用食指作为指示物。阅读表格的时候,要花点功夫去找到我们所需要的。为了方便,像“纽约时报”这样的,所有的信息都被分块。段列内容是非常适合人类阅读的块状信息。
通过感觉和想象而觉察到的世界上的事物或者现象,你只能每次集中精神在一个点上。这被称为注意力的聚焦。
移动设备屏幕上的图表特征
屏幕尺寸和互动性。Iphone的屏幕尺寸非常合适用来观察,报纸专栏就很适合它。我们自然的使用从左到右滑动的惯用手势来切换专栏,滚动屏幕来浏览上下文。
如何把表格转到智能手机上去呢?
很显然,如果我们只是原样照搬过去,表格尺寸就必须要与手机的屏幕尺寸相一致的话,那结果就能难读了。高密度的信息和极小的文字注解更是让阅读难上加难。因此,为了把表格适宜的展示到手机上,我们得搞明白人是如何阅读这种数据的,里面什么内容是重要的。上文已经说过,人们用手指或者指针凸显数据串来阅读。
适用的块状数据
我们能为人们降低这种任务的难度,突出最佳的块状数据。表格中适宜的块状数据是一个(方便阅读的)串。因此降低了人们的压力。
行与列
让我们确定下把行或列中的关键数值放在什么位置合适。在这个案例中,垂直往下排列的2000年至2013年是不正确的。时间线是沿着X轴水平从左到右的传统排列的。例如,YouTube的播放器,下载进度条等等。那我们用这种模式看看。
这个案例中,我们一屏呈现了一年的数据,在一列中简单的展现了名称和数值。因此,我们添加了很多的年份数字在X轴上,通过滑动手势在它们之间移动。在一列里我们也添加了很多个名称和数值,向下滚动浏览。
动态
展示整个时期内动态变化的最佳方式是图表。我们知道显示全部的图表并不合理,因为一个人获得的信息量是有限的。因此,对于每一个参数,我们仅对峰值做了图解和注释,因为它们很重要。
结果
我们运用以用户为中心设计的原则使得一个图表更易于理解。移动设备上界面的数据更可读和易用。我们的精力集中在了表格中最重要的信息上。
(译文完)
我的想法
日常工作中经常碰到大量的表格数据,如果只是展示到大屏幕的设备终端上还好,换做手机或者iPad会比较麻烦。总结几点:
首先,与业务方一进步沟通确认,在如此小的屏幕上是否必须要展示图表数据?必须显示全?我们作为设计师,能否对其进行取舍?这一点事先沟通非常重要,曾经就出现过费了大力气做图表结果需求方觉得可有可无的情况。
其次,根据项目进度把控图表要做到什么程度。数据量越大需要进行拆解和重组的工作量也就越多,设计师很容易陷入局部细节中去。同时与写程序的伙伴沟通实现难度,太炫了伤不起。
最后,这篇文章提供了不错的思路,但具体情况还是需要我们独立做判断。比如最近的一个项目,时间点垂直呈现,后面的数据每一列都需要直观的作横向对比,因此,采用这篇文章中横向展示年份的模式并不可取。