在移动端如何玩转数据新闻?_中国（武汉）期刊交易博览会

　　数据新闻往往涉及大量数据的二次提炼和加工，其进行可视化呈现时通常带有较为复杂的交互形式，对阅读设备和用户操作有较高要求。当前国内外不乏出色的数据新闻可视化作品，但多立足于PC端，依托大尺寸网页的多重交互展现，用精致的视觉和多维度交互展示丰富而有趣的内容。而在移动端，数据新闻则面临着难以适配、呈现不完整、加载困难等问题。在移动端该怎么玩数据新闻?让我们听听网易新媒体实验室是怎么做的。
　　玩转移动端数据新闻的三种方法

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

　　网易新媒体实验室在移动端数据新闻的尝试过程中，有过用长信息图呈现的实验。实际上，传统的pc端长信息图在移动端往往会造成用户阅读数据新闻的不连贯——看到后面忘记前面的内容，反之亦然。比如，在《卡梅伦连任英国首相，来瞧瞧近11位首相如何》中，网易新媒体实验室运用了连线体现11位首相和他们的任职时间、党派、星座之间的关联。整张图在pc端上看清晰易懂，但在移动端时显得十分冗长，用户要来回拉动手机屏幕才能看清连线的一端究竟是什么，体验并不顺畅;而且看到下方时容易忘记对应的颜色是代表什么，即忘记图例。

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

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

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

　　GIF动图的操作可以说是一个实验，通过动图，在一定程度上解决了长信息图单屏阅读时逻辑缺失的问题，但是在实现过程中，也发现了GIF动图适用空间有限：一是在移动端打开GIF动图加载速度偏慢;二是动图多帧切换容纳的信息不能太多，当有3个以上维度时，跳动着容易导致阅读体验混乱;三是GIF动图通过设置自动播放时间带动用户阅读节奏，但每个人对下一帧等待的时间要求不同，阅读体验本身也不够好。在这方面，移动端的H5交互专题可以弥补GIF动图的不足。和动图类似，它能够将可视化的内容按照一定的逻辑进行切割，通过用户可控的翻页得以一个子标题一个子标题、一层逻辑一层逻辑地阅读完整个数据新闻可视化产品。

　　玩转移动端数据新闻的三种技巧

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

　　要想更好地在移动端呈现多元信息，将可视化素材进行有效切割极为重要，基于时间关系的切割是一种相对直接的操作方式。网易新媒体实验室在《1931-1945日军侵华地图》这个H5交互专题中，把“时间关系引领整个专题阅读”做得更为细致。在策划时，我们首先明确了要以年份为主逻辑引导用户一层层阅读，然后在主时间关系的基础上延伸出许多辅助内容，如当年的军力、战略物资、沦陷省份等。在时间作为自变量的基础上，各种延伸数据作为因变量随之不断变化。内容的主次和呈现的逻辑都十分鲜明。值得一提的是，在页面交互设计方面，放弃了单调的翻页样式，代之以在同一个场景内进行时间滚轴切换。这种方式既保留了时间逻辑，同时也让可视化内容的递进显得更加细腻、不至于完全割裂。在用户操作方面，考虑到用户阅读习惯，并没有使用点击按钮的方式，即用户通过习惯性的下滑手势，就能看到时间变化和对应的内容变化。这样的交互效果摆脱了呆板的ppt式单页切换，变成在上一帧的基础上随时间变化各因变量跟着变化，呈现上更趋灵活和丰富。

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

　　除了时间做自变量，用地理关系做自变量也是移动端可视化编排的一个重要方式，比如网易新媒体实验室制作的《少林CEO释永信的全球布局》这个H5专题。作为数据新闻中绕不开的常见元素，地图是表现地理位置最直观的方式，然而在界面有限的手机端阅读，如何让复杂的地图变得清晰易读，也是一个需要思考创新并适当变通的点。在这个专题中，网易新媒体实验室使用了世界地图来表达少林寺方丈释永信在全球各地的主要活动，并没有对地图进行缩小处理。通过划分5个大洲，让整张大地图在一屏内的固定区域中显示不同的地域，用户可以通过地理位置的选择，查看每个区域发生的不同事件和相关影响。这种处理有两个好处：一是让地理位置的切换变得连贯和清晰可见，位置的滑动营造了一种遍布全球的感觉，贴合内容主题。二是手动选择区域让用户易于跟进阅读，在操作体验上有解锁和探秘的阅读体验。

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

　　当然，不论如何巧妙切换，在单屏中，页面对于信息量的局限始终存在，这时候按钮的设置就显得十分必要。在上面《少林CEO释永信的全球布局》这个题中，我们运用了较大面积来表现地理位置和相关事件的关联，逻辑清晰但略显单薄。于是选择在页面下方固定两个按钮：“全球布局之路的形成”和“释永信的多重身份”作为用户阅读时的信息补充，这样既不影响地理主逻辑的表达，又完善和增加了相关信息维度，使得整个专题更加完善和耐看。按钮的优势和局限都是用户 “可点可不点”，当文字量较大且都为必要呈现时，就要思考别的方式来呈现。如果把内容隐藏在按钮内，不断点击的操作会大大影响用户的阅读体验，导致信息传递的不完整。针对这种情况，网易新媒体实验室设计了过渡页浮层，将交互效果设置为必然出现。这样一来，增加了少量的滑动次数，保证了阅读体验的完整性。

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

　　(来源：微信公众号“梅子匠”，研究院高春梅整理)

业内信息

在移动端如何玩转数据新闻?