《数据之美辽宁》网站——数据可视化动态图形信息的创新设计研究

张 璇　（鲁迅美术学院　116650）

一、项目的选题背景和前期调研

（一）《数据之美辽宁》网站的选题背景

在这个数字化生活的时代，互联网已经成为信息传播的主流载体之一。智能化可操作移动设备、移动应用程序互动体验逐渐成为人们不可剥离的生活必须，包括动态网站信息成为当今Web应用的潮流。本课题研究用户互动页面动态效果生成和信息的整合性体验，现今更多的APP应用和网站设计强化图形信息的多样性并将更多的人机交互体验，优秀的操作界面具有用户使用更简单、反映用户兴趣爱好更明显细致等优点。全球新媒体产业的日趋活跃，技术演进和应用创新的加速发展，使各国政府逐渐认识到新媒体在推动经济发展、改善公共服务，增进人民幸福感。新媒体将传统艺术作品从美术馆、博物馆、展厅走向公共广场以及各种城市空间，或是虚拟的网络平台。艺术家的这些举动无形中加强了城市的活性化。以城市本身作为艺术的表现主题，将“提高国家文化软实力，要加强国际传播能力建设，精心构建对外话语体系，发挥好新兴媒体作用，增强对外话语的创造力、感召力、公信力，讲好中国故事，传播好中国声音，阐释好中国特色。这里面不难看出，新兴媒体以及新兴媒体传播平台建设的重要性。数据化媒体的再利用再建设可以更好的服务于辽宁省政治、经济、文化建设，推进良性的文化发展。

（二）网站的创作思路和目标人群

《数据之美辽宁》网站是基于移动客户端的网站，主要功能是从90后的视角记录辽宁，带着大家认识有趣的辽宁。项目组9个成员从不同的角度切入，分析沈阳、大连市人文、生活等方面的内容。从一个微小的内容点着手，在数据收集整理和分析的基础上， 通过设计的手段得出可视化的图形，并在此基础上进行网站的界面设计。

网站的目标受众是20—40青年人为主（包括7岁以上儿童及所有想要了解不一样的辽宁的人）。

（三）市场调研/分析

目前主要是资源分享类网站对某地的环境人文进行介绍，但是从数据的角度出发宣传某一地方特色的网站相对较少，从90后视角关注辽宁大连、沈阳的城市人文、历史、饮食、语言等方面的分享类网站几乎还是空白。比如《城》网站讲述大连的广场文化是大连地标式建筑特色，从数据的角度整理出各个广场不同的参数和特点分析比较便于用户深入的了解广场文化的不同层面。

总结数据分享类网站的特征分析出：

1.图文结合数据分析直观有效的传递信息

2.视角独特，从一个小点出发深入挖掘

3.加入动态图形效果丰富视觉层次

4.卡片分栏方式，清晰便于快速浏览信息

二、流程图

网站的流程图

图例1：《数据之美辽宁》网站流程图

三、《数据之美辽宁》网站界面设计及创作思路

（一）网站的整体风格分析

1.网站标识及衍生图形设计

网站的标识数据之美辽宁是根据一种星状数据类图形设计的，体现了文字的内涵。将衍生图形应用到网站的图标设计中去，使得整个设计具有数据的美感。

2.网站的一级界面设计

网站的一级界面导航分成首页、关于项目、项目成员三栏，主页布局上至下分为三个部分分别为页面标题及导航区、通栏超链接推送、页面内容区（项目网站）。

3.网站项目组界面设计

网站项目组界面有9组。成员们选题后收集相关信息并对其分析整理成数据并将数据进行可视化设计，在这个基础上设计制作和发布相关的页面。9组设计都有着鲜明的风格和特色。比如其中《时节印象》是以大连的特色节日为题材，重点分析讨论大连节日活动内容，以及数据的可视化图案，在考察时对大连节日数据的收集，大连一年之中地方特色节日主要有八个，从旅游的方面切入，整理相关图案，分析网站服务人群，及同类网站的交互研究与分析，创作过程中的数据采集，用户心理分析，数据可视化，将插画风格的图形融于页面设计中形成独特的设计风格进行设计。

（二）网站的交互设计

1.界面布局的不同

