引论:我们为您整理了13篇网页界面设计论文范文,供您借鉴以丰富您的创作。它们是您写作时的宝贵资源,期望它们能够激发您的创作灵感,让您的文章更具深度。
篇1
格式塔一词来源于德文“Gestalt”的音译,本意指的是形式、形状、方式、实质。格式塔心理学是一种与艺术有缘的心理学理论,其主要目标是探讨视觉感知及其与学习、思维的关系,它所研究的出发点就是“形”,“形”是经由知觉活动组织成的经验中的整体,与视知觉活动密不可分。而网页界面设计是视觉传达设计向网络媒体的延伸,主要是通过浏览者的视觉感知来接受网站信息。因此,研究格式塔理论在网页界面设计中的运用,无疑对网页界面的设计具有很大的指导作用。
格式塔理论在网页界面设计中的应用
网页设计是将特定的视觉信息要素,根据主题表达的需求在特定的页面上进行的一种编辑和安排,其基础是视觉生理学和视觉心理学。格式塔心理学派通过对视觉感知的生理研究,提出了一系列视感知规律,其中包含了“图底”这个核心概念,和“简明原则”“接近原则”“相似原则”“闭合原则”等视感知特性,将这些规律引入页面设计,有助于我们优化视觉时代“形象过剩”状态下盲目的网页设计,提高信息传达的速度与准确度。
1.图与底
在人的知觉系统中最基本的一种知觉能力是在图形与背景间作出区分。“图”是居于前部的区域,“底”被看成是用来衬托图的背景。相对而言,图比底,轮廓较为完整、封闭,形状较为规则,面积比较小,色彩比较鲜艳;此外,更重要的是,能组织成为一定意义的区域倾向于被感觉成图。
由于图与底之间存在的这种相对性质,在网页设计中,应当明确区分图与底,主体与背景。另外,主体自身结构要清晰明了,背景不能过于复杂,这样才有利于浏览者辨别需要了解的信息。在背景的色彩搭配上应尽量选用同一色系的颜色,尽量避免同时使用色相环中相对的颜色,大面积同一颜色宜采用低对比度,避免用强烈刺激的颜色引起浏览者的视觉疲劳与厌烦情绪。格式塔理论的图-底规则不仅说明了主体从背景中分离出来的条件,而且指出了背景在一个格式塔中的重要作用。因此在网页设计中我们同样不能忽视背景的作用,图形是依赖于背景而存在的,要使主体感到存在,必然要有底将它衬托出来。因此无论在文字、色彩、图像,还是动画和视频方面都要坚持图底原则。
2.简明原则
格式塔心理学家认为,人们的知觉有一种“简化”倾向,所谓简化并非仅指一般意义上的“简单”,即物体中包含的成分少或成分之间的关系简单,而是一种将任何刺激以尽可能简单的机构组织起来的倾向。我们的眼睛只能接受少数几个不相关联的整体单位,如果一个格式塔中包括太多不相关的单位,眼睛就会试图将其简化,把各个单位加以组合,使之成为一个知觉上易于处理的整体,否则,整体形象将无法被正确感知,这种形象势必会被人们忽视,以至拒绝接受。
我们可以将这一观点延伸到网页界面设计中。首先,在网页界面结构的设计上,应避免使用过于复杂的网格结构,结构的设置应尽量简单明了,符合人的视觉流程,也符合人们对规则形的喜好,利于浏览者以最短的时间找到最需要的信息。
其次,在图像的选择上,应避免使用过于繁复杂乱的、容易分散浏览者注意力的图像,这样会增加浏览者找寻信息的难度。
再次,在进行文字编辑时,应该考虑编辑的最终效果。文字应给人以清晰的视觉印象,避免页面繁杂凌乱,减少不必要的装饰变化,使人易认、易懂、易读,不能为造型而编辑,忘记了文字本身是传达内容和表达信息的主体。在字体的选择上,虽然可供选择的字体很多,但同一页面上的字体种类最多只能有三四种,这样才不会显得花哨。字体的选择应依据段落大小和内容层次,由重到轻、由粗到细。字号的选择也应该依据内容层次由大到小,但到了节以下的层面,可以选用同一字号但用不同的字体加以区分。在文本密度方面,文本应该以短小的组块形式出现,并且应该经过编辑,以简化内容。3.接近原则和相似原则
接近原则和相似原则的本质上都是简化和整体化知觉对象的组织原则,与前面的简明原则类似,人们在倾向于简化认识对象的同时,也倾向于将近似、接近的元素组合起来作为一个整体加以认知。也就是说如果不同的文字或图形组成部分位置靠近,浏览者就比较容易看出它们是一起的。根据这一原理,对于页面上的任何元素,如果在功能或内容上是相同或相近的,就应在一定程度上保持相对较小的空间距离,做到“物以类聚”。比如,页面中用以解释图形或用以表明某一部分图形的文字就应当紧挨其所指的图形或部分图形。
相似的物体也很容易被认为是从属于一个系统,具有相似的功能。因而,需要通过将浏览者注意力集中于视觉范围内的关键概念,帮助他们获得信息。在网页界面设计中,可以通过强调、动画、对比色的使用或其他手段达到这一目的。假如一个图形中的组成部分都属于同一风格,这个图形就被视为一个整体。为了使浏览者重点关注图形中的特定部分,对这一部分可采用不同的颜色、动画、闪烁或其他区分方式。但是,如果一幅画面中区别过多,也会使浏览者难以注意需要获得的信息。因此,这些方法应该用于强调关键信息或图形的关键部分,而不宜用于大片信息。
4.闭合原则与网页界面设计
闭合原则是指一种完成某种完形的行动。这一规则表明,每一种视觉样式都可以被看成是一种陈述,对于模棱两可的视觉样式,人们会根据以往的经验按照不同的样式加以组织,这时不同的人会看到不同的东西。因此,在网页界面设计时,应当避免出现不完整的图形,以免使浏览者花费过多的时间去琢磨图形的含义,而不是从网页上获取信息。
闭合规则还表明,视觉形象被知觉的形式是首先作为一个统一的整体被知觉,然后再以部分的形式被知觉。因此,在进行网页界面设计时,要强调整体风格的统一,内容与形式的统一。
结语
将格式塔心理学引入网页界面设计,目的是希望网页设计向理性化的方向发展。随着网络的不断发展,浏览者对页面的要求也越来越高,但现在的页面设计大多还是从直觉出发,离科学的页面设计还有相当大的距离,因此要想达到科学的页面设计,就要在设计时遵照人类的认知规律,并且将这些规律正确地应用到设计实践中。而如何将格式塔理论与设计结合起来,仍是我们需要投入大量精力去研究与探讨的问题。
参考文献:
[1]曹方著.视觉传达设计原理,江苏美术出版社
篇2
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.
篇3
良好的用户体验是人性化有些界面设计的基础。用户体验发生在生活的每个瞬间,比如当你用水杯喝水时,会随手将杯盖放在任何你随手可以放置的地方,当你在不注意的情况下会将杯盖随手放在任何地方,随后因为没有印象而忘记杯盖放在了哪里。现在很多的水杯都将杯盖设计成连接在杯子上的,这样就不容易忘记放在哪里了。这样的例子不计其数。用户体验在开发数字产品、系统及服务的不同设计与可用性学科,并通过界面的交互设计来影响人们的体验。数字产品的用户体验设计包括三方面,即形式,行为和内容。操作是游戏体验的必要行为,交互设计关注行为设计,也关注行为如何和形式与内容产生联系。人性化的游戏界面设计就是将交互设计理念完美的融入界面设计中,将形式和内容通过交互设计达到一种自然的状态,是玩家才做起来更加顺畅而方便,提高游戏的娱乐性。人性化游戏界面设计不仅要考虑到玩家大众的心理,使用习惯,使用环境等因素,还要更好的研究大众的文化,审美等因素对游戏的影响。只有达到平衡才能使玩家和游戏之间顺畅而自然地进行信息交流
游戏界面交互设计同一般的WEB设计有所区别。游戏的信息功能复杂,板块较多,加上玩法和游戏特定的规范,在创新设计上需要设计师全方位的考虑周全,有舍有取。
二、人性化游戏界面设计原则
游戏界面就像是一个自助式的产品,他和很多网络产品一样,没有像真正产品一样的说明书,当新手引导结束后,用户只能凭自己的互联网产品使用经验操作那些命令。一个不好的界面,会使游戏玩家因为一个操作的卡住最终放弃游戏,这将造成巨大的损失。游戏界面承担着玩家与游戏之间沟通的媒介作用,直接和界面设计相关的除了美术部分就是交互设计。交互设计是关于行为,操作流程的,和外观相比,更难于观察和理解。作为游戏界面的交互,保证玩家使用界面顺利成功的进行游戏,界面设计需要以为人本,并且必须遵循一些游戏界面特定的设计原则。
1.简洁易用
Less is more的设计思想不管设计任何事物都有很好的指导意义。游戏的界面需要设计师尽量做到精简,以免太多的按钮和菜单出现在画面上,并且过于华丽的修饰也会干扰到玩家的注意力,很可能分散玩家的注意力,是玩家不能集中精力于游戏世界。操作界面应该尽量做到简单明确,并且尽量少占用屏幕空间。而有的游戏因为信息数据繁多,做到精简的难度很大。但是也有设计师挑战了这种矛盾。例如现在很多网页游戏都将游戏构成单元和主要场景结合起来。例如图一,将主要场景中的建筑和组成这个游戏的各个玩法单元结合起来。这样不仅仅减少了界面上菜单按钮的数量,也更好的将玩家吸引到游戏情境当中。不仅是玩家操作更顺畅,减少记忆成本,增加了操作上的游戏乐趣。
图二是《大将军》网页游戏中的城外界面的国家查找界面。设计者没有用过多的装饰,简洁的操作界面一目了然,并且虽然是游戏,但是为了方便玩家寻找国家承包,增加了搜索功能,将互联网其他产品的功能活用到游戏当中也是一个很巧妙的办法。
2.遵循游戏习惯
上面讲到了将互联网其他的产品的一部分需求功能增加到游戏当中,这样的做法也需要度。因为游戏作为一个已经给玩家固定印象的产品,有他的特征。网页游戏发展了许多年,玩家已经培养成了固定的使用习惯,因此不能随意的改变这些习惯。例如图三所示。
图三为网页游戏《一代宗师》的英雄界面和主城界面。主城界面可以看出和其他的大部分网页游戏没有太多的区别。左上角为英雄头像,名称,等级和一些属性。下方一条则为工具栏。左右两边为信息栏和任务栏。玩家已经经历了多个类似设计的网页游戏,已经培养起了固定的使用习惯,因此这样的设计不会使玩家在寻找操作方式上花费太多时间。英雄界面则改动很大。图四为一款网页游戏的交互设计原型图。图四的设计是大多数网页游戏英雄面板的设计方式。从左至右的方式选择,符合用户使用习惯。而图三则将英雄的选择方式放到了上方,将玩家关注的英雄装备情况的区域缩小,放到了界面的下方,这样做模糊了主次关系,将本该强化注意的装备情况削弱了。不但视觉上不舒服,而且在操作上也加大了玩家的学习成本,很容易造成游戏用户的流失。
3.可扩充原则
网页游戏和一般的网络产品不同的是,它会不断地更新新的版本,增加新的功能,这样才能适应不同玩家的不同需求,适应市场竞争。这样也要求交互设计师再设计操作界面的时候,要给以后的游戏功能开发流出一定的空间,所谓的动态扩展空间。听起来很困难,但是在工作中需要和游戏策划者多多沟通,及时得到最新信息。
篇4
网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一。?网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面,其中色彩处理有着举足轻重的作用。色彩既是网页作品的表述语言,又是视觉传达的手。所以首先要了解一个问题那就是:
1 制作网页包括具体都包括哪几部分呢?
1.1图形、图像处理制作网页界面艺术设计,提到界面还有艺术,那在网页上插入一些精美、适当的图片是必要的,否则,不会有人去浏览你的页面,因此,在设计网页之前,就应搜集或制作一些好看、适用的图片。提到图形、图像处理,大家都会想到的软件是Photoshop这个软件,对,这个软件是进行图形、图像处理的软件,但是,它不是专门的处理网络图像的软件,Photoshop这个软件会用到去进行一些平面的图形图像,我们网络的图形、图像处理用的是Fireworks软件,它可以制作出传输较快的gif格式的图片,占的空间也比较小,一般大小也就是KB,而Photoshop制作出来的是jpg格式的位图,并且是有损压缩,象素大了图像就清晰,但这样的话上传到网上会影响浏览速度,象素小了就会出现模糊或者马赛克小方格,所以我们采用的是Fireworks软件进行处理图形、图像。
1.2动画制作网页界面艺术设计,肯定也少不了动画的加入,并且还要有艺术气息在里面,这就要求我们的设计者要有艺术修养和对颜色的综合把握了,在没有FLASH软件之前,用的是Go live这个软件,再后来就用传统的做法,在html中嵌入Java程序编写的动画,但这要求设计者要对Java语言熟悉。随着软件的发展,如今有了许多制作动画的软件,二维的、三维的等等,如现在我们用的FLASH软件,用它制作的动画,小巧迷人,只需作为一个.swf格式文件导出,再导入到网页编辑器里就可以了。
1.3文本的编写一般是采用在网页中用html语言中的标签编写,也可以用网页编辑工具的“所见即所得”功能直接写入文字,如:Dream weaver软件或者Front page软件等都可以进行文本的编写。还有一点要注意的就是,显示文本的时候,设计者的机器上装了很多漂亮的字体,设计的时候采用了,但是等上传到网上以后,别人在浏览的时候,如果别人机器上没有安装字体,那就显示不出来我们采用的漂亮样式字体,因此,在考虑网页界面艺术设计的基础上,我们是把文字提前在Photoshop或Fireworks可以将字体先选择自己喜欢的样式,然后转换栅格化图片再用切片切成小块,分别进行优化。输出的格式可以为gif或jpeg,再导入到Dream weaver进行具体编辑,做链接可以用图片特有的属性进行热区链接,这样就完成我们想要的字体样式效果了,就不会出现字体样式显示不出来的情况啦。
1.4框架的应用框架是网页的常用形式,它可以使网页更为清晰,可以把不同的页面超链接到同一框架中,使的页面更加紧凑。一般框架用在小说浏览页面,或者介绍图书章节的部分,或者教学网页用到的的框架比较多。
1.5表格的应用表格是网页中用处最广泛的,可以布局,定位等等,它是网页中最活跃的元素。它的应用可以使用网页更加灵活。表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候,我们将表格的边框设为0,以此来定位页面中的元素,或者籍此确定页面中各元素的相对位置。我们知道:浏览器在读取网页html源代码时,是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格,必须等大表格读完,才能将子表格一起显示出来。我们在访问一些站点时,等待多时无结果,按“停止”按钮却一下显示出页面就是这个原因。因此,我们在设计页面表格的时候,应该尽量避免将所有元素嵌套在一个表格里,而且表格嵌套层次尽量要少。在使用Dream weaver制作网页时,会自动在每一个td内添加一个空字符。如果单元格内没有填充其它元素,这个空字符会保留,在指定td的宽度或高度后,可以在源代码内将其删去。
2 色彩的运用
网页界面艺术设计离不开色彩的应用,当打开一个网站的时候,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的布局,而是网站的色彩,尤其是在体现界面的时候,色彩对人的视觉效果非常明显,一个网站设计的成功与否,在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。
网页界面设计是一种审美活动,成功的设计作品一般都很艺术化。但艺术只是设计的手段,而并非设计的任务。设计的任务是要实现设计者的意图,而并非创造美。网页界面页面设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为以下三类:第一类是资讯类站点,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息,而且访问量较大。因此需注意网页界面设计页面的分割、结构的合理、页面的优化、界面的亲和等问题。第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象。第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的则有几页,需要实现的功能也较为简单,页面设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。
3 网页界面的优化
在页面设计中,网页界面的优化是较为重要的一个环节。它的成功与否会影响页面的浏览速度和页面的适应性,影响观者对网站的印象。
在资讯类网站中,文字是页面中最大的构成元素,因此字体的优化显得尤为重要。使用css样式表指定文字的样式是必要的,通常我们将字体指定为宋体,大小指定为12px,颜色要视背景色而定,原则上以能看清且与整个页面搭配和谐为准。在白色的背景上,我们一般使用黑色,这样不易产生视觉疲劳,能保证浏览者较长时间地浏览网页。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,我门可以根据需要选择一些特别字体。例如,为了体现专业可以使用粗仿宋体,体现设计精美可以用广告体,体现亲切随意可以用手写体等等。当然这些都是个人看法,你可以根据实际情况,选择更贴切的字体。目前常见的中文字体有二三十种,常见的英文字体有近百种,网络上还有许多专用艺术字体下载,要寻找一款满意的字体并不算困难。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的PC里没有安装你的特别字体,那么你的辛苦设计制作便将付之东流。
网页的适应性是很重要的,在不同的系统上,不同的分辨率下,不同的浏览器上,我们将会看到不同的结果,因此设计时要统筹考虑。一般我们在800×600下制作网页,最佳浏览效果也是在800×600分辨率下,在其它情况下只要保证基本一致,不出现较大问题即可。现在我们设计网页,一般要考虑800×600和1024×768两种分辨率,因此我们的表格一般为居中的770左右的表格,表格的宽度最宽不要超过778。事实上,"做网页"不是单纯意义上的"制作网页",如果想让自己制作的网页美观大方,就必须要考虑"设计网页"的过程,一个好的作品,不通过仔细的"设计"就成形是绝对不可能的。
我国的网页界面页面设计水平总体上不及韩国,创新的页面极少,基本都是一种风格,这也是因以前我国的宽带水平跟不上有原因,一个漂亮的页面,必然体积会比较庞大,网络比较慢的话打开的速度也就可想而之,打开速度慢正是网页的一个最大杀手,所以我国以前的页面基本都是以框架式居多。随着我国宽带的普及,我们也迅速括起了一阵韩风,很多大胆创新的页面出现,这是一个好现象,但是一味的模仿韩国也不行,我们也要有自己的特色,不能一味的拿来主义。
网页界面页面设计的一个基本特色便是吸引浏览者,一个美观漂亮的页面不管内容多么空洞,也会有人欣赏,反之一个内容充实但页面简陋却往往不会有人去浏览,从这便可看出网页界面艺术设计是多么的重要。
篇5
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。事实上,"做网页"不是单纯意义上的"制作网页",假如想让自己制作的网页美观大方,就必须要考虑"设计网页"的过程,一个好的作品,不通过仔细的"设计"就成形是绝对不可能的。
篇6
[2]林纪河,祁玉芹.FLASHCS4网络动画制作简明教程[M].北京:电子工业出版社,2009
[3]童罕,吴庆波,等.一种动态网页加速技术中的机制探讨[J].微计算机信息,2009(27)
[4]崔俊杰.动态网页技术浅析[J].长沙民政职业技术学院学报,2006,13(13)
[5]李志勇,徐长通.基于ASP的WEB数据库智能查询[J].河南师范大学学报,2010,38(1)
参考文献:
[1]雷芸芸.网页设计中Flash动画的视觉应用[J].新媒体研究,2016(3).
[2]曹芳,李培培.《FLASH动画制作》课程教学改革的探索与研究[J].科技视界,2016(2).
[3]周秀芳.Flash动画制作课程建设方案探究——以高职计算机应用专业为例[J].当代职业教育,2015(12).
[4]李怡宏,杨薇.从“案例模仿”到“设计创作”的《Flash动画设计》课程教学[J].信息与电脑(理论版),2015(24).
[5]王德敏.微课程的开发应用[J].中国校外教育,2013,(6).
[6]陈舒心.论“微课”在中职计算机专业课程中应用的可行性[J].广东教育(职教版),2015,(3).
[7]胡铁生.微课的内涵理解与教学设计方法[J].广东教育:综合版,2014,(4).
参考文献:
[1]李建华.网页设计的意义与现状[J].太原城市职业技术学院学报,2014(08).
[2]于红波.浅议Flash技术在网站建设中的应用[J].山东纺织经济,2011(12).
[3]高华,黄剑锋.Flash技术在网站设计中的应用与研究[J].才智,2012(28).
[4]刘强.FlashCS3网站建设实例详解[M].北京:电子工业出版社,2008.
参考文献
[1]范朋.基于Qt的嵌入式Linux系统GUI的研究与实现[D].北京:北京邮电大学,2011.
[2]新视角文化行.FlashCS6动画制作实战从入门到精通[M].北京:人民邮电出版社,2013.
[3]佚名.MFC与Flash联合界面开发技术[EB/OL].[2012?06?07].http://kuantianxia.blog.51cto.com/1041305/891521.
篇7
在交互设计中什么是扁平化设计
首先说说什么是扁平化设计。“扁平化设计”一词所指的是抛弃多年来流行的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。扁平化设计正是通过这种放弃任何附加效果的方式,创建了一个完全不带3D属性的设计方案。在这里,没有阴影效果、斜角、浮雕、渐变等其他方法来帮助元素产生相对于屏幕的凹凸效果。完全没有任何效果的图标和UI元素通过色块的搭配也都是看起来非常鲜明。
交互工具的界面设计为什么会选择扁平化设计?我们先来看看web UI的发展史,在互联网制作的初期,由于技术的局限,网页只是作为呈现信息的一个平台而已,毫无设计可言,随着科技的发展,CSS的广泛运用、才开始有了网页设计的概念,在这个阶段已经有大量个人网站出现了'许多网页使用Ps切图制作个性的UI效果,拟物化设计登上UI设计舞台。在javascript网页特效以及Flash流行起来后,静态的高光立体拟物效果已经满足不了大家的视觉需求了,于是开始使用简单的静态交互(javascript或flash本地交互)来产生更仿真的效果,设计师想让webUl更像是一件实物,可以带来一种更为生动的感觉。希望能消除科技产品与生活的距离感,在无论是网页,或是各种获取资讯的软件所提供的信息量相对较少的情况下,网页更倾向于UI带来的视觉冲击,软件的UI设计也更为大胆。
2005年后,web2.0的出现使得设计师更专注于内容呈现和交互,同时开始去掉了各种不必要的视觉效果。web2.0概念伴随着几何次方增长的信息而生,带来了更大的信息量和更复杂的交互,使webUI回归了它应该做的,就是以更好的体验呈现更大量的信息,让内容展现自己的生命力,而不是靠UI设计喧宾夺主。
这使我们想到在说到扁平化的同时,我们必不可少的会说到另一种设计分格――拟物化(skeuomorphism),拟物化作为与扁平化设计极度相反的设计风格,从web UI诞生起就一直占领UI设计的主流。拟物化设计的特点是界面模拟真实物体的材质、质感、细节、光亮等;人机交互也拟物化,模拟现实中的交互方式。拟物设计会让任何人都知道这个图标是用来干什么的,同时这也是拟物化最大的好处,它能让上至八十岁的老人,下至几岁的孩童都能看懂IOS里面几乎所有自带应有的图标。在ISO系统中各种按钮的视觉质感和点开之后的交互效果,有力的与现实所结合,养成用户对这类应用有统一认知和使用习惯。让用户在使用此类应有的同时感受到来自应有本身的人性化体贴。但是拟物化本身同时也是个约束,它限制功能本身的设计。在电子设计领域使用拟物原理直接导致了在苹果控制面板中的模拟时钟比电子时钟更难读,点击计算器的按键要比用键盘输入花费更多的时间。坚持使用拟物设计产生了不少的问题:由于一直使用与电子形式无关的设计标准,拟物化设计限制了创造力和功能性。将拟物化元素与少维的元素相融合时,拟物元素看起来有些不一致,而且这些模仿并没多少逻辑。比如,苹果的找朋友应用就有一个看起来像缝合皮革的背景。但该元素与现实世界没有任何关联。拟物化元素以无功能的装饰占用了宝贵的屏幕空间和载入时间,当与其他无拟物效果的元素组合时,拟物元素看起来有问题,这样就限制了整体设计和其他的元素的效果。我们可以看到现在的UI设计,也开始像当初webUI一样,回归内容的本质,开始走上由繁至简的道路。
扁平化设计成为交互设计主流风格的几大原因
扁平化对于互联网巨头直接意味这两个词:快速,突出。
快速高效是扁平化设计的一个很重要的基因,时间就是金钱,如何在信息更新如此之快的互联网即时的跟上它的脚步呢-那就是快速, 快速同时也意味着更低成本的运作,采用扁平化设计,可以再最短的时间内更新所需的页面,只需要给制作提供相应的色值就行,大大的节省了项目时间,也方便下次再更新。这也是很多互联网巨头们为什么选择扁平化设计的原因之一。
信息突出,是在信息大爆炸时代,网站取胜的关键,扁平化设计通过颜色的对比,大小不同的字号,让重要的信息放在首要位置,不重要的元素弱化,除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格,这样的设计让访问者可以很容易的将注意力聚焦在品和信息上,而不会被网站界面上的视觉元素所干扰。从而突出核心信息和操作。这些都增强了网站的易读性和可读性。
对于用户,扁平化则是简洁明了的,简洁的东西总是让人喜爱的,在一个设计简洁逻辑清晰的网站你能很快找到自己所要的东西,从而提高用户体验。
目前大多数对于界面风格扁平化的讨论,主要在于界面与图标中材质、阴影、立体感的消失等等。实际上对于界面设计来说,正如人们对于视觉感官的新鲜需求和疲劳度是与生俱来的,各种视觉风格的流行和更迭―直在持续进行着。然而过去的很长一段时间内,界面设计的风格都处在循序渐进的改变,“扁平化”的设计却是在短短十几个月的时间内迅速流行起来。从本质上看,这不仅仅是一种视觉风格的改变,而是一种设计语言和思维方式的演化。
对于打造交互设计中扁平化设计风格的几点建议
形式遵循功能,少点再少点
一些伟大的设计中所运用的“形式跟随功能(form followfunction)”和“少即是多(1ess is more)”的理念依然是我们今天还在谈论和学习的。简单的说,在用户界面设计,常常去掉真正将界面带入生活的那些东西。在扁平化设计的世界中设计师必须专注于产品的本质,它是用来干嘛的,而不是它们要看起来像什么。
细节永远是追求的方向
设计中所谓细节决定成败,有时候一点点行距一点点色值的不相同也会对整体视觉效果照成很大的影响,细节的调整是很有必要的。字体作为扁平化设计中的重要元素。你可以使用字体帮你创建你期望的风格和基调并且使界面更加简洁。
色彩一定要酷点再酷点
由于少了些质感,所以颜色也变得尤为重要了,运用搭配合理的颜色能起到决定作用。设计界面的基础之一是定义调色板。扁平化界面设计所采用的色彩的模式与其他调色板相比倾向于更加醒目和更加明亮。当你选择好调色板后,确保给主要交互动作指定色彩:比如“提交”、“发送”、“更多”等按钮都应当是同一个色彩。理想情况下鲜明的色彩与背景形成了鲜明的对比。如果你的徽标或者商标采用主色的话,那么它应当是主要控制所使用的哪个色彩。不要自始至终过分的使用它,否则你将冒着在用户眼里这个色彩不太重要的风险。
在扁平化设计里色彩的选择尤其重要,因为当你使用扁平化按钮的时候,色彩将是帮助用户识别彼此的主要手段之一。
最关键的是创新
优秀的设计是创新。我个人比较喜欢苹果首席设计Jony Ive的方法:先打破以前的框架。比如说设计一个饭盒,那他先要把“盒”这个概念抹去,不要被这个“盒”所困住思维,只想这个器皿最佳的使用方式和设计形式。比如时间,不只是想到钟表,还可以想想有没有其他更好方式来呈现。
结论
目前大多数对于界面风格扁平化的讨论,主要在于其艺术表现形式的变化。实际上对于界面设计来说,人们对于各种视觉风格追求―直在持续进行着。然而过去的很长一段时间内,界面设计的风格都处在循序渐进的改变。“扁平化”的设计却是在短短的时间内迅速崛起,从本质上看,这不仅仅是一种视觉风格的改变,而是一种设计语言和思维方式的演化。扁平化设计风格最大的优势就是它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生,这不仅是设计视觉风格的突破,更是功能性在交互设计风格中的重要体现。
如今各种不同尺寸和配置的产品出现,填补了不同级别间的空缺,同时要求更高的界面适应性,这些都要求我们将界面设计回归到如何理解功能内容和应用本身,但是否“扁平”并不应当成为交互界面的评价标准,良好的交互易用性、理解识别度、情感传达、操作反馈、图形隐喻、视觉舒适度、动态表现和音效设计等等方面,才能构成一个优秀的交互设计产品。
参考文献
[1]范圣玺行为与认知的设计设计的人性化[M].中国电力出版社.2009-3-1
[2][美]维克多・帕帕奈克(VictorPapanek)著,周博译为真实的世界设计[M].中信出版社.2013-1-1
[3][英]科制白恩著李松峰,秦绪文译简约至上:交互式设计四策略[M].人民邮电出版社.2011-01-01
[美]加瑞特著范晓燕译用户体验要素:以用户为中心的产品设计[M].机械工业出版社.2011-07-01
篇8
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的虚拟装配相关技术进行了研究,并实现了在用户参与的人机界面下的虚拟装配实例。对在虚拟装配过程中零件的碰撞检测、装配顺序规划、零件选取及实时编辑等功能的实现提出了有效的方法,具有一定的参考价值。
【参考文献】
篇9
毕业论文是高校本科教学过程中最重要的环节,也是最后的环节。现在的大多数高校,就毕业设计指导来说基本上都是通过师生见面来完成的,或者是通过电话联系。这样导师有时既浪费时间又不能及时给予指导和答疑。对于学生来说和老师过于频繁的见面也会浪费一定的时间,面对就业压力越来越大的今天,应届毕业生面临着找工作的难题也就越来越严重,学生没有过多的精力和时间来和导师见面讨论毕业设计中的各种问题。因此,在网络如此发达的今天,采用网上的方式作为指导和答疑也不失是一种好的选择。
基于ASP的毕业设计指导网站是用ASP动态网页技术和SQL Server 2000开发,它涵盖计算机技术和网络技术两门学科。是提供给毕业生和指导教师之间沟通交流的好的平台。也是弥补目前许多高校的网站系统中一个小的漏缺,可以作为高校网站系统中的一小部分。正是这一不起眼的小部分,却给毕业生和指导教师带来了许多方便,节省了许多时间,又能及时地得到老师的指导,从而提高指导效率。
1 网站总体功能设计
基于ASP的毕业设计指导网站管理系统的主要用户分为三种类型:管理员、教师、学生。针对不同的用户类型,登录进去都有不同的权限和操作功能。
2 系统功能实现
主要包括数据库设计和网站功能设计。数据库设计主要是创建数据库和添加数据表,并创建触发器和存储过程等;网站功能设计主要是功能模块的界面和程序代码的实现。
2.1 数据库设计
(1)创建数据库和数据表
4)触发器。触发器是用户定义在关系表上的一类由事件驱动的特殊过程。一旦定义,任何用户对表的增、删、改操作均由服务器自动激活相应的触发器,在DBMS核心层进行集中的完整性控制。触发器比约束更加灵活,实施比约束更为复杂的检查和操作,具有更精细和更强大的数据控制能力。
在tbGuest表里创建了“update”触发器,“update”触发器用于当更改tbGuest表中strTitle时,其他视图关于该strTitle也相应更改。
2.2 网站功能设计
网站功能设计主要是各个功能模块的界面设计和程序代码的实现。
点击“管理个人信息”便可以进入该界面。该模块有查询个人信息、修改密码、查看公告的功能,其中学生和教师用户还有查看群发消息的功能,但是管理员不必要有此项功能,因为管理员群发消息时在当前的页面就可以看到,管理员还具有公告的功能,师生可以在管理个人信息中点击查看公告查看管理员的公告。还必须说明的是查询个人信息项中学生和教师用户没有权限,只有管理员有添加、删除和修改的权限。
上传和下载文件模块所有用户都有,该功能主要是方便用户的文件交流,点击上传文件可进入上传界面,点击下载可进入下载界面。
向指导老师提问模块是集结学生的提问,教师的回复和管理员的提醒答疑(管理员还可以选择公告的方式提醒教师答疑)为同一模块,该模块功能可以提供多方交流沟通,点击选择的方式可以进入相应的界面,学生可通过三种方式完成提问;教师通过相应的方式回复;管理员通过三种方式提醒教师答疑。
查询问题模块的实现,此模块只有留言方式可以查询,其他不必要。在学生和指导老师之间提供三种交流方式,查询中学生和教师没有权限,只有管理员有添加、删除的权限。
首页模块和退出系统模块,单击首页则返回首页登录界面,单击退出系统则实现关闭网页。
3 系统测试结果
本系统曾经移植到多台计算机上对不同配置的计算机进行兼容性测试,测试结果表明,Web在不同的环境配置下运行正常。
4 结语
本设计是基于B/S架构,采用ASP动态网页技术和SQL Server 2000,结合Dreamweaver软件开发出来的。网站根据不同身份的用户实现了不同的应用操作界面,各个界面的功能稍微不同但相差不大。整个系统界面友好,运行可靠,系统功能基本满足用户要求,从而加强了指导老师和学生之间的交流,提高了论文写作的效率。本系统可作为一个单独的毕业设计指导网站,也可以嵌入到高校网站系统中作为一个子系统。
参考文献:
[1]李林,申时凯,王卫星.Visual Basic程序设计[M].北京:地质出版社,2006,2.
[2]尚俊杰.网络程序设计 ―ASP(第三版)[M].北京:清华大学出版社,2009,6.
[3]王珊,萨师煊.数据库系统概论(第四版)[M].北京:高等教育出版社,2005,3.
[4]赵文耘,牛军钰.软件工程[M].北京:清华大学出版社,2007,1.
[5]张克非网络程序设计及应用[M].北京:北京航空航天大学出版社,2007,6.
[6]何薇,舒后.网络数据库技术与应用[M].北京:清华大学出版社,2011,4.
[7]吕云翔,王洋,肖咚.软件测试案例教程[M].北京:机械工业出版社,2011,1.
篇10
笔者从设计流程角度讨论在线学术论坛用户体验的主要要素。设计流程角度的主要要素已有较为成熟的研究成果,笔者仅是从在线学术论坛的特点出发,整合前人的研究。具体操作是:笔者首先对用户体验主要要素做出初步假设,然后设计调查问卷,通过网络收集问卷,以问卷数据检验假设。
1理论与初步假设
根据用户体验要素和内容的研究成果,结合在线学术论坛的特征,笔者依据James Garrett对用户体验内容的战略层、范围层、结构层、框架层和表现层的划分来讨论设计流程方面在线学术论坛的主要要素。James Garrett从网页作为软件界面和网页作为超文本系统两个不同角度从五个层面讨论具体的内容(如图1),战略层无论是软件还是超文本系统均要考虑网站的目标和用户需求;范围层从软件角度需要考虑功能规格而从超文本系统角度需要考虑内容需求;结构层从软件角度需要考虑交互设计而从超文本系统角度需要考虑信息架构,框架层从软件角度需要考虑界面设计而从超文本系统角度需要考虑导航设计,二者均要考虑信息设计;表现层无论是软件还是超文本系统均要考虑均要考虑视觉设计。
本文的研究对象为在线学术论坛,主要讨论各层超文本系统的内容,除了范围层和框架层,因为范围层中的功能规格(对于在线学术论坛,笔者称为功能设计)和框架层中软件界面考虑的界面设计对于在线学术论坛来说也比较重要,因此也作为在线学术论坛用户体验内容的一部分。另外,由于在线学术论坛的内容是由用户产生的,所以不涉及到信息设计,故在框架层不讨论在线学术论坛的信息设计。
对于整个用户体验要素框架而言,笔者有两个假设:第一,在线学术论坛用户体验的五个层次的各要素(论坛发展目标、了解用户需求、论坛组成板块、信息架构、帖子包含内容、帖子的外观、帖子的质量、论坛按钮/输入框等要素的形式、导航、论坛的外观风格)都很重要;第二,在线学术论坛用户体验各要素的重要程度排序为论坛的发展目标——了解用户需求——论坛组成板块——帖子的质量——帖子包含内容——帖子的外观——信息架构——导航——论坛的外观风格——论坛的按钮/输入框等要素的形式。
1.1战略层
在线学术论坛用户体验的战略层主要回答两个问题,其一,作为在线学术论坛的管理者希望得到什么;其二,论坛的会员希望从中获得什么。简言之,就是要弄清在线论坛的目标和会员的需求。网站的目标一般可以分为商业目标、品牌识别、成功标准(具体要看网站注重什么,可以是用户单次访问停留时间、页面浏览量)等[2]。会员的需求是用户体验的关键内容,不同的用户对同一产品的体验需求更不相同,只有弄清楚在线学术论坛会员的真实需求,才能做好用户体验。
关于战略层的两个重要问题,笔者的假设是:在线学术论坛的发展目标应该是营造良好的学术氛围,促进科研人员的有益讨论;在线学术论坛的用户一般希望在论坛上获得以下服务:发表学术观点、以回帖形式与他人讨论学术观点、获得某一领域的最新研究摘要、获得某学科的考研考博信息、某课程的讨论专区、参加学术活动例如征文。
1.2范围层
在确定在线学术论坛的目标和用户需求之后,进入范围层需要考虑的问题是我们的论坛需要什么内容,提供哪些操作功能,也就是在线学术论坛应该包含那些频道。
关于在线论坛应该包含的频道,笔者假设为:课程讨论、学术前沿、学科时事、论文写作、考试就业、学校专区、精华区、留言反馈区、帮助等是必须的。
1.3结构层
在线学术论坛用户体验的结构层主要涉及内容建设的信息架构,通过信息架构来构建用户体验,用户可以更高效率、有效地浏览论坛的内容。这里的信息架构主要是指在线学术论坛中各个网页之间的关系以及每篇帖子的元数据,一般的信息架构的结构形式有层级结构、矩阵结构、自然结构和线性结构。
笔者假设在线学术论坛的信息架构应该采用层级结构,因为层级结构的树形状时人们习惯的分类思维,也是计算机熟悉的数据结构,不仅在技术层面易于实现,而且符合用户的体验需求。每篇帖子的元数据应该囊括帖子作者、发帖日期、帖子标题、内容类型、参考文献、作者联系方式(邮箱等)、帖子权威性评价。
1.4框架层
在线学术论坛用户体验的框架层包括导航设计和界面设计。全面且准确的导航是一个网站并不可少的,导航的作用主要体现在为用户提供在网站页面间跳转的方式,传达各网页之间的关系,传达内容与网页的关系。目前大多数网站都使用多重导航,同时使用全局导航、局部导航、辅助导航、上下文导航、友好导航和网站地图等。界面设计在此主要是指各种按钮和输入框的使用,某些按钮和输入框在节约网站空间和提升用户体验上存在一定矛盾性,在设计时应该着重考虑网站目标和用户需求的权衡。
关于在线学术论坛的导航,笔者假设多重导航是必要的,主要匹配的导航类型应该是全局导航、局部导航、辅助导航和上下文导航。在界面设计方面设计的要素很多,帖子的展现形式对于用户的体验效果是重要的,相比于下拉框和多选菜单用户更喜欢单项框和复选框,用不希望在在线学术论坛上看到太多的需要自己输入文字的文本框,用户不仅习惯于点击“确定”来发送操作也习惯于点击“回车键”。
1.5表现层
在线学术论坛用户体验的表现层主要体现在布局风格、配色和排版等。表现层是比较难以把握的,因为对于外观设计的感觉是比较主观的,可能一百个用户就有一百种偏好。
笔者关于表现层的假设是:在线学术论坛的页面布局风格应该具有对比性,突出重要信息,但是不能过度;在线学术论坛的页面颜色不超过3种;在线学术论坛的字体应该是稳重正式的风格。
2问卷调查
本文主要通过网络问卷调查的方式,获取用户体验数据(即各层次内容的态度和看法),以验证笔者最初的假设。本次调查利用问卷星()这一专门的问卷调查网站,问卷、收集数据和进行分析,共收回问卷139份。样本用户的基本情况是:男性用户86人,女性用户53人,比例如图2所示;样本用户中学生超过九成,共126人,大学教授5人,科研工作者2人,其他职业6人;51人注册过学术论坛用户,79人没有注册过,9人不清楚是否注册过;将近一半的用户没有登录过在线学术论坛,剩下的一半仅一半的用户一周内会登录一次,具体的比例如图3所示。
对于用户体验元素的重要性这一问题,问卷的结果显示笔者给出的10个要素基本上是重要的,具体选项的比例见表1,各要素的平均得分均在3(选项从左到右依次从1到5分)以上,整体的平均得分为3.78。
对于重要性的排序得到的结果与笔者最初的假设存在差异,问卷数据显示的重要性顺序是:帖子质量——了解用户需求——帖子包含的内容——信息架构——论坛发展目标——论坛组成频道——导航——论坛的按钮/输入框等要素的形式——论坛的外观风格——帖子的外观。这样的排序结果与上题的重要性矩阵大体一致,但是仍存在误差,主要是论坛发展目标这一元素的得分仅为5.9排在第5位,这可能是部分被试者填写问卷不一致导致的误差,不过这不影响大致的重要性判断。
3 数据分析和假设验证
3.1战略层
图5数据显示:在线学术论坛对用户的吸引力主要在于获得某一领域的最新研究摘要、回帖形式与他人讨论学术观点、某课程的讨论专区、发表学术观点、获得某学科的考研考博信息。虽然顺序上有点出入,但是基本上与笔者原先假设的战略目标是“在线学术论坛应该将营造良好的学术氛围,促进科研人员的有益讨论作为发展的目标”基本一致。表明用户使用在线学术论坛主要的目的还是在于学术活动,而交友、聊天等功能对用户吸引力不大。所以,在线学术论坛在设计时应该充分重视如何才能便于用户之间的学术交流这一重要目标,这也是满足用户获得良好体验的关键。另外,值得注意的是,数据显示用户并不看重在论坛上“发表学术观点”的功能。这一点与其他一些调查数据很相似,即科研人员一般不积极在在线论坛公开发表自己的看法,而愿意在更小的知己圈子里敞开心扉。
3.2范围层
数据显示:学术前沿、课程讨论、精华区、学科时事、论文写作、疑难解答的支持者均过半数,其次分别是留言反馈、考试就业、学校专区或其他(资源交流等),具体百分比如图6所示。由此可见,在设计在线学术论坛的频道时应该着重发展和管理前几个频道,再逐渐发展后几个频道。
3.3结构层
图7数据显示半数以上的用户偏好层级结构的信息架构。
图8则显示:对于假定帖子应该包含的每一项内容,被试的呼声都比较高,依次顺序为:帖子标题、帖子作者、发帖时间、内容类型、参考文献、作者联系方式(邮箱等)、帖子权威性评价。
3.4框架层
图9数据显示,87.8%的用户认为在线学术论坛应该提供全局导航,超过一半的用户认为应该提供辅助导航和上下文导航,剩下的导航被选人数占总人数比例也不低。表明在技术允许的条件下,设计者应该提供尽可能多样的导航功能。
帖子的表现形式对于用户体验而言是非常重要的,调查数据也基本上肯定了这一假设。对于与帖子相关各要素的重要性得分排名为:内容质量、提供附件下载、权威性评价、更新频率、承载音视频能力、图片像素、文本字体、字数。重要性的平均分为3.81,具体的选项分布如表2。
用户对下拉框和单项框、多选菜单和复选框之间的选择结果(如图10和图11)出乎笔者意料之外:55.4%的样本用户选择更加偏爱下拉框,25.2%选择更加偏爱单项框,19.4%觉得两者都一样;36%样本用户选择更加偏爱多选菜单,34.5%选择更加偏爱下拉框,29.5%觉得两者都一样。可以看出比起单项框和复选框,用户更喜欢下拉框和多选菜单。
对于文本框的态度样本用户的选择(如图12)与笔者的假设一致,52.5%的样本用户不希望在在线学术论坛中看到过多的文本框,而只有1/8的样本用户认为文本框越多越好。故在设计在线学术论坛的过程应该尽量避免过多的文本框。图13数据还显示42.4%的样本用户习惯在完成任务后点击“确定”发送命令,32.4%习惯点击“回车键”,25.2%两者都习惯。
3.5表现层
图14中的四种页面布局形式是来源于James Garrett的著作《用户体验的要素——以用户为中心的Web设计》,1号图表示视觉上的中性分布,没有任何一个元素突出,2号图表示通过对比引导用户在页面上的视线,3号的表示将用户的注意力吸引到几个关键要素之上,4号图则表示由于过度对比导致了混乱的视觉。调查结果显示:样本用户更倾向于3号和2号图的布局效果,分别是41%和31.2%,选择4号图的有14.4%,而选择1号图的是12.2%。
图15数据显示,近八成的样本用户认为在线学术论坛的配色最好在2到3种,这和笔者原先的假设基本一致。另外,对于字体,多数用户倾向于使用稳重正规的宋体、楷体等字体,但是也有一部分用户希望能够自己选择,那么在设计时可以采取两者相结合,默认字体为宋体,用户可以通过下拉框选择其它字体。
4 结论
综合上述的统计分析,可以发现,从设计流程的视角,影响在线学术论坛用户体验的主要因素是:
在战略层,在线学术论坛是否将“营造良好的学术氛围,促进用户开展有益的学术讨论”为主要目标;是否能满足用户希望获得某一领域的最新研究成果摘要或者获得业务进阶机会的需要。
在范围层,在线学术论坛重视提供诸如学术前沿、课程讨论、精华区、学科时事、论文写作、疑难解答等频道的设置。
在结构层,在线学术论坛的信息架构一般宜采用层级结构;帖子的元数据应当包括标题、作者、发帖时间、内容类型、参考文献、作者联系方式及权威性评价等项目。
在框架层,在线学术论坛宜采用多重导航,优先考虑实现全局导航。宜多采用下拉列表和多选菜单,少用文本框。帖子的价值主要表现在内容质量、提供附件下载、权威性评价、更新频率等方面。
在表现层,论坛提供的页面的布局形式需要体现出对比性,但是又要避免对比过度而造成视觉混乱。页面的配色以2-3种为佳,字体要稳重。
本研究存在一些局限性,例如,量化评价表的设计比较匆忙,没有经过专家的检验,参与测试的人数较少等。
参考文献
篇11
1 汽车电商平台综述
在这个信息日益全球化的今天智能终端影响着人们生活的方方面面,然而,相当多的智能终端产品因其复杂的操作方法让人们望而却步。而传统工业设计方法着重强调形式和功能的辩证关系,在强调产品可用性和用户体验的今天很难解决智能终端产品“难用”的问题。这就突出了“以用户为中心”交互设计在工业设计中的重要性。
本论文对汽车电商平台的分析主要从视觉设计和交互设计两个方面进行。现在独自创建的汽车电商平台有:汽车之家、易车网、等等。我们通过分析网页设计、框架设计、内容排版、图片运用等等,来总结个个平台的优劣势,从而为我们提供一定的依据和参考。
首先拿汽车之家举例:网页栏目留白的间距不够多,每个栏目之间区分的不明显。整体框架三列板块式布局,视觉给人扎实稳重,重点地方的色彩突出的比较明显,给人一目了然。但是在搜索车型的用户体验没有易车网好,对于人们关心的价格搜索并没有设置。
在网站内部的搜索栏给用户体验的感觉也没有易车网那样简洁明了。在品牌和车型海选的时候没有产品缩略图,仅仅是文字的叙述,略显单调。
然后我们从另一个角度分析一下易车网,我们从视觉设计的角度来看,比如图标设计:
这两组网站的图标,都存在一定的问题,首先第一组图标风格不统一,第一个汽车报价大全图标做了投影浮雕效果,而后面的确实扁平化的风格。然后图标设计没有简洁实用,图标差异性也没有表达出来。
第二组图标的设计以扁平化为主,色彩样式统一,图标表达的含义也较为简单清晰,但是可以明显的发现缺乏设计元素和想法,仅仅只是简单的几何图形配上一个文字或者符号。在互联网高速发展的今天,为了追求一个工作效率和时间成本,这样的设计从另一个角度上来说是可行,但是这样的图标后期是一定要去优化和修改的。我们可以从它的样式、风格、艺术性、识别性、独创性上进行改善。从而在提升视觉效果的同时也可以节省用户的时间,提升点击效率。
2 汽车网站用户需求和构架
汽车电商的平台的兴起,就一定要分析和研究用户需求,从而带来好的用户体验。
分析用户需求我们主要从用户特点来分析。目标用户主要是指进行网上购物的人群,年龄阶层偏向上班组的中年段,在用户的使用中也要考虑不会用按钮点击,复杂操作的中老年人。
网站构架,以功能需求为主,大的构架包括新车买卖、二手车买卖、汽车配件三大板块。
3 用户体验与界面设计
好的界面设计可以大幅度提升用户体验,我们的设计要充分符合中国人的使用习惯并结合人们的审美需求。
以下是通过实际的案例来分析和研究,好的交互设计是如何实现和运用的。这个首页的界面设计,视觉冲击力非常强,简洁明了,颜色的运用的也非常的好。先从色彩上来说,以白色为主,在需要强调的地方运用了红色和深灰色,不仅色彩的对比强烈,也充分符合企业VI手册的色彩识别标准。再如购物车橙色的按钮,符合人们的心理需求,橙色让用户更有点击的欲望。
接着我们分析一下恒信首页的图标设计。最显而易见的是六个栏目的大图标,写实风格,有一定的趣味性,图标的色彩虽然五颜六色,但并不杂乱,主要原因是因为色彩多,但色彩的使用面积并不大,整个页面的主色调依然是白色和灰色为主,图标的色彩很好的作为辅助颜色,点缀其中。然后六个图标的风格统一,识别性强,给人们的体验是看图即知道含义。接着登陆框的两个小图标也与之前的图标做了很好的对比,层次清晰。底部六个常驻图标,在色彩上略显过深,从形式上来说具有一定的艺术性,下面的文字也很好的和图标形成了一个层次对比,黑白灰的运用不会给你带来审美疲劳。
网站的整体设计风格,我们可以看出,设计以简洁为主,这样设计的原因,主要还是基于前期的需求分析和产品经理给的产品原型来定的。不难发现这样的设计很好的明确了目标,没有多余的地方,一方面给用户节省了时间,另一方面也可以减少服务器负担,节省企业成本,优化网站运行速度。
所以在界面设计中如何做到尽量的简洁和好的用户体验显的格外的重要。图标在当今的web端和移动端都大量的运用到,它的特点视觉冲击力比文字强,带给人们新鲜感,吸引人们点击和使用。当然用户体验的提升不仅仅局限于图标的视觉设计。
在这两个页面中,登录框的大小、摆放的位置、文字的大小、色彩、页面布局、点击样式、鼠标放上去的样式、页面跳转的合理性都是影响用户提的方面。
中国人的使用习惯是视觉中心偏向右边,登录框放在banner的右边位置醒目,诱使人们进行注册登录,积累平台潜在客户。文字的大小以12号为主,颜色使用并不用纯黑色,而是深灰色,这样做的原因是视觉对比有,人们感官上会显的舒服。页面布局稳重,有层次,也简洁很多。点击样式鼠标放上去的效果,引导人们点击,和帮助人们更好找到点击的目标区域,页面跳转设置也摒除了繁琐的几步跳转,直接链接到了目标页面,给人们好的体验。
汽车电商平台图标的差异化的研究,主要通过实例来分析。在这个页面设计上图标的差异化并没有表现出来,没有区分团购、特卖、促销。这六个图标设计中都运用了车的元素,相反的给了用户一定的误导,没有差异化的图标,设计出来是失败的,扁平化的设计,在视觉冲击力上来说也略显单薄。
4 总结
用户产品设计和图形设计的传统方法着重关注的是与工艺、美感和形式相关的美学品质。解决设计问题乃以情感价值为依据,对成果的评判或批评也往往是在艺术领域的范畴进行的。与之不同的是,交互设计将重心从视觉效果转移到了人这方面上。
参考文献:
[1]梅哲.图形图像界面中的图标设计[D].武汉理工大学,2009.
篇12
〔文献标识码〕 A
〔文章编号〕 1004—0463(2012)
14—0018—01
2005年3月,天祝县民族中学率先建成了全国首家藏文中学网站——中国藏族中学网(),开辟了藏语言教学类网站的先河,对藏区教育教学实现跨越式发展具有重大意义。目前全县尚无一个小学类的藏语文教学网站,天祝民族师范附属小学作为县城唯一一个传播基础藏语的“三语”小学,自然就肩负起了建设小学藏语文教学网站的重大使命。笔者对小学藏语文教学网站的设计规划、技术解决和教学资源库建设等问题也作了一些分析和研究。
一、小学藏语文教学网站设计规划
1.版块栏目 小学藏语文教学网站初步设计规划6大版块,分别为“学校新闻”、“教师风采”、“学生天地”、“学习园地”、“ 藏族文化”、“软件下载”。网站的重点设在“学习园地”,包括“藏语拼音”、“藏语基础”、“藏语语法”、“教学论文”、“教学课件”、“教师教案”、“年级试卷”、“在线课堂”、“复习资料”等9个子栏目界面。
2.网站界面设计 在网页风格上,颜色可根据藏族习惯,以藏蓝色、米黄色为主题颜色,并在界面中添加藏族元素,如建筑、风景、人物、服饰等;网站界面设计和版面的编排设计上,要有一定的美术创意,力求简洁美观,给人带来舒适的视觉享受。
二、小学藏语文教学网站技术解决
1.网站程序开发 为了提高网站的访问吞吐量,网站平台硬件最好由学校自购WEB专用服务器。考虑到网站建设初期投入成本可能不多,设计上应达到用户使用方便简捷,功能上尽量以实用为主,可选择基于J2EE标准、以JDK+TOMCAT架构搭建的JSP运行环境,通过使用JAVA脚本语言来完成动态交互功能的WEB服务器应用程序,实现学校网站的多种功能。
2.网站数据库 由于资源库内容需要经常修改和维护,对数据的传输要求比较高,所以需要强大的数据库作保障,因此,选择一个合适的服务器平台和数据库系统非常重要。操作系统建议使用Windows 2003 Server,数据库可以选择成熟的MySQL,Windows Server2003+IIS6+MySQL的配置具有使用方便、易于维护和管理的特点。
3.网站藏文嵌入技术 早在IE4.0版本推出后,微软公司就引入了嵌入字体技术作为浏览器显示任意字体的解决方案:首先利用Web页面制作工具生成一个页面或者整个网站,在页面中使用藏文字体;然后利用专门的页面转换工具WEFT(Web Embelding Font Tool)对包含藏文字体的藏文Web页面或者藏文网站进行处理,运用Css样式表技术控制页面的布局,页面就不会随浏览器设置而改变,防止了乱码的出现,轻松实现藏文在浏览器中的完美显示。
4.网站安全性 任何优秀的网站都有一套完整有效的安全措施,在网站建设规划初期就要将网站安全放在重要位置。网站安全不是购置一套硬件防火墙或者购买一套正版杀毒软件可以解决的,更重要的是网站在投入运行之后如何提高网管人员的安全意识和管理水平。
5.申请域名和网站 申请域名可到当地中国电信委托申请,一般选择600元左右、五年有效期的域名方案。在域名选择上要遵循便于记忆、不容易与其他域名混淆的原则,为了使网站后能够长期安全、稳定、有效地服务于学校的教育教学,网站还需要及时办理ICP备案。
三、小学藏语文教学资源库建设
根据信息资源自身的性质,我们知道教学资源库的建设不是对资源的简单收集,藏文教学资源库也应该具备以下功能:能够进行方便快捷的信息检索;教师可以自行添加资源;资源种类齐全、科学;系统易维护等。
篇13
一、传统的信息构建
信息构建是“定义和控制界面并整合系统各组成部分”的一种机制,个人信息系统的规模和复杂程度正在不断增加,从而促进了构建程序在范围、组织影响和处理过程等方面比早期的独立应用范围要广泛得多。
第一代信息构建于80年代公开和描述,它是用于开发独立应用的,主要描述从需求、设计、构造到最后的交付使用这样一个过程,其重点是一个独立系统的开发。第二代则是将信息构建的思想融入企业级的若干个应用的综合。
另一个特征就是第一代和第二代的信息构建强调的是技术解决而不是组织对信息的使用。在当时社会中的很多领域都希望能开发、分享和管理信息。对大部分组织来说,仅仅拥有一个网站、电子信息管理系统就足够了。然而,时过境迁,人们终于意识到必须把信息作为组织中的一种资源来看待。
二、现代图书馆信息构建
(一)概念解析
20世纪90年代初,Web的形成和基于Web浏览器的发明,大大推动了因特网向全球发展。同时,作为企业管理中的一个重要职能知识管理的出现,使得人们的争论越来越多地涉及到信息内容和内容管理上来,从而提出了以信息为中心的第三代信息构建。第三代与前二代信息构建的主要区别在于:
1.第三代信息构建强调信息作为一种竞争资源的使用价值,区别于支持系统的技术。单方面关注由技术构建出的一个信息体系就像是用烹饪工具装设一个厨房而来制作一顿晚餐一样,它忽略了烹饪原料的质量。用户和信息建筑师都是通过掌握“信息的信息”从更深层次来理解信息的使用。这种理解超出对信息本身及其结构的简单定义,通过一些数据、图案、指南来引导用户使用信息。同时,用户和信息建筑师也通过“信息收益率”来评价信息构建的质量。
2.由于在第一代和第二代信息构建中所使用的单一图表过于简单化,不能传递太多信息,所以需要用一系列的图表来描述问题。第三代信息构建便是通过反映信息的这种多维复杂性以及描述构建中不同认识维度的各个关键因素来解决问题。
3.早期的信息构建概念忽略了该概念的背景和理论基础,或者将其简单化。基于一些不适当的设计原则,信息构建是很难实现的,如信息构建中对度的整合。今天的信息构建要考虑到整个体系中各元素的整合以及体系中各组成部分的再使用问题。
(二)与其它概念的联系
1.信息构建与信息设计。信息构建的重点在于内容以及以用户为中心,特别是复杂的网站建构。主要成分包括:虚拟设计:版面与信息的图表设计,使得交流的效用最大化;交互设计:设计网页上动态成分或软件应用,可以使用户完成特定任务;用户的经验设计:建立一个完整的基于用户需求的经验数据库;可用性:对一个系统进行评价,确保其易用性和有效性,然后,将评价结果融入到设计过程中去。
信息设计偏重于文献内容、结构和外形的结合。它不只考虑文献的内容本身,还将文献作为一个整体,进行多元化的整合。相比较而言,信息构建更侧重于内容的概念设计。
2.信息构建与信息管理。信息管理是一个比信息构建更为成熟和固定的领域,它是以数学、管理科学、信息科学等学科为基础,涉及多门学科(理、工、农等)、多个领域(经济、管理、法律等)的综合叉学科。二者都与信息科学(如信息的描述、辞典的设计、信息检索等)有着很多联系。信息建筑师与信息管理专家对信息组织、建立有效的内容管理战略以及为用户提供有效的访问途经等方面都有着很大的热情。同时,他们也都受到网络信息泛滥的矛盾冲突以及经济不稳定等多方面的冲击。狭义的信息构建,即网站信息构建,这是当今信息构建应用最为广泛、最为成熟的领域。广义的信息构建,即不仅要考虑信息,而且更要对组织机构中的信息服务与信息相关部门及其人员的整合与合理配置,包括技术层面、管理层面以及信息系统的结构构建。因此,广义的信息构建更接近于现代信息管理的理念。3.信息构建与信息管理构建。信息管理构建是当代出现的虚拟企业组织中为了管理生产计划信息和控制信息而产生的。它不仅要考虑商业数据,还要考虑技术方面的数据。信息构建是“组织信息和设计信息环境、信息空间或信息体系结构,以满足需求者的信息需求的一门艺术和科学”,涉及到图形设计、人机交互和界面设计,目的是帮助人们成功地发现和管理信息,侧重于用户和信息。
三、网络信息构建
网站信息构建是指借助图形设计、可用性工程、用户经验、人机交互、图书馆学信息科学等的理论方法,在用户需求分析的基础上,组织网站信息、设计导航系统、标签系统、索引和检索系统,以及负面内容布局,帮助用户更加成功地查找和管理信息。
网站信息构建的主要内容包括:
(一)内容组织
一般通过字母顺序或地理位置构成来组织图表。一些模糊图示法也很有帮助,但不太准确。现在比较有名的如Yahoo网页上的杜威十进分类系统。图表一般独立于用户界面。界面改变并不影响到图表。另外,为了实现这个目标,它还必须有一个规则来容纳新增加的网页内容。
(二)导航系统
它帮助用户了解自己所处位置以及从这个网站中能获得什么,就像现实中的路标或地图一样,可分为全局导航和页面导航。全局导航可以链接到网站内任何一个资源,而页面导航给用户呈现相近的主题网页。此外,还有像背景导航,为用户建议网站其它领域相关主题内容;面包屑导航法,呈现网站结构中的页面位置以及用户的浏览路径;网站地图和索引也为用户提供了网站内容、结构等方面的概况。
(三)检索系统