手机开辟交互新机遇

分享给朋友:

这篇文章将介绍顶尖新闻发布者如何颠覆移动端的交互产品。“这些设备就摆在那里,并拥有充分的性能,那我们如何将他们融入到我们的故事呈现过程中呢?”

 

数据,数据,到处都是数据,哪里有充足的空间来展示它们?每当我想到已经能在台式电脑上实现绚丽的、可扩展的互动体验,如《雪崩》,并思考如何将之移植到我们手机上时,这一烦恼就会涌上心头。

只想着以更小的屏幕创作汇聚信息、更为基础和清晰可辨的图形时,将会面临一大堆挑战,但如果将手机视为一台简化版的台式电脑,挑战将是有限的。

“这些设备就摆在那里,并拥有充分的性能,那我们如何将他们融入到我们的故事呈现过程中呢?”《洛杉矶时报》数据可视化总监Len DeGroot说这番话时,(在手机上)展示一件显示洛杉矶地区主要的供水泄漏的作品,该作品可以实时探测出一个读者的位置,并能显示其周边供水管道泄漏的情况。

“这些设备很可能能带来大量的机会,如陀螺仪能感测倾斜和运动,更容易实现定位,以及内置摄像头等。”《华尔街日报》全球视觉负责人Jessica Yu说,“所有设备平台都有它们独特的机会。”

(在华尔街日报《2050年的世界》交互作品中,“当读者倾斜手中的手机时,就会发现位于顶部的晶状体插图是为一个读者创作的‘复活节彩蛋’。此时桌面端交互已位列第二位了。”Jessica Yu说。)

1 2

《2050年的世界》移动端上的“彩蛋”)

有时候,移动端先行的思想需要渗透到图形和交互行为最终如何被呈现在桌面端上,或决定各团队如何构建图形复杂的故事。

“总有案例显示,以移动端格式来思考,将有助于以更小的尺寸来组合信息,或是提供一个好的方式。”彭博社设计师Mira Rojanasakul说,“举个例子,当我们与编辑们列出一系列2016年可能会发生的、如同世界末日般的最糟糕情况的时候,尝试将其铺设进一张视图,要比将其分解成一个个适合移动端的文本和图像复杂得多,读者由此还可以滚屏查看。”

“我们为大屏幕设计的习惯已经动摇了。无论我们在想什么,我们都会为移动端考虑。”美国国家公共电台(NPR)视觉效果团队负责人Brian Boyer向我断言到,“如果在移动端行不通,它就会完全行不通。这通常意味着,大的、全面的、铺张的信息图表,我们都不会做。”

当我请设计师和开发者带走去揣摩他们如何建立网上交互媒体,他们都表示,智能手机为他们开拓了更具创造性的故事呈现方法。虽然许多人也表达了相似的挫折:地图霸占了整个屏幕,没有适用于iOS的自动播放软件,有关数据过载的担忧,试图适应垂直和水平方向展示的困难。

 

《洛杉矶时报》

数据可视化总监Len DeGroot

我们有多种方法,视乎我们有多少时间而定。我们会设想,用户通过我们掌握的数据希望获取怎样的体验呢?3

以《洛杉矶时报》的《老化水管》项目为例,我们认为读者最希望知道在他们身边的水管哪里存在泄漏的情况。所以我们假定人们会在手机上查找这类情况。

在页面的顶部,我们使用了定位功能来锁定目标,从而立即向他们展示身边存在的水管泄漏情况。一开始我们就想着以移动端实现这一项目。

部分交互功能在手机上并不能很好地运行,有时候我们只好放弃了。如果在手机上有些内容难以读取,我们会将图形或地图全部重新做一遍。我们有不同的内容可以根据手机屏幕的尺寸加以调整。我们的作品都设计成自动响应,但有时为了更经济,并不会试图强行修改部分内容。

当你有一份横向材料的时候,它往往并不适合在手机上使用,特别是数据特别紧密的时候。一旦将它尺寸缩小,在小的屏幕上将变得不可读。所以我们可能会做的是,收集这些信息,放入更大的框架里,并加以简化,从而让你可以看得清楚,并能够了解发展趋势。又或者,我们可以改变原有的观念——我们实在不指望任何人将手机打横来看。

有些时候,我们会舍弃一切复杂的内容,以做出一个简单的表格,让可视化得以呈现。为了适配手机,我们会做出一切不得不做的决定,这意味着有时候地放弃一些复杂地图片。

 

45. jpg

(《食品水分踪迹》桌面端的可视化效果)

6

 

