HI,欢迎来到学术之家股权代码  102064
0
首页 精品范文 网页界面设计论文

网页界面设计论文

时间:2023-03-24 15:34:18

开篇:写作不仅是一种记录,更是一种创造,它让我们能够捕捉那些稍纵即逝的灵感,将它们永久地定格在纸上。下面是小编精心整理的12篇网页界面设计论文,希望这些内容能成为您创作过程中的良师益友,陪伴您不断探索和进步。

网页界面设计论文

第1篇

关键词:网页人机界面设计;感性工学 ;少儿网站

中图分类号:TP393文献标识码:A文章编号:1009-3044(2011)04-0779-03

1 感性化网页界面设计

1.1 界面设计的发展

界面设计的概念首先是在西方国家提出来的,而且存在了很长的时间,发展到今天己经有了一套自己成熟的理论和实践经验,韩国和日本对于网页界面设计的研究已经走在这方面研究的前端。虽然感性的人机界面设计成为设计领域的焦点,其理论主要用在产品界面设计,在历年研究生的论文中,大多是从网页界面设计的色彩、存在的形态及学科相关性方面阐述、或者只是网站建模,很少将理论与设计实践相结合来研究。人机界面设计的一个细小分支:网页人机界面的感性化设计在国内还处于起步阶段。

1.2 感性工学

上个世纪80年代末在日本出现了感性工学的课题和研究。感性工学(KanseiEngineering)是界于设计学、工学及其他学科之间的一门综合叉学科。“感性”是一种主观的难以用文字来描述的心理体验,它是一种认知的概念,受个人知识、经验和个性的影响,是个性化的认识。同时感性也是直觉与理智相互作用的结果,感性对美的、情趣的事物特别敏感。对于设计者而言就是把消费者脑海中的构建法则探寻出来,通过破译消费者的感受,再利用这些探寻出来的法则去进行设计,这就是感性工学设计的首要任务。

1.3 感性工学与界面设计的关系

首先从指导思想上讲,感性工学设计的出发点是考虑人的感受即以人为本。从人的角度度上考虑问题高于一切,因为设计的目的就是为了让产品更好的为人服务。只有以人的感受作为基础和原始资料,以“以人为本”作为指导思想,从人的感受方面去寻找设计灵感,才能保证设计符合使用者的需求,这是设计的源头也是设计的动力。其次从设计周期方面讲,基于感性工学的网页界面设计方法论精简了传统的设计理念的步骤,设计程序不再那么复杂。对设计过程的精简不仅提高了设计效率,简化了繁琐的设计流程,而且从根本上解除了设计师在思想上的束缚,使设计更加灵活。最后,从设计结果上讲,它避免了许多不必要的或者是重复的信息设置,无论是布局还是内容,每一个小细节都来自用户的真实感受,都经过设计师的深思熟虑。由基于感性工学的网络形象设计理念设计出来的“产品”应该是符合用户群体需求,符合市场需求的。网页界面设计发展到现今的阶段,功能合理,适用有效或是有某种外在的美感已经不再能满足网页用户的需求了,感性化网页界面设计已经成为设计的必然。在网页界面的设计过程中,研究用户是其最基础的一个环节。为了提供自然和直观的网页界面,我们就需要表现出以用户和交流为向导的新的设计方法。对于用户来说,用恰当的文字和语言来表达自己的“感性”并不是一件容易的事情,设计师就更难辨别出产品的哪些属性可以唤起人们的何种感性,以及人们的感性是如何随着产品属性的改变而改变的,在更多情况下,人们的感性并不只由某一种产品属性决定。感性工学,因其运用科学先进的现代工具和技术,可以帮助消费者表达自己的感性,甚至是一些他们自己都没有意识到的情感,设计师可以准确便捷地获取消费者基于产品和概念的特性的主观评价,取得消费者对于产品的潜在感受和需求。感性工学除了是可以运用的设计上的工具,更是可以辅助设计师弄清人们感性的利器,从而可以针对不同消费者和消费群体的感性需求,设计出不同的产品造型,在客户满意度与设计制造成本之间取得一个平衡点。

2 少儿网页界面感性化设计现状调查

本文以常用少儿网站新浪少儿网,希望谷,迪斯尼中国站为例,分析目前的少儿网站感性化设计发展现状,为下文的研究提供数据依据。

2.1 数据来源及其分析

这项研究分别从用户和网站角度进行研究。通过对用户的调查,可以得到用户的体验,以及从用户的角度得到对网站的评价,并且可以发现网站中存在的一些问题。通过对少儿网站的调查,可以了解到网站中吸引用户的重要因素,以及用户对网站的评价,从而为网站的设计提供建议。

2.1.1 问卷调查

问卷调查是以书面提出问题的方式搜集资料的一种研究方法。研究者将所要研究的问题编制成问题表格,以邮寄方式、当面作答或者追踪访问方式填答,从而了解被试对某一现象或问题的看法和意见,所以又称问题表格法。在各种调查研究当中,所得结果是否达到调查的目的和要求,以及所搜集到的资料的可靠程度和完善程度都取决于调查问卷设计水平的高低,在可用性研究中,问卷调查可以用来了解用户的满意度和遇到的问题,也可以根据客户服务的反馈,实际使用的记录或实地测试的方法来了解用户的实际使用情况。 问卷调查方式可以得到在特定的情况下对使用网络的体验,比如少儿上网是为了娱乐,结交朋友还是还是其他,可以得到在这个使用范围内的精细的用户需求。本次调查的用户对象是深圳地区少年儿童。由于深圳是个移民城市,来深建设者来自全国各地,人口多样化,少年儿童也都是来自全国各地,从而使得调查的数据人口广泛而具有代表性。在问卷调查的这个环节里,我们的主要目的是发现少儿网站用户浏览网站的目的,浏览网站过程中的喜好,期望得到什么,这些期望是如何满足的,或者为什么没有满足。在知己知彼网发表调查问卷,再通过学而思教育机构将将网站公布给深圳五区各小学,每个区都有学生作答问卷,网站对调查问卷的结果进行统计分析,由于篇幅有限只列举部分问卷结果,问卷调查大多为多项选择题。从图1可以看出,少年儿童浏览网站时的目的有70%以上是娱乐。

图1 学生浏览网站的目的 图2 网站吸引用户因素调查

从图中可以看出人们在浏览一个网站的时候,喜欢一个网站的原因74%的人表示是因为娱乐;浏览网站的目的学习与娱乐的需要各占一半;有50%的人是被这个网站的内容所吸引;大多数的用户喜欢清新,可爱,卡通的界面风格;44%的人认为目前的网站学习资源比较少,同时35%的人认为网站不容易操作,只有65%的人表示在三次以内就能熟练操作一个陌生的网站;59%的人表示容易找到需要的内容;大多数少年儿童希望能够将资料年级分类以便查找; 59%的人表示希望能够在线互动;大多数人喜欢网站提供展示自己才艺的平台;从目前网站存在四个比较严重的问题,这个问题分别是网页弹出广告,出现错误的信息,网页打开慢,网页内容更新慢,这四个方面比较严重的问题也是我们今后网站设计改进的方向。

2.1.2 文案法

文案调查以收集少儿上网的文献性信息为主,具体表现为各种文献资料,可以通过网络搜索,少儿报纸杂志和报纸来收集相关信息,尤其是通过网络,可以从更宽广得角度来获得更多地有关少儿上网的知识。它可以用来发现少儿上网的问题并为研究提供重要参考依据。这些收集来的数据无法直接使用,需要经过加工才能使用,整个过程对调查者的要求比较高。

2.1.3 启发性测试

为了得到用户深层次的体验,我们以”新浪少儿网”,”希望谷”,为例对用户进行启发性测试,在整个过程中从各个方面进行测试,整个界面测试涉及17个问题.比如,发现其中的三个比较严重的问题是:打开网站时弹出广告,这一点是用户非常反感的。还有一个问题就是网站不容易操作,而有的用户发现网站不容易操作之后就几乎放弃再次进入该网站.还有一个问题是,当孩子遇到不会的问题时,没有老师在线答疑,甚至没有留言等功能,也就是说这样的网站缺少互动功能。

3 少儿网站感性意向分析

3.1 设计原则与方法

可用性的设计观念采用的是逆向式推理感性工学的方法,它将设计的重点放在用户对真实产品的体验上,通过对“体验”的观察和总结对产品进行不断的修改和纠正,最终达到“可用性”的目的。

感性网页界面设计必须把重点放在以用户为中心,从用户的需要和用户的感受出发,设计符合用户需求的网页界面,而不是让用户来适应界面,从而使界面友好使用。以用户为中心的设计(UCD)是一种关于产品/系统设计过程的方法论,这个方法论以使用产品系统的人的信息为基础。无论产品的使用流程、产品的信息架构、人机交互方式等,都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。UCD过程通过产品的计划、设计和开发聚焦在用户身上,整个过程包含了以人为中心的活动,它贯穿于产品开发的整个生命周期。

一个好的以用户为中心的设计方法包括以下三个维度:效率,效能,用户在特定环境下使用产品的满意度,满意度包括产品的易用性,吸引用户的程度,用户使用完产品后心理层面的感受。在感性设计的过程中,捕捉用户的感性需求是感性网页界设计的最为重要的一步。以少儿网站为例,通过以用户为中心的感性工学方法提取出少儿网站设计的感性意向。具体从以下三个方面着手:

1) 调查网站和浏览者背景信息。

2) 选择具有代表性的网站进行研究,从而得到用户体验。

3) 分析统计实验得来的数据,并将其转化成可设计因素。

3.2 少儿网站感性意向分析

每一种类型的少儿网站都有自己的优势,综合考虑影响访问量的因素有以下几点:网站用户群体的定位、网站页面的可用性、网站页面的易用性、网站页面的交互性。除此之外,还有一些小细节的设计也能影响用户的感受,比如网站的注册流程繁琐且填写过的内容不能被存储记忆,这就会让用户感到异常的烦躁不安。基于上述的调查,得出少儿网站形象设计应该简单,可爱,易用,这才符合少年儿童的心理发展,符合使用需求。

阶层分析法

感性工学的阶层类别分析法是根据新产品的感性层面来进行分析和分类,以建立产品的感性结构来获取设计细节,因此主要运用在新产品的开发过程中,将运用阶层类别分析法研究出的某种产品属性决策归纳采入到新产品设计中去。在阶层类别分析法操作过程中,首先要对目标产品做一个感性市场的调查。调查主要收集来自于各种渠道的信息,如用户访谈、市场调研、报刊网络资料收集等。在此之后,着重的是研究小组成员间的想法表达与充分讨论,通过讨论凝聚成一个产品概念作为0阶感性概念。考虑到0阶感性概念的抽象性及难懂性,将其转译成稍微具体的1阶感性概念就很有必要了。研究人员采用层次递推的方法,将用户对产品的感性认识范畴向下拆解形成1阶感性概念。接着再由1阶感性概念逐次逐步层次分解推论子概念,每一个衍生子概念再分别向下拆解展开成树状结构。假如设计团队无法从某一阶层得到具体的设计细节部分,则将继续往下拆解,直到能够得到出现物理量的细节设计的详细说明的阶层(作为“N阶”)为止,最终获得符合感性诉求的产品设计物理特性,作为产品开发的基础。这个“感性――物理特性”的树状图关系,就是贯穿阶层类别分析法的一条主要脉络。

捕捉用户的感性体验是是一个网站成功的关键地方,从调查设计中的几个常用的网站看都缺乏这方面的设计。将少儿网站的调查研究结果利用阶层分析法,我们将少儿网站的设计定位于以用户为中心,通过娱乐性,易用性,美观性,交互性四个一次感受来体现以用户为中心的0次感受。比如,一次感受中的娱乐性,又是通过趣味性和可玩性的二次感受来体现的。因为少年儿童的心理具有特殊性,所以内容不能严肃和呆板,要让网站达到寓教于乐的目的,内容要充满童趣,少年儿童对外在的世界还充满无比的好奇,所以开发交友功能来满足他们的好奇心。再将1次感性继续细分,经过N次感性化后最终得出物理上的设计细节。这样我们就将过去难以量化、只能定性的、非理性无逻辑可言的感性反应,转化为设计要素。少儿网站感性树状图如图3所示。

