校园虚拟展示网站的互动设计

摘要：在当今信息社会，网站是最好的宣传工具之一。对高校来讲，设计优秀的校园网站就是它的招牌，更是它的身份的标志，对宣传学院的整体形象和加速实现学院的品牌发展战略，有着不可低估的价值和作用。本文作者从艺术与技术相结合的角度出发，通过对校园虚拟展示网站的设计和实现，对网站的互动设计要素及网站的风格特点进行了较为深入的探讨。

关键词：虚拟展示 互动设计 风格特点

中图分类号:TP393.092 文献标识码：A 文章编号：1007-9416(2012)05-0159-01

校园虚拟展示是以真实校园为设计对象，通过计算机、网络等信息技术，在网络环境中，数字化、艺术化、全方位构建校园，将场景还原给视觉本身，展示校园风貌。近年来，校园虚拟展示网站已成为数字化展示设计的一个重要方面。

1、校园虚拟展示网站设计原则

校园虚拟展示网站不同与传统的校园展示形式，其特点主要体现在设计过程和展示效果等方面，要想做出比较理想的校园虚拟展示网站作品，应遵循以下几点设计原则：

(1)以人为本原则。在信息时代的今天，展示设计已经是融科技和艺术于一体的虚拟展示设计的形式了。虚拟展示呈现了人性化的特点，这要求在设计师在设计时要更加注重人在展示活动中的地位。

(2)互动参与性原则。在虚拟展示的过程中，优良的互动设计可以充分调动参观者的积极性，增加参观者的参与性，使参观者由原来的被动地浏览转变成主动控制展示，切实的提升人们的生活品质，实现真正人文关怀。

(3)艺术性原则。虚拟展示设计的艺术性是设计网站时应该关注的重要方面，倘若虚拟展示的设计缺乏艺术性，那么就意味着该设计的视觉形象比较牵强和乏味，很难给人带来艺术上的享受和视觉上的美感，缺乏设计艺术所能承担的美化功能。

2、校园虚拟展示网站的构思

进行实现校园虚拟展示网站互动设计之前，按照校园虚拟展示网站的设计原则，我对校园虚拟展示网站互动设计所需要的重要元素色彩、文字、图形和互动元素进行分析和构思，以求能找寻到一定的规律。

(1)网站色彩搭配的思考。色彩的象征性与文脉具有紧密联系，在全面了解校园虚拟展示网站欲传达的内容后，结合学院既有的印象，确立网站诉求的重点为科技与时尚，同时要体现出的是自然、环保，经过反复考虑，决定采用蓝色系为网站主色调，以白色系为网站的辅助色。蓝色非常纯净，具有理智、准确的意象，在和其它色彩进行比较后，作者觉得蓝色冷静、理智的意象比较符合学院的既有印象和感性诉求。白色是光明的象征色，具有高级、科技的意象，白色是永远流行的主要色，可以和任何颜色作搭配。二者有机的结合，较好的体现了科技与时尚的象征。

(2)网站文字编排的考虑。校园虚拟展示网站中主要的展示对象是校园建筑，而美丽的建筑又有“凝固的音乐”之称，作者就从此中获得了对文字编排的灵感。在校园虚拟展示网站主页面的导航设计中，作者用线与文字结合的形式来表现这种感受。通过对线条动力、弹力、重力效果的表现，表现物象的各种情绪和质感，以不同的形态传达不同的信息。设计中，作者用光滑曲线模拟五线谱的形式，表达舒缓、流畅的情感。对字体及字体的分布上，作者对字体做了类似音乐符号的编排设计，表达出跳跃、灵动的情感。

(3)网站图形设计的思索。图形设计语言异常丰富，在对校园虚拟展示网站进行图形设计时，作者研究了许多国外建筑大师的建筑设计效果图，从中汲取了灵感，对校园建筑采用实际模型和线型建筑效果图相结合的方式来表现。根据形式和内容的需要，以具象、抽象或象征的图形体现网站的主题，达到感人的艺术效果。

(4)网站互动元素的构思。互动设计的人性化体现在合理放置互动元素，简洁明确地设计其交互效果，才能保证用户在浏览过程中不会迷失方向。在校园虚拟展示网站中，作者对进度条页面互动设计的构思是：在线型的建筑上，采用盖房子的形式，表示当前网站加载到什么进度，当建筑完全盖好，网站也就加载成功了。建筑边上配以百分比文字，标示当前进度值，让网站使用者不至于产生等待太久的感觉；作者对主页面的构思是：采用校园建筑群作为网站的超链接，当使用者将鼠标放在校园某个建筑上，从该建筑中飞出五线谱形式的文字指示，告知该建筑是什么建筑，当点击时跳转到该建筑的子页面；当该页面浏览完毕，使用者可通过页面中眨眼睛的太阳花跳转回主页面，当使用者离开时，太阳花还会表现出沮丧的表情，这个设计灵感来自于作者女儿的一个太阳花玩具。

3、校园虚拟展示网站互动设计的实现

校园虚拟展示网站主要通过校园建筑的立体图形和线性图形的形式，结合音乐的表现元素，动态地全方位地展示校园物理环境、校园部门位置和功能、教学资源分布等情况，给观者呈现一个趣味性的、人性化的网络交互环境。

在校园虚拟展示网站设计进度条页面互动设计中，作者将FLASH技术作为核心技术贯穿始终，网站进度条，以建筑的虚实变化，展现了网站的虚拟展示的主题，充满了趣味性。

校园虚拟展示网站主页面互动设计中，作者将动画作为局部的视觉元素出现在页面的视觉中心，图形、文字等平面视觉元素和声音和动画结合，创造出全新的视觉效果，整个页面动感十足，当浏览者鼠标点击白色的建筑群时，可以触发有交互功能的动画，达到动静结合、人机互动。背景音乐与动画、交互元素和其他视觉元素相结合，营造氛围感染观者，让页面具有情节感，使受众在浏览的同时，被音乐唤起某种特殊的情感，从而加深对该网站的印象。

校园虚拟展示网站创新楼子页面互动设计中，作者对各栋建筑360度视角的全方位展示，更是立体化的，多层次地展现了校园物理环境、部门位置功能、教学资源分布等情况，使受众在浏览中，不知不觉地接受到虚拟展示的信息，宛若置身其中一样。

校园虚拟展示网站主要通过校园建筑的立体图形和线性图形的形式，结合音乐的表现元素，动态的全方位的展示校园环境及资源的分布情况。在网站设计过程中，紧密结合学院的风格诉求，通过对互动要素的研究和使用，使网站的整体形象呈现出科技性和时尚性的风格。期望能为其他校园虚拟展示网站的设计者提供一些参考方法，更好地调动网站使用者的参与性，达到良好的互动效果。

作者简介

沈剑，男，硕士，南京正德职业技术学院艺术设计与建筑工程系，实验师。研究方向：数字媒体艺术设计方向、动漫设计。