交互设计在IT产品设计中非常重要,它不仅要考虑到人机工程学,研究人与机器之间的尺寸比例关系和人操作机器的舒适性,还要考虑到平面设计中机器的色彩、操作界面的设计。作为未来IT概念产品中的人机交互设计研究,无论在材质的选用、结构的变化、软件的升级、还是在界面的设计上,都让我们感觉到IT产品会对我们的未来带来巨大的变化。随着人机交互设计受到各大生产企业和设计公司的重视、新的加工工艺的产生、新材料的出现、软件技术的提高,在不久的将来,我们将会拥有目前难以想象的IT产品,让我们在这个多彩的世界里自由的享受美好的生活。
使用交互设计的输入设备
现在我们就以几个例子共同来探讨一下人机交互设计在IT输入设备中的作用。
以鼠标为例,Cocoon光学鼠标追求的是简单与复杂的统一关系,简洁的表面下隐藏着更多的功能,让用户不断地体验惊喜。譬如可以随心更换的硅胶彩壳,使用户有更多选择,可以根据心情更换颜色;可以冲洗的彩壳,让鼠标保持清洁,减少细菌传递,用起来心情舒畅;彩壳还可以进行个性化定制,满足不同用户的个性需求。Cocoon光学鼠标简洁的设计语言和简易的操作方式,体现了IT技术与高品质、高技术、高情趣设计之间的平衡,在人机交互方面给使用者随性易用的感受。
另一个例子是V字形鼠标,它最大的特点就是采用了V字形的底面设计,这样可以达到类似于大部分工学鼠标的斜向操作的目的。另外这种造型对于左撇子而言同样适用。为了使腕部获得更好的支撑,它还将鼠标垫与鼠标整合在了一起,从而获得更为舒适的操作感受;为了适应不同的手型和使用习惯,这款鼠标还配有一段可伸缩的设计,可以根据需要自行调节;它的滚轮也非常有特色,用一个四向的导航按键代替了传统的双向滚轮,这样不仅操作的灵活性大大增强,而且能够避免手指频繁滑动滚轮产生的疲劳。
而Wt鼠标是在目前鼠标过分的应用人机工学原理下的一种反思,与很多鼠标标榜的人机工学不同,wt强调40%的接触面积,并且有流型通风孔。此设计使使用者能进行更加舒适的操作,同时可以始终让手部保持干爽。
以上我们不难看出,IT产品在结构上、色彩上和形式上的变化对用户在使用心理上的重要性。如果说以上的鼠标仍然没有摆脱我们所习惯的输入输出方式,我们再来看一下下面的例子,共同了解交互设计的趣味性,和在人们生活中的重要性。
强大的交互式搜索引擎
除了通常的IT设备,网络技术的发展壮大已经超出了我们的想象――它不仅给我们带来了快乐,同时带给我们更多知识。譬如网络中的搜索引擎,搜索引擎的快速发展为我们的生活带来了无限的便利,使得我们获取信息的成本大大减小,速度也大大提高。那么,理想中的搜索引擎技术应该是什么样子呢?
来看看这款新颖的概念设计吧,这款产品看上去就像是一个透明的塑料板,而实际上它却内置了摄像头以及无线模块,无论何时何地,你只要将它对准需要获取信息的东西,它就能够自动的进行信息比对,返回非常精准的搜索数据。
当你到了一个陌生的城市时,只要对特定的景物进行取景,即可通过图像搜索技术返回相应的信息,从而帮助你迅速得到想要的信息,而且通过触摸板技术,还可以对该建筑的一些细节部位进行进一步细化的搜索;同时它可以作为“扫描式电子辞典”对陌生的词汇进行搜索,不过它的最大特点在于,整个过程都可以借助无线网络来进行;它内置的GPS模块可以通过在线地图和GoogleEarth这样的软件来实现实时定位。有了它,未来我们就不必担心外出会迷路了。
理想的人机交互设计
原先的XO笔记本电脑在伦敦博物馆获得了年度大奖。这款XOXO电脑只有XO的一半大小,它充分考虑了使用者对感官及交流的需求,由铰链连接的两个触摸屏,就像一本书、一片竹简、一块黑板等你需要的东西。颜色采用绿色和白色搭配,但是更轻、更简洁。整体形状就像一个行李箱,无论是携带还是使用都更加方便。
关键词交互设计设计问题人机交互
中图分类号:TP3文献标识码:A
1绪论
近年来,由于在复杂的人机交互系统中出现了越来越多的问题,越来越多的学者开始对人类在这方面的操作失误感兴趣。基于这些事故主要牵涉到人机交互,因此为了探索和拓展系统交互的局限性,需要做更深入的研究。除此之外,根据Norman的评估执行差异论,人类和系统的独特特征展示了一个实际的问题:交互系统的设计者更多的把图形用户界面看做一个独立的问题,而不是思考一个用户能够怎样与系统界面设计进行交互。大量的研究人员强调了用户界面的产品特点在设计当中的重要性,因为设计能够帮助用户预知这个系统可以做什么。此文献综述包括了各个领域的研究方向、研究课题和子领域的发展。
例如:在用户界面设计开发过程中,即使设计师使用通常的设计原则进行设计,但他们仍然缺少对界面设计如何将信息传递给用户这一问题的研究和思考。也许在界面设计原则中,视觉元素应该以一种更加清晰的方式呈现在用户面前。为了界面设计更加清晰,设计师可以在界面上运用视觉、动态、标识等元素。另外,系统设计实际上是可以让用户正确理解信息的成功方式。的确,研究人员指出,设计师们不仅仅不考虑物理层面的布局,而且也不考虑系统如何运作,如何开发,交互流程如何开展以及如何给用户提供有意义的信息等方面的问题。由于视觉元素在用户接受信息的过程中是一个占主导地位的认知元素,设计师们往往将十分浮华、象征意味很浓的视觉线索嵌入在其中,然而这些视觉元素是以牺牲系统功能和用户对系统的理解为前提的。
此外,关于交互设计领域方法和工具的选择方面仍有很多争论,主要体现在寻求理解如何建立技术和技术如何充分应用于帮助用户完成他们的工作的方法论上。为了研究用户行为,在人机交互领域已经有十分重要的转变,即包括人类学方面的以用户为中心的研究。另一方面,计算机交互领域很少引用社会学理论作为他们的理论基础。
近期关于交互在设计方面的分析显示,交互可以通过参照设计进程来被理解。例如:为了更加了解用户如何与系统进行交互活动,诸如参与式设计的理论就有为了观察用户参与设计过程的合理方法。在参与式设计中,用户的参与涉及从早期的项目定义阶段,概念设计,概念测试原型开发,原型测试,原型审查,直到最后的项目交付和验证。此外,参与式方法需要一个探索普通人的生活和人们各个层面幸福之间关系的理论。其中一个关于讨论用户行为的理论叫做现象学理论。
尽管事实如此,交互设计原型的设计同样重要,它涉及到一个产品在开始到后来的一个提炼的过程。原型设计的主要目的在于确定问题所在以及修复它们。只有这样用户在使用产品的时候才能更加的有效率和愉快。但是原型设计的方法同样也有其局限性,它限制了与用户真正需要创造的产品原型的讨论。因此,一些对人机交互行为的研究有用的技术仅仅只是对用户所处不同文化的探索和实验室的经验罢了。
3结论
响应式WEB交互设计的目的是一个网站能够兼容多个终端,页面能够自动配适显示设备。具体的实现方式由多方面组成,包括弹性布局、CSS、网站框架等。下面我们来介绍几个常用的响应式页面常用技术。
1.1MediaQueryMediaQuery用于根据不同分辨率尺寸调整相应样式。现在市面上基于IOS系统平台和Android系统平台的移动设备占大多数,同时他们的自带浏览器内核都为webkit内核,所以我们可以使用viewport属性和MediaQuery技术实现网站的响应式交互。这种方法能够非常方便的实现基准字号font-size在不同分辨率下显示完全,不会出现阅读困难。
1.2FluidgridFluidgrid即流体布局。其作用在于将网页上一些元素的框格由固定模式调整为相对模式(如百分百或比例等)。使用Fluidgrid能够使网页根据屏幕的宽度自动调整页面宽度,进而保证页面内容显示完整,原有功能继续可用。
1.3FlexboxFlexbox是css规则总新添加的一种模型属性。它类似于APP结构,展示方式是固定头部与底部,中间部分内容的高度实现自动适应。Flexbox的出现打破了常常使用的原有的浮动布局方式,实现了垂直等高、水平均分、按比例划分。如果希望目前的网站能够以正常的网页方式编写,并且以WabApp的外观显示方式出现在用户面前,那么Flexbox是非常适合的一种方式。
2响应式交互建设流程
2.1确定内容架构根据网站定位以及用户分析,确定网站整体风格、展示结构,如页面层级、页面内容等,对网站进行整体规划,厘清脉络关系。
2.2设计移动框架移动优先理念是基于对移动设备与PC设备之间关系的深刻理解而产生的,移动设备许多特性让设计更全面及强大。比如移动设备上的语音识别、基于地理位置定位、手势操作等,人们发现移动设备交互比PC拥有更多可能性。从移动设备开始让设计师更早思考如何发挥这些特性及优势。
2.3设计响应式框架我们需要基于移动端框架拓展开发出PC端及平板电脑端框架。首先确定响应模式,那么从手机端显示到平板电脑显示再到PC端显示,整个网站布局如何变化,内容如何编排,优先级如何调整等都是需要设计的部分。同时我们需要对规则继续进行细化,即为定制流体栅格系统(屏幕占比)。
2.4模块设计在确定了响应式框架的页面结构以及相应模式后,我们要开始进行模块设计的工作。在产品设计时我们采用了移动优先的理念,但在整个产品的细节设计以及开发过程中,是否采用移动优先原则应根据实际情况具体分析。在这里,PC优先可以充分暴露业务复杂度,而且项目的设计、开发和测试在PC环境下拥有更成熟的工具和流程,因此,在必要的时候采用PC优先理念也是非常合理的。同时我们应注意的是,在开发模块的时候,必须时刻提醒自己:这个模块在当前设备上运行无误,在其他设备下是否会发生问题?
2.5响应式模块设计PC端模块完成后,接下来我们需要根据已设计好的PC端模块拓展出移动设备模块。这些模块必须符合设备习惯,充分利用设备特性,为用户体验带来便捷与舒适。
2.6测试优化这一步需要在真实设备下测试网站效果,并对暴露出的问题进行优化。测试优化内容包括:服务器承载测试及优化,软件性能测试及优化,用户实际体验测试及优化。
3响应式设计优化
该文之前提到过,响应式设计也存在一些自身的问题和弊端,可能会影响到用户体验。那么这些问题和弊端就必须进行进一步的优化处理。
3.1减少HTTP请求次数在目前的网络环境下,移动端用户的数据使用流量是有限制的,可以说这是相较PC端的一个劣势。那么为了节省用户流量,我们可以使用Ajax异步请求来优化页面内部的一些操作。使用服务器端及前端缓存等机制保存页面内短期不会变化的一些数据,这样可以在一定程度上降低用户的数据请求量。
3.2压缩Javascript和CSS将页面内Javascript和CSS进行优化精简之后,可以有效地降低页面大小。
3.3减轻Javascript库负载目前很多响应式交互设计使用jQuery框架,事实上很多页面或许并不需要如jQuery一般强大的交互框架,我们可以用其他轻量级框架进行建设。目前针对移动端状态,有jQueryMobile、YUI、XUI等可供选择的框架。
3.4页面实现逐次加载移动终端设备由于屏幕大小有限,承载的信息量也有限,我们没有必要将全部PC端页面总内容一次性加载完成。我们可以使用逐次加载模式,当用户有继续观看的意愿,并对屏幕做出相应手势时,再继续进行加载新闻或图片。
3.5使用CND进行页面资源管理CDN是英文ContentDeliveryNetwork简写,意即内容分发网络。它的基本思路是将互联网中有可能影响数据传输速度和稳定性的环节避开,保证内容传输的稳定性。
3.6优化图片显示其核心思想是实现用户设备分辨率的自动区分,根据不同分辨率提供不同大小的图片以供用户加载。这样既能使不同终端用户都获得良好的用户体验,同时不会浪费用户数据流量和加载速度。
4优秀的响应式WEB框架
4.1GumbyFrameworkGumbyFramework是一个灵活的响应式框架,它建立在SASS基础之上。SASS是一款CSS预处理器,它功能强大,提供很多新的工具来支持使用者快速自主开发Gumby框架。Gumby的产品更新紧跟最新的行业技术标准和规范,同时支持chrome、firefox、Opera、IE8-10等多种主流浏览器。如果开发者刚刚开始接触响应式交互网站,那么使用Gumby是非常适合的。它自带PSDUI工具包,能够非常方便地帮助制作者开发出一个漂亮的响应式交互布局网站,且不需要太多专业性代码。
4.2FoundationFoundation由位于加州坎贝尔的产品设计公司ZURB设计开发,是目前非常现金的响应式WEB设计框架。它拥有很多布局模板、CSS样式表以及自己开发的优秀JavaScript插件。同时,Foundation强大之处还在于其将SASS有效整合,开发者可以使用Mixins概念简化开发行为,使组件的使用更加简单便捷。
4.3SemanticSemantic优势在于提供一个共享UI以供开发人员和设计师共同协作,共同开发,提升可控范围。Semantic使用自然语言习惯来辅助开发,让开发过程更便捷,同时,Semantic还可以实时进行debug输出,提示代码作用。
4.4PureCSSPureCSS是一款轻量级响应式框架,解压缩后只有5.7KB。它基于Normalize.css框架构建,没有使用任何JavaScript,只使用了HTML和CSS技术。该框架采用模块化结构,每一个模块样式都可以单独使用。
4.5TukTukTukTuk是一个高效快速的响应式CSS3框架,以轻量级的设计和面向对象的CSS为优势,非常容易扩展。5.6KubeKube是一款灵活的CSS框架,包括网格、按钮、表、排版样式等实用功能,可对forms,grids,buttons,tables,typography等属性设置样式,同时提供LESS文件,给开发人员带来了极大的灵活性。
5结语
新时代的到来,产品设计逐渐从“有形”到“无形”在转变。在这个过程中服务设计是必然的考虑因素之一。作为新兴的设计学科,服务设计的内容涉及社会学和心理学层面研究。本论文通过探讨服务设计与交互信息服务的关系,以及交互式信息技术的实现方式与面向使用者的交互式服务平台的构建,注重在服务过程中多触点的交互体验设计,整合现代移动互联网技术和交互式信息服务的移动互联网的应用产品设计。
关键词:
互联网;服务设计;交互信息;多触点
一引言
二服务设计
2.1服务设计工业
2.2交互式服务设计
2.3交互式的设计思维
1用户思维:一切从用户需求出发,考虑用户的各个要素;先做用户访谈和市场调查,然后确定用户类型;在设计人机交互界面时,抓住用户的最大痛点;考虑使用常用的交互模式降低用户学习的门槛;尽量避免使用覆盖式的功能指引。
2系统思维:系统包含的是整个软件的后端组成部分,即用户看不见摸不到的部分。对系统限制因素的掌握可以大幅提高设计的可行性,提升沟通效率。
3场景思维:设计产品可以参考构思故事的方式,讲述你的品牌、设计独特的功能,以让用户留下深刻的印象或获得愉悦感,构思一个故事从设计角度来讲就是构思一个独特的交互场景。
4创新思维:创新能够让产品在竞争中脱颖而出,可以将现有产品升级得更加完美、更加成功。
5协作思维:与团队中的每个角色都保持双向协作关系。为视觉设计师们的设计假设提供证据,通过用户的反馈意见指导视觉设计的优化,通过用户数据来跟开发人员沟通功能的重要性。系统地将用户体验及交互式设计运用到设计学的创新、开发和规划中去,才能产生更好的服务,这样以来服务将会变成产品。掌握好交互式设计的理论基础,才能在信息大数据时代,人、社会和物质世界组成的空间结合在一起。
三结语
参考文献:
[1]丁玥,李洁萍,王雪雯.构建差异化服务产品策略,提高企业竞争力[J].科技创新与应用,2014(28):264-264.
[2]梁日升.浅谈交互设计的设计思维[J].大众文艺,2016(3):138-138.
[3]方健.交互设计在产品中的应用拓展研究[D].中央美术学院,2013.
关键词:公共信息传达;交互设计
交互设计是指设计应考虑人和产品间的互动,要注重用户的背景、使用经验以及在操作过程中的感受。公共信息设计是指所有对人们的行动、操作、理解等需求有指导作用的信息设计,在不同的设计门类中有着不同的设计表达:如机场、酒店等有导向图标;旅游地有平面地图指示。对于产品设计来说,公共信息的提供更是不可或缺的,产品交互设计中公共信息的传达影响着使用者与产品的初始交流。
一、公共信息在产品设计中的应用
设计实质上是一种人工造物的创造行为,是“创造一种更为合理的生存(使用)方式”。围绕产品的使用性有一系列信息要传达,这些信息的表达关系着使用者的操作过程、使用状态甚至使用时的情绪。
(一)操作信息。作为产品的输入系统,可以辅助使用者更好的表达操作想法,操作系统包含操作图标和操作界面两个部分。使用者通过操作系统给产品传达命令。如手机的按键(包括触屏中的界面);汽车的驾驶台;电磁炉操作按键等。在产品设计中,操作信息的应用应遵循支持用户、具有相似性、显而易见、有良好的反馈等原则。
(二)显示信息。很多产品中都有显示界面,尤其是电子类产品,这是产品自身状态的显示,也是对使用和操作的信息反馈。显示信息是人机交互中的另一个重要的方面,产品的使用状态、对使用者操作的反馈及操作后所得信息的表达等,都是显示信息所要做的。怎样有效的排布内容,使用什么样的符号或语言来表达,也是信息显示中重要的设计因素。
(三)使用指导信息。这主要是在产品使用的说明方面,最多的表现方法是使用手册。使用手册是产品与使用者间的一个媒介,对于没有接触过的产品,使用者可以从中了解到产品性能及使用方法。要设计出色的产品使用指导信息,首先要有必要的图片示意图,照片图示是最直观的说明工具;其次,文字讲解要遵循易懂清楚的原则,站在使用者的角度阐述问题。
二、公共信息设计的影响因素
(一)情感交流。在人机交互中,设计师需要捕捉关键信息,觉察人的情感变化,形成预期,进行调整,并对产品做出反应。整个设计的过程是产品与使用者、设计师不断交流的过程,这种交流的最终目的是为将产品推出后,让使用者更愉悦的使用。
(二)用户心理。在产品设计中,使用者是产品交互的主要对象,使用者的状态直接关系着产品的定位。用户在使用产品时无时无刻不受自身生理、心理等因素的影响,设计师要考虑用户使用和观看的心理。如针对老年人设计的操作界面就要考虑到他们自身视觉、理解力的限制,这种限制会导致其在看到小字体时因不够清楚而造成的心理烦躁感。因此这类操作界面设计要符合老年人对字体大小及界面操作流程上的特殊需求。
(三)认知科学。认知科学是研究人类感知和思维信息处理过程的科学,包括从感觉的输入到复杂问题求解,从人类个体到人类社会的智能活动,以及人类智能和机器智能的性质。了解认知科学有助于在产品设计中介入到使用者的角度,对其认知层面上的信息进行开发利用。
三、产品设计中公共信息的发展趋势
在产品交互设计中的信息传达方面,占主要地位的表现方式仍然是视觉传达,于此同时,听觉和触觉也在介入其中。
五感中对人类最为重要的是视觉,人们从外界接受的信息,87%是视觉捕获的,在信息系统设计的表现过程中绝大部分应当以视觉信息为主导。而生活中,视觉障碍者不能通过视觉获得信息,需要利用声音信号来定位自己的方向与位置,所以在弱势人群产品的设计中,听觉信息设计也在尝试并发展。而对于正常人来说,听觉设计在某种程度上也能补充视觉设计中所不能及的部分,并且有着反复信息、加强指引导向的功能。
触觉信息在信息导示设计中也发挥着独特的作用,它通过各种材质的肌理去感受不同的信息内容,主要应用在一些无障碍设计中,可使盲人通过触摸示意图得到一些使用指示。
除上述三感外,人类“五感”中的嗅觉与味觉也被人们所重视,例如在平时的生活过程中不自觉的会通过某种嗅觉及味觉的方式去引导人们做一些事情,并且引发一些寻找行为。可见其在产品设计中的运用也指日可待。
[1]李砚祖从功利到伦理――设计艺术的境界与哲学之道[J].文艺研究.2005.1.
(1)易用性
①文字易懂
②界面简洁
简洁、排列有序的界面和清晰的视觉效果设计,有助于避免杂乱,保持视觉的流动性和连续性,使得界面信息的传达更加有效并符合人的视觉习惯。通常采用相同页面各个视觉元素对齐的方式。
③灵活安全
触摸屏的出现,使得手指与界面可以进行直接的交互,互动更为灵活、便捷,不仅仅局限于鼠标和键盘的单一操作。当用户作出行为请求时,系统要及时给予反馈信息。
(2)简洁性
①色彩设计
人们对于颜色的视觉是有限的,过多的颜色数目会造成眼花缭乱的视觉效果,一般颜色最好控制在3~5种之内。运用明亮的色彩,会更加吸引用户注意力。
②文字设计
文字是传递信息最直接、准确的方式,在交互界面的视觉设计中占有重要比重。一个优秀的文字设计,从编排版式、划分区域到调整布局,都要经过精心规划。