4 结论

通过对以上几个网站的感性设计现状调查 ,再将调查的结果运用感性工学方法得出感性意向树状图,得出一下几点结论:1)增强少儿网站的娱乐性,少儿上网的目的性不是很强,网站的内容要达到寓教于乐的效果;2)增强少儿网站内容易用性,少儿处于接触网络的初始阶段,操作的简易性符合少儿用户心理;3)界面应该卡通化充满童趣,这样才能符合儿童的审美;4)增强网站的交互性可以从数据库方面来考虑,再就是网站的的功能,提供在线问答,问题反馈功能能增强网站的可性度,也是吸引和留住用户的一个重要方面。树状图的具体物理设计细节就是将浏览用户的感性体验转化成了具体的设计细节,这样的设计符合用户需求,达到了少儿网站感性化设计的目的。

参考文献:

[1] 方惠敏,杨国胜,丁文珂.基于人性化网站界面设计的用户建模[J].计算机技术与发展,2008(2):187-190.

[2] 钟厦,宋晓晨,孙亚云.感性工学中量化的基本程序介绍[C]//2005年国际工业设计研讨会暨第十届全国工业设计学术年会论文集.北京:机械工业出版社,2005:728-731.

[3] 梅云.感性设计:人机界面设计新思维[J].科技资讯,2008(9):217.

[4] 徐晓莉.基于感性工学的网络形象设计理念研究[D].济南:山东大学,2008.

[5] 吴洁.设计艺术学[D].上海:上海交通大学,2007.

[6] 刘增.以用户为中心的网络界面设计研究[D].南京:南京航空航天大学,2007.

[7] 李立新.感性工学-门新学科的诞生[J].艺术生活,2006(3):71-73.

[8] 罗仕鉴,潘云鹤.产品设计中的感性意向理论,技术与研究进展[J].机械工程学报,2007(3):8-13.

[9] 喻中华.基于用户体验的购物网站设计中可信赖感研究[D].上海:上海交通大学,2008.

第2篇

【论文摘要在互联网飞速发展的今天,网络已成为人们生活中不可缺少的一部分,无论是在商业、工业还是政府部门中都早已普及开来,如今就连教育事业也都承载着网络这四通八达的命脉迅速的发展起来。网站建设越来越接近于一门艺术而不仅仅是一项技术。网页界面艺术设计,日益被网站建设者所注重。结合自身的经验,阐述了如何制作一个完整的丰富多彩的页面,主要从色彩、框架,布局、优化这几个大方面对页面设计进行描述,对网页界面艺术设计的文字、图形、色彩、多媒体四个要素做了具有特色的分析和归纳,最后对其艺术设计风格进行了深入的分类和阐述,这一部分的重点是对网页界面艺术设计风格的探究。网页作为新兴媒体,有着比报刊、杂志、广播、电视等传统媒体更多的构成要素,如文字、图形、声音、图像和动画等。最后得出页面设计需要时间和耐心去钻研,才能做出好的网页界面艺术设计这一观点。

网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它表面上看,它不过是有关网页版式编排的技巧和方法,而实际上,它不仅是一种技能,更是艺术和技术的高度统一。?网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面,其中色彩处理有着举足轻重的功能。色彩既是网页作品的表述语言,又是视觉传达的手。所以首先要了解一个新问题那就是摘要:

1制作网页包括具体都包括哪几部分呢?

1.1图形、图像处理制作网页界面艺术设计,提到界面还有艺术,那在网页上插入一些精美、适当的图片是必要的,否则,不会有人去浏览你的页面,因此,在设计网页之前,就应搜集或制作一些好看、适用的图片。提到图形、图像处理,大家都会想到的软件是Photoshop这个软件,对,这个软件是进行图形、图像处理的软件,但是,它不是专门的处理网络图像的软件,Photoshop这个软件会用到去进行一些平面的图形图像,我们网络的图形、图像处理用的是Fireworks软件,它可以制作出传输较快的gif格式的图片,占的空间也比较小,一般大小也就是KB,而Photoshop制作出来的是jpg格式的位图,并且是有损压缩,象素大了图像就清楚,但这样的话上传到网上会影响浏览速度,象素小了就会出现模糊或者马赛克小方格,所以我们采用的是Fireworks软件进行处理图形、图像。

1.2动画制作网页界面艺术设计,肯定也少不了动画的加入,并且还要有艺术气息在里面,这就要求我们的设计者要有艺术修养和对颜色的综合把握了,在没有FLASH软件之前,用的是Golive这个软件,再后来就用传统的做法,在html中嵌入Java程序编写的动画,但这要求设计者要对Java语言熟悉。随着软件的发展,如今有了许多制作动画的软件,二维的、三维的等等,如现在我们用的FLASH软件,用它制作的动画,小巧迷人,只需作为一个.swf格式文件导出,再导入到网页编辑器里就可以了。

1.3文本的编写一般是采用在网页中用html语言中的标签编写,也可以用网页编辑工具的“所见即所得”功能直接写入文字,如摘要:Dreamweaver软件或者Frontpage软件等都可以进行文本的编写。还有一点要注重的就是,显示文本的时候,设计者的机器上装了很多漂亮的字体,设计的时候采用了,但是等上传到网上以后,别人在浏览的时候,假如别人机器上没有安装字体,那就显示不出来我们采用的漂亮样式字体,因此,在考虑网页界面艺术设计的基础上,我们是把文字提前在Photoshop或Fireworks可以将字体先选择自己喜欢的样式,然后转换栅格化图片再用切片切成小块,分别进行优化。输出的格式可以为gif或jpeg,再导入到Dreamweaver进行具体编辑,做链接可以用图片特有的属性进行热区链接,这样就完成我们想要的字体样式效果了,就不会出现字体样式显示不出来的情况啦。

1.4框架的应用框架是网页的常用形式,它可以使网页更为清楚,可以把不同的页面超链接到同一框架中,使的页面更加紧凑。一般框架用在小说浏览页面,或者介绍图书章节的部分,或者教学网页用到的的框架比较多。

1.5表格的应用表格是网页中用处最广泛的,可以布局,定位等等,它是网页中最活跃的元素。它的应用可以使用网页更加灵活。表格(br)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候,我们将表格的边框设为0,以此来定位页面中的元素,或者籍此确定页面中各元素的相对位置。我们知道摘要:浏览器在读取网页html源代码时,是读完整个br才将它显示出来的。假如一个大表格中含有多个子表格,必须等大表格读完,才能将子表格一起显示出来。我们在访问一些站点时,等待多时无结果,按“停止”按钮却一下显示出页面就是这个原因。因此,我们在设计页面表格的时候,应该尽量避免将所有元素嵌套在一个表格里,而且表格嵌套层次尽量要少。在使用Dreamweaver制作网页时,会自动在每一个td内添加一个空字符。假如单元格内没有填充其它元素,这个空字符会保留,在指定td的宽度或高度后,可以在源代码内将其删去。

2色彩的运用

网页界面艺术设计离不开色彩的应用,当打开一个网站的时候,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的布局,而是网站的色彩,尤其是在体现界面的时候,色彩对人的视觉效果非常明显,一个网站设计的成功和否,在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。

网页界面设计是一种审美活动,成功的设计作品一般都很艺术化。但艺术只是设计的手段,而并非设计的任务。设计的任务是要实现设计者的意图,而并非创造美。网页界面页面设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为以下三类摘要:第一类是资讯类站点,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息,而且访问量较大。因此需注重网页界面设计页面的分割、结构的合理、页面的优化、界面的亲和等新问题。第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象。第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的则有几页,需要实现的功能也较为简单,页面设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

3网页界面的优化

在页面设计中,网页界面的优化是较为重要的一个环节。它的成功和否会影响页面的浏览速度和页面的适应性,影响观者对网站的印象。

在资讯类网站中,文字是页面中最大的构成元素,因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的,通常我们将字体指定为宋体,大小指定为12px,颜色要视背景色而定,原则上以能看清且和整个页面搭配和谐为准。在白色的背景上,我们一般使用黑色,这样不易产生视觉疲惫,能保证浏览者较长时间地浏览网页。一般我们网页默认的字体是宋体。为了体现站点的“和众不同”和特有风格,我门可以根据需要选择一些非凡字体。例如,为了体现专业可以使用粗仿宋体,体现设计精美可以用广告体,体现亲切随意可以用手写体等等。当然这些都是个人看法,你可以根据实际情况,选择更贴切的字体。目前常见的中文字体有二三十种,常见的英文字体有近百种,网络上还有许多专用艺术字体下载,要寻找一款满足的字体并不算困难。需要说明的是摘要:使用非默认字体只能用图片的形式,因为很可能浏览者的PC里没有安装你的非凡字体,那么你的辛劳设计制作便将付之东流。

网页的适应性是很重要的,在不同的系统上,不同的分辨率下,不同的浏览器上,我们将会看到不同的结果,因此设计时要统筹考虑。一般我们在800×600下制作网页,最佳浏览效果也是在800×600分辨率下,在其它情况下只要保证基本一致,不出现较大新问题即可。现在我们设计网页,一般要考虑800×600和1024×768两种分辨率,因此我们的表格一般为居中的770左右的表格,表格的宽度最宽不要超过778。事实上,"做网页"不是单纯意义上的"制作网页",假如想让自己制作的网页美观大方,就必须要考虑"设计网页"的过程,一个好的作品,不通过仔细的"设计"就成形是绝对不可能的。

我国的网页界面页面设计水平总体上不及韩国,创新的页面极少,基本都是一种风格,这也是因以前我国的宽带水平跟不上有原因,一个漂亮的页面,必然体积会比较庞大,网络比较慢的话打开的速度也就可想而之,打开速度慢正是网页的一个最大杀手,所以我国以前的页面基本都是以框架式居多。随着我国宽带的普及,我们也迅速括起了一阵韩风,很多大胆创新的页面出现,这是一个好现象,但是一味的模拟韩国也不行,我们也要有自己的特色,不能一味的拿来主义。

第3篇

【关键词】Unity3D;HTML;脚本;交互;虚拟装配

1、引言

Unity3D不只是单纯的游戏引擎,而是已经涉及到多种不同领域的一个跨平台的三维游戏与虚拟现实开发工具,该工具支持多脚本语言以及强大的物理引擎等特点。论文通过研究Unity3D与HTML交互机制,实现场景中对象的动态交互行为,也就是控制各装配体的装配顺序并实现碰撞检测、零件实时编辑等功能,从而使得整个装配过程具有逻辑合理性和可控制性。

2、Unity3D与HTML交互机理

2.1 Unity3D浏览器调用HTML网页中的函数

Unity3D浏览器通过执行Application.ExternalCall()来调用任何在HTML网页里定义JavaScript函数,比如下面一句调用了HTML网页里SayHello()函数,并传递了一句话作为参数。

Application.ExternalCall( "SayHello", "The game says hello!" );

2.2 HTML网页调用Unity3D浏览器中的脚本函数

Unity3D 浏览器的插件或ActiveX控件都有一个SendMessage()的函数,HTML网页通过这个函数与Unity3D进行通信,通过该函数可以传递对象名、函数名以及简单参数,然后SendMessage()就会调用Unity3D中GameObject上绑定的函数。在调用SendMessage()函数之前,必须先得到Unity Web Player的引用。这里可以使用JavaScript 对象Document的getElementById()函数来获得该引用。

3、减速器虚拟装配的实现

3.1交互界面设计

交互式虚拟装配的重点不仅在于产品虚拟装配的过程,还在于它可以与用户进行实时交互。系统界面分为两部分:网页中为利用HTML提供的控件加入按钮、列表框、滚动条、文本区、标签等;Unity3D浏览器中为利用Unity提供的GUI接口加入按钮、窗口、标签等控件分别实现了减速器装配体的自动装配、手动装配、原理演示、零件查看、零部件实时编辑等功能,充分实现用户参与下的人机实时交互。

