文｜许秋里 王丹宁

网易新媒体实验室：数据新闻在移动端如何突破页面限制

文｜许秋里 王丹宁

数据新闻往往涉及大量数据的二次提炼和加工，其进行可视化呈现时通常带有较为复杂的交互形式，对阅读设备和用户操作有较高要求。当前国内外不乏出色的数据新闻可视化作品，但多立足于PC端，依托大尺寸网页的多重交互展现，用精致的视觉和多维度交互展示丰富而有趣的内容。而在移动端，数据新闻则面临着难以适配、呈现不完整、加载困难等问题。关于这点，《卫报》数据新闻前主编Simon Rogers表露过类似的苦恼：整个新闻网页界面中的图表、交互、浮动框架等元素在移动版本中都未能保留。

鱼和熊掌不可兼得，在巴掌大的手机界面创作数据新闻，简洁的阅读体验和丰富的资讯内容有时只能取其一，如何取舍和妥协是一个新难题。网易新媒体实验室一直致力于做移动端适配的数据新闻，在数据新闻如何突破移动端页面限制，让可视化作品实现“逻辑好有内涵”和“容易读还有趣”的统一上，有较多操作体会。

一、移动端阅读时用户习惯在一屏内看完数据关系，导致长图式微

在移动端进行新闻阅读时，我们能一次性看完的内容受限于屏幕大小。阅读文章时，我们习惯性地手指上下滑动，串起全文的逻辑关系。但是在阅读信息图或交互图表等可视化题材时，因为我们聚焦的视野集中在手机屏幕里，一上拉或下挪往往忘记上面的图形或看不到对应的图例。所以，在移动端进行可视化新闻阅读时，用户期望在一屏之内看完一组确定的逻辑关系，而不是通过反复上拉下拉操作才能理解好一个意思。

我们可以拿自己的一个策划做反例，网易新媒体实验室在移动端数据新闻的尝试过程中，也有过用长信息图呈现的实验。实际上，传统的pc端长信息图在移动端往往会造成用户阅读数据新闻的不连贯——看到后面忘记前面的内容，反之亦然。比如在《卡梅伦连任英国首相，来瞧瞧近11位首相如何》中，我们运用了连线体现11位首相和他们的任职时间、党派、星座之间的关联。整张图在pc端上看清晰易懂，但在移动端时显得十分冗长，用户要来回拉动手机屏幕才能看清连线的一端究竟是什么，体验并不顺畅；而且看到下方时容易忘记对应的颜色是代表什么，即忘记图例。再如《阅兵方队背后的数字：84%的装备首亮相》这个长图，我们将四种方队数量做了可视化处理，用户依然要通过小幅的上下拉动来看具体方队的亮点和情况（如图1，图2）。

图1：长信息图在移动端如果不上下拉动，看不到对应的图例

图2：用户拉动到主要呈现位置时，也看不到完整的逻辑呈现

二、通过gif动图实现多帧切换，让用户能在一屏中浏览多维度内容

那有没有办法让用户不至于拉到下方忘记上面的图例，不用拉伸看清楚对应的关系？我们发现，最直接的办法是把各类图例和一组组的数据关系都做在一个手机屏幕尺寸大小的页面内。网易新媒体实验室把一张长信息图里的可视化素材进行分类，把长信息图做了一定的变形，切割成屏幕大小的一组组小信息图后，制作了GIF小动图来实现一屏内的多帧切换。它既能让信息图在一屏内承载不同维度的信息量，又能引导用户的阅读顺序，是个不错的办法。

在《全球恐怖袭击15年：多为爆炸袭击和连环案》中网易新媒体实验室即进行了这样的尝试，我们搜集了全球近15年来恐怖袭击的事件地点、袭击方式、死亡人数等。在呈现上，突破了传统的时间轴模式，以五年作为一个区间，做成信息图的一个定格，通过GIF切换依次呈现每个定格，让用户不用进行任何操作，配合简单的图例，用户即能在一屏内看到每五年恐怖袭击的事件和随时间发生的变化，大大降低了阅读成本。

图3：把长图切割为三张手机屏幕大小的小图，再制作成gif

三、H5交互专题能让用户通过切换页面看完多组数据，需要逻辑清晰

GIF动图的操作可以说是一个实验，通过动图，我们在一定程度上解决了长信息图单屏阅读时逻辑缺失的问题，但是在实现过程中，也发现了GIF动图适用空间有限。一是在移动端打开GIF动图加载速度偏慢；二是动图多帧切换容纳的信息不能太多，当有3个以上维度时，跳动着容易导致阅读体验混乱；三是GIF动图通过设置自动播放时间带动用户阅读节奏，但每个人对下一帧等待的时间要求不同，阅读体验本身也不够好。

在这方面，移动端的H5交互专题可以弥补GIF动图的不足。和动图类似，它能够将可视化的内容按照一定的逻辑进行切割，通过用户可控的翻页得以一个子标题一个子标题、一层逻辑一层逻辑地阅读完整个数据新闻可视化产品。

比如网易新媒体实验室制作的《影视剧里的中国抗日》，专题内容分为 “五六十年代、70年代、80年代、90年代以来、2010年后”五个逻辑点，用户手动切换页面能查看和感受对应逻辑层次的内容，这个信息量简单的gif动图切换是无法承载的。

图4：做成H5交互专题时，能突破动图局限，呈现逻辑更多