《食品水分踪迹》这一展现每碟食物需要多少水分的作品中,为了适配移动端的尺寸,我们将可视化效果(以圆形显示不同食物的水分踪迹),调整成以方块表格的形式来展示。桌面可视化效果在这里并不奏效。

 

 

我们另一件作品《探索火星盖尔陨石坑》,原本我们只想着以VR的形式呈现,但我们后来也开发了以浏览器展现的形式。

在手机上,你可以通过转动手机屏幕,跟随着“导游”游览这一空间。我们希望能借此帮助人们了解这一地带,并以任何不同大小的设备来探索周围的环境。

我们也是D3的大用户。《探索火星盖尔陨石坑》就是在Three.js下制作的。但有时候HTML也能做得很好。我们同样是低配技术迷。我们很多精力都聚焦在如何控制页面数据体量,让文件尺寸减小。而这一关于火星的作品,在连接Wifi后有最好的呈现效果。

 

7 8

(在《探索火星盖尔陨石坑》移动端版本,用户可以通过转动手机屏幕,跟随着“导游”游览这一空间)

 

9

 

我们仍然在手机端地图使用上探寻更好的答案。

上述水管项目是我们第一个追求手机原生设计的作品。但像其他人一样,我们仍在探索如何在一个非常小的地图空间中展现复杂的信息。

我们有很多小花招来帮助实现想要达到的效果。在加载视频的时候,就如你所知道的,存在很多困难,特别是当你设计基于iPhone的作品的时候,它无法让视频自动播放。

在我们的《加迪纳警察枪杀事件》中,你可以观看到不同的摄像头画面,并通过拖动来回放或快进画面。我们可通过创建GIF文件,使之变得相当小,并增加HTML canvas元素。

 

 

 

《柏林晨邮》 

交互负责人Julius Tröger 

在几年前的柏林墙倒塌25周年,我们研究了柏林市多年来发生了怎样的改变。我们要求全市统计办公室提供柏林市居民实际出生地的数据,但他们当时掌握的数据并不详细。

一年后,当我们再次询问时,他们已经能够提供给我们一份很大的全新的Excel文件。

我们从中思考到两个问题。一是,这里面有哪些新闻呢?在柏林,你很少能遇到一位确实在这里出生的柏林人。第二点是,应该如何吸引我们的读者?

我们总秉持一个工作原则,任何一件交互产品必须对来自四面八方的读者具有吸引力。从第一印象开始,就必须让读者们能够认识到:你看,那很有意思,那里有我想要的新闻。

10Zugezogenen-Atlas》显示出如今生活在柏林的人们的实际出生地。拉近距离很重要,所以(我们设计了)人们通过输入他们所在的地址和城市,来读取相关信息。

我们把这一交互式地图放在最前面,是以德国为中心,但你可以缩小页面到整个世界,如果你想看到更大的画面。

我们还让你找到具体的家乡城市,得到具体的数据,并将之分享。在Facebook上,我们获得了成千上万次分享。这对我们来说非常重要,因为我们只是一份地方性新闻报纸。

我们还增加了前100座城市排名做对比。那时我们的视频编辑还走到柏林的大街上,问那些并非在柏林出生的人们,为什么他们来到了这里。

在移动端上浏览移动地图并不是那么容易。在台式机上,你可以将鼠标悬停,但在移动设备上,你不能这样做。你必须点击屏幕,但又无法有足够的空间看到工具提示。

不过,我们在这里做了一些有效的改变。当你键入地址后,你会变得很感兴趣,并立即放大查看。所以用户会更专注于输入不同的地址,而不只是平移和缩放查看周围的情况。

我们总是将移动端和台式电脑进行同时思考。在我们有了初步的想法,有了文本和其他元素,以及那些我们想要展示的内容,我们的设计师就会跟进。

当时我们的设计师提供了两份设计,一份适合台式电脑,另一份适配移动端。然后我们的程序员开始编程。

我们没有刚性的过程,我们只是利用Slack和Trello进行迭代,在我们喜欢和不喜欢之间选择样式。我们也将交互作品非公开性地发在网络上,从而让我们以自己地设备进行测试。

 

我们总会遇到视频方面的问题,如无法在iOS设备上实现自动播放。你不得不点击一下视频才能够开始,而它会随之变成全屏,以至于你从故事中抽离了出来,但这个是苹果公司的政策。11

对于我们的《柏林天际线》交互产品中,在台式电脑上的呈现非常复杂。用户一边滚动文字,可视化的地图将放大所描述的地方。这在移动端上也必须实现这一点。

我们使用了一位在《纽约时报》工作的同事开发的黑客程序   “canvid”,他已经将此开源了。