3.2碰撞检测及装配顺序规划

虚拟装配是一个实时交互系统,如用户可以在虚拟场景中用鼠标选取装配体的零件进行拆装。Unity3D引擎本身提供了基本形体的碰撞器,通过PhysX物理引擎自动检测碰撞。根据Unity3D碰撞器提供的OnCollisionEnter方法,获得相关碰撞信息,然后由它继续调用其他处理过程(相对位置检测、碰撞检测等),实现手动装配过程。

虚拟装配过程中零件拆装顺序的检测也是一个关键问题,用户选择零件正确与否直接决定该零件是否进行拆装。系统为每一个零件定义一个唯一识别拆装顺序的顺序号,当用户选择某一零件后,调用相应的拆装顺序检测模块进行比较当前选择零件的顺序号与系统预定的顺序号是否一致决定拆装是否进行或者根据零件间的位置约束关系判断某零件当前是否可以移动来决定拆装是否进行。

3.3 装配体零件的任意移动及实时编辑

在虚拟装配中,用户对场景中零件的选取及操作(位移、颜色等的实时修改)是交互性最充分的体现。当用户在虚拟场景中用鼠标点击或指向某一零件时,系统应该做出响应,如被指向或点击的零件应实时改变颜色或弹出对话框提示用户等。Unity3D的GUI接口提供了各种控件可以非常方便的编辑一些按钮、窗口等用户界面,通过重写鼠标事件可以检测用户的各中输入信息并作出正确的响应。通过变换组件可以完成产品的平移和任意角度旋转操作以及装配体零件某一方向比例变换。

4、结论

本文对基于Unity3D的虚拟装配相关技术进行了研究,并实现了在用户参与的人机界面下的虚拟装配实例。对在虚拟装配过程中零件的碰撞检测、装配顺序规划、零件选取及实时编辑等功能的实现提出了有效的方法,具有一定的参考价值。

【参考文献】

[1]郭海新.Unity3D与HTML交互机理的研究[J].煤炭技术,2011(09).

第4篇

关键词:电商交互界面;应用与实现;汽车电商平台

DOI:10.16640/ki.37-1222/t.2016.03.178

1 汽车电商平台综述

在这个信息日益全球化的今天智能终端影响着人们生活的方方面面,然而,相当多的智能终端产品因其复杂的操作方法让人们望而却步。而传统工业设计方法着重强调形式和功能的辩证关系,在强调产品可用性和用户体验的今天很难解决智能终端产品“难用”的问题。这就突出了“以用户为中心”交互设计在工业设计中的重要性。

本论文对汽车电商平台的分析主要从视觉设计和交互设计两个方面进行。现在独自创建的汽车电商平台有:汽车之家、易车网、等等。我们通过分析网页设计、框架设计、内容排版、图片运用等等,来总结个个平台的优劣势,从而为我们提供一定的依据和参考。

首先拿汽车之家举例:网页栏目留白的间距不够多,每个栏目之间区分的不明显。整体框架三列板块式布局,视觉给人扎实稳重,重点地方的色彩突出的比较明显,给人一目了然。但是在搜索车型的用户体验没有易车网好,对于人们关心的价格搜索并没有设置。

在网站内部的搜索栏给用户体验的感觉也没有易车网那样简洁明了。在品牌和车型海选的时候没有产品缩略图,仅仅是文字的叙述,略显单调。

然后我们从另一个角度分析一下易车网,我们从视觉设计的角度来看,比如图标设计:

这两组网站的图标,都存在一定的问题,首先第一组图标风格不统一,第一个汽车报价大全图标做了投影浮雕效果,而后面的确实扁平化的风格。然后图标设计没有简洁实用,图标差异性也没有表达出来。

第二组图标的设计以扁平化为主,色彩样式统一,图标表达的含义也较为简单清晰,但是可以明显的发现缺乏设计元素和想法,仅仅只是简单的几何图形配上一个文字或者符号。在互联网高速发展的今天,为了追求一个工作效率和时间成本,这样的设计从另一个角度上来说是可行,但是这样的图标后期是一定要去优化和修改的。我们可以从它的样式、风格、艺术性、识别性、独创性上进行改善。从而在提升视觉效果的同时也可以节省用户的时间,提升点击效率。

2 汽车网站用户需求和构架

汽车电商的平台的兴起,就一定要分析和研究用户需求,从而带来好的用户体验。

分析用户需求我们主要从用户特点来分析。目标用户主要是指进行网上购物的人群,年龄阶层偏向上班组的中年段,在用户的使用中也要考虑不会用按钮点击,复杂操作的中老年人。

网站构架,以功能需求为主,大的构架包括新车买卖、二手车买卖、汽车配件三大板块。

3 用户体验与界面设计

好的界面设计可以大幅度提升用户体验,我们的设计要充分符合中国人的使用习惯并结合人们的审美需求。

以下是通过实际的案例来分析和研究,好的交互设计是如何实现和运用的。这个首页的界面设计,视觉冲击力非常强,简洁明了,颜色的运用的也非常的好。先从色彩上来说,以白色为主,在需要强调的地方运用了红色和深灰色,不仅色彩的对比强烈,也充分符合企业VI手册的色彩识别标准。再如购物车橙色的按钮,符合人们的心理需求,橙色让用户更有点击的欲望。

接着我们分析一下恒信首页的图标设计。最显而易见的是六个栏目的大图标,写实风格,有一定的趣味性,图标的色彩虽然五颜六色,但并不杂乱,主要原因是因为色彩多,但色彩的使用面积并不大,整个页面的主色调依然是白色和灰色为主,图标的色彩很好的作为辅助颜色,点缀其中。然后六个图标的风格统一,识别性强,给人们的体验是看图即知道含义。接着登陆框的两个小图标也与之前的图标做了很好的对比,层次清晰。底部六个常驻图标,在色彩上略显过深,从形式上来说具有一定的艺术性,下面的文字也很好的和图标形成了一个层次对比,黑白灰的运用不会给你带来审美疲劳。

网站的整体设计风格,我们可以看出,设计以简洁为主,这样设计的原因,主要还是基于前期的需求分析和产品经理给的产品原型来定的。不难发现这样的设计很好的明确了目标,没有多余的地方,一方面给用户节省了时间,另一方面也可以减少服务器负担,节省企业成本,优化网站运行速度。

所以在界面设计中如何做到尽量的简洁和好的用户体验显的格外的重要。图标在当今的web端和移动端都大量的运用到,它的特点视觉冲击力比文字强,带给人们新鲜感,吸引人们点击和使用。当然用户体验的提升不仅仅局限于图标的视觉设计。

在这两个页面中,登录框的大小、摆放的位置、文字的大小、色彩、页面布局、点击样式、鼠标放上去的样式、页面跳转的合理性都是影响用户提的方面。

中国人的使用习惯是视觉中心偏向右边,登录框放在banner的右边位置醒目,诱使人们进行注册登录,积累平台潜在客户。文字的大小以12号为主,颜色使用并不用纯黑色,而是深灰色,这样做的原因是视觉对比有,人们感官上会显的舒服。页面布局稳重,有层次,也简洁很多。点击样式鼠标放上去的效果,引导人们点击,和帮助人们更好找到点击的目标区域,页面跳转设置也摒除了繁琐的几步跳转,直接链接到了目标页面,给人们好的体验。

汽车电商平台图标的差异化的研究,主要通过实例来分析。在这个页面设计上图标的差异化并没有表现出来,没有区分团购、特卖、促销。这六个图标设计中都运用了车的元素,相反的给了用户一定的误导,没有差异化的图标,设计出来是失败的,扁平化的设计,在视觉冲击力上来说也略显单薄。

4 总结

用户产品设计和图形设计的传统方法着重关注的是与工艺、美感和形式相关的美学品质。解决设计问题乃以情感价值为依据,对成果的评判或批评也往往是在艺术领域的范畴进行的。与之不同的是,交互设计将重心从视觉效果转移到了人这方面上。

参考文献:

[1]梅哲.图形图像界面中的图标设计[D].武汉理工大学,2009.

[2]杨文.论标志设计的重点与难点[J].233000.

第5篇

“钓鱼网站”是指不法分子利用各种技术手段,仿冒真实网站的URL地址以及页面内容。具体到期刊钓鱼网站就是模仿、复制某一期刊自主网站内容,通过篡改编辑部联系方式、投稿邮箱等关键信息,或是针对尚未建立自主网站的期刊,直接构建虚假的征稿平台,以迷惑、诱骗作者投稿,骗取其审稿费或版面费等,较之论文中介网,钓鱼网站隐蔽性强,甄别难度大,危害性强。

1.1投稿平台研发机构

基于对203种核心期刊的网络搜索调研,学术期刊投稿平台开发多为专业的期刊采编系统开发商,主要包括玛格泰克、中国知网、勤云科技、三才科技和其他平台,其中玛格泰克和知网合计占比达调查期刊的50%以上,各系统开发商或维护商名称通常都会标注在期刊网站首页下方的版权处或注册投稿界面上。而没有一家钓鱼网站会在版权页处显示开发商或者技术支持的信息,他们往往只在该处标注主办单位和地址信息。

1.2网页内容

钓鱼网站的界面设计很多足以乱真,但刊发内容和栏目编排往往经不起推敲,内容更替速度缓慢;过刊浏览部分多数是“死链”或者只有摘要,无法全文揭示;在线投稿方式通常不需要注册,可以直接提交论文;投稿指南中的审稿周期往往只有几天;虚假投稿邮箱基本都是163邮箱;编辑部信息通常缺失联系电话。钓鱼网站选择的仿冒对象多数是没有官方网址或者尚未开通投稿平台的期刊。

1.3域名

少量期刊网站根据域名即可判断,以edu和gov为域名后缀的可确信为真实网址,各大学学报如西安建筑科技大学学报、天津体育学院学报均为这种情况。

2有效应用互联网找到期刊正确投稿方式的方法

2.1主办单位官网

学术期刊的主办单位很容易通过百度百科、知网、万方等相对权威的网站中找到,即使是在钓鱼网站中,主办单位的名称也普遍是正确的。而一般说来,核心期刊的主办单位多为政府机关、高校、研究机构、学会等事业单位或知名度较高的企业,这些机构的官方网址比较容易确认,百度搜索结果中往往有“官网”认证,根据对203种核心刊的调研,近五成的主办单位会在网站中嵌入学术期刊的链接或期刊编辑部简介、投稿指南,可以获取可信的投稿邮箱,部分编辑部的邮箱未注明是咨询邮箱还是投稿邮箱,此时最好致电编辑部确认投稿方式。

2.2知网“原版目录页浏览”

多数核心期刊会选择在其纸质期刊的目次页尾部或封四刊登投稿方式、官方网址,在知网中通过期刊导航搜索刊名,查看期刊详情,通过最近一期的“原版目录页浏览”选项,获得准确的编辑部信息,包括编辑部地址、联系电话、邮箱、网址等。该方法可行性高,但知晓率很低。

第6篇

关键词:网站设计;课程改革;内容优化

中图分类号:TP393.09 文献标识码:A 文章编号:1009-3044(2016)17-0100-02

1 引言

“网站设计”是使用标识性语言,通过一系列策划、设计、建模、优化、开发步骤产生网站,最终以图形用户界面的形式展现给用户[1]。在计算机相关学科的教学中,网站设计课程是一门重要的专业课,其知识多、操作性强、课程难度较大[2]。

当前,各院校普遍开设了网站设计类课程,但是在其教学过程中,我们发现学生内驱力较弱、动手能力有限、学习主动性较差、动手能力不足、横向竞争力差等问题[3]。考虑到目前社会上对网站设计人员的需求,我们认为改革现有教学模式、提高学生实践能力、增加职业竞争力等,是亟须解决的问题。因此,对“网站设计”相关类课程进行改革势在必行。

2 文献综述

