网页中交互设计的应用研究

-1-网页中交互设计的应用研究摘要：交互设计又称互动设计，是从“目标导向”的角度解决产品设计方面的问题。交互设计的概念源于20世纪80年代，由IDEO设计公司创始人之一比尔·莫格里奇提出。从理论上来看，交互设计在人机工程学的基础上更加强调认知心理学、社会学及行为学的指导作用；从人机交流的实践上来看，交互设计更强调产品对人的反馈交互作用。交互设计是网页界面设计的重要设计环节之一。交互设计的视觉体现表现在用户浏览页面时能够一目了然地知道哪些地方可以进行操作，以便用户迅速锁定目标，完成操作任务。当前，基于web2.0的新一类互联网应用更注重用户的交互作用，本文中所要讨论的界面交互设计就是以用户为中心，探究交互设计如何令用户更轻松更快捷和愉悦地完成界面操作任务，着重强调界面的可用性和易用性。关键词：交互设计网页界面人机交流当今社会，互联网作为第四媒体已经将全球信息共享变为现实，它正逐步改变着人们的生活和工作方式。最为明显的特征就是各种各样的基于浏览器的应用充斥在我们身边，随着智能化设备及其功能的日趋增多，新的人机交互不断涌现，用户体验对交互设计的需求越来越明显。计算机或网络与人最直观的接触点就是界面，而致使界面与人之间产生互动交流的就是交互设计。交互设计是一门研究在人机交流过程中人的心理模式和行为模式的学问，并根据研究结果设计出易于用户使用产品的人机交互方式，其涉及学科知识广泛。本篇论文中所谈及的交互设计仅仅是研究计算机信息的图形化用户界面设计领域中的交互如何引导用户体验。2014年11月19日，首届世界互联网大会在浙江乌镇开幕，奇虎360董事长周鸿祎在会上表示：移动互联网的发展带来了智能硬件的繁荣，我们将进入一个万物互联的大数据时代。随着由万维网衍生出的图形用户界面（GUI）被发明，企业的决策者们就开始理解并采纳用户中心设计（UCD）的语言。各大小企业面对扑面而来的网络浪潮，都纷纷投身于电子商务的行列中，建立网站和制作网页来宣传自己的形象，与顾客和群众交流信息，网络营销以及推广活动应运而生。网络营销和推广的根本目的在于争取目标客户，扩大市场影响和突出品牌形象。而一个网站的最终营销效果如何，交互设计就显得尤为重要。由于网站的浏览者受到个人背景、文化水平、行为习惯、对眼前事物的熟悉程度以及期待看到什么内容的影响，他们在网站上看见的内容未必符合设计者的构想。所-2-以设计者要分析物体的内容架构并设计展示方式来引导浏览者注意特定的内容，尽量做到让客户不用思考就可以看出哪里可以进行交互，节约客户时间，提高网页的可用性和易用性。一个拥有好的概念模型的工业产品是不需要说明书的，同理一个好的网页也应该是不言而喻的，一目了然的，自我解释的。本课题中我所要研究的就是让交互设计更好的引导人们的视觉以此来帮助用户更快更好的完成任务。一、网络时代下的页面交互设计二、（一）网页界面的视觉元素1、文本文本是网页界面的主体。在网页界面设计中，文字是传达信息的主要元素，因为文字在平面设计中是一种感性的直观行为，与其他视觉元素相比，文字更具有信息传达的明确性，能够准确地表达信息的内容和含义。设计者可以根据版面需要对文本的字体、大小、颜色和段落等属性进行设计，风格独特的页面文本设置能给浏览者以赏心悦目的感觉。网页中的文本主要有标题、内容信息和文字链接等形式.（1）文字标题网站的首页或者一条独立的文章一般都会有一个醒目的标题，以告知浏览者网站的主旨或文章的主题。文字标题要简洁明了、引人注目才能得到浏览者的青睐。通常标题应该放置在醒目的位置，使用较大的字体，但是为了保证显示的效果，在网站中通常被设计成图片格式。（2）内容信息文字信息是对标题的解读，是传达信息的主体部分。文字信息的作用是任何其他页面构成元素都不能取代的。在页面设计中，由于内容信息通常占得面积比较大，因此对文字信息的字体、大小、颜色和编排方式都要考虑到用户对复杂性和干扰的容忍度而精心设置，以达到较好的浏览效果。（3）文字链接文字链接是网页中最常见的超链接。文字链接为主页面减轻负担，使页面分区更加明显，同时也方便了浏览者对信息的检索。2、图形图像图片是除了文字以外最早引入到互联网中的多媒体对象，网站的Logo、页面背-3-景、辅助文字信息和链接等都可以使用图片。相对于文字来说，它传达信息显得更生动、直观，而且图形图像的引入也大大美化了网页的视觉效果。尤其是后来动画和视频的出现，由于动态效果具有很强的视觉冲击力，能够很快吸引浏览者的眼球，所以网页中动画通常是第一视觉中心，在传达信息时动画是非常有效的手段。图形元素包括标题、链接图标、主图和背景四种，需要特别注意的是主图和背景的运用。背景图片能够烘托主题的表现，同时增加页面的层次感，使网站具有风格而不再单调枯燥。而主图则是突出表现主题。主图一般是页面的视觉中心，它直观性强，能为单调的文字信息增强活力，传递出强烈的视觉信息。3、色彩色彩是信息传播的符号之一，它能传达或代表某些明确的意义，是设计网页界面时必不可少的视觉元素。由于色彩在人们心中有固定的象征，当看到某种颜色时，自然唤起了人们头脑中储存的视觉经验，从而产生相关的心理感受，这样就达到了信息传播的目的。在网站页面设计中，设计人员一般遵循“总体协调，局部对比”的色彩应用原则，使网站各个页面达到总体和谐统一的效果。网页中色彩的运用没有固定的模式，但也不能毫无节制地采用多种颜色，通常情况下，设计者会根据客户对网站风格的要求来确定主色和辅助色。随着电子商务的迅速发展，越来越多的企业开始注重在互联网中的形象和地位。对于企业网站的设计，设计者会根据企业所在行业、产品特性以及企业的VI系统来确立色彩。很大程度上，一个网站给用户的感官感受是由色彩决定的。色相、色调作用于人的视觉和心理，与人的经验和知识产生联系，使人产生出诸如冷暖、轻重、软硬之类的情感。色彩对于不同国家和地域的人来说具有不同的情感认知，但是大多数人对于色彩的联想意义在某种程度上还是趋于一致的。4、留白“留白是中国画构图中形式美的法则之一，它关系着整个画面的协调性和旋律美，体现了一种以虚化实的境界。[1]”空白是网页界面设计中很容易被忽视的视觉元素，但我们不能低估空白的价值。当一个网页上所有的版面都显示信息非常密集，会不利于浏览者阅读有效信息，引起用户反感，甚至会给人网页制作粗劣的感觉，破坏该网站的形象。因此，在界面设计中适当的留白能够更好的衬托主题、集中浏览者的视线，同时给页面营造视觉上的空间层次，使页面看起来轻松简洁。原研哉的《无印良品》招贴设计，将空白的形式美感以及留给观者的无限想象演绎的淋漓尽致（见图-4-1.1.3）。5、交互交互是网页界面设计中的一个特殊的视觉元素。“所谓交互设计，是指在人与产品或系统之间创建一系列对话[3]。”一个好的交互设计能够预见人机交流的整个互动过程，它在不妨碍产品和服务的交互行为时能够美化界面，巧妙的设置交互效果甚至能把界面艺术化。交互设计的本质是人与人之间的沟通，网页交互设计师在设计网页时不得不考虑普通人在一般任务执行过程中的耐受力，时刻遵循“以用户为中心”，考虑网页的可用性和艺术性，从而给用户提供愉悦的操作体验和审美享受。（二）网页中的交互设计1、界面与交互设计网页界面设计与传统的平面设计有很大的区别，做网页界面设计不得不考虑页面的交互性。网页设计尤为关注用户与产品之间行为上的交互以及二者交互的过程[4]。网页界面中的所有组件，包括布局，风格，样式等都应该为交互设计服务，交互设计在一定程度上约束着界面设计。例如在网页中主导航的位置，设计者只能根据设计的需要将导航放在页面顶部或者banner下方，并且主导航必须在电脑第一屏的中上部出现，否则就会给用户带来疑惑，造成不良的用户体验，因此在界面设计中无论出于什么原因都不能破坏页面的交互行为。下图1.2.1和图1.2.2你看哪个比较舒服呢？据调查，更多的用户偏爱图1.2.1，因为它更符合我们阅读的视觉流程。交互设计（InteractionDesign）又称互动设计，是从“目标导向”的角度解决产品设计方面的问题。交互设计的概念源于20世纪80年代，由IDEO设计公司创始人之一比尔·莫格里奇提出。从理论上来看，交互设计在人机工程学的基础上更加强调认知心理学、社会学及行为学的指导作用；从人机交流的实践上来看，交互设计更强调产品对人的反馈交互作用。当前，基于web2.0的新一类互联网应用更注重用户的交互作用，交互设计致力于了解目标用户的期望，通过对产品界面和人机互动行为进行有效的设计，使产品和用户之间建立一种有机关系，从而能够有效地使用户达到目标。本文中所要讨论的界面交互设计就是以用户为中心，探究交互设计如何令用户更轻松更快捷和愉悦地完成界面操作任务，着重强调界面的易用性和可用性（概念见图1.2.3）。简洁和易于操作是网页界面设计的最重要的原则。SteveKrug将可用性视为-5-交互设计的第一定律。2、交互设计的发展趋势随着移动互联网上社交需求的不断增长，“以人为中心”的人机交流成为人们日常生活和工作中必不可少的一部分。随之而来的移动终端、个性化主页、企事业单位网站、用户界面的交互式设计已经呈现出跨越式发展趋势。（1）交互设计的国内发展现状目前，交互设计在我国各大高校及研究机构还没有形成专门的专业研究领域，只有部分计算机或设计相关专业略有涉及，无论从理论还是成果上看均不成体系。我国的交互设计集中在移动互联网方面，关注的重点是社交网站和电子商务的界面设计以及用户的需求研究[3]。研究的热点是用户体验，包括构建用户模型、用户界面和产品交互设计等方面。国内的交互设计涉及的领域较为单一，集中在互联网中数字界面设计上，这使得我国网页交互设计和手机界面交互设计等得到飞跃发展。随着交互设计的熟练，交互设计的应用领域得到进一步发展，现在越来越多的交互设计融入到工业产品设计领域，如平板电脑、智能家电等，交互设计的出现为工业产品带来新的竞争优势。国内交互设计的研究对象更多的停留在人机界面的设计上，仅仅能够满足人们基本需求的低层次阶段。由此可见，我国对于交互设计的研究还缺乏对人的情感化相关的研究方法及用户模型。（2）交互设计的国外发展现状国外交互设计起步较早，但是由于交互设计本身还在属于创建阶段，而且其研究者和实践者来自不同的领域，以致交互设计理论和实践发展不同步，还有很多的问题尚未达成共识。国外的交互设计已经同产品设计及视觉设计等设计领域形成类似的学科。在理论研究上已形成了相对较为完整的方法和理论成果。其中GilesColborne撰写的《简约至上：交互式设计四策略》、SteveKrug撰写的《DON’TMAKEMETHINK》、AlanCooper撰写的《AboutFace3交互设计精髓》和《交互设计之路》等著作是交互设计研究总结的优秀成果。这些书籍讲解了信息产品界面交互设计、交互产品逻辑设计，并都着重强调了用户体验的重要性，体现出交互设计“以用户为中心”的人性化设计理念。国外研究交互设计涉及的领域非常宽泛，热点集中在教育、文化、游戏、娱乐、用户认知、人机交互设计和时尚设计等众多方面，例如虚拟仿真设计、虚拟交互环境、3D建模、城市规划、儿童教育互动式读物、娱乐领域的多种APP应用以及近几年在-6-电子商务中流行的虚拟购物和虚拟试衣技术等。其研究的重点是用户体验、视觉效果以及人机交互中人的认知程度。由此可见，国外的交互设计研究是围绕“人”展开的，并已经扩展到生活中的诸多方面。换言之，国外的交互设计已经上升到解决生活中的实际问题，关注人们的生活品质和体验，而不再仅仅局限于人与机器的互动上。二、交互设计在网页中的视觉体现（一）按钮的功能与表现交互设计是网页设计的重要设计环节之一。交互设计的视觉体现表现在用户浏览页面时能够一目了然地知道哪些地方可以进行操作，以便用户迅速锁定目标，完成操作任务。目前在网页中出现的按钮大致分为两类，一种是具有提交功能的真正意义上的按钮；另一种是表示链接的按钮，有人称之为“伪按钮”。1、真正意义上的按钮按钮是指具有实现提交功能的作用同时明确标明了当前的操作目的的按钮。例如