它采用不同的视频帧,在此基础上制作JPEG文件,然后把它们一次性地打包起来。所以你可以在iPhone上观赏柏林的天际线。

我们这里使用的解决办法效果良好,因为主要涉及的是图形,而不是一个庞大的数据。我们花了很大的努力,使其能在移动设备上运转。所以我很高兴,普通的读者,而不仅仅是数据新闻记者和技术人员,给我们留言、告诉我们,作品在移动端上表现得很好。

 

公共廉正中心 (Center for Public Integrity)

新闻应用程序开发者 邱悦

当我思考如何设计一款交互或图形产品时,它不完全只与设计有关,也需要考虑如何使数据接近读者,如何进行个性化设计,以让读者愿意输入自己的位置、出生地和职业。

这是关于如何使读者关心这些数据,或者使他们联想起他们已经知道的东西。随后在设计部分,你需要尝试找到有视觉吸引力的数据呈现方式。在这一点上,我们需要考虑不同的设备。

12我在设计适配台式电脑和移动端产品时的思考方式完全不同。设计用于移动端的产品时,不仅仅是花里胡哨的修剪,所编辑的内容是专门为移动用户而定。屏幕尺寸并不是唯一的大区别,也涉及到用户在你的交互产品上所能给予的有限注意力。另外,还需要考虑其他不同的移动用户使用习惯。

和许多人类似,我在设计过程中也遇到许多挑战。敲键盘和点击鼠标等在台式电脑上的操作手法能够很容易转换成移动端上的自然滑动姿势。但大部分时间最让人困扰的是实现盘旋:在台式电脑上,当你用鼠标滑过某些事物,就能看到其呈现的信息,能够探索这一交互式产品,但你不能在移动端上真正做到这一点。

我不认为,探索式的交互产品总会为移动用户带来有趣的体验。人们可能并不想在移动设备上执行这类操作。

如果我手上确实有一个桌面端的探索式数据可视化产品(需要重新设计成适配移动端),我将尝试为移动端用户设计不同的步骤,从而让他们避免通过点击或滑动来浏览。如经常让用户通过静态图像捕捉所需要的信息,如此一来人们在手机上能够获取更便捷的体验,也能得到了关键的信息。

地图对移动端来说是一个大问题,尤其是你手上有一张横向且占据整个屏幕的地图的时候。所以有时候你需要挑选最有趣的地点,并制作成静态图像,在移动端上呈现。这完全没问题。对于移动端,你可以创建更为有限的数量供读者选择。不可能指望他们能够点击每一个小点。

当有时间序列数据时,我们倾向于制作桌面端上的小模块。目前这仍然是一个非常简单的、一目了然地讲述故事地方法。为移动端读者讲展现一段时间内的故事,我可以循环一个GIF。又譬如,13可以通过其他方式,让用户看到在他们面前正在发生的变化。

在交易的有用的工具而言,我使用了一个Javascript库称为Modernizr的,这有助于检测,如果屏幕是触摸屏,并且也可以帮助检测屏幕的大小 – 基本查明,如果一个用户从一个向你走来 移动设备。有没有那么多出的现成工具,使可视化的移动工作,所以对我来说它必须逐案。

业内较为有用的工具,我使用的是一个名为Modernizr的Javascript库。它有助于检测一个屏幕是否为触摸屏,也可以帮助检测屏幕的大小,继而可以基本测出使用这一移动设备的用户是否会对你的产品感兴趣。目前并没有那么多现成可供移动端可视化的使用的工具,所以对我来说必须具体分析。

 

 

《华尔街日报》

华尔街日报全球视觉负责人Jessica Yu

随着这些日子里超过50%访问量都来自于移动端,在我们进行设计时,移动端不应该是事后才想起来的。

设计过程刚开始是相对不稳定的,而且与平台无关。我们首先集中关注我们尝试要讲述的故事,接着钻研如何讲述。它应该是一个游戏,一系列翔实的图表,一张动画插图,还是时间表,又或者是一个视频?

通过头脑风暴后,那些特定的方法、想法自然会涌现,多多少少都会适配一两种设备。

在桌面端和移动端上,用户界面有基本的区别:桌面端允许鼠标悬停和进行精确的点击互动,而手机可以让你以更直观的方式进行滑动、倾斜和平移。而在移动端上,你可以为读者选择一条路径,以暗含的逻辑展现信息,让他们通过滚屏或滑动的方式来获取。

《从冥王星到太阳》为例,桌面端呈现给用户的,从字面意义上而言是整一个宇宙。用户可以非常自由地在任一颗行星周边,以他们选择的任何一种秩序点击。