目前对网站设计类课程的改革研究体现在很多方面,例如:任锁平 [4]基于搜索引擎优化的视角下,探析教学资源网站设计策略。分别从策划层次、开发层次、界面设计层次、维护层次四个方面阐述了教学资源网站设计的策略。荣益 [5]从信息技术课程教学网站的需求分析与功能定位以及信息技术课程教学网站的内容设计两方面探讨了信息技术课程教学网站设计实现。张慧丽 [6]将Moodle平台应用到《网站设计与制作》课程教学中,采用问卷调查法对Moodle平台应用教学效果进行了分析。杨铭 [7]介绍了如何基于项目化实现网站设计与开发课程的教学内容,并总结了课程的特色与创新点。章早立 [8]讨论了基于“分层分类”理念的高职《网页制作与网站设计》课程教学新模式探究。郝静 [9]通过对近年来教学过程中课程教学模式的研究、教学方法和手段的改革的探讨,阐述如何在该课程中实现工作过程系统化的"教学做"合一。杨敬飞 [10]以文化洛阳网站的设计为例,讲述了如何在网页设计课程中应用项目教学法,将教学内容和教学目标巧妙地包含于项目设置之中。

然而,上述论文并没有从课程的内容结构上进行优化。“网站设计”课程的难点在于内容多而碎,需要较多的先修课程知识。本文拟从课程设置的角度出发,深入探讨如何设计该课程的内容,并以本人就职南京师范大学中北学院以来的教学经验,汇报作者对网络设计课程的授课计划。

3 方法

传统的“网站设计”类课程,仅包含基础的HTML语言、JavaScript语言、CSS+DIV、图像处理、动画制作。选取的软件仅包括网页三剑客之一与Photoshop的搭配处理。然而我们认为上述授课内容过于陈旧、没有紧跟前沿、缺少及时更新。为此,作者设置授课计划如表 1所示。

4 结果

实验对象选择南京师范大学中北学院2011级某班。通过问卷调查方式对改革前后的教学效果进行调查,共发出问卷33份,回收问卷33份,其中有效问卷32份,有效率96.97%。对回收的问卷通过Excel进行统计处理。表 2给出分析结果。

5 讨论

表 2可见,课程改革后,大部分学生认为新的课程知识面更广、内容更新颖、更适合自学、能提高学习效率、可激发想象力、使课堂变得更加有趣、并能推动学生课后学习。因此,我们认为对“网站设计”教学内容的重新规划是成功的。需要注意的是,新的课程内容需要至少72学时。对某些院校,教师反映仅分配36学时给“网站设计”课程,这种情况下本文提出的新的授课计划并不适用,需要进行删减。

6 结论与展望

本文通过提出了一种针对“课程设计”的授课内容改革探索,经过问卷调查证实其有效。下一步我们将要收集学生考试成绩,对其进行量化分析。此外,可以考虑引入双语教学[11],以及将其他程序语言例如Matlab[12]嵌入到课程设计中去。

参考文献:

[1] 胡珍新. 基于计算思维的网站设计教学研究[J]. 计算机教育, 2014(20):56-58.

[2] 费丽君. 基于JSP的农业院校的大学计算机基础教学网站设计研究[J]. 安徽农业科学, 2014,42(7):2176-2177.

[3] 田久乐. 浅谈独立院校电子商务网站设计课程教学改革[J]. 中小企业管理与科技, 2014(13):288-289.

[4] 任锁平. 搜索引擎优化视角下教学资源网站设计策略[J]. 自动化与仪器仪表, 2014(6):194-196.

[5] 荣益. 探讨信息技术课程教学网站设计[J]. 计算机光盘软件与应用, 2014,17(18):222-222.

[6] 张慧丽. 基于 Moodle平台的《网站设计与制作》教学应用研究[J]. 软件导刊教育技术, 2014,13(3): 29-30.

[7] 杨铭. 基于项目化教学的网站设计与开发课程改革探索[J]. 学园, 2014(36): 21-22.

[8] 章早立. 基于“分层分类”理念的高职《网页制作与网站设计》课程教学新模式探究[J]. 福建电脑, 2014,30(8):146-147.

[9] 郝静. 学习领域课程教学模式和方法的研究――以动态网站设计与制作课程为例[J]. 湖北工业职业技术学院学报, 2014,27(2):93-95.

[10] 杨敬飞. 项目教学法在艺术设计专业网页设计课程中的应用实践――以文化洛阳网站设计为例[J]. 美术教育研究, 2014(5):122-124.

第7篇

关键词:交互行为 直接操控 间接操控 状态转化 行为序列

检 索:.cn

Abstract :Interaction is an important design element in interface design process. It is necessary that classify the interaction type for designers. In this article, interaction is classified from two aspects: user’s manipulate behaviors and design content. There are two types of interaction if we classify it by user’s manipulate behavior: directly manipulate and indirectly manipulate. If we classify interaction by design content, there are some kinds of interaction behavior, such as states transfer and action sequence. Classifications of interaction in interface design can help designers work more efficiently in interface design process.

Keywords :Interaction Behaviors,Directly Manipulate,Indirectly Manipulate,States Transfer, Action Sequence

Internet :.cn

一、问题的提出

在界面设计中,对用户的交互行为进行设计是重要的组成部分,但交互行为从心理学、计算机学科、用户体验的个角度都会有不同的解释与分类,而设计师需要有明确的设计对象与类型才可以进行设计创意、设计方案发想以及设计方案评估。因此需要提出一个适应设计流程的交互行为分类来满足设计师的需求。设计的流程往往是从对用户的使用行为分析开始,再根据用户行为特点进行方案设计,因此本文就从用户使用行为和设计的内容这两个角度对交互行为进行分类。

二、从用户行为角度对交互行为进行分类

从用户的使用行为来看,用户对界面的操控方式可以分为直接操控与间接操控两种。直接操控是指用户直接接触到界面中的元素进行操作,而间接操控是指用户借助额外的控制元素,如箭头、滑动条等对界面中的元素进行控制。例如在绘图软件中移动一个图形,当用户想将图形大致放在某个区域时,一般会使用直接操控的拖拽方式;而当用户需要将图行精确地定位时,一般会使用键盘上的方向键或者输入坐标数字对图形进行间接操控。

(一)直接操控

直接操控这一方式大多来源于用户对于实体物体的操作,用户会按照现实生活中操作真实物体的方式来选择和操作数字对象。最典型的直接控制例如点击屏幕上的按钮播放一段音乐,就如图用户在现实生活中按下一个按钮让卡带开始转动一样,直接操控的方式包括用户使用鼠标、手指触摸等,各种类型的具体描述如下。

1. 使用鼠标操控

鼠标伴随着图形界面(GUI)出现,是传统GUI系统中不可缺少的一部分。它让用户可以采用直接控制的方法在计算机屏幕上进行操作。在鼠标出现之前,用户只能通过键盘间接控制屏幕上的元素。鼠标和屏幕上的光标代替了用户的手去选择和操作屏幕上的各种元素去操作。鼠标的使用有一系列约定俗成的操作习惯,大多数习惯使用鼠标的人可能已经忘记了第一次使用鼠标时的感觉,但用户肯定是经过一段时间才习惯了鼠标的这些操作。移动鼠标对应着屏幕上的光标运动;鼠标经过某个按钮时,它会打个招呼;单击鼠标表示选中某个元素,就像用手抓起一件东西;双击鼠标代表着进一步的操作,可能是打开一个文件,也可能是表示确认某个操作;右击鼠标可以给用户带来更多的选择等。

因此设计师在设计一个基于鼠标操作的界面时,应当考虑到如何将用户对界面的操控分配给鼠标动作。例如文本的选择,在大多数浏览器或者文字处理软件都有对于选择文本的鼠标操作定义,即单击鼠标选定文本位置,双击鼠标选中当前位置的单词,连续三次点击鼠标选中当前段落。下面是几种典型的鼠标交互设计方式需要设计师分别进行设计。

鼠标悬停。鼠标悬停是一个常见的交互设计方式,目的是提示用户该元素可以选取或者点击,有时也会激活说明提示文字。

