移动端信息可视化设计研究

——以“垃圾分类”选题为例

来源:《中国报业》杂志    作者:方诚    人气:    发布时间:2019-10-29    

  【摘要】信息可视化是对数据的视觉化呈现,优秀的信息可视化设计可以帮助读者获取和检索信息。本文以垃圾分类为例,从数据选择、设计形式和交互方式三方面,探讨移动端信息可视化设计的策略,即应当在筛选有价值数据的基础上,以具有美感的视觉表达,结合移动端的特点进行交互设计。

  【关键词】信息可视化 垃圾分类 移动端 【中图分类号】J05 【文献标识码】A
 

  数据可视化是人类视觉传播实践的一种当代形式,其字面意思是对数据(信息)的视觉化呈现,包含“以某种视觉形式对信息加以抽象、分类和重新界定”。信息可视化的实质在于,将信息以图像、文字、声音、动画等形式,方便人们快速识别和理解。优秀的信息可视化设计,往往在提高传递效率的同时,能营造出恰当的视觉美感,使丰富的信息和视觉美感相互契合。大数据时代,信息呈现爆炸式增长,可视化设计日渐成为信息呈现的重要方式,在一定程度上帮助我们将复杂的信息条理化、概括化、视觉化,找到信息获取的实用方法。

  2019年,随着《上海生活垃圾管理条例》的正式实施,生活垃圾按照不同标准开始进行分类,但垃圾种类之多、分类规则之复杂,给普通民众的理解和操作造成了一定难度。如何用简单易懂的形式,为受众展示复杂多样的垃圾类型,达到帮助受众进行垃圾分类的目的,成为垃圾分类信息可视化设计面临的首要问题。本文选取了政府部门和媒体机构的三件数据可视化作品,比较不同的信息可视化形式如何影响读者的认知效率。

  垃圾分类选题的信息可视化作品分析

  澎湃新闻和腾讯新闻均采用H5的形式,两件作品都以计算机技术做支撑,具备一定的创意和较强的视觉冲击力。澎湃新闻的作品,根据每件物品的不同特质,如外形、材质、用途等属性,将2055件物品的垃圾分类信息细分为47个查询组,如“瓶”“包装”“金属”等。每件物品所属的垃圾类别对应不同的颜色,每个查询组对应一个大的色块,用户通过点击大色块,可以详细了解每个查询组中不同垃圾类型的占比。以玻璃查询组为例,玻璃摆件属于可回收垃圾,玻璃药瓶属于有害垃圾,玻璃胶属于干垃圾,门窗玻璃属于非生活垃圾。

  腾讯新闻的作品是一个问答式的H5小游戏,通过设置垃圾分类一系列的测试题目,让用户模拟垃圾分类的过程。悬浮于页面中的垃圾出现之后,用户需要将垃圾投入下方不同类别的垃圾桶,如果分类正确即进入下一题,分类错误就浮现正确答案。连续答完10道题之后,可以查看最终成绩进入分享页面。

  政府部门的数据可视化作品则体现出较强的实用性。上海市绿化和市容管理局的《上海市生活垃圾分类投放指南》是官方较早发布的图表,其中以信息图表的形式罗列出多种生活垃圾。因为垃圾的种类众多,小小一张信息图表很难完全囊括,所以这张图表中主要展示的是常见生活垃圾的分类。

  数据筛选:从数据到信息

  以用户为中心的设计中,用户的需求是第一位的。数据是信息可视化设计的材料,设计者要提取对于用户最有价值的数据组合为信息,才能提高用户的认知效率。在垃圾分类的选题中,由于垃圾种类比较繁杂,用户最需要了解的是常见垃圾的具体分类,因而需要具有明确的问题导向的设计。澎湃新闻的《垃圾分类可视化查询手册》,筛选出上海市垃圾分类查询平台上2055件物品的分类数据,上海市绿化和市容管理局发布的《上海市生活垃圾分类投放指南》,展示了98种常见的生活垃圾分类。在信息可视化的第一阶段,设计者首先做了数据的筛选,提取了对用户最有价值的信息。

  设计形式:创造视觉美感

  一个充满想象力、以极富吸引力姿态出现的可视化设计,会让读者保持高度的专注度,带来高效的认知效率。美妙的视觉美学与优秀的图形设计,让读者的信息处于一种低压力的状态。在信息可视化设计中,色彩和图案是视觉美感的重要组成部分。

  1.色彩

  色彩是信息可视化设计中的重要因素之一,不仅起着美化画面的功能,还能传递不同的色彩语言。澎湃新闻的作品《垃圾分类可视化查询手册》中,干垃圾、湿垃圾、可回收垃圾、有害垃圾和非生活垃圾被赋予了5种不同的色彩。由于每一个查询组对应一个大色块,用户在对每一种具体的物品种类进行查询时,可以通过大色块中不同颜色的占比,判断不同垃圾类型。大色块面积越大,颜色越丰富,表示该查询组中垃圾类型越多。在信息量较大的时候,色彩成为进行垃圾类型区分的标识。

  2.图案

  扁平化和拟物化是可视化设计的两种方法,各有优势。扁平化设计抽象、极简、符号化,尽量将多余的装饰效果去掉,如纹理、渐变、透视等,让信息本身作为核心内容凸显出来,便于识别和记忆,特别适合屏幕有限的移动端。而拟物化的图形展示在手机上,受限于屏幕大小,细节可能无法完全展示,还有可能影响加载速度。腾讯新闻的《垃圾分类大挑战》中采用扁平化设计,游戏界面简洁大方,垃圾桶设计卡通化,创造出有趣味性的视觉美感。

  交互方式

  立足移动端的特点。PC端和移动端的交互设计有着根本区别,PC端的交互主要利用鼠标进行,而移动端更多的是利用滑动展现信息之间的逻辑。

  1.充分利用移动设备的功能

  能够感知倾斜和移动的陀螺仪、定位功能、内置摄像头和麦克风,都是移动端进行交互设计的优势。本文列举的三个信息可视化设计案例,并没有充分利用移动设备的这些功能。相较而言,一些第三方平台(如支付宝APP)有众多企业和个人开发的垃圾分类可视化小程序,充分利用了移动设备的各种功能,并体现出以用户为中心的设计思维。如依附于支付宝平台的“垃圾分类指南”小程序,除了采用搜索框输入垃圾名称、点击垃圾类别名称进行分类查询,还支持AR识别、拍照识别、语音搜索等功能,对用户而言非常便利。将拍照、定位等移动设备功能和信息可视化设计结合起来,更有可能创造出适合移动端的作品。

  2.增强移动端设计的趣味性

  澎湃新闻《垃圾分类可视化查询手册》的开篇,堆砌着不同种类的垃圾,如小龙虾、玻璃瓶、电池等,用户可以通过手指拖曳的方式,将垃圾“扔”出去。腾讯新闻的《垃圾分类大挑战》中,需用手指拖曳垃圾到页面下部的4个垃圾桶进行分类。和PC端相比,这种用手指进行的交互,更能提供游戏的真实感,给用户带来一种现实中扔垃圾的心理感受。这样有趣味性的交互设计,能够给用户带来新鲜感,吸引用户做更长时间的停留。

  3.迎合移动端用户的阅读习惯

  移动端的读者更习惯于在同一屏内完成阅读,在设计时可以将信息图表切割为屏幕大小的一组组小信息图,制作成GIF小动图来实现一屏内的多帧切换。信息量较大时,也可以采用H5交互的形式,通过用户的手指滑动控制翻页,达到逻辑性较强的阅读体验。上海市绿化和市容管理局发布的《上海市生活垃圾分类投放指南》是信息图表的形式,在移动端进行信息查询时,读者需要用手指进行图片的放大或缩小才能获取全部信息。这种交互往往会造成用户阅读上的不连贯,导致读者在放大缩小中忘记之前的内容,甚至出现忘记图例等问题。如果改为GIF小动图进行多帧切换,或者H5的形式进行交互,可能更符合移动端用户的阅读习惯。

  (作者单位:重庆交通大学人文学院)

  基金项目:本文为2017年重庆教育委员会人文社会科学研究规划项目“中英数据新闻实践与发展路径对比研究”(项目编号:17SKG086)成果;2017年重庆市社会科学规划项目“大数据时代基于移动端的数据新闻设计研究”(项目编号:2017PY17)成果;重庆交通大学交通文化产业研究院专项课题“数据可视化在交通新闻报道中的应用研究”(项目编号:RWJT201801)成果。

  参考文献

  [1]常江.图绘新闻:信息可视化与编辑室内的理念冲突[J].编辑之友,2018(05).

  [2]赵楠艳,陈欢.媒体融合背景下信息可视化设计中的形态要素及构成表现形式研究[J].美与时代(上),2016(11).

  [3]郑明峰,顾振宇.面向认知效率的信息可视化设计[J].艺术与设计(理论),2011,2(12).

  责编/邓应华

来源:《中国报业》杂志2019年10月(上)P46-47

责任编辑:陈沁 审核:戴靖