信息可视化在网页设计中的应用

1信息可视化概述

1.1信息可视化的定义

信息可视化是“利用计算机支撑的、交互的、对抽象数据的可视化表示，来增强人们对这些抽象信息的认知”的方法与技术。信息可视化最早出现于18世纪，历史和政治学家Playfire和数学家Lambert为了帮助人们更好地理解数据，根据复杂的数据创建了可视化图表。随着人们对于信息可视化技术的研究，信息可视化应用的领域越来越广泛，它不再只是表示数据的一种方式，更成为深度挖掘数据之间隐藏的特征和关系的一种手段。随着计算机科学的发展和各种移动设备的普及，信息可视化在网页设计中又引领了新的研究热潮。

1.2信息可视化的流程

信息可视化的过程可以分为三个阶段：源数据处理。将收集到的海量信息和数据进行处理和加工，使其简化和标准化，以便后期的快速调度和输入可视化流程。源数据处理是整个信息可视化过程的基础。可视化图。这个过程完成从数据到可视化图表的转变，通过各种可视化技术将抽象的数据用易于理解的图形描述出来，并表达出各个信息的数量、质量和关系等特征。视图转换。将抽象的数据转换成图形以后，按照用户的需求进行显示从而完成信息的输出。除此之外，还需要将用户的反馈信息传送回软件层而实现人机交互。

1.3信息可视化的方法

信息可视化的数据种类很多，包括一维数据、二维数据、三维数据、多维数据和时间序列数据等。这里着重介绍多维数据和时间序列数据的可视化方法。多维数据的信息可视化技术有很多种，其中比较有代表性的有基于几何的可视化技术、基于图标的可视化技术和动画的多维可视化技术等。基于几何的可视化技术包括平行坐标系方法、Radviz方法、散点图矩阵方法和Andrews曲线方法。平行坐标系方法使用平行的竖直轴线代表维度，在竖直轴线上标记多维数据并用折线相连相关坐标点来表示多维数据；Radviz方法使用圆形坐标系来实现多维数据的可视化；散点图矩阵方法就是将多维数据的各个维度两两组合绘制成一系列按规律排列的散点图来显示多维数据可视化效果；Andrews曲线方法将多维数据的每一数据项通过一个周期函数映射到二维坐标系中的一条曲线上从而展示可视化结果。基于图标的可视化方法用具备可视化特征的几何图形作为图标来表示多维数据，这些图标的每一个可视化属性如大小、形状、颜色等作为维度，通过多维数据到这些维度的映射来实现可视化效果。随着计算机和互联网科技的发展，动画由于其形象、直观、交互性高和容易被理解等特点已经被广泛应用于用户界面设计和网页设计中。时间序列数据是指具有时间属性的数据。时间序列数据的可视化方法包括线形图、堆积图、动画、地平线图和时间线方法。其中时间线方法是以时间轴为水平轴线，将数据信息以图标或者图片的形式按照时间顺序标记在时间轴线上。时间线的方法最开始被应用于历史事件记录中，后又发展用于医疗记录和犯罪记录。由于其完整的记录体系和系统的记录方式，时间线被应用于越来越多的领域。

1.4可视化变量

对于可视化变量的研究丰富了信息可视化的研究领域和应用领域。传统意义上的可视化变量包括位置、形状、方向、色彩、纹理、灰度和尺寸，一些学者将其中的色彩细分为色相、亮度和饱和度。近年来有学者将嗅觉、触觉、听觉等对于可视化变量的补充在很大意义上丰富了信息的表达方式。可视化变量选取的是否恰当将直接影响到信息表示的质量。

2网页设计中的信息可视化应用分析

2.1网页设计概述

网页界面是指人与计算机之间以互联网为载体的界面，通过文字、图形、图片等元素传达信息内容以达到人机交互的目的。借助互联网强大的存储和传播能力，网页界面将来自世界每个角落的信息以最快的速度传达给用户。网页设计的工作目标，是通过更合理的颜色、字体、图片进行页面设计，在功能限定的情况下，尽可能给予用户完美的视觉体验，高级的网页设计甚至会考虑到通过声音等来实现更好的试听感受。随着互联网的应用越来越广泛和平民化，伴随用户的接受能力和审美能力的提升，网页界面的美观性和易用性越来越重要，信息可视化恰好解决了这一问题。网页中的信息可视化应用由来已久，从开始的视觉图形设计，到现在网络中随处可见的信息图，通过信息可视化进行的网页设计让更多信息更快更好地被用户接受。

2.2网页视觉设计与可视化

伴随互联网的快速发展和普及，网页设计变得越来越重要和关键。网页界面本身就是由文字、颜色、图片、位置等为基本元素的，而这些元素也都属于可视化变量的研究范围，因而在网页视觉设计中引入信息可视化就非常自然和必要了。随着各种网站的普及和多样化，一个吸引眼球和易用的网站则会让你的网站在众多同类型的网站中脱颖而出。互联网的一大重要功能就是传递信息，近年来越来越多的网站开始将传统的文字信息转换为信息图的形式，这样大大降低了用户理解信息花费的时间和精力，又提升了网站整体的视觉效果。网易的数读中国网站就是一个典型的应用案例，数读中国将每天的国际、经济、正在、民生、社会等方面的新闻或者话题通过信息图的形式表达和解读出来，用户第一眼看上去就会直观了解到话题的内容，可以帮助用户快速浏览信息。

2.3网页交互设计与可视化

交互设计就是设计师对产品和用户之间的互动机制进行分析、预测、定义和探索的过程。网页的交互设计则是通过网页语言表达出所要告诉用户的信息，同时显示用户的操作功能。好的交互设计可以帮助用户快速地接受和理解信息，实现产品的功能。交互设计=视觉界面设计﹢用户行为设计，界面的意义是为了让用户实现同整个系统的交互，好的交互设计可以让用户更加有效率。因此除了应用传统意义的可视化变量实现视觉上的可视化，还需要对用户行为进行分析预测从而设计操作流程等以期获得更好的用户体验。以rodania网站为例，网页中网站logo放到了主导航正中间的位置，这也是最显眼的位置，该网站的网站历史页面，以时间为截点，向用户展示网站的重要历史和传统，由于是时间序列数据，采用了时间轴的可视化展示方法，用户点击年份数字，即可查看该年份的历史时间，或者通过点击左/右翻页箭头来切换上一个或者下一个历史事件。时间轴最大的意义莫过于可以系统、完成地记录某一领域的发展足迹和详细事迹。相比传统的文字堆砌，rodania通过时间轴用最直观、简便的方式将网站历史展现在用户面前。

结语

信息可视化越来越多地被用于网页设计中，无论是网页的视觉设计还是交互设计，其目的都是为了提高网站的易用性，帮助用户快速获得和理解信息，提升用户体验。信息可视化的方法和技术有很多，随着互联网技术和设计的发展提升，相信信息可视化可以在网页设计中发挥更多的作用。

作者：曹新瑜 郝锟 单位：燕山大学