光标替代。在使用鼠标的过程中,鼠标的移动对应着屏幕上光标的移动,而光标的样式的替换可以给交互增加新的涵义,而不再是代替手的动作。在自由涂鸦网站(http:///),滑动鼠标会发现光标变成了一只笔,可以在页面上随意绘图。

鼠标手势。鼠标手势是一种特殊的鼠标行为,例如在Opera、Firefox、IE等浏览器中,用户可以使用鼠标在界面空白处滑动,不同的滑动轨迹代表着前进、后退、新建窗口等多种操作,可以提高用户使用浏览器的效率。

与鼠标类似的界面操控工具还包括数位笔、轨迹球等,它们产生的交互效果与鼠标类似。

2.使用手指触控

随着触屏手机与平板电脑的流行,使用手指与界面进行交互越来越普遍。使用手指当然要比使用鼠标更加直接,一个没有鼠标使用经验的老人或者孩子可以很自然的使用手指操作界面。这种直观的操作指示性是手指操作的优势。但如果用户已经熟悉了鼠标的应用,那么从操作准确性和速度来看,手指并不占上风。用户如果使用手指去操作一个基于鼠标操作的界面,那效率就会非常低了。

手指操作也有着约定俗成的习惯,手指的点击动作是继承了鼠标的操作;滑动手指可以进行拖拽;再多点触控的界面上用两个手指方法或者缩小界面;点击三个手指可以打开菜单等。

触屏手机的解锁操作也是一个手指操作的典型案例。苹果iPhone与iPad的解锁方式非常直观,类似于日常生活中的拨开插销的动作,箭头的指向与文字说明帮助用户理解,而且用手指在直线上滑动操作非常简便。其他不同手机系统也都有着各自的手指操作解锁方式。(图1)

3.使用TUI(实体界面)

TUI全称Tangible User Interface,是指基于实体环境的用户界面系统,这一概念最早由MIT媒体实验室提出。TUI可以让用户彻底摆脱GUI(图像界面)的学习过程,直接对实物进行操控,达到使用交互系统的目标。中国的传统计算工具算盘是一个典型的实物操控系统的例子,算盘的输入数字的方式是拨动算珠,进行加减乘除运算的方式仍然是拨动算珠,用户在操控实物的过程中直接得到反馈与信息的输出。

(二)间接操控

间接操控是指不接触操控的对象对其进行操控的方式。GUI(图像界面)时代之前的命令行以及文本界面时代的计算机操作大多是间接操控。使用键盘是间接操控的主要方式,例如使用快捷键“Ctrl+C”复制,用 “Ctrl+V”粘贴以及直接使用键盘上的“Delete”键删除对象等。使用键盘进行操作的流程要比直接操控简单,因为这一流程省略了在空间中准确定位选取对象的过程。回忆一下没有鼠标时,用键盘上的“Tab”键、方向键以及一些快捷键组合操作windows系统的经验,完全是间接操控的方式。

设计师喜欢使用快捷键操作像Photoshop、3dsMax这类的设计软件,这种操作方式比拿起鼠标在菜单栏里沿着层级寻找按钮要有效率的多。但如果想熟练掌握这种偶那个间接操控则需要较长时间的学习与记忆。

在游戏领域,间接操控的使用更加广泛。从最早的掌上游戏机到今天的大型网游,使用键盘进行间接操控都是常用的方式。最早的掌上游戏机都是通过按键控制着屏幕上的人物或者汽车左右移动,发射子弹等,这种操控模式需要较长的练习才能熟练掌握,在玩游戏的关键时刻经常会忘记每个按键的功能。

这种间接操控经常会用在一些模拟游戏场景的网站设计中,设计师吧浏览网站的模式设计成为游戏模式,吸引用户在网页上浏览与探索,在大众Polo的体验网站(http://.au)中,用户需要用方向键控制屏幕上的小汽车,在一个类似地图的界面进行各种信息的浏览。

目前在交互设计领域发展比较迅速的手势识别、语音控制及脑机接口都可以视为间接操控,这些间接操控的方式一方面可以提高交互界面的通用性,及可以方便有障碍人士使用,另一方面也增加了交互系统对环境的适用性。

直接操控和间接操控往往是结合进行,相互辅助。如果只是单一的操控方式,很可能因为体验差而会招来用户的抱怨。平板电脑iPad提供了虚拟键盘供用户输入信息,但这个内置的虚拟键盘并没有设置方向键,在编辑文本时若想控制光标的准确位置,只能使用放大镜工具,效率较低。因此设计师在设计一个交互系统时,首先要考虑某种交互方式是需要使用直接操控还是间接操控,另外要考虑到用户在直接操控和间接操控两方面结合的需求。

三、从设计内容的角度进行分类

前文是从用户的操控界面的行为分析交互的类型,这一操控行为类似像界面发号施令,而交互系统对于用户操控的回应则是设计师需要关注的另一个角度。界面的回应方式按照设计内容可以分为有状态的转化以及行为序列等。

(一)状态转化

最常见的状态转化是页面的跳转。大多数界面是由多个页面构成,每个页面上承载着功能的实现和信息的传达。典型的页面跳转是网站中的网页浏览,这种交互的方式来源于阅读传统的报纸与杂志。

弹出式页面是另一种常见的状态转化类型。当页面中信息量较大需要新的空间承载,同时又不希望用户离开这个页面时,弹出式页面是最佳选择。弹出式页面要具有关闭按钮,以便用户随时关闭,不推荐使用主动弹出的页面,以免让用户感到打扰。

折叠式面板可以把不需要随时展示的内容收起,需要时再打开。一般使用上下箭头或左右箭头作为操控按钮。

收缩式面板与折叠式面板的作用类似,用户可以随时打开和收回面板。操控收缩式面板的元素一般设计成标签或者把手的形态,以便让用户理解。

(二)行为序列

行为序列是一个特别的概念,是指用户在对界面进行操控之后,页面的某个元素或者整个页面产生的一系列行为回应。例如点击按钮后,某个面板消失;通过拉拽放大或者缩小窗口等。行为序列的目的是给用户的操控以明确的反馈,表明用户交互行为有了结果。典型的行为序列包括拖拽、关闭、位置与形态变化等。

不论是从用户操作行为的角度还是从设计内容的角度对交互行为进行分类,目的都是让设计师的设计过程更加有针对性。在进行设计创意与设计评估时能够对设计对象进行更细致的区分与比较。

本论文受到“北京市属高等学校人才强教计划资助项目”资助(编号:PHR201108269)

参考文献

1 Dan Saffer.交互设计指南[M].陈军亮,陈媛,李敏译.第1版.北京:机械工业出版社,2010.

2 Hugh Beyer / Karen Holtzblatt. Contextual Design. Morgan Kaufmann. 1997

3 Mike Kuniavsky.Observing the User Experience: A Practitioner's Guide to User Research . Morgan Kaufmann. 2003

4 琼斯译者[M].移动设备交互设计[M].奚丹译.第1版.北京:电子工业出版社,2008.

5 Alan Cooper / Robert Reimann / David Cronin. About Face 3 交互设计精髓[M].刘松涛,译.第1版.北京:电子工业出版社,2008.

6 Mary Beth Rosson John M. Carroll. Usability Engineering: Scenario-Based Development of Human-Computer Interaction. Morgan Kaufmann. 2001

7 Jeffrey Rubin. Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests. John Wiley & Sons.1994

8 Carolyn Snyder.Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces. Morgan Kaufmann. 2003

第8篇

[关键词] 信息构建(IA) 信息化建设 信息优化

网站信息构建(IA)是运用信息构建的理念将网站内部的信息进行有机整合,对网站的内容结构进行组织、标识、导航和检索,从而帮助用户在网站上成功获取服务和信息的方法和过程。为了提高网站的服务质量,建设信息构建(Information Architecture简称IA)型的网站势在必行。

一、IA的目标及思想

IA的设计目标是寻求信息处理和信息需求的统一,从信息的处理结果看,要达到“信息清晰”和“信息可理解”两个目标;从用户的使用结果看,要达到“信息的有用性”、“信息可用性强”和“良好的用户体验”三个目标。IA的核心思想是“以人为本”。强调以用户为中心,重视用户体验,满足用户的信息需求。在信息量大、业务繁杂的网站上,它可以实现资源、信息的合理组织,提高信息检索效率,增进用户体验,减少网站管理维护的成本。这对网站建设尤为重要。

二、网站的IA改造的步骤和措施

IA改造初期,首先对现有网站进行IA评价并得到相应文档。之后,在IA评价的基础上对现有网站的内容进行整理,舍弃过时内容,改进现有数据,清理数据库中无用信息。在此基础上,对新增功能进行需求调研,确定系统的设计目标、功能模块及开发进度。

1.网站整体设计

(1)系统需求分析

需求分析阶段是后序系统开发过程的依据。这一阶段主要完成用户建模、业务建模及内容分类三部分工作。

用户建模完成将企业中的用户类型映射到系统中用户角色的工作。它首先要编制职能部门,之后将人员分配到职能部门并设定角色类型和权限。在对系统用户建模时要本着“灵活实用”的原则,要考虑职能部门变更及用户角色变更的需求。

业务建模根据需求调研收集的资料,对角色的行为进行建模,得到用例图、状态图、活动图、序列图及类图等。同时,分析系统与周边系统间的接口,对接口的功能及参数进行设计。

内容分类是将网站的内容按分类标准进行分类。网站分类标准应综合目标用户的知识背景、专业背景及网站的操作流程等进行设计。分类要以“清晰明了”为原则。类别名称要尽量符合用户习惯,能够囊括该类下的所有项目内容,并与其他分类有所区分。分类不要过多过细,大类一般6~9个为宜,每一类还可以再细分新的层次,层数不宜过多,一般3~5层为宜。

(2)数据库改造设计

数据库改造是根据业务建模得到的文档资料,对数据库中表格结构及数据库中数据信息进行整理。

从设计对象看,它包括现有数据库改造、数据库设计二部分。数据库改造对库中现有表进行结构改造,使其能够满足IA改造的要求;新增模块数据库设计是对新增功能进行数据库建模。

2.网站功能性设计

(1)用户界面设计

用户界面是网站的窗口,好的用户界面可以提升用户的使用感受。界面设计要体现美观、简洁、清晰、易用的原则。主页设计是用户界面的重点,在设计时要尤为重视。在主页背景设计、整体布局、颜色搭配方面要有专业美工的参与。主页展现内容要保证重要性及实效性,布局要清晰合理,美观大方。主页设计完成后,其他页面的设计要保证与主页风格保持一致。为缩短网页加载时间,建议界面设计时对使用的图片进行压缩,少用大容量FLASH动画及视频资源。

(2)导航系统设计

通过导航系统,用户可以了解网站内容分类和结构组织,知道自己浏览页面在网站上所处位置,明确自己的前行方向和路线,准确地到达目的地。导航系统包括全局导航、局部导航、辅助导航三个部分。全局导航栏放置网站内容分类的链接,它在网站的所有页面中出现,用户随时可以点击这些链接进入对应分类页面。用户进入某一分类后,若该分类有子类别,子类信息会在局部导航区域内列出。辅助导航是除全局导航和局部导航外能指导用户迅速使用系统的导航功能,辅助导航包括位置导航、网站地图和使用帮助等内容。网站地图是网站上内容分类的链接容器,它将网站上主要目录信息甚至所有目录信息以分类列表的方式放置在一个页面上,这样可以帮助用户快速查找需要的类别信息及了解网站组织结构。网站使用帮助是用户使用网站的快速指南,它介绍网站各模块的功能及操作步骤,帮助用户尽快熟悉网站功能。对于栏目增删频繁的网站,为便于系统维护,建议将类别信息存入到数据库中,通过数据库来实现网站导航系统的动态维护。

(3)检索系统设计

检索功能是在海量信息中查找所需时最常用和最重要的功能,检索功能是否满足设计需求关系到系统的IA改造的成败。检索系统的设计要考虑众多的因素:检准性和检全性是首先要考虑的因素;检索方式要满足简单查询及复杂查询的需要;查询结果要满足按内容相似度或发表时间、访问次数等因素排序的需要。为提高用户检索操作的执行效率及检索的准确性,建议在数据库中要设计检索功能专用的数据表。

(4)网站接口设计

网站需要与其他系统进行数据交互时,网站接口是不可缺少的一个环节,接口设计时,要充分考虑本系统数据库与目标数据库间数据表示的差异。对于需要导出的数据,要定义好数据接口,对接口中的参数名称、类型、含义等进行详细的说明。对需导入的数据在导入的系统数据库前要进行数据预处理,进行必要的格式转换,消除数据歧义。

(5)交互功能设计

交互功能不是网站的主要功能,但对网站很好的运作是必不可少的。网站要有用户使用才能体现其价值,从用户得到反馈信息可以方便网站的维护和改进。网站上要留有留言板、论坛甚至聊天室等功能。如果没有这些功能,那至少要留下联系方式(电话、EMAIL)。

(6)安全性设计

安全性是网站设计是要考虑的一个重要因素。除了硬件投入降低系统被攻击的风险外,在系统设计时也要考虑安全的因素。在设计时对系统的备份和恢复功能进行设计;对系统中涉及到系统安全的代码要进行加密;对系统中可能引起风险的操作要进行即时信息验证。

(7)易用性设计

网站要 “以人为本”,开发过程中还需要考虑“网站易用性”原则易用性设计着眼用户的使用感受,在网站上增加网页打印功能、对显示信息的字号进行控制、在每篇文章后显示相同关键字的其它文章的链接都是易用性设计的表现。

3.软件开发阶段

为保证系统的功能的顺利实现,一个科学严谨的代码设计开发团队是必不可少的。软件开发阶段初期,首先要对项目中要实现的所有功能进行分解,通过分解得到每一个功能的代码实现子功能模块(接口或函数),然后对每一个子模块的接口参数及要实现的功能进行设计。最后要制定软件开发计划,对软件开发过程进行项目管理。

在代码编写过程中,要对开发出来的功能代码同步地进行单元测试。全部代码编写完成后,还要对代码进行集成测试。软件集成测试主要依据软件结构设计(概要设计)文档,对集成后的软件模块进行功能性测试、可靠性测试、易用性测试、效率测试、维护性测试和可移植性测试,验证代码单元集成后形成的功能模块能否达到功能设计中的设计目标。

4.系统部署及试用阶段

经过集成测试后,软件系统已经初具规模,这时需要将其部署到服务器上,组织相关人员对软件进行试用。这一阶段,一方面要吸取用户对系统提出的合理建议,另一方面要对部署后的系统进行压力测试。对于试用过程中发现的问题要及时处理,尽量不要改动后台代码,若改动代码还要对改动造成的影响进行评估及测试。

5.系统IA评价阶段

试用通过的系统就可以投入使用了。在投入使用之前要依据是IA评价标准对现有网站进行评价。将评价结果与之前的评价结果进行对照就可以知道IA改造的成果及系统进一步优化的方向。

三、IA改造相关事项

IA改造是一项庞大的工程,单位领导的高度重视是项目顺利实施及开展的前提。因此需要成立专门的项目开发领导小组,由单位领导担任组长。多与单位领导就IA改造项目进行沟通,使其对IA改造的意义、重要性及目标有较高的认识。领导重视了,项目的资金来源、开发团队的组建、开发过程中与各部门间的协调沟通、相关部门的支持协助等就比较容易了。

除了组织保证外,项目文档建设也是非常重要的。从需求调研、需求分析,到数据库设计、接口设计、从开发文档到测试记录、从单个程序员的开发程序到整个项目的代码集成测试,文档建设要渗透项目开发的全过程。 在项目开发过程中要有专业的版本控制软件(如CVS,VSS等)对项目开发过程中产生的档案文件及程序代码进行代码备份及版本控制。

IA改造过程要面对新老两个系统,在技术层面上可能要面临新老两种技术的取舍。在技术路线的选择上建议以系统稳定运行为出发点,选择成熟、可靠的技术方案。在保障系统可靠性的基础上再研究提高系统性能的问题。切忌求新求变,应用一些尚不成熟的技术。

参考文献:

[1]黄磊:政府网站IA(Information Architecture)研究.四川大学硕士学位论文.2006年5月

第9篇

(西安石油大学计算机学院,陕西 西安 710065)

【摘要】随着我国计算机网络技术的飞速发展,虚拟现实技术也随之而出,虚拟校园就是虚拟技术的一个分支。本论文以西安石油大学新校区为例,基于Unity3d平台开发的系统运行效率高、维护简单的特点,运用3dmax建模软件进行对场景建模,通过JavaScript和C#语言实现人机交互,最后结合html进行融合导出,从而完成虚拟校园的开发。针对虚拟漫游网络占用大量网络带宽,影像虚拟漫游系统运行的流畅性,提出了在建模优化及程序中的优化实施措施,经过软件测试,表明该优化方法能够有效地降低网络带宽,能够一定程度上提高虚拟漫游系统运行效率,为构建虚拟数字化校园及相关方向研究提供实用参考价值。

关键词 虚拟现实;虚拟校园;校园漫游;Unity3d

Design and Realization of Virtual Campus Roaming Based on Unity3D

WANG Cai-ling LIU Rui-xiang SONG Zhao

(Xi’an Shiyou University, School of Computer science, Xi’an Shaanxi 710065, China)

【Abstract】The virtual reality technology comes with the rapid development of computer network technology, and the virtual campus is a branch of it. In this paper, the new campus of xi’an Shiyou university is taken as an example, the system based on Unity3d platform which has high efficiency and good maintenance, it used 3dmax to model the scene and realize human-computer interaction through JavaScript and c#, finally combining HTML to export and fuse, thus completing the development of the virtual campus, and providing practical reference value for building a virtual digital campus and the relevant research.

【Key words】Virtual reality; Virtual campus; Campus roaming; Unity3D

0 引言

在网络快速发展的时代,虚拟现实技术成为了高等教育机构和国内外商业抢占市场和提高竞争力的一个强有力手段。他们通过虚拟现实技术,让用户足不出户就可以了解到他们所需要的东西,而且具有身临其境地感觉。使用者利用网络手段真实感触到产品、环境及体验,对虚拟现实技术的要求更高更迫切。基于双方的需求,更加促进了web3d技术的完善和成熟。

所谓虚拟现实是利用电脑模拟产生一个三维空间的虚拟世界,提供使用者关于视觉、听觉、触觉等感官的模拟,让使用者如同身历其境一般,可以及时、没有限制地观察三度空间内的事物。虚拟现实技术已经广泛应用在医疗[1]、教育[2-3]、电子商务[4-5]等众多领域。其中,Web3D技术是当前虚拟现实 的主流技术。Web3D又称网络三维,是一种在虚拟现实技术的基础上,将现实世界中有形的物品通过互联网进行虚拟的三维立体展示并可互动浏览操作的一种虚拟现实技术。相比起目前网上主流的以图片、flash、动画的展示方式来说,Web3D技术让用户有了浏览的自主感,可以以自己的角度去观察,还有许多虚拟特效和互动操作。Unity3d是由Unity Technologies开发的一个可以轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。Unity3D最大的优势是性价比高, 并且可以成网页浏览的方式, 用户不用下载客户端, 就可以直接体验. Unity3D支持各种脚本语言包括Javascript、C# 兼容各种操作系统, 真正的实现了跨平台。

本论文从创建数字校园需求分析入手,通过前期测量,三维建模完成各个数字模块,最终完成一个数字化校园。首先应该通过CAD平面图[6-7]和实地拍摄图片[8-10]构造模型主题,经过测量和分析得到虚拟场景内各个模型的尺寸,利用3dmax建模软件对各个建筑体进行建模,然后进行场景合并。运用3dmax插件导出为FBX格式,将导出文件导入Unity3D中,在 Unity3D中添加灯光设置、图纸设置、及第一人称角色来完成人机交互。利用Unity3d的跨平台设置生成html格式,将html格式文档在互联网中,可实现网络环境下虚拟校园的漫游。

1 三维虚拟校园漫游的总体设计

1.1 虚拟校园漫游开发流程

基于西安石油大学新校区的虚拟校园漫游开发流程如图1所示。

首先,获取校园地理相关信息数据。在这里首先获取校园AutoCAD平面图和相关建筑物设计图纸。对建筑物分别从四个正面及八个方向拍照,获取外部轮廓及细节图;对草地、水域及道路等采用实景拍照获取相关信息。

其次,将所采集到的数据及图片信息利用3Dmax建模软件,制作三维数字模型,对粗糙模型进行加工渲染,得到效果逼真的三维模型。

再次,将三维模型利用3Dmax插件导出,由于Unity3D软件要求输入模型为FBX类型,因此,按照Unity3D软件平台要求输出指定模型,进行后续的开发。

最后,利用Unity3D软件,使用Javascript和C#语言,添加灯光照射和人物角色,对人物添加碰撞检测,实现基于第一人称的无失真漫游。

1.2 开发过程中的关键技术

1.2.1 漫游功能的实现

漫游功能是实现数字化校园的关键, 交互是实现漫游的方式. 基本的人机交互方式,例如人物行走,需要采用鼠标点击前进、后退、左转、右转、跳跃等功能,在Unity3D中可以以WSAD实现,代码在FPScontral.js脚本文件中,其关键代码如下:

var Speed=5;

var RotateSpeed=20;

function Update () {

if(Input.GetKey(KeyCode.W)){transform.Translate( Vector3.forward* Time.deltaTime * Speed);

if(Input.GetKey(KeyCode.S)){transform.Translate( Vector3.forward* Time.deltaTime * -Speed);

if(Input.GetKey(KeyCode.A)){transform.Translate( Vector3.up* Time.deltaTime * RotateSpeed);

if(Input.GetKey(KeyCode.D)){transform.Translate( Vector3.up* Time.deltaTime * - RotateSpeed);}

}

另一种重要的交互功能是GUI界面设计,在虚拟校园中,需要场景的跳转,如图2所示,根据选择进入场景,实现相应的漫游模式。核心代码如下:

function OnGUI(){

GUI.Label(Rect(280,150,400,200),str);

if(GUI.Button(Rect(250,320,100,25),"进入校园"))

{

Application.LoadLevel("xishiyou02");

}

if(GUI.Button(Rect(600,320,100,25),"退出系统")){

Application.Quit();

}

}

1.2.2 碰撞检测设计

碰撞检测[11-12]是模拟现实环境中的人物及物体在遇到障碍物时发生的本能反应,例如,当角色遇到墙壁,如果没有设计碰撞检测,则角色会出现穿墙而过的失真现象,在现实中,应该是当发现墙壁与角色存在一定距离时,则需要停止前进。在这种情况下,设计人员需要添加碰撞检测函数。碰撞检测实现及性能是整个数字校园漫游的性能指标之一。Unity3d开发平台默认给每个对象(GameObject)添加一个碰撞组件(ColliderComponent),一些背景对象则可以取消该组件。在unity3d中,能检测碰撞发生的方式有两种,一种是利用碰撞器,另一种则是利用触发器。这两种方法应用都非常广泛。

在Unity3d中,主要有以下接口函数来处理这两种碰撞检测:

触发信息检测:

1)MonoBehaviour.OnTriggerEnter( Collider other )当进入触发器

2)MonoBehaviour.OnTriggerExit( Collider other )当退出触发器

3)MonoBehaviour.OnTriggerStay( Collider other )当逗留触发器

碰撞信息检测:

1)MonoBehaviour.OnCollisionEnter( Collision collisionInfo ) 当进入碰撞器

2)MonoBehaviour.OnCollisionExit( Collision collisionInfo ) 当退出碰撞器