网易新媒体实验室结合专题特点和用户数据进行了一定的产品调研和用户研究，我们发现用户在交互专题页面浏览时不一定阅读完整个产品，如果该H5专题超过8页，用户跳出率非常高。所以我们在通过H5交互专题制作数据新闻可视化时，同样离不开一定的排列逻辑，这样用户会较有耐心地跟着看完。比如《影视剧里的中国抗日》这个策划，围绕主题按时间顺序进行呈现，总体逻辑在五点附近。这也是结合用户阅读规律，根据翻页操作繁琐的现实，力求做到移动端新闻阅读简洁直接，做出的妥协。

四、以时间做自变量，让数据跟着它变化，能增加交互页面逻辑性

可见，要想更好地在移动端呈现多元信息，将可视化素材进行有效切割极为重要，基于时间关系的切割是一种相对直接的操作方式。较之《影视剧里的中国抗日》，网易新媒体实验室在《1931-1945日军侵华地图》这个H5交互专题中，把“时间关系引领整个专题阅读”做得更为细致。在策划时，我们首先明确了要以年份为主逻辑引导用户一层层阅读，然后在主时间关系的基础上延伸出许多辅助内容，如当年的军力、战略物资、沦陷省份等。在时间作为自变量的基础上，各种延伸数据作为因变量随之不断变化。内容的主次和呈现的逻辑都十分鲜明（如图5）。

图5：用户通过切换不同时间，查看相应内容，带动阅读节奏

图6：以地理位置做区分，用户通过切换不同位置查看相应内容

值得一提的是，在页面交互设计方面，我们放弃了单调的翻页样式，代之以在同一个场景内进行时间滚轴切换。这种方式既保留了时间逻辑，同时也让可视化内容的递进显得更加细腻、不至于完全割裂。在用户操作方面，考虑到用户阅读习惯，我们并没有使用点击按钮的方式，即用户通过习惯性的下滑手势，就能看到时间变化和对应的内容变化。这样的交互效果摆脱了呆板的ppt式单页切换，变成在上一帧的基础上随时间变化各因变量跟着变化，呈现上更趋灵活和丰富。

五、地理关系也是切割可视化内容的重要方式，用户容易跟进阅读

除了时间做自变量，用地理关系做自变量也是移动端可视化编排的一个重要方式，比如网易新媒体实验室制作的《少林CEO释永信的全球布局》这个H5专题。作为数据新闻中绕不开的常见元素，地图是表现地理位置最直观的方式，然而在界面有限的手机端阅读，如何让复杂的地图变得清晰易读，也是一个需要思考创新并适当变通的点。

在这个专题中，我们使用了世界地图来表达少林寺方丈释永信在全球各地的主要活动，我们并没有对地图进行缩小处理。通过划分5个大洲，让整张大地图在一屏内的固定区域中显示不同的地域，用户可以通过地理位置的选择，查看每个区域发生的不同事件和相关影响（如图6）。

这种处理有两个好处，一是让地理位置的切换变得连贯和清晰可见，位置的滑动营造了一种遍布全球的感觉，贴合内容主题。二是手动选择区域让用户易于跟进阅读，在操作体验上有解锁和探秘的阅读体验。

六、当一屏内难以放下所需信息时，巧妙设计按钮和过渡页的浮层

当然，不论如何巧妙切换，在单屏中，页面对于信息量的局限始终存在，这时候按钮的设置就显得十分必要。在上面《少林CEO释永信的全球布局》这个题中，我们运用了较大面积来表现地理位置和相关事件的关联，逻辑清晰但略显单薄。释永信的身份是什么，全球布局又如何一步一步形成，这类的附加信息用户无法通过主逻辑捕捉到。于是，我们选择在页面下方固定两个按钮：“全球布局之路的形成”和“释永信的多重身份”作为用户阅读时的信息补充，这样既不影响地理主逻辑的表达，又完善和增加了相关信息维度，使得整个专题更加完善和耐看。

按钮的优势和局限都是用户 “可点可不点”，当文字量较大且都为必要呈现时，我们就得思考别的方式来呈现。网易新媒体实验室在制作《双线还原广岛原子弹爆炸前的77分钟》这个选题时，我们遇到了难题。作为叙事性强的故事还原型可视化策划，带有心理描写的文字对氛围的渲染必不可少。我们期望通过统一的时间点，在一屏内对比呈现广岛居民和美军投弹手的不同表现。这种对称关系的强烈的冲突性，完全基于有效的内容渲染，文字内容非常重要且无法删减。但是如果把内容隐藏在按钮内，不断点击的操作会大大影响用户的阅读体验，导致信息传递的不完整。针对这种情况，我们设计了过渡页浮层，将交互效果设置为必然出现。这样一来，用户先一目了然的看到爆炸倒计时，和两个典型人物的一句话自述，引起阅读兴趣，再通过滑动同时出现两个叙事性的小浮层，展现两个人物的详细自述，相当于在原有的时间逻辑上进行了内容叠加。增加了少量的滑动次数，保证了阅读体验的完整性（如图7）。

图7：用户进入页面时先看到主干信息，再次推动看到详细自述

逐年沦丧的国土：1931-1945日军侵华地图

“少林CEO”释永信的全球布局

广岛核爆70周年还原最后瞬间

移动端进行数据新闻可视化的探索是一个长期的过程，就网易新媒体实验室而言，用好时间和位置两个维度是重要手法。内容策划上，按时间和位置进行归类，能实现多维度内容有逻辑的切换；在页面交互上，按界面空间合理设置按钮或用户切换的时间差设计过渡页，也能更好地承载内容资讯。我们对移动端数据新闻界面编排和切换交互探索的目的，是力图突破巴掌大的手机页面限制，让移动端的数据新闻同样做到“逻辑好有内涵”、“容易读还有趣”。

（作者单位：许秋里，网易新媒体实验室主管；王丹宁，网易新媒体实验室编辑）