14但在移动端上,上述情景是在有限的空间里是不允许的。所以我们选择以一个垂直滚屏和展示信息卡的方式。在桌面端上,信息卡需要经过单击才打开,但在移动端上是在默认情况下打开。
在一般情况下,在移动端上最好使用不精确、易于重复的动作设计,特别是因为人们有时手持设备与操作是使用同一只手。这意味着滚屏和滑动优于键入。在可能的情况下,因为水平滑动可能会激活浏览器的后退/前进,有时纵向滑动会比水平滑动更好。

对于一些数据密集的图形,有的时候我们选择隐藏那些能够在桌面端呈现的额外深入交互的可能性。但如果我们隐约感觉到,一旦有读者发现有在桌面端上有更丰富的数据集,可能会觉得“受骗”,或者如果故事不是由简单的解决方案来讲述,那么我们继续集思广益。通常都会有一种方法。

我们会使用任何人们感到舒适的工具进行模拟,不管是代码、IllustratorSketch,或是经典的纸和铅笔,从一开始贯穿到我们每个转折点之中。考虑到我们的响应式网站,我们的模板已经预定义了手机和平板电脑的网格断点,以及台式电脑视口网格断点。这帮助我们以模块化的方式开始思考。我们也思考这些项目的社交媒体和网页宣传,以作为一个额外的断点。

为了存放我们的交互产品,我们创建了Bootstrap-based HTML模板,以映射到我们的网格断点,也为我们的样式表提供参照,从而涵盖基本的响应速度和类型层次。

定制不可避免地需要根据需要来分类。除了我们的交互式产品容器模板,我们已经建立了一套内部响应讲故事的工具来供新闻编辑部来选择。同时,即便是没有任何额外的定制工作,一个编辑也会在设计输出过程中将移动端的经验考虑进去。

 

一些技巧:

  • 尽量减少在移动端滚动功能上无效的交互。最常见的是,图表上不起作用的工具提示,以及地图上的平移功能。
  • 移动端上固定位置的重叠往往导致操作很繁琐。不妨尝试“折叠式”设计(参见:《英超联赛:经理人的墓地》),或者只是链接到一个新页面。
  • 如果你必须设置固定的元素,就确保它们在屏幕占据的空间不超过30%,即便是一个可延展的页面。
  • 通常在桌面端呈现效果最好的图表类型,并不适合在手机上呈现,转而设计一个条形图并没有什么可羞耻的。
  • 对动画也一样。最好坚持一些简单、有效的功能,如一个简单的淡出或直线运动。
  • 当你削减柱状设计时,如果下拉菜单并不是直观界面,应避免冲动地将一切隐藏到下拉菜单后。用户更习惯于简单的滑块,有限度的按钮或filters。
  • 对于时间序列图表,应保持较窄的视图,可以只显示最近的数据。

 