3)MonoBehaviour.OnCollisionStay( Collision collisionInfo ) 当逗留碰撞器

2 虚拟校园的实现

2.1 虚拟校园漫游系统设计要求

虚拟校园提供三维浏览功能有利于用户通过网络直观地获取信息,可以自主控制前进方向。构建这样的虚拟校园系统,在开发过程中需要解决的问题如下:

1)可以实现网络浏览, 文件不能过大, 要保证适合大多数计算机可以访问;

2)以一定的比例真实缩小实体校园, 所有重要的场景要尽量真实还原;

3)提供比较人性化的GUI界面, 比如“帮助导航”用来给用户提示信息;

4)设置与学校官网链接的页面导航;

5)配备背景音乐, 并可以由用户自行设置关闭或打开;

6)设置导航图方便用户了解校园的整体;

7)通过服务器多用户交互。

2.2 构建过程

2.2.1 数据收集

通过实地考察量,测量,拍照等方式进行数据信息的收集。

2.2.2 模型构建

学校模型通常为学校大门,教学楼,路灯,花池,树木,草地等元素构成。根据收集的数据通过3dmax 对基础模型进行平面建模,在模型构建过程中添加贴图,材质,灯光,效果等构建出逼真的模型。在模型的构建中需要注意的是多边形模型的优化. 一个虚拟校园系统还是比较大的, 对模型充分的优化可以减小最后网络文件的大小, 利于用户浏览。

2.2.3 人机交互

人机交互技术是通过计算机输入、输出设备, 以有效的方式实现人与计算机对话的技术. 在本系统中主要的人机交互包括GUI界面设计和漫游设计.。用户通过网页浏览器打开该系统,在系统的介绍下进行校园漫游,用户以第一人称视角进行浏览,增强体验感,通过控制键盘wasd控制视角的移动同时鼠标控制视角的旋转。音乐可以给用户带来试听上的,结合视角,使其有种身临其境的感觉,同时用户可以自己开关音乐。系统添加碰撞检测系统使得用户不会出现穿墙现象,完善虚拟环境的真实性。

3 效果展示

4 软件测试与优化

任何系统都需要进行黑盒子测试以发现系统存在的问题和漏洞。本系统也进行了相应的测试。在测试中发现,基于网络环境下,系统存在占用网络流量大,运行缓慢的现象。分析原因是因为测试电脑配置较低及网络带宽限制。这就要求我们从用户角度出发,在保证真实度的情况下尽量减少模型的数量,大部分建筑需要通过平面建模来优化模型的复杂度,在建模过程中尽量减少模型顶点和分段数,在unity3d处理过程中,尽量使用静态灯光,动态实时灯光相比静态灯光,非常耗费资源。所以除了能动的角色和物体静态的地形和建筑。尽量减少视角范围和距离,减少不必要的运行消耗。

具体实施方案有:

1)模型设计方向:

a)使用层距离来控制模型的显示距离;

b)阴影其实包含两方面阴暗和影子,建议使用实时影子时把阴暗效果烘焙出来,不要使用灯光来调节光线阴暗;

c)少用像素灯和使用像素灯的Shader;

d)如果硬阴影可以解决问题就不要用软阴影,并且使用不影响效果的低分辨率阴影;

e)实时阴影很耗性能,尽量减小产生阴影的距离;

f)允许的话在大场景中使用线性雾,这样可以使远距离对象或阴影不易察觉,因此可以通过减小相机和阴影距离来提高性能。

2)程序优化方向:

a)删除脚本中为空或不需要的默认方法;

b)只在一个脚本中使用OnGUI方法;

c)避免在OnGUI中对变量、方法进行更新、赋值,输出变量建议在Update函数中调用;

d)同一脚本中频繁使用的变量建议声明其为全局变量,脚本之间频繁调用的变量或方法声明为全局静态变量或方法;

e)不去频繁获取组件,将其声明为全局变量;

f)需要隐藏/显示或实例化来回切换的对象,不使用SetActive Recursively或active,使用将对象远远移出相机范围和移回原位的做法;

g)尽量少用模运算和除法运算,比如a/5f,需改写成a*0.2f。

5 结束语

