论信息可视化设计中的图形表现

于海娇

摘 要：在信息社会，大脑通过对信息的感知构建意识，由意识指导行为。本文以“三亚市旅游服务网站”为载体，通过对网站的信息构建，运用可视化的设计方法，进行文字和数据的可视化设计，促使公众对整个网站内容的吸收更加便捷。用户若要得到较好的信息体验，需要通过可视化的表达形式，这是利用人类的视觉和触觉通过大脑分析来接收信息的交互技术。本文设计三亚旅游服务网站的过程，主要偏向传统的信息图设计，以静态图的方式呈现。通过图形转换重构数据媒介的可视化结构，将单一、平面、无序、碎片式的信息群转变为可视的模块化信息单元，或演化为动态流变的图像。

关键词：信息可视化;旅游服务;人机交互;网站设计

三亚是全国知名的旅游城市，在海南自贸区建设战略中，三亚占有重要的位置。三亚作为全国最南端的热带海滨城市，占据了北纬18度地区特有的宜人气候，非常适合旅游行业的开发。信息化社会中，良好的信息传递能够提高发展的效率，对于旅游城市来讲，信息可视化设计可以提升城市的整体形象。

人类接收信息的途径有很多，利用现代技术将信息可视化，能够让阅读者更快速、高效地吸收信息所要表达的含义，旅游者的信息接收效率和旅游体验也能因此得到明显提升。本文以三亚这个城市为载体，通过对其旅游服务网站的信息可视化设计，提升三亚的信息传递服务水平，提高游客与媒介之间信息的传递效率，为三亚的国际化添砖加瓦。

1 三亚市旅游信息的采集

在整个设计的数据收集过程中，从三亚市旅游的相关网站、政府的信息发布平台、相关统计部门的数据以及三亚市的旅游发展整体规划收集相关数据。通过对这些旅游信息数据的可视化设计，解决用户的信息焦虑，达到更好的信息传递。

美国的著名建筑师沃尔曼首次在其著作《信息焦虑》一书中提出，正是因为用户真正理解到的信息和认为应该理解到的信息存在差异，信息焦虑才会产生。[1]所以，如何对海量数据进行有效的处理、分类，构建次序分明的结构体系、适用于信息的高速传播的模型，是当今信息大数据时代的发展要求，也是满足公众心理需求的必然要求。因此，信息可视化设计得到了越来越多的专家和学者的认可，吸引了越来越多人的关注，更多的人投入了信息可视化设计研究中。

1.1 三亚旅游服务信息的统计

以2017年元旦的旅游者相关信息为样本——入境游客接待情况：

2017年元旦，三亚市共接待过夜入境游客44.89万人次，同比增长25.31%，其中外国人27.22万人次，同比增长41.60%。按各大洲游客统计：欧洲10.60万人次，同比增长49.94%;亚洲9.86万人次，同比增长44.75%;美洲2.47万人次，同比增长8.57%;大洋洲0.71万人次，同比增长4.79%;非洲0.19万人次，同比下降22.8%。外国游客总量排名前三位的客源国分别是俄罗斯（7.12万人次，同比增长102.67%）、韩国（3.70万人次，同比增长65.79%）、马来西亚（1.73万人次，同比增长189.92%）。[2]

三亚政务系统的信息构建中主要包括办事大厅、网上办公和公共服务的内容。其中，办事大厅有星级饭店、旅行社、旅游景区等内容;网上办公有三亚市导游网格化管理系统、出境游组团社签证专办员管理系统、导游个人信息查询、检查员个人信息查询、导游检查记录公示、导游检查手持机系统、国家旅游公共服务监管平台、饭店统计管理系统、旅游统计系统、行业财务信息系统站点、旅行社业务管理系统、投资项目管理系统、景区管理系统、假日旅游预报系统;[3]公共服务内容有政府服务热线12345、旅游服务投诉12301、旅游消费投诉12315、旅游价格投诉12358、食品卫生投诉88281474、旅游交通咨询88276703、出租车电召96789。

1.2 三亚旅游服务信息的分类

三亚主要的景区包括南山文化旅游区（5A）、大小洞天旅游区（5A）、天涯海角游览区（4A）、西岛海洋旅游区（4A）、热带天堂森林公园（4A）、千古情文化旅游区等。