比如在《時光碼頭》的设计中，一级界面为首页，单屏呈现，动态图案与文字相结合，以报纸的风格排版，边框和暗纹相结合，把主次内容通过图形图案分开，很容易让观者识别；二级界面多以小标题的方式呈现，把三级界面中的文字归纳总结，二级界面的排版有疏有密，文字大小不同，突出主次，两段文字之间有插图作为辅助，增添趣味；三级界面多以文字和图案为主，主要介绍的图案占接近一屏的面积，辅助的图形穿插在文字段周边，让观者很容易分清主要内容是什么。所有的界面设计，主要内容都放在了“最佳视域”的位置，符合观者的视觉方向，尽量做到满足大部分人的视觉。

2.导航及辅助图标

按钮及辅助图标在页面中起到引导用户浏览点击的作用，具有交互的功能。特别是用在导航中，用图形的语言直观有效的传递导航每一栏的信息。比如项目组《逮味儿》网站，做的是一个大连特色美食的网站，但这也不是一个单纯的美食网站，它还加入了一个新鲜元素大连方言。网站名叫：逮味儿，这个名字就是结合了大连话所取出来的，体现了地方特色。首页网站导航栏按钮是结合大连当地的菜品进行的图形元素设计。线框式的图标与手绘的配图形成了有趣的对比。

图例2　网站导航栏按钮

（三）网站的数据可视化设计

1.数据的收集整理

确定主题后，项目组成员通过不同的方式收集整理数据。比如项目组《渔灯影草》研究方法主要以访调查走访的形式，对周边的住户，渔民进形一对一访问，在访问过程中以录音，笔录的形式记录调查。调研的内容主要包括周围的地形，渔民的生活习俗，金石滩码头船运情况，金石滩港渔船数量，金石滩海域有哪些海鲜以及周边人口分布情况。通过实地的考察得出结果，最后再经过分析整理得出相关数据。

2.数据可视化设计

数据的图形化一般会具备以下几个特点：准确性、创新性和简洁性。其目的是要对数据进行可视化处理，以使得能够明确地、有效地传递信息。在项目组《渔灯影草》网站中数据图形化集中体现在访问数据页面中，数据的内容分布有：庙上村渔民年龄的分布图，本地人口与外地人口环形图，金石滩港客运信息，渔民收入，渔民打渔的时间图，金石滩港周围地图，以及渔民使用大船小船的航行的时间公里图。比如：年龄分布图：表现方法；年龄分布图是以渔民头像为设计元素，用不同深浅的蓝色代表不同的年龄阶段的渔民，依次按照采集数量成比例排列。特点；用户可以根据头像的颜色直接去读数据。

图例3　数据图形，渔民年龄分布

3.动态图形信息设计

动态图标可以应用于导航按钮、gif动态图片以及页面中图标按钮。随着这些动起来的图标出现在网页设计中，给网站的功能增加了很多的趣味性，使机器和人的交流互动不再枯燥，用轻松有趣的方式引导用户浏览视线。

比如项目组《渔灯影草》网站中渔船航行时间图，其表现方法分别以木船，和渔民打渔的大船为元素把船设计成图形，结合海浪线，并做成动态，让船自然地移动到各自的终点处，代表了木船和大船的航行时间差。特点；动态的效果，增添趣味性。

四、结语

在项目创作过程中，结合我省城市规划理念，形成统一的思想情感和创作思路；在题材的选择上进一步拓展形成城市新的文化精神增长点；利用社会化媒体的传播优势，打造我省经济、文化、人文精神、城市精神的新视角；拓展新媒体视觉形态，塑造城市形态特征在人们心中的主观印象。数据可视化设计是一门综合了美学、设计艺术学、传播学、计算机学等多种学科的艺术，在进行设计和研究时会发现它交叉运用着其他学科，正逐步走向数字化、信息化，从静态向动态转化，从单一的表现形式向多元表现形式转化，从二维设计向三维思维转化。同时，它与受众的互动性也正逐步加强，与观众进行沟通，拉近普通受众与艺术的距离。项目组成员的九组作品从90后的视角出发，表达对他们生活了四年的城市辽宁大连以及沈阳的感受和情感，创作出有温度有趣味的作品。并通过数据化图形设计让更多的用户深入了解每个项目点。

经过反复的推敲、从选题到数据收集整理再到网站界面设计：dataliaoning.com一个关于辽宁的数据可视化网站诞生了！