本文以西安石油大学新校区为例,基于Unity3d平台开发的系统运行效率高、维护简单,运用3dmax建模软件进行对场景建模,通过Javascript和C#语言实现人机交互,最后结合html进行融合导出,从而完成虚拟校园的开发。在论文中重点介绍了系统设计过程中的关键技术以及对系统从模型设计及程序设计两方面的优化。该系统经过测试,基本实现学生用户的使用需求。

参考文献

[1]范立冬,李曙光,张治刚.虚拟现实技术在医学训练中的应用[J].创伤外科杂志,2008,12,9(6).

[2]吴燕玲.基于Wed的玩味动画技术及其在教学中的应用[J].中山大学学报:自然科学版,2002(6):53-56.

[3]詹胜利.Web3D技术在网络教学中的应用[J].网络技术与网络教学,2006,1:15-17.

[4]来翔.面向电子商务的虚拟商品模型研究[D].浙江大学,2003.

[5]沈璞.虚拟现实技术在现代工业设计中的应用[J].制造业自动化,2004,6:76-78.

[6][] Okabe M, Igarashi T. 3D modeling of trees from freehand sketches [C]//International Conference on Computer Graphics and Interactive Techniques. ACM SIGGRAPH 2003 Sketches & Applications. New York, USA: ACM, 2003:1-1.

[7]Okabe M, Owada S, Igarashi T. Interactive design of botanical trees using freehand sketches and example-based editing [J]. Computer Graphics Forum, Eurographics (S0167-7055), 2005, 24(3):487-496.

[8]Livny Y, Yan F L, Olson M, et al. Automatic Reconstruction of Tree Skeletal Structures from Point Clouds [J]. ACM Transactions on Graphics (S0730-0301), 2010,29(6):151-1:151-8.

[9][] Tan P, Fang T, Xiao J X, et al. Single Image Tree Modeling [J]. ACM Transactions on Graphics (S0730-0301), 2008, 27(5): 108-1: 108-8.

[10]Neubert B, Franken T, Deussen O. Approximate image-based tree-modeling using particle flows [J]. ACM Transactions on Graphics (S0730-0301), 2007,26(3):88-1:88-8.

[11]甘建红,彭强,戴培东,等.基于 OBB 层次结构碰撞检测的改进算法[J].系统仿真学报,2011,23(1):2619-2173.

第10篇

论文关键词:培训,ASP.NET,模块

由于教学培训信息管理系统的研究具有分布式特点,并且需要采用模块化的设计,因此,在系统的分析与设计中,使用的体系架构为B/S模式的三层架构。同时,系统使用ASP.NET作为开发平台,并使用统一建模语言进行分析描述,后台使用的数据库为常用的SQL Server 2005数据库。B/S架构下的管理软件具有简单而方便的业务扩展,实现增加服务器功能只需相应地增加网页;功能维护也简单方便,仅需改变网页,就能实现所有用户使用时的同步更新;开发相对简单,共享性强。因此用 B/S 模式来设计项目培训管理系统比较合适,服务器端采用 SQL Server 数据库系统和 ASP.NET 组件来构成项目培训管理的应用服务系统;客户端采用浏览器来完成学院完成培训任务的全过程,同时管理员可进行远程系统维护和管理。

本文所设计的系统,功能模块包括学员信息管理、培训信息管理、员工信息理、考试信息管理,以及成绩和证书管理模块。系统运用方便、操作简单,效率高,可以大大提高培训机构员工的办公效率, 对各个开设培训科目的报名情况及发展状况进行统计分析,帮助经营决策者提供更方便的统计分析机制。

1 系统的功能需求分析

1.1 学员信息管理功能需求,主要包括添加学院信息,修改删除学员信息,添加科目报名信息,续费、改班和退班,查询和统计。

1.2 员工信息管理功能需求,主要包括添加员工信息,修改及删除员工信息,员工查询。

1.3 培训信息管理功能需求,主要包括查询和添加班级,修改及删除班级,班级学员导入,上课记录。

1.4 考试信息管理功能需求,主要包括考试基本信息处理,考试学员安排,乘车安排。

1.5 成绩和证书管理功能需求,为简化成绩的录入,系统需提供批量导入的成绩的功能。对于证书的发放,为避免丢失,系统需提供对证书领取细节的详细记录,包括领取人(或代领人)、获取时间和经办人等。

2 系统的概要设计

2.1 主要功能模块设计

根据培训信息管理系统的需求以及相关的系统业务流程,我们采用模块结构化设计,整个系统按层次进行模块划分,各个模块完成自己特定的功能。本系统一共分为五大模块,这五大模块分别是:学员信息管理模块、培训信息管理模块、员工信息管理模块、考试信息管理模块以及成绩与证书管理模块,所有模块之间都通过相同的数据库紧密相连,每个模块的功能都按照培训信息管理的日常业务进行设计,各模块功能概述如下。

(1)学员信息管理模块:学员基本信息管理,科目报名信息管理。

(2)培训信息管理模块:班级信息管理,包括分班和添加学员;上课记录管理。

(3)员工信息管理模块:提供经理对员工信息进行管理。

(4)考试信息管理模块:考试安排管理,它包括添加考试安排和安排对应学员考试;乘车管理。

(5)成绩与证书管理模块:对于一门考试的结果进行成绩导入以及对证书的领取进行记录。

2.2 数据库概念结构设计

对于数据库的概念设计,表现数据库的概念结构最常用的方法是使用E-R(Entity-Relationship)数据模型。E-R数据模型的实现方式为利用属性、实体以及两者之间的关联统一描述现实世界的信息结构。

2.3数据库逻辑结构设计

数据库的逻辑结构设计对应的工作为把概念结构设计时提出的E-R实体联系图进行转化,从而与数据库管理系统产品所支持的数据模型达到一致。并在此E-R实体联系的基础上,构建数据库中对应的数据表,同时还包括数据表之间的所有关联信息。

培训信息管理系统数据库中的主要数据表如下。办公室表(Office)和校区表(Campus)略。

学员信息管理模块用于处理学员基本信息和科目报名信息,涉及到的信息表如表4所示,科目报名信息表(Subject)和学员状态信息表(StudentSatue)略。

培训信息管理模块用于管理班级信息,并记录到课情况,涉及到的信息表主要如表5所示,班级成员表(ClassMember)、上课记录表(ClassRecord)和到课点名表(OrderName)略。

员工信息管理模块用于处理员工的基本信息,以及分配操作权限给不同员工,涉及到的信息表如表6所示,权限信息(Position)表略。

表 6员工基本信息表(Manager)

考试信息管理模块用于记录考试的基本信息,以及考试结果和相关的证书领取信息,涉及到的信息表如表7所示,考试内容表(ExamDetails)、考试名单表(ExamPerson)、乘车信息表(Traffic)、证书信息表(Certificate)略。

表 7考试安排表(Exam)

3 界面设计

3.1 登陆界面

3.2 其它界面略。

4 结束语

本文在对培训机构需要执行的数据操作进行详细分析的基础上,结合B/S等技术,分析设计了适合培训机构管理日常工作信息的管理系统。该系统的完成给培训机构的员工和学员带来了实用性和方便性。)解决了学员信息录入时的冗余性,减少了数据出错的可能性;为员工提供了方便、快捷的数据查询功能,同时,便于对各个培训科目进行统计分析;系统合理地区分学员的不同状态,也为学员提供掌握自己培训所处阶段提供方便;通过这个系统,员工基本上可以对整个培训流程中的所有信息进行合理处理,大大提高工作操作效率。

参考文献:

[1]眭碧霞,李春华,张玮.ASP.NET 程序设计与开发[M].西安:西安电子科技大学出版社,2008.

[2]万科,覃剑.Visual C#.NET 程序设计基础与上机指导[M].北京:清华大学出版社,2007.

[3]刘桂林,谢尧,李大友.SQL Sever 数据库应用技术[M].北京:中国计划出版社,2007.

[4]刘玉萍,刘海玲,基于Web 的教学计划管理系统设计与实现[J],信息技术,2006(11)

[5]王艳娥,周立,基于Web的职工培训管理系统的设计与实现[J],中国管理信息,2012(06)

第11篇

【关键词】互联网医疗;互联网+;Extjs MVVM;Thinkphp MVC

【Abstract】With the rapid development of society, people’s material life level requirement increased sharply, health consciousness and disease awareness is also growing, in such a situation, the traditional medical coping with such a situation is difficulting, Internet medical arises at the historic moment.This thesis is under the background of “Internet +”, providing a way of the combination of the Internet and health care. Website system front-end based on Extjs MVVM framework and back-end based on the Thinkphp MVC framework.The article mainly introduces the following parts: frame, development process, the function of the overall design,The realization of the function of the front-end and back-end(including the design of the database).

【Key words】The health management system; Extjs MVVM; Thinkphp MVC; Medical

1 框架结构简介

1.1 ThinkPHP MVC[1]

MVC英文即Model- View- Controller,它是把一个应用的输入、处理、输出流程按照Model(模型层), View(视图层), Controller(控制层)三层进行强制分离。

View层代表与用户交互的界面,对于Web应用来说,也可以大概概括为HTML界面,但MVC设计模式对于视图的处理仅限于View上数据的采集和处理,相关的业务流程的处理不是在这里实现的。

Model层就是业务流程/状态的处理以及业务规则的制定,是整个MVC的核心。模型层接受View层请求的数据,返回处理结果。数据的处理、逻辑和功能的计算都是在这里完成的。

Controller层用来接受用户的操作并调用模型和视图完成用户的需求。可以理解为从用户接收请求,将模型与视图匹配在一起,共同完成用户的请求。划分控制层的作用也很明显,控制器就是一个分发器,选择什么样的模型,选择什么样的视图,可以完成什么样的用户请求。控制层并不做任何的数据处理,它接受用户的输入并调用模型和视图去完成用户的需求。

ThinkPHP是一个性能卓越并且功能丰富的轻量级PHP开发框架,框架本身就是MVC结构的体现。它可以支持WIN/Unix/Linux服务器环境,支持Mysql, PgSQL, Sqlite以及PDO等多种数据库[2-3],ThinkPHP框架本身没有什么特别模块要求,具体的应用系统运行环境要求视开发所涉及的模块。其工作流程如图1:

本网站后端[4]的开发采用ThinkPHP框架,一方面处理用户登录及注册的逻辑判断、套餐及体检机构的筛选查询等一系列前端的业务逻辑及数据处理,另一方面操作Oracle数据库,通过对界面的可视化操作,完成对数据库进行增删改查等的一系列操作等。

1.2 ExtJS MVVM

MVVM[5-6]包括Model、View和ViewModel三部分,其结构如下图2所示。该框架的工作原理是:模型层的业务逻辑在服务器上执行,视图层与视图模型层在用户端执行,视图模型层监视视图层的状态,从模型层根据用户需要获取数据;视图模型层解决视图层与模型层之间的数据传递与交换,保证View与Model层的数据同步。

本网站系统用ExtJs框架做前端,降低了代码的冗余度,提高了复用性。

2 系统概要设计

2.1 网站开发流程

首先做的是对本健康医疗网[7-8]的需求进行分析,包括市场前景、用户分析等;然后需要对医疗平台进行规划,包括内容策划(就是网站要展示哪些内容,分主次)、界面策划(网站主体的风格规划)以及网站功能;再做项目开发,包括界面设计、程序设计、系统的整合;最后一步就是测试验收,包括三部分:项目人员测试、非项目人员测试以及公开的测试。

2.2 系统的整体功能设计

本网站主要包括六块功能,包括体检套餐、体检中心、检后服务、单位体检、健康管理、健康宣传教育。其功能结构如图3所示:

3 系统详细设计与实现

3.1 前台功能实现

本系统的前端界面主要分为六个部分:体检套餐、体检中心、检后服务、单位体检、健康管理、健康教育。系统流程如图4所示:

健康教育模块包括动态资讯、体检知识、健康大数据、中医资讯等,主要目的是普及一些健康知识;健康优选模块包括营养保健、健康医疗、穿戴设备等,主要功能是推广一些对健康有益的产品;体检套餐模块主要是推荐一些特色的体检套餐;体检中心模块主要是介绍体检机构的信息以及路线等;单位体检包括体检软件系统、电子报告查询等,主要是面向团检的模块;检后服务提供如体检报告查询、报告解读、疾病风险评估等一些特色服务。