美国国家公共电台(NPR

视觉效果团队负责人Brian Boyer

我们所取得的最大进展是创立了一个开源系统Daily Graphics,我们应该为它取个更酷的名字。

这是一个可供掌握编程技能的人制作图形使用的相对轻量级的工具包。这不是一个所见即所得的工具,也不是Quartz制作的图表工具或类似的东西。它已假定你精通Javascript和CSS等等。

这是一系列我们所使用的初创模版。刚开始只有条形图,渐渐地添加了各种经常使用的图形类型,形成了一个小图书馆。您可以从中复制并开始工作。

如果你看一下美国国家公共电台制作的图形产品,我们的作品不是全世界最炫的作品。我们的图表没有赢得过设计比赛,但那是因为人们往往仍以思考平面杂志的方式来思考问题。

15举个例子,我们的竞选报道网站在设计上以移动端先行。如果你看看它的桌面端,只是我们的移动端版本的延伸。

选举地图是以标准的投影形式(projection)进行展示,并根据每个州不同的物理大小给出不成比例的权重。我们试图找出一个显示实际选举权力的合适方法。而我们最终的成果看上去有点像俄罗斯方块构成的屏风。

你早已有了这些竖列,每一方块都代表着每个州与该州的选举人票。在每个选举夜晚,它们都会被填充。当方块被填充到达到阀值,就有人在选举中获胜。这对我们来说足够漂亮了,而且它可行,并它在手机上也适配。

制作地图是艰难的,但说实话,我们也不必做很多全国性的地图。除非自然地理因素很重要,那时我们会制作,河流的路径,山脉的大小,鸟类的迁徙模式。我们也制作专题地图。

近来的时尚似乎是人们会设计“统计地图”(Cartogram),其中每个州是以一个正方形代表。但是,我们并不希望这么做,因为我们是相反的!我们认为,六边形在真正接近实际地理上做得更好。

我们对交互性有了太多的扭曲。不要让我通过交互来读东西!很多交互产品中都有无法适配移动16端的东西,像盘旋状态。这并不在我们的工具包里。近来我们制作最多的交互产品通常是步进式(stepper),在那里你点击,就会有东西推进,随着时间的推移能够看到变化。

我最喜欢的其中一组图形作品是关于沃尔玛接管城市的地图。在桌面端上是三联画,每幅画代表着某一年的情况。但在移动端上,我们做了GIF动画,并通过这三个地图轮换交替。

我们藏了一些技巧。我们设计了一款名为MapTurner的工具,是一种基于代码的命令行,用以生成基于定位的矢量地图,尽管我们明明使用了Arc工具来实现过程中这一点。MapBox我们使用得并不多,地图很华丽,但在移动端上运用困难。

我们还在Daily Graphics系统中建立了另一名为Pym.js的程序,取名于汉克·皮姆博士,又名蚁人。Pym的工作原理是,输入图形,它就可以提示需要多大的页面:图形的大小能横向和纵向变化。

 

彭博社

彭博社图形团队Blacki Migliozzi, Mira Rojanasakul, 和Alex Tribou

Rojanasakul:在经过故事研究阶段后,我会开始在Illustrator进行建模。随后,人们可以在HTML页面中进行构建。我们使用了大量的D3。我知道其他组可能会使用像Highcharts这类程序,这也许更简单,但也有更多的约束。

但内容始终是引导你去认识到设计应有的模样,交互应有的模样。所以真正耀眼的图形作品,必定是那些在大型桌面端能体验得到,也能够在小尺寸的移动端上体验得到的。

MIGLIOZZI: 说起这些更像是一个Web开发人员,我们主要是努力遵循适应性设计。有时它反应灵敏,有时我们只是展示备用件(如图表的图像)。我们始终为每个图形考虑所有可能的格式,然后决定什么是最好的。

有时候,一张动画可能会减慢页面更新速度。我们必须接受这一点,那么你就需要妥协,把它换成静态格式。但它仍然是读者可以在更小的设备上理解的东西。

TRIBOU: 最终你希望读者得出一个明显的结论,无论他们是在移动设备或是台式电脑上查看。不同平台上的交互产品可能让他们对故事的理解的并不相同。

17ROJANASAKUL: 下面是另一个关于我们行之有效的格式的例子,《预算测试》。我们在构建产品过程中一直在考虑的点击的问题,以尽量减少摩擦,从而让读者能够完全阅读。这是一个非常重要的组成部分。

我们曾经建造几个步进式的图形,但我们最终舍弃,转而采用滚动体验,例如,部分原因是在这种情况下(读者)跟进可能性更高。

TRIBOU: 我们做了很多滚动式体验产品,而不是点击。对一个用户而言,如果他们无需寻找新的页面,在阅读故事过程中滚动屏幕更为容易。

内容有助于决定采用这些设计决策。你可能会在创作一个故事过程中,发现一个动画有助于讲故事,并帮助读者更好地理解它。这有助于决定我们采用哪些尝试。

MIGLIOZZI:一个制作简单、却收获非常好的效果的图形作品,要数我们制作的《是什么让世界变暖》18

它没有花大量的时间来制作,也没有一个相关的真正硬新闻,但它却令人难以置信地好。

与此相比,我们的《碳时钟》则酝酿了数月。我们创建了一个室内模型来预测大气中的二氧化碳,而大部分的工作是验证模型,确保它的准确性。我们以前从来没有做过类似的事情。

图形本身是干净的,非常简单。我们知道《碳时钟》将是一个长盛不衰的的作品,所以我们愿意花所有的时间来构建模型。有时候你在一个星期内建成的东西最终也能长期流行,这很难说。

我们已经自由地去尝试了很多新的形式。我们基本上总是将我们当时认为有效地想法付诸实践。即使一年时间总会带来不同:我回头看一看旧的可视化数据作品,它看起来已经过时了。但事实上并非如此。我们在工作中仍会拿出那些旧的图形作品,但我们总会对它们不断进行变化和调整。

 

原文标题:Small screens, full art, can’t lose: Despite their size, phones open up new opportunities for interactives

作者:SHAN WANG @shansquared

译者:王齐龙

作者简介

王齐龙

关注时政、数据新闻。现供职于中国新闻周刊,从事国际新闻报道。