三亚酒店主要分布在四大湾，分别是三亚湾、大东海、亚龙湾和海棠湾。三亚湾的酒店主要有国光豪生度假酒店、三亚海韵度假酒店、三亚湾度假酒店、阳光度假酒店、银韵度假酒店、克拉码头、天福源度假酒店等。大东海的酒店主要有三亚湘投银泰度假酒店、三亚海天大酒店、宝宏龙都大酒店、文华东方海景度假酒店等。亚龙湾的酒店主要有丽斯卡尔顿度假酒店、希尔顿度假酒店、喜来登度假酒店、万豪度假酒店、天域度假酒店、凯莱度假酒店、红树林度假酒店、天域度假酒店、爱琴海岸度假酒店、假日度假酒店、仙人掌度假酒店、金棕榈度假酒店、环球度假酒店、亚龙湾五号度假酒店和波尔曼度假酒店等。

2 数据信息可视化分析

2.1 数据信息图形化

信息可视化不单单依靠某一门学科，而是多个学科、多个专业领域知识结合的成果。国内著名学者彭度洁提出，近几年，信息可视化技术已经趋于成熟，得到了普遍广泛的应用，但视觉传达方面依然进展缓慢，具有专业技能的人虽然能够快速地理解这些符号、图像表达的信息，但是普通受众依然迷惑不解。[4]因此，在信息可视化设计开发中，需要更多地从普通群体的需求角度出发，在视觉艺术的表现形式上进行设计和改良。本文着力于视觉元素在视觉艺术设计中的重要地位，展开讨论和研究。

图形化的定义比较明确，是将在人类认知范围内的信息以及他们之间的相互关联，通过一定的技术手段转化为人类视觉能够识别、消化的图形或符号的一种信息化过程，实际上是对信息数据进行可视化的过程。[5]人类的传播途径中，图形的传播能力是高于文字的，从人类远古时代记录生产活动和祭祀的岩洞壁画，到现代社会的信息可视化，图形所覆盖的信息是抽象文字无法比拟的。信息的图形化不仅能够高效、直观地发挥信息的传递作用，更能保持图形视觉带来的强烈冲击力。图形化研究的是如何把人类社会交流的信息通过视觉可见的方式直观地展现出来。随着信息技术的发展，有了更多的技术能把信息通过可视化的方式传播，越来越多的设计师开始从事信息图形化研究，许多设计师喜欢使用“信息图形化”来区别传统意义上的信息设计。信息图形化的目的是借助图形、图像等处理方式，将设计者所要表达的信息，準确、有效地传递给受众，以便于受众的阅读、理解和更深层次的思考，以适应当代复杂的信息环境。[6]图形化的表现方式是基于逻辑的思考，它符合视觉作用于大脑的思考分析方式。在大数据时代，信息中含有大量复杂枯燥的数字与数据，并且这些数据对于非专业人士来说很难快速理解，从而使信息的传播效力减弱。

特定的风格设计需要遵循一些特定的设计原则。在扁平化的设计中，富有想象力和创造力的作品应该遵循以下几点。第一，整体结构的统一性。通过创造相似的视觉模型来达到相应的视觉效果，一系列相同主题的视觉体验，能够让用户快速理解产品表达的信息，从而更加快速地指导用户上手，提升用户的参与度，提高产品的价值。第二，元素的对比。利用特殊的设计元素如颜色、比例、排版、选中和未选中的差异等，形象直观地向用户表达产品的使用方式。第三，合理的排版布局。为了让设计界面看起来更加和谐，符合人类的视觉美感，通过对界面布局的排版来引导用户的视觉导向，从而更好地传递网站所要表现的信息，满足用户的使用需求。

图形设计通过象征和隐喻把人类的社会活动概括化，同时发散思维，运用形式法则重构，对图形进行视觉化设计，创造出符合大众认知特征的图形。[7]受众则通过图形的外形特点和联想机制产生视觉认知，从而通过大脑解读图形意义，最终达到传播的目的。美国学者菲利普·B·梅格斯曾说：“如果图形设计不具有象征的词语的含义，就不再是视觉传播，而成为美术了。”从这一角度而言，意义的实现主要是以同构—同质异构及异质同构的手法生成视觉意象。[8]

