黄河科技学院虚拟校园开发说明书.doc

目 录1 绪论.1 1.1 毕业设计的背景及目的.1 1.2 国内外研究情况和相关领域已有的成果.1 1.3 课题研究的目的与方法 .2 1.4 报告书构成及研究内容.22 虚拟校园设计制作过程.3 2.1 相关领域调查.3 2.2 对象群体定位.4 2.3 虚拟校园项目设计的流程与创新.4 2.3.1 框架系统架构 .4 2.3.2 界面UI设计 .6 2.3.2 三维地图制作.8 2.3.2 人机交互设计 .103 虚拟校园项目设计问题总结.14结论.15致谢.16参考文献.17附录.181 绪论1.1毕业设计的背景及目的毕业设计课题是黄河科技学院“虚拟校园”项目设计。虚拟校园是一种基于WEB的三维展示空间，将现实场景采用3D模型方式展现，用户能够直观、真实的体验虚拟世界。将现实中的实物场景用计算机模拟的手段展现在用户面前，用户可通过移动三维地图，浏览、查询校园楼宇以及信息，使浏览者对校园环境产生身临其境的感觉。 当下，各个大学都开始大力建设推广数字化校园理念。黄河科技学院非股东制民办高校，而信息一体化数字校园需要大量资金人力支持，所以在此环节略弱于其他高校。但在其26年的坎坷历程中，走出了一条中国民办高校特色发展之路，得到了社会各界的广泛赞誉。虚拟校园的开发建设正是将学院26年的辉煌画卷呈现于世人面前，让外界人士一睹我国第一所民办高校风采。同时对学校的外宣、招生、校容校貌的展示起到了强化性作用，为数字化校园工程建设迈下了坚定的一步。1.1国内外研究现状和相关领域已有的成果来自据工信部公布的权威数据显示，截止到2009年11月低，中国的网民规模已达到3.6亿，比去年增长20.8%，互联网规模位居世界第一位。随着互联网的皮接，人们意识到虚拟现实技术的巨大应用前景，因此虚拟现实技术几乎是所有发达国家目前都在大力研究的前沿领域，其发展也达到了异常迅速的程度。实际上基于虚拟现实技术的研究主要有虚拟现实技术与虚拟现实应用两类，在国外虚拟现实技术研究方面做的较好的有美国、德国、英国、日本、韩国等国家。在我国浙江大学、北京航空航天大学、国防科技大学、中科院等单位在虚拟现实方面的研究工作开展的相应比较早，相关的成果也比较多。据统计，我国最早建立虚拟校园的高校是天津大学，其后浙江大学、深圳大学、北京大学、西南交通大学、上海交通大学、清华大学、复旦大学等一些著名高校也纷纷采用虚拟现实技术建立了虚拟校园。由于虚拟校园项目门槛较高，大部分高校虚拟校园都是由公司协助开发完成。一套全方位的虚拟校园产品市面估价约在12万到20万之间，在费用方面更限制了高校虚拟校园方案的推广与应用。1.3课题研究方法根据学院当下需求，进行实地考察与市场调研。对学院的历史发展，理念的研究及其他高校进行调查。向学院相关部门索取信息资料，在网上及书店查阅并搜集相关行业的成功案例及延伸资料。确定学院的理念定位，根据理念定位，展开创意。撰写开发报告、全站架构图，并且跟负责部门进行沟通，对创意思路及画面表现进行修改。对符合学院要求的方案进行优化调整，并且把方案做进一步修改，最后具体内容的制作，根据自己的完稿设计确定毕业设计报告书。1.4报告书构成及研究内容虚拟校园是利用计算机建模技术以及空间、声音、视觉跟踪技术等综合技术生成的集视、听、触、觉为一体的交互式虚拟环境，是以营造现实感为目标的新技术。在各种类型的艺术创作中，创作者都要将其艺术构思转化为一种看得见、听得到、摸得到的艺术媒介形式。正因为虚拟现实对视、听、触逼真的模拟，恰恰可以满足艺术创作者对于其艺术构思的转化及其艺术追求；也正因为虚拟现实技术的介入，使艺术作品在艺术效果和表现手段上也越来越趋于完美。以虚拟现实技术为载体和手段的虚拟现实艺术从艺术效果上来说隶属于数字艺术的范畴，但它是数字艺术发展中的一种最高级的形式。它不仅可以模拟现实的世界，更重要的是它通过计算机虚拟出我们幻想中的空间，给人们带来全新的视野。目前，虚拟现实艺术虽然在互联网上的应用有了较大的发展，但在艺术设计领域中的应用还处于起步阶段。在理论方面的研究国内也才刚刚开始，有许多问题还需要进行深入的探索。因为虚拟校园的设计牵扯到用户终端体验，所以在创作的过行程中不断进行请教、修改，同时参阅了大量相关书籍，以免出现个人思想代替大众观念的现象。2虚拟校园项目设计制作过程2.1相关领域调查通过对国内外高校、企业虚拟空间展示案例调查发现，较早将现实场景放在网络的是英国IASK公司，其次是美国谷歌公司将地球卫星图通过数字处理展示于互联网。自2004年起，国内开始出现以全景照片方式展现当地市区、城市的互动公司，其后三维城市类展示公司开始慢慢崛起，至今发展规模较大的两家三维城市展示公司分别为杭州的E都市和广州的都市圈。而拥有虚拟校园的高校，其项目大部分为国内后起三维数字公司所做，如杭州卓锐、北京讯邦两家公司。在整体外观、互动形式、开发语言上十分接近都市圈、E都市公司产品，即校园整体三维地图外加各个建筑名称简介。其余完全由高校自己独立设计制作的虚拟校园项目，80%都倾向于整个项目的功能，信息架构。但在项目整体外观、用户体验、人机交互难易度上要输于公司所承接的项目（如图2.1.a、2.1.b、2.1.c、2.1.d）。图2.12.2对象群体定位当今世界，网络信息传媒规模已逐渐壮大，其声势不亚于电视、平面等传统媒体。而网络媒体的高度将紧追随国民经济收入、电子信息教育普及等因素不断提升。在黄河科技学院虚拟校园项目设计用户定位中，通过以下三个方面进行调查：外事交流：从黄河科技学院大事记、对外交流年鉴可以看出，外宾访问黄科院的频率从2004起开始逐渐上升，最多一个月有7次外宾来访。外国人是虚拟校园站点的特殊对象群体之一，功能设计上应尽量简洁化，降低操作门槛；关键字：通过Baidu指数、Google趋势了解到，搜索查询“黄河科技学院”“黄科大”等字符的用户，86%以上年龄都在18到20之间，粗略可判断出该用户群应是广大考生。所以在外观设计上尽量时尚、美观，以赢取用户体验、回访率；在校师生：通过相关部门提供的信息数据得知，于南区举办的讲座，北区到场学生占总人数16%。反之，讲座定在北区，南校区到场学生最多占35%。进一步调查得知，除非是大型活动、特殊讲座，正常情况下两校区学生很少往来。在框架规划中应考虑各个院专的展示，方面师生互相了解；2.3虚拟校园项目设计的流程与创新在设计制作整个虚拟校园之前，首先要构思出一套成熟的结构体系。包括初期项目结构定位、中期项目内容资源整合，到后期的创新型版块的引入。只靠闭门造车肯定无法完成，这就需要设计者从在线信息收集、参考、借鉴，到线下实地信息考察、咨询、整合。待结构梳理完毕，还需要考虑整个项目的可实现程度。计算机语言编写应用是艺术专业学生的弱项，为了最大程度的实现自己的想法，在近几个月的时间里不断逼迫自己去学习自身兴趣以外的知识。以下是黄河科技学院“虚拟校园”项目设计的整个流程，分别从框架系统架构、界面UI设计、三维地图制作、人机交互设计四个方面对虚拟校园作品进行阐述。2.3.1框架系统架构在制作整体框架之前，特别对国内所有高校虚拟校园进行了调查。整理发现，比较成熟的高校虚拟校园在框架设计上，均脱离不了左右式结构。即左校区三维图，右风景照片；或左风光全景、右校区平面图。对比发现，此种框架结构在19寸以上的宽屏显示器上观看效果极佳，效果甚是大气；但在17寸方屏显示器上整体大打折扣，整个框架略显拥挤，通透感下降。而我国现有网民中，17寸方屏显示器的使用数量最多。所以在规划项目框架上，拟定了一种可兼容不同显示器的架构，虚拟校园站点框架可随显示器尺寸自动放大缩小（如图2.3.1.a、2.3.1.b）。（a） (b) 图2.3.1构思整个项目展示信息。所有高校虚拟校园站点主要展示的对象均是建筑、风景。而黄河科技学院是一所拥有26年历史的民办高校。通俗点讲，学院的环境绿化、整体规划等要输于其他百年高校。通过对黄河科技学院近几年的宣传画册分析，得出以下四点可用方案：荣誉（HONORS）、学术（SCIENCE）、师资(TEACHER)、大学(UNIVERSTY)四大版块。加上站点设计必不可少的“返回首页（HOME）”，其首字母恰好组成HHSTU五个字母。而“HHSTU”正是黄河科技学院名称的英文缩写“HuangHe ScienceTechnology University”（如图2.3.1.c）。（c）图2.3.1信息框架构建完毕后，方可进行站点架构设计。在此特别花了两个星期时间来温习大二大三期间学到的计算机辅助设计知识。最终完成了整个项目的首页、二级页面架构、以及两者间的通信架构设计（如图2.3.1.d、2.3.1.e）。（d）（e）图2.3.12.3.2界面UI设计界面设计至关重要，其颜色、版式搭配摆放直接影响到用户对于整个项目的第一印象判断。友好的人机界面可提升整个站点的质量、信誉度。反之，则会在用户初印象中打折扣。前期用户群调查显示年龄在18-22的人群居多，所以在界面设计上采用了时下较流行的半透明效果、黑白彩色对比效果。对于UI图标的设计，尽量采用图形化元素加以辅助，保证各个年龄段的用户均可看懂，轻易上手（如图2.3.2.a）。（a）图2.3.2在主站界面的设计上，不断进行改进、取证，通过不同尺寸的电脑屏幕、电脑配置对虚拟校园项目主站进行测试。以求在所有屏幕之间取得最佳效果。近几个月的毕业设计中，先后对主站界面进行了四次改版。从最初的左右式布局结构，到最后打破常规，主界面中只显示虚拟校园三维地图（如图2.3.2.b）。（b）图2.3.2在虚拟校园站点二级页面的设计制作上，为增强用户体验，在整个大背景上做了平铺技术处理。背景采用蓝天白云的做铺垫，底部用虚拟校园全景图进行修饰。这样做的目的都是为了兼容当下越来越大电脑屏幕。在17寸方屏上看，二级页面正好撑满整个屏幕。各个版块均为出现被滚动条遮档的现象；在19寸以上的宽屏上观看虚拟校园项目设计，背景下的白云、蓝天、草地全景等元素会自动随屏幕拉伸。整个界面顿显空灵，开阔（如图2.3.2.c）。（c）图2.3.2对于荣誉展示版块的设计制作，首先联系相关部门对学院校史馆进行考察参观，总结出校史馆整体的装饰色调。校史馆相当于一所大学的历史博物馆，所以在汲取其色调的同时，加入了少量传统纹样。在整体架构上应用了四个分段对校史馆进行展示：加载界面、操作说明界面、馆内实景界面、各个荣誉证书界面（如图2.3.2.d）。（d）图2.3.22.3.3三维地图制作三维地图是整个站点的灵魂版块，在设计制作三维地图之前，首先对学院各个建筑进行拍照采样，并制作各个建筑、设施三维模型。调查发现，俯视、斜视45为最佳观看角度，为和其他高校三维地图区分，虚拟校园项目在此采用了俯视42，斜视45，并渲染出对应TGA透明图，以方便后期整个地图制作使用（如图2.3.3.a）。（a）图2.3.3三维地图的拼接在整个项目中占份量的较重，因为用户第一印象看到的只有三维地图。三维地图的制作不但考验设计者的整体、细节把握能力，更能考验了设计者的心理素质。偌大的一个校园地图，几乎都是从一沙一树做起，该从哪入手是最大的难题。在此，笔者是通过以下方法进行制作：实地考察，手绘出校园规划草图；联系相关部门，得到校区理想中的规划图纸；结合规划图绘制出现有校区实时地图（如图2.3.3.b）。（b）图2.3.3根据平面地图，将已完工的三维模型一一置入。笔者在此选择学校标志性建筑物-信息大楼为参照物，先确定准信息大楼模型的大小，其他模型按此比例进行缩放。制作的过程中发现，若果严格按照平面将所有建筑对号入座，那整个校园将拥挤不堪。分析原因，之所以拥挤，和地图的透视角度、校园面积、整体规划有关。为使整个校园看上去更协调、通透，通过反复对比调整，终实现南北校区建筑物错落有致，又不脱离实体规划。（如图2.3.3.c、2.3.3.d）（c） (d) 图2.3.32.3.4人机交互设计交互设计，是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。即人和计算机之间的对话。本文“2.3.2 界面UI设计”小节中可以看到，主界面在近两个月的时间内经历了四次大改版。美观程度是一个因素，但并非页面改版重构的最主要原因。每一版界面设计完毕，笔者都会让身边的朋友、同学进行操作体验，并站其身边观察。总结发现，前三版界面都存在不少问题：体验者不知道如何操作、某些版块从站点打开到关闭根本没有参与互动、打开速度过慢体验者会略感急躁等等。而在第四版界面的设计开发上，改进上述缺陷同时，也加入不少体验者给出的意见，具体说明如下：1、三维地图交互设计：撇弃原有上下左右按钮控制方式，革新地图展示程序，实现了鼠标点击任何位置均可拖动三维地图的应用效果。按照众多体验者提出的宝贵意见，在三维地图中加入的浮动的白云、移动的人物、汽车等动态元素，使原本静止的地图看上去更活泼、友好（如图2.3.4.a）。（a）图2.3.42、主导航交互设计：主导航，即为H、H、S、T、U五个大按钮，负责将用户指令动作分别传达于各个版块。以实际生活为例，开关朝上开灯，反之关灯。转化到互联网上则为鼠标划入（MouseOn）、鼠标离开（MouseOver）两种状态。而“鼠标按下”状态只有千分之一秒的持续时间，在该项目设计中暂忽略不计。默认情况下，主导航按钮为灰色单字母状态，当鼠标划入该区域时，主导航按钮变为彩色立体旋转状态，并配有相应状态音效（如图2.3.4.b）。（b）图2.3.4为方面用户互动操作，主导航采用浮动式框架设计，无论页面缩小到何种程度，导航均会伴随页面一起缓冲移动，无需像传统互动模式，需将浏览器滚动条翻倒最下面方可进行按钮选择（如图2.3.4.c）。（c）图2.3.43、分页面交互设计：每个院专、部门都拥有一个单独的版块，通过首页三维地图，可进入相应单位版块。而该单位版块之中，又分为2-5个小版块。通过右上角的按钮可进行区域内部切换。将此按钮阵放置在右上角，正是遵循了人们长久以来形成的习惯-右手握鼠标。所以Baidu、Google、Alibaba等多数站点都将其注册框放置在右上角，以方便用户右手操作（如图2.3.4.d）。（d）图2.3.44、荣誉展示交互设计：荣誉版块全局以校史馆为载体对黄河科技学院建校20余年来，所获得的各种荣誉证书进行逐个展示。传统的图片排列方式不足以吸引广大用户，在此同样采用了三维空间的方式体现。观察发现，多数用户看到展馆中排列整齐的奖状，都会有“点击看看”的反应。为保持整个展馆的完整性，在此采用了透明按钮作为互动节点，一旦鼠标移入奖状区域，该区域会自动给出反应。单击鼠标，方可出现相应奖状大图（如图2.3.4.e）。（e）图2.3.45、球形全景展示交互设计：球形全景是此次虚拟校园项目设计中的一大亮点，也是整个项目设计制作中难度最大的环节。球形全景不同于传统的环状全景，环状全景通过普通相机拍摄即可实现，并且实现起来难度小，但其弊端是无法对特性空间进行上下左右前后全方位展示，中间会出现大楼、大树被拦腰截断，原本漂亮的场景遇此情况将变得产不忍赌，这反而失去了全景风光展示的意义。而球转全景恰好可实现此功能，通过六面体拼合法，将空间以立方体的方式进行展示，使浏览者拥有身临其境的感觉。通过对同一个场景大量拍摄（48张）、拼接，最终实现了球形展示效果（如图2.3.4.f）。（f）图2.3.43 虚拟校园项目设计问题总结几个月的时间转瞬即逝，回顾黄河科技学院“虚拟校园”项目设计中的每个环节，无不历历在目。以下是整个项目设计开发中遇到的难题，也是需要注意的问题：动手之前对于项目架构需要明确、明了，避免出现半路返工，中途走进死胡同的现象。项目的应用、可用性，版块的设置，以及项目的可实现把握度。这些都是需要在初期重点思考的重点问题。用户群的定位，适应所有群体有所困难，那就针对某一类群体进行调查、制作。正如“所有人说好的人必定是个坏家伙”。有针对性的定位项目方向，才能在首期取胜。三维地图的制作。首先要静下心来，考虑好该从何处入手，实在拿不准，找几个点逐个进行试验。至于地图的经纬度，可以通过网格线的方式来准确丈量。而地图的各个元素的规划控制，则可以通过色块来表示。带整个地图开发完毕，将色块换成实际物体即可。人机交互设计。能用、好用、好看、易用才是人机交互设计中的精髓。外表再美的产品，没人会用就是一副皮囊；交互设计不可只对着电脑，更要起身融入到用户中间，第一印象总是最宝贵的资源。整合身边资源。虚拟校园项目涉及到整个学院，这就需要到各个学院区沟通协调，以得到项目中所需要的素材，在此方面可以大大节省整个项目的难度。结论如果说虚拟现实仅仅是一种在实验、生产以及科学研究中运用的技术，那么它在现实生活中对人们的影响就不会如此之大。虚拟现实作为一种新型的技术，可以广泛应用到人类的每一种现实生活之中，使人们可以全身心地沉浸于虚拟世界之中。因此，虚拟现实便成为一种新型的人类经验，正如迈克尔海姆所说：“虚拟现实的本质最终也许并不在技术而在艺术，也许是最高层次的艺术。”由于虚拟现实是以营造现实感觉为目标的，因此它所具有的对感官世界的强大模拟力，同样也吸引着艺术家去体验和驾驭。艺术与科学技术的进一步紧密结合是21世纪艺术发展的一大趋势，同时也是艺术自身发展的内在需求。艺术与科学技术的结合,一方面不仅丰富了传统艺术的存在形式,更以一种全新的创造方式、形式使艺术的整体结构形式产生了巨大的变化；另一方面,艺术与科学的结合永远是一个过程,是两者相互作用不断发生的过程。因此,新的艺术方式和形式将随着时代和时间的延展以及科学技术内容的不断更新与发展而有新的生成,它不仅赋予了艺术在新时代发展的可能性和动力学根基,同时也揭示了与科学技术结合过程中的艺术是一种多张力交叉、多种可能性共存、有巨大可变性、可发展性的艺术。当下是一