上个世纪80年代末在日本出现了感性工学的课题和研究。感性工学(KanseiEngineering)是界于设计学、工学及其他学科之间的一门综合叉学科。“感性”是一种主观的难以用文字来描述的心理体验,它是一种认知的概念,受个人知识、经验和个性的影响,是个性化的认识。同时感性也是直觉与理智相互作用的结果,感性对美的、情趣的事物特别敏感。对于设计者而言就是把消费者脑海中的构建法则探寻出来,通过破译消费者的感受,再利用这些探寻出来的法则去进行设计,这就是感性工学设计的首要任务。
1.3感性工学与界面设计的关系
2少儿网页界面感性化设计现状调查
本文以常用少儿网站新浪少儿网,希望谷,迪斯尼中国站为例,分析目前的少儿网站感性化设计发展现状,为下文的研究提供数据依据。
这项研究分别从用户和网站角度进行研究。通过对用户的调查,可以得到用户的体验,以及从用户的角度得到对网站的评价,并且可以发现网站中存在的一些问题。通过对少儿网站的调查,可以了解到网站中吸引用户的重要因素,以及用户对网站的评价,从而为网站的设计提供建议。
2.1.1问卷调查
图1学生浏览网站的目的图2网站吸引用户因素调查
2.1.2文案法
2.1.3启发性测试
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.
网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它表面上看,它不过是有关网页版式编排的技巧和方法,而实际上,它不仅是一种技能,更是艺术和技术的高度统一。网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面,其中色彩处理有着举足轻重的功能。色彩既是网页作品的表述语言,又是视觉传达的手。所以首先要了解一个新问题那就是摘要:
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网页界面的优化
在页面设计中,网页界面的优化是较为重要的一个环节。它的成功和否会影响页面的浏览速度和页面的适应性,影响观者对网站的印象。
网页的适应性是很重要的,在不同的系统上,不同的分辨率下,不同的浏览器上,我们将会看到不同的结果,因此设计时要统筹考虑。一般我们在800×600下制作网页,最佳浏览效果也是在800×600分辨率下,在其它情况下只要保证基本一致,不出现较大新问题即可。现在我们设计网页,一般要考虑800×600和1024×768两种分辨率,因此我们的表格一般为居中的770左右的表格,表格的宽度最宽不要超过778。事实上,"做网页"不是单纯意义上的"制作网页",假如想让自己制作的网页美观大方,就必须要考虑"设计网页"的过程,一个好的作品,不通过仔细的"设计"就成形是绝对不可能的。
我国的网页界面页面设计水平总体上不及韩国,创新的页面极少,基本都是一种风格,这也是因以前我国的宽带水平跟不上有原因,一个漂亮的页面,必然体积会比较庞大,网络比较慢的话打开的速度也就可想而之,打开速度慢正是网页的一个最大杀手,所以我国以前的页面基本都是以框架式居多。随着我国宽带的普及,我们也迅速括起了一阵韩风,很多大胆创新的页面出现,这是一个好现象,但是一味的模拟韩国也不行,我们也要有自己的特色,不能一味的拿来主义。
【关键词】Unity3D;HTML;脚本;交互;虚拟装配
1、引言
Unity3D不只是单纯的游戏引擎,而是已经涉及到多种不同领域的一个跨平台的三维游戏与虚拟现实开发工具,该工具支持多脚本语言以及强大的物理引擎等特点。论文通过研究Unity3D与HTML交互机制,实现场景中对象的动态交互行为,也就是控制各装配体的装配顺序并实现碰撞检测、零件实时编辑等功能,从而使得整个装配过程具有逻辑合理性和可控制性。
2、Unity3D与HTML交互机理
2.1Unity3D浏览器调用HTML网页中的函数
Unity3D浏览器通过执行Application.ExternalCall()来调用任何在HTML网页里定义JavaScript函数,比如下面一句调用了HTML网页里SayHello()函数,并传递了一句话作为参数。
Application.ExternalCall("SayHello","Thegamesayshello!");
2.2HTML网页调用Unity3D浏览器中的脚本函数
Unity3D浏览器的插件或ActiveX控件都有一个SendMessage()的函数,HTML网页通过这个函数与Unity3D进行通信,通过该函数可以传递对象名、函数名以及简单参数,然后SendMessage()就会调用Unity3D中GameObject上绑定的函数。在调用SendMessage()函数之前,必须先得到UnityWebPlayer的引用。这里可以使用JavaScript对象Document的getElementById()函数来获得该引用。
3、减速器虚拟装配的实现
3.1交互界面设计
交互式虚拟装配的重点不仅在于产品虚拟装配的过程,还在于它可以与用户进行实时交互。系统界面分为两部分:网页中为利用HTML提供的控件加入按钮、列表框、滚动条、文本区、标签等;Unity3D浏览器中为利用Unity提供的GUI接口加入按钮、窗口、标签等控件分别实现了减速器装配体的自动装配、手动装配、原理演示、零件查看、零部件实时编辑等功能,充分实现用户参与下的人机实时交互。
3.2碰撞检测及装配顺序规划
虚拟装配过程中零件拆装顺序的检测也是一个关键问题,用户选择零件正确与否直接决定该零件是否进行拆装。系统为每一个零件定义一个唯一识别拆装顺序的顺序号,当用户选择某一零件后,调用相应的拆装顺序检测模块进行比较当前选择零件的顺序号与系统预定的顺序号是否一致决定拆装是否进行或者根据零件间的位置约束关系判断某零件当前是否可以移动来决定拆装是否进行。
3.3装配体零件的任意移动及实时编辑
在虚拟装配中,用户对场景中零件的选取及操作(位移、颜色等的实时修改)是交互性最充分的体现。当用户在虚拟场景中用鼠标点击或指向某一零件时,系统应该做出响应,如被指向或点击的零件应实时改变颜色或弹出对话框提示用户等。Unity3D的GUI接口提供了各种控件可以非常方便的编辑一些按钮、窗口等用户界面,通过重写鼠标事件可以检测用户的各中输入信息并作出正确的响应。通过变换组件可以完成产品的平移和任意角度旋转操作以及装配体零件某一方向比例变换。
4、结论
【参考文献】
[1]郭海新.Unity3D与HTML交互机理的研究[J].煤炭技术,2011(09).
关键词:电商交互界面;应用与实现;汽车电商平台
DOI:10.16640/ki.37-1222/t.2016.03.178
1汽车电商平台综述
在这个信息日益全球化的今天智能终端影响着人们生活的方方面面,然而,相当多的智能终端产品因其复杂的操作方法让人们望而却步。而传统工业设计方法着重强调形式和功能的辩证关系,在强调产品可用性和用户体验的今天很难解决智能终端产品“难用”的问题。这就突出了“以用户为中心”交互设计在工业设计中的重要性。
本论文对汽车电商平台的分析主要从视觉设计和交互设计两个方面进行。现在独自创建的汽车电商平台有:汽车之家、易车网、等等。我们通过分析网页设计、框架设计、内容排版、图片运用等等,来总结个个平台的优劣势,从而为我们提供一定的依据和参考。
首先拿汽车之家举例:网页栏目留白的间距不够多,每个栏目之间区分的不明显。整体框架三列板块式布局,视觉给人扎实稳重,重点地方的色彩突出的比较明显,给人一目了然。但是在搜索车型的用户体验没有易车网好,对于人们关心的价格搜索并没有设置。
在网站内部的搜索栏给用户体验的感觉也没有易车网那样简洁明了。在品牌和车型海选的时候没有产品缩略图,仅仅是文字的叙述,略显单调。
然后我们从另一个角度分析一下易车网,我们从视觉设计的角度来看,比如图标设计:
这两组网站的图标,都存在一定的问题,首先第一组图标风格不统一,第一个汽车报价大全图标做了投影浮雕效果,而后面的确实扁平化的风格。然后图标设计没有简洁实用,图标差异性也没有表达出来。
2汽车网站用户需求和构架
汽车电商的平台的兴起,就一定要分析和研究用户需求,从而带来好的用户体验。
分析用户需求我们主要从用户特点来分析。目标用户主要是指进行网上购物的人群,年龄阶层偏向上班组的中年段,在用户的使用中也要考虑不会用按钮点击,复杂操作的中老年人。
网站构架,以功能需求为主,大的构架包括新车买卖、二手车买卖、汽车配件三大板块。
3用户体验与界面设计
好的界面设计可以大幅度提升用户体验,我们的设计要充分符合中国人的使用习惯并结合人们的审美需求。
以下是通过实际的案例来分析和研究,好的交互设计是如何实现和运用的。这个首页的界面设计,视觉冲击力非常强,简洁明了,颜色的运用的也非常的好。先从色彩上来说,以白色为主,在需要强调的地方运用了红色和深灰色,不仅色彩的对比强烈,也充分符合企业VI手册的色彩识别标准。再如购物车橙色的按钮,符合人们的心理需求,橙色让用户更有点击的欲望。
接着我们分析一下恒信首页的图标设计。最显而易见的是六个栏目的大图标,写实风格,有一定的趣味性,图标的色彩虽然五颜六色,但并不杂乱,主要原因是因为色彩多,但色彩的使用面积并不大,整个页面的主色调依然是白色和灰色为主,图标的色彩很好的作为辅助颜色,点缀其中。然后六个图标的风格统一,识别性强,给人们的体验是看图即知道含义。接着登陆框的两个小图标也与之前的图标做了很好的对比,层次清晰。底部六个常驻图标,在色彩上略显过深,从形式上来说具有一定的艺术性,下面的文字也很好的和图标形成了一个层次对比,黑白灰的运用不会给你带来审美疲劳。
所以在界面设计中如何做到尽量的简洁和好的用户体验显的格外的重要。图标在当今的web端和移动端都大量的运用到,它的特点视觉冲击力比文字强,带给人们新鲜感,吸引人们点击和使用。当然用户体验的提升不仅仅局限于图标的视觉设计。
汽车电商平台图标的差异化的研究,主要通过实例来分析。在这个页面设计上图标的差异化并没有表现出来,没有区分团购、特卖、促销。这六个图标设计中都运用了车的元素,相反的给了用户一定的误导,没有差异化的图标,设计出来是失败的,扁平化的设计,在视觉冲击力上来说也略显单薄。
4总结
[1]梅哲.图形图像界面中的图标设计[D].武汉理工大学,2009.
[2]杨文.论标志设计的重点与难点[J].233000.
1.1投稿平台研发机构
1.2网页内容
1.3域名
少量期刊网站根据域名即可判断,以edu和gov为域名后缀的可确信为真实网址,各大学学报如西安建筑科技大学学报、天津体育学院学报均为这种情况。