2.2 数字语意的可视化设计

柱状图用来对比同类信息，它具有横向和纵向坐标的属性。在形式上，它可以由一个中心点向上下和左右扩展，也可以以对称的形式来分布。

饼形图是圆形类图表的基本形式。通过对同一圆的不同比例的分割，表示某一状态量或者数据量所占总体的比例。

线性图的表现形式分为折线和曲线，利用建立的坐标轴，通过线段关键点的高低表示事物的变化情况。线性图不能简单地理解为地图，其表现的是节点之间的关系而不是地理位置关系。它也可以用来表现时间的变化和发展，可以是縱向，也可以是横向，通过简单的地线形图形表现来记录事物在时间上的位置。

点阵图是图示类图表的基本形式。点阵图以点为形式要素，通过点的轨迹达到视觉牵引，点阵图以坐标为基础，用点的位置描述信息，点是视觉的聚集处，通过点的大小、颜色和形状，对信息进行呈现。

2.3 文字语意的可视化设计

具象形是指能够详细地描述事物具体形象的图形，有更为生动和形象的特征，更易于识别。[9]与抽象的联想相比，具象联想更加表象，思维也更为轻松。人们常常习惯通过构造一个具体图像来探究更深层次的内涵，使读者与画面形成思想沟通。在文字图形化的设计中，应该强调鲜明、感性，用具体的形象来表述，尽可能遵守事物的客观形态，实现对现象的提炼，使作品来源于生活而高于生活。

具象美在表现技法上是指用真实的描绘手法对人和物的形象进行表现，其语义能够被直接生动地表现出来，让受众一目了然，加上形象的展示和气氛的营造，使其具有很强的真实感。

抽象是相对具象而提出的，抽象没有具体的想象，是对具体形象的概括、归纳，提取了实物的本质特征。[10]图形的抽象性是人类对于描述事物一种主观概括，这种概括是对事物本质的探索，它撇去了图形的装饰性，例如光的质感和现实的肌理。对于文字而言，它背后的意义是我们关注的重点，通过概括的手法对文字进行图形化设计，简化是一种手段。抽象图案的形成是对人类社会生活和自然事物的高度概括，运用点、线、面的设计语言来表现，可形成视觉的共鸣。

3 情感化的视觉可视化

3.1 拟物设计

在众多的互联网设计产品中，不少商家受到苹果公司的影响，多少会在自己的产品中引入Matephor Design这一设计概念，中文为拟物化设计。[11]

设计者通过对人们记忆中的情境进行重组加工，创造新情景，将隐喻建立在其丰富外延的准确表达上，创造旧有经历与新体验的联系。在视觉设计中引入了类似现实世界感受的设计，寻找心理共鸣。因此，拟物化设计名为拟物，意图拟情，也可算作情感化设计的一种具体设计手法。

拟物化的重点在于模仿人们日常熟知的事物，以这些事物为线索，模拟设计出符合用户认知的产品。理解这些，你就能知道实际上拟物化设计不仅仅是一个设计趋势，它还包括一个设计理念，即把现实生活中的对象用作视觉隐喻，使产品更便于使用。通过直观化的操作方式，只需要看一遍，就能知道一款应用程序是关于什么的，以及如何使用它。因此，照片应用程序中的图像看起来像一堆真实的照片，电子书看起来像真实的书籍，结合了现实物理学，应用到了翻页功能中。

3.2 扁平符号化设计

国际主义平面设计风格的诞生被视为扁平化设计的起点，其设计的特点不能不提到“形式服从功能”，这是美国建筑著名人物路易斯·沙利文提出的，他表述，应该当装饰部分与设计本体融为一体，则看上去比贴上去美观很多。[12]

扁平化设计如今存在的一个问题是，对界面上的所有元素包括按钮、按键都进行二维、平面化设计，按钮与其他元素都处于一个平面。若只是单一地将所有装饰元素去掉，不加任何设计改变，那么用户在使用过程中很容易会对按钮的可用性产生怀疑。简单来说，就是用户会考虑这是一个按钮，还是只是图片文字信息的一部分。所以，扁平化设计并不是简单地做减法，需要通过对色块的运用，根据不同的区域功能选择不同的字体等，才能达到功能最大化与形式最简化的统一。

