【每周一译_w11】移动设备上的数据呈现

原文标题:Data representation on mobile devices

作者:Tobias van Schneider

原文地址

译文正文:

如何有效的把表格当中的数据转移到智能手机屏幕上去呈现呢?

起初,只有纸张是承载信息的媒介。人们试着去分析已经收集好数据来观察未来的前景和变化。在所有的数据中,最大和最小的峰值很重要。人们在纸上画数据表格和图解,会考虑到信息的特点。

纸上观察信息的特征

纸张与电脑或者手机设备的屏幕相反,它是静态的。因此,表格包含了最大数量的行与列来展现所有的数据。这些表格难以阅读,但也没可选的余地;读者使用食指或是其他的工具,例如尺子等作为指示物,从视觉上突出重要的地方(desired line)。他们从左到右移动着指示物这么读下去。


这个表格应该以纵向展示的方式转化到iPhone手机屏幕上。很显然,上图这样展现数据并不合适而且读起来也很费劲。

人类也有一个特点,他们在单位时间内觉察到的信息量是有限的。读者无法一次就把包括7行3列的整个表格都处理好,所以他们要用食指作为指示物。阅读表格的时候,要花点功夫去找到我们所需要的。为了方便,像“纽约时报”这样的,所有的信息都被分块。段列内容是非常适合人类阅读的块状信息。

通过感觉和想象而觉察到的世界上的事物或者现象,你只能每次集中精神在一个点上。这被称为注意力的聚焦。

移动设备屏幕上的图表特征

屏幕尺寸和互动性。Iphone的屏幕尺寸非常合适用来观察,报纸专栏就很适合它。我们自然的使用从左到右滑动的惯用手势来切换专栏,滚动屏幕来浏览上下文。


左边的是一本书里的表格,右边是转换到手机屏幕后的样子。能看出什么不同吗?

如何把表格转到智能手机上去呢?

很显然,如果我们只是原样照搬过去,表格尺寸就必须要与手机的屏幕尺寸相一致的话,那结果就能难读了。高密度的信息和极小的文字注解更是让阅读难上加难。因此,为了把表格适宜的展示到手机上,我们得搞明白人是如何阅读这种数据的,里面什么内容是重要的。上文已经说过,人们用手指或者指针凸显数据串来阅读。

适用的块状数据

我们能为人们降低这种任务的难度,突出最佳的块状数据。表格中适宜的块状数据是一个(方便阅读的)串。因此降低了人们的压力。


原有的表格不合适,但是一个串或者数据块能完美的适配到iPhone屏幕中。

行与列

让我们确定下把行或列中的关键数值放在什么位置合适。在这个案例中,垂直往下排列的2000年至2013年是不正确的。时间线是沿着X轴水平从左到右的传统排列的。例如,YouTube的播放器,下载进度条等等。那我们用这种模式看看。


我们已经把原来列表中的无趣的数据做了优化从而更易于观察。现在我们就能看到动态的变化和峰值了。

这个案例中,我们一屏呈现了一年的数据,在一列中简单的展现了名称和数值。因此,我们添加了很多的年份数字在X轴上,通过滑动手势在它们之间移动。在一列里我们也添加了很多个名称和数值,向下滚动浏览。

动态

展示整个时期内动态变化的最佳方式是图表。我们知道显示全部的图表并不合理,因为一个人获得的信息量是有限的。因此,对于每一个参数,我们仅对峰值做了图解和注释,因为它们很重要。


每一行都展示了一个小的图表

结果

我们运用以用户为中心设计的原则使得一个图表更易于理解。移动设备上界面的数据更可读和易用。我们的精力集中在了表格中最重要的信息上。

(译文完)


我的想法

日常工作中经常碰到大量的表格数据,如果只是展示到大屏幕的设备终端上还好,换做手机或者iPad会比较麻烦。总结几点:

首先,与业务方一进步沟通确认,在如此小的屏幕上是否必须要展示图表数据?必须显示全?我们作为设计师,能否对其进行取舍?这一点事先沟通非常重要,曾经就出现过费了大力气做图表结果需求方觉得可有可无的情况。

其次,根据项目进度把控图表要做到什么程度。数据量越大需要进行拆解和重组的工作量也就越多,设计师很容易陷入局部细节中去。同时与写程序的伙伴沟通实现难度,太炫了伤不起。

最后,这篇文章提供了不错的思路,但具体情况还是需要我们独立做判断。比如最近的一个项目,时间点垂直呈现,后面的数据每一列都需要直观的作横向对比,因此,采用这篇文章中横向展示年份的模式并不可取。


方便纵向对比数据

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容