3.2 后台功能的实现

后台首先配置数据库的连接信息等。本数据库包含众多的数据表,比如用户表,用来存储系统的用户信息;新闻表,用于前端的健康教育模块,文章内容、标题、图片等信息都是在这里管理的;套餐表,套餐的价格、名字、简介等皆是在此存储,进而控制在前端体检套餐模块的显示信息。

本系统采用Oracle数据库,采用的数据库设计软件是PowerDesigner。数据库部分设计图如图5所示:

操作数据库是通过php语言实现的,这里采用的是Thinkphp框架。

4 结束语

如今是互联网完全普及的时代,用互联网的思维考虑医疗的发展,是发展的趋势。本文为网络和医疗的融合提供了一种参考方式[9]。

【参考文献】

[1]张颖,等,译.Reiersol D,Shiflett C,Baker M.PHP实战[M].北京:人民邮电出版社,2010.

[2]陈湘扬,陈国益.PHP5+MySQL[M].北京:电子工业出版社,2007.

[3]陆勤.数据库原理与技术[M].北京:中国水利水电出版社,2007.

[4]赵增敏.PHP动态网页开发[M].北京:电子工业出版社,2009.

[5]刘立.MVVM模式的分析与应用[J].微型电脑应用,2012,28(12):57-60.

[6]陈明,李猛坤,张强.一种基于扩展MVVM模式的SaaS面向服务计算模型[J].微电子学与计算机,2010,27(8):27-30.

[7]杨德文.基于HIS的医院体检信息系统的设计与开发[J].医学信息,2006,19(11):14-19.

第12篇

一、总体规划与设计

信息时代的到来,为高校大学生国际交流工作带来了契机,我国高校必须把握好这一时代机遇,充分借助于网络信息技术,搭建国际交流网络传播平台,结合有效的引导,推动高校大学生国际交流工作的顺利发展。高校大学生国际交流网络,是以高校为基本主体,他国高校、研究院所、国际组织等通过国际交流所构成的网络传播平台。对于该网络传播平台而言,主要是借助于互联网这一传播媒介,同时,整合各种新媒体与传统媒体资源,使高校新闻与国际交流信息能够快速、全面传播的平台。在如今信息化时代,网络传播平台,已成为高校开展品牌竞争与国际交流的重要平台。一方面,构建网络传播平台为高校加快品牌文化传播提供了便捷的途经。高校能够借助于网络传播平台所拥有的资源库及开放性等特点,加强高校国际信息交流、、决策的管理水平。另一方面,现代化高校网络传播平台的构建,将进一步推动高校大学生国际交流建设。网络传播平台将高校校园及学科特色与优势,采用网络视觉化形式展示出来,极大地推动了高校的品牌宣传效果,对于深化国际交流与合作提供了平台。高校大学生国际交流网络传播平台必须本着“立足高校,服务国际交流”为基本宗旨,逐步形成跨地域、跨文化、重交流与合作的全方位、综合性信息网络传播载体,通过逐步完善网络信息内容,逐步扩大高校在国内外教育领域的影响力。如今,高校大学生国际交流网络传播平台已成为加快推进国际交流与合作的重要实现平台,可结合如下规划目标逐一实现。

(一)以高校主流门户网站为主要窗口,完善大学生国际交流信息服务我国各大高校几乎都建立了门户网站,应充分发挥其信息展示窗口的作用,及时国际交流信息资讯,同时,设立专门的国际交流频道,使其成为高校宣传与报道的阵地。当前,必须加快整合高校媒体资源,以网站为窗口,建设综合信息网络平台。各大高校通过网站规划、设计、建设及不断完善,网络传播平台无论在整体视觉风格、布局、内容展示方面,还是页面导航、容量、结构、内容呈现等方面均有显著提高。此外,还应注重设置友情链接、服务中心、底部信息等内容,在大学生互动方面,设立搜索、会员注册与登录、在线问答、错误提示等内容,以便极大拓展我国高校大学生国际交流渠道。但多数高校仍未构建起专门面向高校大学生国际交流与合作的网络传播平台,因此,有必要结合我国高校大学生国际交流具体情况构建网络传播平台,进一步深化高校国际交流与合作。

(二)同重点高校门户网站合作,共建国际交流网络传播平台在门户网站平台的基础上,进一步深化同其他重点高校、大型媒体、全国性综合门户网站之间的合作,并在一级网站开设大学生国际交流板块,重点门户网站与板块信息,都是构建网络传播平台的关键资源,必须同其展开信息资源、大学生资源、平台构建等全面的国际交流与合作。

(三)整合国际资源,构建大学生国际交流综合信息库通过高校门户网站及其他重点高校网站及全国性综合网站的合作共建,逐步形成高校国际交流相关信息流,同时,加强相关信息采集、加工与存储,将这些信息全面整合于综合信息库中,并将其加以分类和汇编,与此同时,设立多国语言页面,以便不同国家的大学生能够采用信息,继而扩大高校网络传播平台的国际影响力,使其逐步发展成为该领域国际性网络传播平台。

二、网站交互界面的设计

作为大学生国际交流网络平台,其所面向的用户群体为国外高校学生与教师,他们需要对高校概况、校园文化情况、学术研究状况等进行全面了解,因此,多数会借助于该平台获取有关资讯,在此过程中所开展的信息传递主要是通过交互界面实现的,为此,必须确保交互界面所覆盖信息的全面性与美观性,通过设计独特的网络视觉品牌文化,在国外高校师生中树立高校良好的品牌形象。在设计大学生国际交流网络传播平台时,必须考虑到网站所面向用户群体的阅读习惯进行设计。通常而言,网页设计所涉及的元素有很多,但因该平台所面向对象的特殊性,因此,必须注意采用英文字体与风格。全英网站同中文网站不同,英文字体在网页设计过程中的视觉表现力也同汉字网页不同。同时,还必须注重对高校信息识别因素加以传达。

对于交互界面设计中,重点关注面向群体如何感知和理解相关信息,由于其认知水平及意图不同,对于通用设计而言必须提供一般客户所需资讯,采用清晰、简明的表达方式,使各页面内容对应。一方面,结合用户需求对高校学科分类、学术研究情况等内容顺次表现,另一方面,注重页面布局易于阅读、美观实用,考虑用户国家多元化文化背景、认知能力及信息需求等情况,使用户轻松找到所需阅读内容。此外,注重文字间及段落间间距的一致性。还应设立专业化的国际交流论坛、视频、留学生展示、交流信息等板块,使用户可以便捷地获取所需讯息,充分发挥网络平台及时、便捷的特点,打破大学生国际交流的地域与空间限制。通过互联网开展国际交流活动,增强同该领域专家学者的信息沟通,进一步拓展大学生眼界。对于国际交流信息专栏,应对有关信息依据学科、学院展开分类,使国外师生能够依据类别找到所需信息。网站还需要对国际交流视频进行上传,编辑相应的文字,实现资源的跨地域共享,并设置相应的视频交流专区,国外师生在观看视频过程中,可就某些问题向有关人员咨询和留言。高校教务人员或师生看到相关问题,可进行回答,参与互动讨论。在线提问问题及讨论将自动被保存,有助于为其他大学生提供帮助。设置论文展示板块,实现学术研究成果的共享,定期上传高校学术论文集及师生最新学术论文,及时掌握高校科研动态,便于同海外高校互动讨论学术问题,深化科研合作。设立校园文化专区,使海外师生能够了解高校丰富的校园文化活动。

三、媒体平台的构建

(一)搭建QQ群网络平台QQ群网络成功打破了地域与空间限制,使得大学生国际交流更便捷、高效。高校可以在留学生及交换学生之间共建QQ群,借助于QQ群网络实现国际交流。广大学生可借助于QQ网络资源展开交流,营造浓厚的交流氛围,促进学生高效地开展学习与科研工作,交叉学科学生开展交流,有助于打破思维与知识的局限性,弥补单一学科的割裂性与封闭性,推动高校科研工作进展,实现国际交流纵横交错的目的。高校各学院负责人可在网站上对QQ群号进行,以便海外学生、专家学者共同参与交流,提高交流的层次,扩大国际交流的规模。

(二)建立国际交流博客群博客集文字、音视频、评论、网站链接等于一体的网络日志,可以加强读者的互动,吸引兴趣及志向相同的网友共建团体,成为极具影响力的自由媒体平台。博客可以记录个人思想,也具有公共性,对所提供内容展开交流,为他人提供帮助,具有资源共享与互动性。海外师生、留学生、交换学生可利用这一平台同高校师生展开交流,参与科研活动、学术会议,获取有益的学术资源与校内咨询信息,也可以提出质疑,展开交流与讨论。这样极大地拓展了交往圈,让更多学生参与其中,形成国际交流圈,实现高校大学生国际交流朝着纵深方向发展。

(三)构建国际交流微博客随着移动终端技术的广泛应用,越来越多的大学生开始使用微博。微博也是一个给予信息全面共享、迅速获取与高效传播的平台,该平台是建立在用户关系的基础上实现信息的传播、获取及共享的。利用微博文字及最新信息,通常只有140字左右,因而称之为“微博客”。通过微博平台能够及时地最新的高校国际大学生交流信息及动态,大学生还能够相互之间共享该条信息,或对其进行互动评论。较博客而言,微博在信息传播方面更及时、更快捷,也更原创,因而广受大学生群体的青睐,已经推出迅速发展成为如今信息时代媒体平台中的新宠。正是由于微博所具有的特点,许多高校纷纷开通了自己的微博门户,但是并未全面面向大学生国际交流有关工作。因此,高校必须加快构建国际交流微博客,有关导师、教务工作者也可开通自己的微博,同国际高校教师、专家、学者与大学生共建关系网,以便开展更为深层次的交流。有相当多的留学生及交换生反应,在国际交流过程中会遇到各种障碍,有时候发一个邮件咨询会需要较长时间方可得到回复,也有一部分教师、教务工作者表示,对于因各类原因未能及时解决大学生疑惑及问题的情况表示很遗憾。如何确保大学生国际交流更为畅通、便捷,微博就是一个良好的渠道。如今大学生人手一部手机,只要利用手机就可以开展国际交流,利用微博实现互动、沟通,及时消除大学生的问题与疑惑。此外,对于因经费、时间等原因所导致的国际专业性的交流论坛,大学生参与的机率较小,而教师有时也无法参加。借助于微博平台,就可以有效解决该问题,利用通过参加大型国际交流论坛的教师更新自己的微博,将论坛或会议内容及信息实时传递,其他的教师及大学生就可以通过浏览、微博分享等方式,获取并传播该信息,使大家能够第一时间就获得所需信息与内容。当前,有关一些国际性的学术交流信息及会议内容,也可借助于微博平台加以共享。

(四)创建国际交流论坛就各大高校而言,必须依据高校国际交流现状,同时,结合高校各学院及学科的发展、学科学术研究进展等情况,创建极具品牌特色的高校国际交流论坛。论坛中应全方位地展现各学院学科特色,同时,有针对性地突出学校的学科优势,赋予高校国际交流论坛深厚的学术文化积淀,用以更好地推广和宣传高校。与此同时,还应注重组织和开展各种形式多样、种类丰富的校园文化及学术活动,通过该论坛向他国大学生展示高校的校园文化风采,引发其共鸣,从而萌生与该校展开交流与合作的期望。除此以外,高校还应在国际交流论坛上不断高校各学院最具特色的科研内容与学术进展,同时,定期、不定期地力邀国际名校专家、学者前来开展讲座,并将讲座内容于论坛,大学生可以通过论坛跟帖,发表自己的学习感受、存在的疑惑、心得体会等,并同其他大学生就这些问题开展深层次的讨论,有助于进一步拓宽大学生的视野、推动高校学科建设、满足广大师生学习需求、并促进高校大学生的国际交流与合作。