第五章 防震减灾网站设计思路
5.1 首页借鉴与背景色调选择
5.1.1 首页借鉴
在网站的首页设计过程中主要借鉴了美国地震局网站，首先了解一下传统型的官方网站设计，传统型的官方网站的首页网站中起到主体的作用，是将网站的主要内容直接展示出来，以主体向外发散的形式连接到其它知识点当中，其优点在于能够形成以主页为主体帮助用户在头脑中形成发散的思维构图，完善思维脉络，并实现以主页为主要导航页，便于信息的检索。而其不足却往往是其优点展现的不得当所导致的，如果页面信息量过大就会就会适得其反，在信息与信息之间会形成不同层次的干扰，而导致用户在信息检索时出现错误。为避免信息的杂乱而带给用户操作带来的不便，在地震网站中直接地震的动态信息板块作为网站的首页，这样做不但能使网站从视觉上简约化，对用户的操作也提供了方便，具体设计参考下文。
5.1.2 背景色调选择
在网页的背景色调选择上，继续沿用了中过地震局网站的浅蓝与白色的结合，在对比美国地震局网站的深蓝色与白色相结合时会发现深蓝色给人的感觉到压抑，甚至心跳加速的感觉，用户在使用过程中会有种压抑感，虽然这能对用户以警醒的作用，但笔者认为浅蓝色更适合在背景色调上的选择，在基督教中，神以天空的浅蓝色来象征真理的永恒，这里的蓝色代表了对生命永恒的渴望，对母体安全感的寻找，更倾向于内心的平静，并在这种平静的心态下，理解生存的意义和对生命的永恒追求。地震所带来的灾害是令人沉痛的，在沉痛中更要看到希望。
5.2 内容安排与设计
5.2.1 网站内容流程图及首页设计
网站的设计注重了对内容板块的划分，意义在于帮助用户在潜意识中形成合理的网状思维框架，在目前的网站设计上来看，网站中板块合理的划分、内容顺序上的安排以及超文本连接合理化安排是极易被设计者所忽略的，甚至根本就未曾给予这方面的重视。本文在网站的内容设计上遵循了认知的学习理论，注重了网站内容的合理化安排，并将网站的内容化分为六个板块，分别是动态信息、危害记录、学习资料、实践解析、交流互动、政务公开，模块的顺序安排上是按照人们的认知习惯层层递进并逐步引导用户学习互动，其中动态分析模块作为网站的首页是为了便于老用户对时时更新的地震信息查询，也能帮助新用户加强防震意识[29].危害记录板块除了对地震的动态信息进行解读，也是为了对用户的感受器官产生刺激，引发好奇心并产生连锁的问题，在"学习内容"与"实践解析"板块的辅助下，获取相应的资料，最终通过交流与互动彻底解决问题[30].
在网站的设计中除了保留原有的信息作为基础，更提出了对网站的部分内容的增添与修改。在动态信息板块设计中包含了三个子板块，一、显着地震板块。显着地震板块主要描述了中强震以上的地震信息，震级会在 4.5 级以上。当震级达到 4.5 级以上时，说明这个地震已经具有了一定的破坏性，在这里进行描述主要是为了起到警戒性作用。
二、最新动态板块。最新动态板块用以描述今天的地震动态信息，由于地震的多发性，使得每一时刻都会有地震的发生，当然地震的动态信息也是用户们最为关注的，板块除了信息播报的功能以为外，最为重要的是地震的预警功能，帮助用户获取最新的地震动态，降低灾害造成的损失。三、信息详情板块。信息详情板块的设置是为了帮助用户了解最为详细的历史地震信息，该板块不但包含了前两个板块的内容还记录了一些小震级的地震信息并将其综合整理记录。大地震并不是很常见，小地震却极易发生，对于小地震的记录不但让用户感到踏实，它还是推算地震发生概率的重要数据依据[31].
5.2.2"危害资料"与"学习内容"板块设计
在危害资料的板块中共化分为四个子板块，包含了对历史灾害信息、应急避难场所、灾害分析工具及灾害重建情况的介绍，注重描述历史以来国内外的历史灾害信息、国内各地的应急避难地点、灾害监测及预防的主要手段和重大灾害地点的重新建设情况[32].
历史灾害造成的损失总是令人沉重的，灾害的记录数据更是无时无刻不在响起的警钟，在通过灾害资料板块的介绍让用户了解到地震的危害是不容我们忽视的，这对于用户进一步了解防震减灾的内容起到了引导的作用。在危害资料板块的描述时应采用图文并茂的形式，通过图片和文字互相陪衬，使资料的内容变得丰富的同时也让用户的理解更为透彻[33].
"学习内容"板块的设计是主要设计的板块之一，本文中主要应用的认知学习理论也将着重在该板块展现出来，板块的设计创新在于增设儿童教育板块并完善了地震词汇、地震主题教育、常见问题分析等板块的内容[34].儿童教育在地震局的网站中是处于欠缺的部分，但这并不代表着儿童教育的不重要，恰恰是需要引起政府部门重点关注的，因为儿童主要活动的地点主要是家里和学校，当地震发生时，儿童在家里的话会有家长照看，但如果是在学校，教师是无法一时间照顾好全班学生的，那么学生所具备的自我保护能力就显得尤为重要，每个孩子都是家长和国家的希望，所以说儿童板块的设立是非常必要的[35].儿童的教育不同于成人的教育，根据儿童的认知学习习惯，应更为注重资料的趣味性与引导性，为此应融入更多的动画、小游戏、动画片等资料进行教学。在游戏设计方面，应融合多种形式并简单易行的设计理念，例如拼图游戏，因为拼图游戏可以说是儿童们最为熟悉的一种游戏，它不但能激发孩子们的智力，更可以通过一些图像信息去传达知识，在教育学中，通过自己动手努力获取的知识才是最为可贵的。而在动画的设计方面，首先来了解一下一个地震动画视频，该动画是由浙江海洋学院数理信息学院潘老师学生团队设计的，笔者也曾与该动画的设计成员进行深度交流与学习，该动画的设计应用到了 MAX3D、Flash 动画、quest3D 等技术，下面就此动画的设计进行了解。动画片名为《地球安家记》，动画中主要涉及到了两个外星人物"齐齐"和"乖乖","齐齐"是探险家，拥有与生俱来强烈的探索精神，"乖乖"是智能机器人，也可称它为智能小博士。他们在遨游太空时发现了美丽的地球，由于齐齐的对地球的好奇心引发了他对地球的探索，在探索中他们发现地震给地球所带来的巨大灾害，并由此引发了他们对地震知识的探索。动画逐步介绍了大陆板块的漂移、地震形成的原因、地震的震级划分、地震所带来的灾害等知识点，目前该动画只做了一集，它所达到的预期效果还是非常可观的，该动画的设计的优点在于：一、可爱的动画人物设计。动画中的人物设计是最能吸引小朋友关注的重点，在人物的刻画上通常会选择可爱与搞怪的人物形象，这样的人物设计更贴近小朋友们的生活，让小朋友们更喜欢。二、合理的剧情安排。内容由于大陆板块的漂移所形成的地球美丽外貌而引起"齐齐"的感叹，并由"乖乖"提出地球美丽外表下面的"脾气",逐步引发对地震知识的详细介绍。
三、完善的信息表述。
《地球安家记》虽然动画时间不长，但其中所包含的知识点是比较多的，作为儿童的入门基础知识课程是较为全面的[36].
动画对孩子们的吸引可以说是与生俱来的，一部好的动画不但能吸引孩子们，更要能传达出一些知识和道理。当然，中国地震局官方网站的动画设计除了要吸收上部动画的所有优点，更要对其不断的完善。在动画的进一步刻画，笔者认为应本着一下几点要求：一、每集动画知识点不宜过多。儿童对动画中所含知识点的理解能力是十分有限的，在针对儿童动画的设计中应增加动画的集数，分散每集动画中的知识点，确保每集动画的时长与动画内容的质量。二、语言的幽默性。动画中应注重幽默性语言的应用，传统死板的说辞不但让动画变得无味，更会让孩子们敬而远之。语言是一门艺术，尤其是动画中的语言，幽默的语言能婉转展现出动画中人物搞怪的思想和由内而外的好奇。三、动画人物的表情细节。动画中的人物并不是死板，它往往要比现实中表现出更为夸张的反应，那么对动画中人物表情细节的刻画就显得尤为重要。面部表情的变化可以说是一种语言的交流，它可以很容易的融入到儿童们认知习惯当中，使得儿童在认知过程中更为轻松愉快。四、动画内容提问。在观看一些热门的动画的过程中，不难发现儿童都处于一个被动的状态，从教育的角度上来说，这并不是教育者希望看到的，尤其是在这种教育的动画片中。处于被动状态的孩子们所学到的知识不会产生太长时间的记忆，甚至说看完就已经忘记，那么如何才能调动孩子们的主动性呢实际上在动画的结尾可以设计一些针对本集动画的小问题，如"什么是地震""地震能引起那些灾害"等等，在下集动画的开始时进行上集问题的解答，通过简单的问答形式来调动小朋友学习的主动性[37].在"学习内容"板块中除了对儿童教育内容设计所需要注意的问题以外，更要加强地震的主题教育。地震主题教育的内涵分为三个层面：第一个层面指文本负载的言语方式、知识信息以及能力附加等；第二个层面是指母语文化系统包括包含的民族精神、风骨情操等人文底蕴；第三个层面是指个体的精神、理想、人格的生长与形成。地震的主题教育包含了地震相关刊物及产品介绍、地震照片图集、专业视频讲解等相关信息，可以说是地震综合资料的融合，在通过对多层面的信息表述，让用户能够从多角度去感受地震的可怕，理解灾区人民的苦楚，看到灾区人民对未来生活充满的希望。主题教育可以说是一种洗涤人们精神的正能量，提醒着用户要对地震要给予正确的认识，才能降低由地震所带来的危害程度[38].
常见问题的表述上倾向于将知识与多媒体技术的融合，从视听出发完善网站知识内容的质量。其实将多媒体应用于信息的表述上，已经是司空见惯的事情，但笔者认为对于多媒体的应用应注重其表现形式的创新与内容的设计。在防震减灾视频的设计中，应采用双画面对照，一个画面显示正确的操作方法，另一画面显示常规的错误做法，让用户自己去判断哪个画面的操作是正确的，最终用红线圈出主要出现错误的地方同时将画面定格几秒钟，便于用户找出重点。这里的创新点在于采用了双画面对照的形式，重视用户独立思考解决问题能力的培养[39].该设计理念是借鉴于当前比较流行的找茬游戏，它充分调动了游戏者的查找能力，如果将其运用到地震常见问题的视频展示当中将会进一步促进用户的判断，通过不断去借鉴一些新鲜的应用信息，使用户在愉快的心情下掌握地震中常见的问题。
5.2.3"实践解析"与"交流互动"板块设计
"实践解析"板块的设立是为了帮助用户进一步了解自己所掌握的地震知识情况，其中内容被划分为问卷解答、视频分析、现实模拟和科普教育基地[40]
.科普教育基地板块介绍各地的地震科普实验的地点，用户可通过查询找到距离自己最近的实验点，在科普教育基地中去亲身感受一下地震发生时的感受，每个科普基地都会为用户提供大量的防震减灾信息，以供大家学习。问卷解答板块，顾名思义就是通过答卷的形式来测试用户所掌握的地震知识是否全面。答卷是传统的获取用户掌握情况最为简单有效的手段，虽然在教育界中一度被质疑，但其始终沿用至今，这同样是对试卷的一种肯定。通过网络上查询一些有关防震减灾的知识，将其筛选与整理出一套试卷，试卷设计主要本着三项原则：一、题量适当。网络中的试卷对题量的要求不宜过多，用户在网络中的答题会被题目的多少直接影响到答题的兴趣。二、难度适中。试题的难度选择是十分关键的，题目过难会使答题者逃避问题，相反题目太容易又会被用户所轻视，建议"难易结合，易多难少"的原则，会促使用户对难题的探索。三、题型多样。单一题型对于答题者来说是十分枯燥无味的，多种题型的安排能便于用户思维的跳动，进而产生答题的兴趣[41].
下面这套试卷主要保留了传统的试卷三种题型，所以在题型的设计上还需创新。
在"中国人大网讯 2008 年 6 月 24 日下午，十一届全国人大常委会第三次会议分组审议国务院关于四川汶川特大地震抗震救灾及灾后恢复重建工作情况的报告。审议时，全国人大代表贾福清着重强调了加强地震知识的宣传，增强全民防震意识。他说各级领导要带头宣传讲解，这是一件大事。这次地震灾害，有些本来不应该发生伤亡的，有些人是从楼上跳下来造成伤亡，这是出于逃生的本能，不是头脑指挥行动。"实际上目前国人对防震的意识还是远远不够的，甚至不能正确认识自己对地震灾害中的判断能力，将防震减灾知识想的过于简单。为此在"实践解析"板块中又增设了视频分析内容，视频教学是目前多媒体技术主要的变现形式，在帮助用户更好理解的同时还能深化记忆。视频解析是通过展示一些生活中错误的防震手段，让用户进行分析，找出问题的所在，当用户无法找出问题时，可查询正确的演示方法[42].现实模拟主要运用到了虚拟现实技术，通过刻画出虚拟的空间，模拟地震发生的过程，给用户全新的体验，具体的设计将会在下文的虚拟现实程序设计中提到。
"交流互动"板块对于用户们来说并不陌生，在很多的官方网站都可看得到，但其实用的价值却远没想象中的那么高。"新华网北京 4 月 23 日电，国务院办公厅日前下发通知，要求充分发挥政府网站的信息公开、互动交流作用。要切实加强主动公开工作，及时准确在政府网站发布涉及群众切身利益、需要社会公众广泛知晓或者参与的政府信息，尤其要做好财政预决算、公共资源配置、重大建设项目、社会公益事业等领域政府信息的发布工作。通知指出，政府网站已经成为各级人民政府及其部门发布政府信息、提供在线服务、与公众互动交流的重要平台和窗口，在提高行政效能、提升政府公信力等方面发挥了重要作用。但也有一些地方和部门政府网站存在发布信息和页面更新不及时甚至链接错误等问题，给政府形象和公信力造成不良影响。"该材料是选自 2011 年的一篇报道，如今以来到了 2014 年，以中国地震局网站为例，网站中虽然增设 12322 咨询平台、在线访谈、公众留言、网上调查等多项交流互动内容，但其引起的关注度却是甚微的。在其中网上调查板块得知，目前中国地震局网站中只记录了一次问卷调查，其中调查的开放时间是 2012 年 5 月 2 日到 2012 年 5 月 31,直到今天还在支持网络投票，总计投票人数在 200 人左右。由于其它交流互动内容无从获取更多相关数据，笔者浅谈一下"交流互动"板块设计的理念与内容。"交流互动"板块设立要给用户更开放的空间去交流与咨询，一味的保守并不能让网站去满足广大用户的需求，只能被用户所无视。
在"网络调查"板块中应对网站设计的多方面进行调查，定期调查网站的内容增设、网站的界面设计、网站的资料完善等多项资料的获取，单方面的问卷调查获取的信息是片面的，只有通过整理多方面的材料才能完善网站的设计，才能获取用户的满意。在"咨询平台"板块的设计中，应对用户开放言论自由[43].以当前网络流行的"贴吧"为例，用户可以通过发帖子提出问题，与其他"游客"共同探讨并解决问题。"咨询平台"所需借鉴的正是这种形式，满足用户之间的交流同时，由官方给出权威认证。
5.3 虚拟现实技术在网络中应用设计
5.3.1 虚拟现实技术概述
虚拟现实技术所实现的虚拟空间漫游技术相信大家并不陌生，是虚拟现实（VR）技术的重要分支，该项技术主要应用于建筑、旅游、游戏、航空航天、医学等多种行业[44].
由于有可贵的三种特性--沉浸感、交互性和构想性，使得沿用固定漫游路径等手段的其他漫游技术和系统无法与之相比。虚拟建筑场景漫游或称建筑场景虚拟漫游是虚拟漫游的一个代表，是虚拟建筑场景建立技术和虚拟漫游技术的结合，其中前者是基础，后者是系统运行方法。目前 Unity3D 是网络中实现虚拟现实技术的主流软件，它能够让用户轻松创建诸如三维可视化建筑、实时三维动画等类型互动内容的多平台的综合型开发工具，基于对 Unity3D 游戏引擎进一步学习，从而提出在 Unity3D 的功能下对防震减灾内容的情景设计[45].
5.3.2 虚拟现实技术应用介绍
虚拟现实技术是需要可通过多种开发工具来实现的，其中以 Unity3D 游戏引擎为例。"在 Unity3D 游戏引擎中主要包含了五个窗口：1、Project 窗口：这个窗口相当于项目管理器，窗口里的文件夹对应于用户所创建的项目文件夹（你可以在你创建的项目路径下找到这些文件）。在此窗口你可以很方便的管理你的项目资源：如脚本、图片、场景等的添加、分类以及模型的导入。当新建一个项目时，默认生成的文件夹只有Standard Assets,里面有系统自带的一些资源，如：贴图，物理属性，粒子系统等，通过简单的拖放你就可以使用。2、Hierarchy 窗口：这个窗口用于管理游戏中的对象（GameObject）。通过添加在场景中的对象（GameObject）都会在此列出。游戏对象添加的方法是：菜单栏 --->GameObject-->CreateOther（或 CreateEmpty）然后可以选择你需要添加的游戏对象如（立方体，球体，粒子系统，摄像机，点光源，平行光等对象），一旦新添加游戏对象， Hierarchy 窗口就会实时更新它的列表内容。3、Inspector 窗口：此窗口相当对象的属性窗口。你可以手动编辑对象的一些属性，例如对象的坐标，旋转的角度，对象的贴图等。点击 Hierarchy 窗口的对象，该对象的属性就对应在Inspector 窗口显示。4、Scene 窗口：该窗口用于场景的手动编辑。5、Game 窗口：该窗口是程序的运行效果显示窗口。另外通过菜单栏的 window-->Console 弹出调试信息的输出窗口[46]."简单了解一下 Unity3D 的功能后，具体看下 Game 窗口中摄像机的移动设置画面，摄像机的位置移动都是由系统代码进行支撑的，这使得 Unity3D 的操作更为灵活，但同样也增加了其操作难度。虚拟现实技术能够应用在防震减灾网站中，不仅仅是因为它对环境的刻画，更重要的是它能模仿地震发生时所导致的地面颤动。实际上想要用Unity3D 在网络中实现地震的效果，需要在Unity3D中摄影机中插入晃动特效脚本，通过对摄像机的坐标的无规律的改变，用户通过视角的颤动从而形成地震发生的感觉。
通过对 Unity3D 介绍后，了解一下在防震减灾网站中常用的两个代码，一、Unity3D摄影机晃动特效代码，需要复制代码到 JavaScript,再拖曳到摄影机上。从而形成用户通过网络所体验到的地震效果，该脚本在地震模拟中起着极其重要的作用[48].
二、在 Unity 中视频播放代码，该代码主要是实现 Unity 中视频的播放与暂停设控制，主要应用于虚拟现实中的交互功能，用户通过触控虚拟画面中的物体就会产生一些信息的反馈，例如在虚拟环境中用户操控一个角色来打开门，当手碰到门的把手时，就相当于触碰了视频动画的播放开关，也就是开门动画，当动画播放完毕用户才可通过这扇门，在 Unity 中想要实现开门动画。
5.3.3 虚拟现实程序内容安排
在通过对虚拟现实技术的利弊分析中了解到，虚拟现实程序占时无法直接通过网页直接运行，即使运用 Unity3D 引擎制作最简单的三维环境，也必须通过下载插件来实现应用，为方便开发者管理与用户的应用，在网站的设计中将虚拟现实程序统一应用在"实践解析"板块的现实模拟内容当中[50].现实模拟内容是专门针对虚拟现实程序而设计的，其中以较小的虚拟现实程序为主，用户可以通过下载较小的插件，直接在网页中运行，目前主要应用于网络三维游戏中，它能让用户快速的体验三维效果的同时也获得了用户较好的反馈[51].由于较小的虚拟现实应用程序需要舍弃在画面的质量和程序中过多的功能，在内容设计上选择了地震时常见的场所进行模拟，提供一个场景说明，让用户通过简单的操作来选择正确的防护措施。例如：模拟一个学生学校上课时，突然地面发生剧烈的颤动，大多数同学都涌向了教室门口，此时用户面临地震需要做出正确的选择，通过鼠标与键盘的操作用户可以实现多重选择：一、挤向门口，二、原地等候，三、跳窗户，四、躲在讲桌或书桌下，等可操作的内容，该设计从表面上看更像是一道选择题，实际操作起来远比字面内容更深入用户的记忆[52].
网站所应用的虚拟现实技术，可以说是借鉴了虚拟在游戏当中的应用，利用当前游戏的生、形象和富有表现力的三大特点能更好的满足用户在防震减灾中的体验，但考虑其所占的内存较大并且技术成本较高，应用程序设计注重"精"而不求"多".由于个人能力有限，仅仅真对虚拟现实技术所要实现的内容进行了一下分析，首先用户操作的地点进行选择，由于当地震发生时，人们最可能在的位置家、学校、公司等等，通过分析位置的共同性，笔者选择地点：在某复式居民住宅，位于 6 层建筑物的顶层，居室一层有 4 个房间，分别是客厅，客卧，厨房，厕所。居室二层也有 4 个房间，分别是书房，主卧，厕所，更衣间。链接上下两层的楼梯为木质结构，房屋总面积 140 平米。而画面背景：地震前的 12 秒钟。由于在地震前兆到房屋倒塌通常只有 12 秒钟时间，所这个时间的安排是较为合理的。人物：爷爷，一楼看报。爸爸和女儿，书房做游戏。 妈妈，厨房洗完。奶奶，客厅熨衣服。在人物的设计上，笔者选择了多角色，用户可根据家庭情况选择自身角色，通过简单操作来完成虚拟的逃生演练。当程序运行时，应强调用户需对自身的角色心中有数，剧情开始当感到地震时爷爷会第一时间发出地震发生信号并拿起身边的被子向门口跑去，奶奶会立刻放下熨斗向门口跑去，妈妈会立刻关闭气阀向门口跑去，同时父亲会抱起女儿拿起手机向门口跑去，到大门口时应穿上鞋子，选择楼梯下楼。剧情虽然简单，但也极为容易出现错误，例如爷爷抱起身边的被子可以防尘。
母亲忘记关天然气阀，极易发生火灾。父亲拿手机是正确的，地震时，如果被埋压在废墟下，周围又一片漆黑，只有很小的一片空间。第一，手机可以用来照明，帮助你观察和了解周围环境。但是千万要注意的是千万不要使用明火，比如打火机，因为在地震过程中，都可能发生煤气或液化气泄漏。这样容易引起火灾。第二，手机可以发出求救信号，可以帮助你抑制惊慌情绪，树立生存的信心。如光脚跑下楼时是错误的，地震发生时，应该穿上结实厚重的鞋子。因为地震发生的时候，建筑坍塌，到处是瓦砾和玻璃渣子，如果不穿上鞋，或是只穿了轻便的鞋。脚是很容易受伤的。即使不被扎破，也有可能会崴脚。所以穿厚重的鞋子，哪怕它沉一点，也可以保护脚不受伤害。当改剧情发生在用户身上时可能会选择等全员到齐再逃出室内，从情感上讲是家庭和睦的表现，但此等做法并不理智。在下楼时，用户应选择走楼梯，因为此时的电梯极易出现故障。但是要注意的是，不光光要关上煤气灶，更重要的是要关上家中的煤气总阀。事实上很多大地震都证明了，火灾和爆炸所带来的人员伤害和财产损失，高于地震所带来的伤害。地震发生时，家用电器短路或爆炸，以及未关闭的天然气灶，或者是天然气管线断裂，都可能引起火灾，因此地震发生时应该立即关闭天然气总阀和电源开关。关闭天然气开关是要注意避免被火或蒸煮的水烫伤。在用户操作错误时应给出必要提示，笔者在此也只是简单的对内容进行了设计与分析，更具体的交互功能还需进一步设计。