3.3 情境化设计

受众是情感化对象，有着丰富和细腻的情感需求和变化。情感是伴随着理解过程而产生的心理感受，对人的心理和行为具有能动作用，中国人十分重视“情”，强调内在体验和情感作用，所以信息可视化设计将情感融入设计是情感化设计的重要方面。受众的情感化需求已经成为信息可视化探索中的一大要点，如何在信息与受众之间架起一座桥梁，是信息可视化的考虑范畴。情感化的介入的特征是：具有功利性、目的性，情感体验的交互性、层次性，既有直接的情绪，也有更高层次的与社会意义相联系的情感，例如道德感和理智感等。

信息可视化除了要满足对信息的高效传递外，还要增添信息传递过程中的乐趣，受众除了能快速获得所需信息，还能被触动，产生对美好事物的联想和回忆，同时，乐趣性的加入也促进了人们对信息的主动接收。情感化设计的核心是以人为中心的设计思想，功能实用性与情感化的介入并不矛盾，而是可以相互促进，推动信息可视化传递的。设计主要通过以下几点实现：第一，巧妙的形式感，吸引受众注意;第二，合理的交互体验，促进受众参与;第三，趣味元素的加入，激发受众愉悦的情感體验。

4 以三亚市旅游服务网站为例的信息可视化设计流程

4.1 PC终端网站

网站设计过程如图1所示，但有一点需要注意，这个项目关注可视化设计而不包括用户体验设计，例如用户研究、可比评论、用户行程映射、信息架构等。

4.2 手机终端APP

手机端分辨率较小，所以设计时要考虑得更为详细周到，在保持简洁的同时提升易用性。

5 结语

社会在不断进步的同时，对信息可视化的要求也在不断提高，不仅要做到信息的准确、有效传达，更要不断增强设计细分，满足用户对好的设计的需求，提升信息传播效率，这对设计师来说既是机遇也是挑战。诺曼认知心理学中对产品情感化设计的本能层、行为层论述，对信息图形化的情感因素分析起到了很大的作用。技术的进步，国内外信息可视化设计的发展，促使信息图形化传达在最近几年发生了新的变化，传统的印刷媒介转变为多维度媒介，除了静态的信息图形，动态信息图形和交互设计与体验设计都为设计师传达设计情感提供了方式和渠道。如今，每个人都是信息的传播者，也是信息的接收者，信息可视化在新的社会形势下，一定会有新的变化和发展。

参考文献：

[1] 理查德·索尔·沃尔曼.信息饥渴：信息选取、表达与透析[M].李银胜，等，译.北京：电子工业出版社，2001：18-23.

[2] 叶俊一.元旦期间三亚接待游客18.55万人次，同比增长9.3%[EB/OL]. http：//www.hkwb.net/news/content/2017-01/03/content_3136813.htm，2017-01-03.

[3] 张侨，黄伟展.海南国际旅游岛城市旅游经济效率评价研究[J].海南热带海洋学院学报，2017（4）.

[4] 张宇雷，刘湘琳.基于视觉元素的数据可视化感性特征的探讨[J].设计艺术研究，2012（6）.

[5] 斯蒂勒.数据可视化之美[M].祝洪凯，李妹芳，译.北京：机械工业出版社，2011：117-128.

[6] 斯彭思.信息可视化：交互设计[M].陈雅茜，译.北京：机械工业出版社，2012：104-106.

[7] 王凯，贺丽.信息可视化设计[M].沈阳：辽宁科学技术出版社，2013：89-92.

[8] 曹方.视觉传达设计[M].江苏美术出版社，2002：262.

[9] 麦克坎德莱斯.信息之美[M].温思玮，译.北京：电子工业出版社，2012：93-99.

[10] 温新才.意象文字与图形的关联性设计研究[D].西南交通大学，2015：14-29.

[11] 李佳.界面设计中的扁平化设计与拟物化设计之探议[J].艺术与设计（理论），2014（03）：56.

[12] 郝世博，朱学芳，朱光，李刚.国内外信息可视化研究的比较分析[J].图书情报工作，2013（07）：34-35.