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

网页中交互设计的应用研究摘 要：交互设计又称互动设计，是从“目标导向”的角度解决产品设计方面的问题。交互设计的概念源于20世纪80年代，由IDEO设计公司创始人之一比尔莫格里奇提出。从理论上来看，交互设计在人机工程学的基础上更加强调认知心理学、社会学及行为学的指导作用；从人机交流的实践上来看，交互设计更强调产品对人的反馈交互作用。交互设计是网页界面设计的重要设计环节之一。交互设计的视觉体现表现在用户浏览页面时能够一目了然地知道哪些地方可以进行操作，以便用户迅速锁定目标，完成操作任务。当前，基于web2.0的新一类互联网应用更注重用户的交互作用，本文中所要讨论的界面交互设计就是以用户为中心，探究交互设计如何令用户更轻松更快捷和愉悦地完成界面操作任务，着重强调界面的可用性和易用性。关键词：交互设计 网页界面 人机交流当今社会，互联网作为第四媒体已经将全球信息共享变为现实，它正逐步改变着人们的生活和工作方式。最为明显的特征就是各种各样的基于浏览器的应用充斥在我们身边，随着智能化设备及其功能的日趋增多，新的人机交互不断涌现，用户体验对交互设计的需求越来越明显。计算机或网络与人最直观的接触点就是界面，而致使界面与人之间产生互动交流的就是交互设计。交互设计是一门研究在人机交流过程中人的心理模式和行为模式的学问，并根据研究结果设计出易于用户使用产品的人机交互方式，其涉及学科知识广泛。本篇论文中所谈及的交互设计仅仅是研究计算机信息的图形化用户界面设计领域中的交互如何引导用户体验。2014年11月19日，首届世界互联网大会在浙江乌镇开幕，奇虎360董事长周鸿祎在会上表示：移动互联网的发展带来了智能硬件的繁荣，我们将进入一个万物互联的大数据时代。随着由万维网衍生出的图形用户界面（GUI）被发明，企业的决策者们就开始理解并采纳用户中心设计（UCD）的语言。各大小企业面对扑面而来的网络浪潮，都纷纷投身于电子商务的行列中，建立网站和制作网页来宣传自己的形象，与顾客和群众交流信息，网络营销以及推广活动应运而生。网络营销和推广的根本目的在于争取目标客户，扩大市场影响和突出品牌形象。而一个网站的最终营销效果如何，交互设计就显得尤为重要。由于网站的浏览者受到个人背景、文化水平、行为习惯、对眼前事物的熟悉程度以及期待看到什么内容的影响，他们在网站上看见的内容未必符合设计者的构想。所以设计者要分析物体的内容架构并设计展示方式来引导浏览者注意特定的内容，尽量做到让客户不用思考就可以看出哪里可以进行交互，节约客户时间，提高网页的可用性和易用性。一个拥有好的概念模型的工业产品是不需要说明书的，同理一个好的网页也应该是不言而喻的，一目了然的，自我解释的。本课题中我所要研究的就是让交互设计更好的引导人们的视觉以此来帮助用户更快更好的完成任务。1、 网络时代下的页面交互设计2、 （一）网页界面的视觉元素 1、文本文本是网页界面的主体。在网页界面设计中，文字是传达信息的主要元素，因为文字在平面设计中是一种感性的直观行为，与其他视觉元素相比，文字更具有信息传达的明确性，能够准确地表达信息的内容和含义。设计者可以根据版面需要对文本的字体、大小、颜色和段落等属性进行设计，风格独特的页面文本设置能给浏览者以赏心悦目的感觉。网页中的文本主要有标题、内容信息和文字链接等形式. （1）文字标题 网站的首页或者一条独立的文章一般都会有一个醒目的标题，以告知浏览者网站的主旨或文章的主题。文字标题要简洁明了、引人注目才能得到浏览者的青睐。通常标题应该放置在醒目的位置，使用较大的字体，但是为了保证显示的效果，在网站中通常被设计成图片格式。 （2）内容信息 文字信息是对标题的解读，是传达信息的主体部分。文字信息的作用是任何其他页面构成元素都不能取代的。在页面设计中，由于内容信息通常占得面积比较大，因此对文字信息的字体、大小、颜色和编排方式都要考虑到用户对复杂性和干扰的容忍度而精心设置，以达到较好的浏览效果。 （3）文字链接文字链接是网页中最常见的超链接。文字链接为主页面减轻负担，使页面分区更加明显，同时也方便了浏览者对信息的检索。 2、图形图像图片是除了文字以外最早引入到互联网中的多媒体对象，网站的Logo、页面背景、辅助文字信息和链接等都可以使用图片。相对于文字来说，它传达信息显得更生动、直观，而且图形图像的引入也大大美化了网页的视觉效果。尤其是后来动画和视频的出现，由于动态效果具有很强的视觉冲击力，能够很快吸引浏览者的眼球，所以网页中动画通常是第一视觉中心，在传达信息时动画是非常有效的手段。 图形元素包括标题、链接图标、主图和背景四种，需要特别注意的是主图和背景的运用。背景图片能够烘托主题的表现，同时增加页面的层次感，使网站具有风格而不再单调枯燥。而主图则是突出表现主题。主图一般是页面的视觉中心，它直观性强，能为单调的文字信息增强活力，传递出强烈的视觉信息。 3、色彩色彩是信息传播的符号之一，它能传达或代表某些明确的意义，是设计网页界面时必不可少的视觉元素。由于色彩在人们心中有固定的象征，当看到某种颜色时，自然唤起了人们头脑中储存的视觉经验，从而产生相关的心理感受，这样就达到了信息传播的目的。在网站页面设计中，设计人员一般遵循“总体协调，局部对比”的色彩应用原则，使网站各个页面达到总体和谐统一的效果。网页中色彩的运用没有固定的模式，但也不能毫无节制地采用多种颜色，通常情况下，设计者会根据客户对网站风格的要求来确定主色和辅助色。随着电子商务的迅速发展，越来越多的企业开始注重在互联网中的形象和地位。对于企业网站的设计，设计者会根据企业所在行业、产品特性以及企业的VI系统来确立色彩。很大程度上，一个网站给用户的感官感受是由色彩决定的。色相、色调作用于人的视觉和心理，与人的经验和知识产生联系，使人产生出诸如冷暖、轻重、软硬之类的情感。色彩对于不同国家和地域的人来说具有不同的情感认知，但是大多数人对于色彩的联想意义在某种程度上还是趋于一致的。 4、留白 “留白是中国画构图中形式美的法则之一，它关系着整个画面的协调性和旋律美，体现了一种以虚化实的境界。1”空白是网页界面设计中很容易被忽视的视觉元素，但我们不能低估空白的价值。当一个网页上所有的版面都显示信息非常密集，会不利于浏览者阅读有效信息，引起用户反感，甚至会给人网页制作粗劣的感觉，破坏该网站的形象。因此，在界面设计中适当的留白能够更好的衬托主题、集中浏览者的视线，同时给页面营造视觉上的空间层次，使页面看起来轻松简洁。原研哉的无印良品招贴设计，将空白的形式美感以及留给观者的无限想象演绎的淋漓尽致（见图1.1.3）。 5、交互 交互是网页界面设计中的一个特殊的视觉元素。“所谓交互设计，是指在人与产品或系统之间创建一系列对话3。”一个好的交互设计能够预见人机交流的整个互动过程，它在不妨碍产品和服务的交互行为时能够美化界面，巧妙的设置交互效果甚至能把界面艺术化。交互设计的本质是人与人之间的沟通，网页交互设计师在设计网页时不得不考虑普通人在一般任务执行过程中的耐受力，时刻遵循“以用户为中心”，考虑网页的可用性和艺术性，从而给用户提供愉悦的操作体验和审美享受。 （二）网页中的交互设计 1、界面与交互设计网页界面设计与传统的平面设计有很大的区别，做网页界面设计不得不考虑页面的交互性。网页设计尤为关注用户与产品之间行为上的交互以及二者交互的过程4。网页界面中的所有组件，包括布局，风格，样式等都应该为交互设计服务，交互设计在一定程度上约束着界面设计。例如在网页中主导航的位置，设计者只能根据设计的需要将导航放在页面顶部或者banner下方，并且主导航必须在电脑第一屏的中上部出现，否则就会给用户带来疑惑，造成不良的用户体验，因此在界面设计中无论出于什么原因都不能破坏页面的交互行为。下图1.2.1和图1.2.2你看哪个比较舒服呢？据调查，更多的用户偏爱图1.2.1，因为它更符合我们阅读的视觉流程。 交互设计（Interaction Design）又称互动设计，是从“目标导向”的角度解决产品设计方面的问题。交互设计的概念源于20世纪80年代，由IDEO设计公司创始人之一比尔莫格里奇提出。从理论上来看，交互设计在人机工程学的基础上更加强调认知心理学、社会学及行为学的指导作用；从人机交流的实践上来看，交互设计更强调产品对人的反馈交互作用。当前，基于web2.0的新一类互联网应用更注重用户的交互作用，交互设计致力于了解目标用户的期望，通过对产品界面和人机互动行为进行有效的设计，使产品和用户之间建立一种有机关系，从而能够有效地使用户达到目标。本文中所要讨论的界面交互设计就是以用户为中心，探究交互设计如何令用户更轻松更快捷和愉悦地完成界面操作任务，着重强调界面的易用性和可用性（概念见图1.2.3）。简洁和易于操作是网页界面设计的最重要的原则。Steve Krug将可用性视为交互设计的第一定律。 2、交互设计的发展趋势随着移动互联网上社交需求的不断增长，“以人为中心”的人机交流成为人们日常生活和工作中必不可少的一部分。随之而来的移动终端、个性化主页、企事业单位网站、用户界面的交互式设计已经呈现出跨越式发展趋势。 （1）交互设计的国内发展现状 目前，交互设计在我国各大高校及研究机构还没有形成专门的专业研究领域，只有部分计算机或设计相关专业略有涉及，无论从理论还是成果上看均不成体系。我国的交互设计集中在移动互联网方面，关注的重点是社交网站和电子商务的界面设计以及用户的需求研究3。研究的热点是用户体验，包括构建用户模型、用户界面和产品交互设计等方面。国内的交互设计涉及的领域较为单一，集中在互联网中数字界面设计上，这使得我国网页交互设计和手机界面交互设计等得到飞跃发展。随着交互设计的熟练，交互设计的应用领域得到进一步发展，现在越来越多的交互设计融入到工业产品设计领域，如平板电脑、智能家电等，交互设计的出现为工业产品带来新的竞争优势。国内交互设计的研究对象更多的停留在人机界面的设计上，仅仅能够满足人们基本需求的低层次阶段。由此可见，我国对于交互设计的研究还缺乏对人的情感化相关的研究方法及用户模型。 （2）交互设计的国外发展现状国外交互设计起步较早，但是由于交互设计本身还在属于创建阶段，而且其研究者和实践者来自不同的领域，以致交互设计理论和实践发展不同步，还有很多的问题尚未达成共识。国外的交互设计已经同产品设计及视觉设计等设计领域形成类似的学科。在理论研究上已形成了相对较为完整的方法和理论成果。其中Giles Colborne撰写的简约至上：交互式设计四策略、Steve Krug撰写的DONT MAKE ME THINK、Alan Cooper撰写的About Face 3交互设计精髓和交互设计之路等著作是交互设计研究总结的优秀成果。这些书籍讲解了信息产品界面交互设计、交互产品逻辑设计，并都着重强调了用户体验的重要性，体现出交互设计“以用户为中心”的人性化设计理念。国外研究交互设计涉及的领域非常宽泛，热点集中在教育、文化、游戏、娱乐、用户认知、人机交互设计和时尚设计等众多方面，例如虚拟仿真设计、虚拟交互环境、3D建模、城市规划、儿童教育互动式读物、娱乐领域的多种APP应用以及近几年在电子商务中流行的虚拟购物和虚拟试衣技术等。其研究的重点是用户体验、视觉效果以及人机交互中人的认知程度。由此可见，国外的交互设计研究是围绕“人”展开的，并已经扩展到生活中的诸多方面。换言之，国外的交互设计已经上升到解决生活中的实际问题，关注人们的生活品质和体验，而不再仅仅局限于人与机器的互动上。二、交互设计在网页中的视觉体现 （一）按钮的功能与表现 交互设计是网页设计的重要设计环节之一。交互设计的视觉体现表现在用户浏览页面时能够一目了然地知道哪些地方可以进行操作，以便用户迅速锁定目标，完成操作任务。目前在网页中出现的按钮大致分为两类，一种是具有提交功能的真正意义上的按钮；另一种是表示链接的按钮，有人称之为“伪按钮”。 1、真正意义上的按钮按钮是指具有实现提交功能的作用同时明确标明了当前的操作目的的按钮。例如用户在登陆邮箱时首先输入用户名和密码，然后点击“登陆”按钮，系统就会跳转至个人邮箱界面；用户发送邮件时，点击“发送”按钮，邮件就会发出去。按钮上的文字诠释了整个表单区的内容。按钮和伪按钮最明显的区别，就是伪按钮只是一个指向另一个界面的链接，如果后悔了点击浏览器上的撤销或直接关闭都可以，并不会产生后果。按钮的表现形式可分为系统标准按钮和自制图片按钮两类。系统标准按钮最先是模拟生活中真实的按钮设计的，有明显的立体感 和质感，因而具有易识别和良好的用户反馈效果。由于网站风格和设计者审美的差异，自制图片按钮种类繁杂，在网页中远远不如系统标准按钮那样易于被用户识别。网页中的标准按钮具有一致性和统一性，在一定程度上可以减轻用户的记忆负担。另外，标准按钮通常有点击前、点击、点击后三种状态，使按钮可以给用户传达出更丰富的信息，同时用户能够及时地接收页面的反馈。 2、伪按钮伪按钮其实是页面中最早出现的文字链接，设计者有时为了达到突出某条文字链接的效果或者使页面更美观，故意将文字链接设计成按钮的样子。这样做也许能够达成设计者的目的，但是却破坏了用户的可操作性。伪按钮的使用更多的体现在网页广告中，很多页面弹出的广告上有明显按钮的样式，但是它只是一张图片链接，是图片画面构成的一部分，并没有按钮的功能。甚至有些页面弹出的广告是用户邮箱提示新邮件的样子，当用户误以为真点击后发现弹出的是用户并不感兴趣的页面，这存在很明显的欺骗性，会导致用户迷茫甚至反感。用户在一个滥用按钮的网站，不得不花费精力去分辨真假按钮或文字链接是否自己有必要去浏览。现在电子商务很火爆，多家网店都推出限时或限名额促销活动，图1.2.2中“马上抢购”做成了按钮的样子，给用户一种点击后就是抢购成功的假象，但是其实它只是一个文字链接，点击进入这个产品页面后选择产品，并点击“立即购买”或“提交订单”按钮才算抢购成功。从网页的可用性角度来看，伪按钮是并不被提倡甚至应该被消灭的。因为用户的心理模型导致用户潜意识认为点击按钮就是提交表单。链接和按钮应该有明显的区分，设计者想要突出链接，完全有义务花更多的时间和精力去研究更出色的表现方法，而不是模仿按钮给用户带来困扰。 （二）色彩的交互表现 “色彩催化用户对网页界面的认知，并对用户的情感产生意想之外的作用。6”色彩是我们浏览页面时视觉的第一直观认知。当我们首次打开一个网页，第一被感知的不是页面的框架，也不是网站的信息内容，而是界面的色彩搭配。原则上来说，网站根据客户需求、企业VI系统以及产品特性确定网站主色，力求页面的整体感，各个交互过程中超链接的作用和过渡在色彩上的变化要求是自然的、和谐的。 1、色彩与网页主题好的色彩搭配在网页设计中起到很重要的作用。在网页交互设计中，色彩的对比与协调是对立统一的，网站色彩对比太强会显得页面混乱无主次，对比太弱又会显得平淡缺乏亮点，所以色彩的对比与协调是相辅相成的。不同的主色能够表现出网站不同的主题和风格。下面介绍一下常用色系带给浏览者的感受：红色，是充满热情的颜色，使人感到温暖，对人的刺激性很强。红色容易引起人的注意，会使页面充满活力，但是过多的使用红色很容易使人产生视觉疲劳。在网页设计中，红色首先能够体现节日气氛，喜庆、热闹、激情、狂欢。暗红色能够表现出女性的妖娆与妩媚，而且有高贵、品质、知性的感觉。红色还可以体现产品的能量感和力量感，红色+黑色还有一种古典的感觉。红色还常用于体现美食、食品，给人以味觉的刺激。同时，红色也是一种警示色，具有一定的权威性。橙色，是很活跃的颜色，它能给人带来活力、充满食欲等感觉。橙色在网页设计中运用十分广泛，它是一个很生活化的颜色，可以表现家庭，生活格调。橙色可以表现卡通、童趣，体现轻松、快乐的情绪。橙色表现秋天。橙色还常用于零食和水果产品，属于一种食品色，给人食物新鲜、有食欲之感。橙色与红色相比少了一些视觉冲击，可以体现出一种廉价促销的感觉。黄色，是阳光的颜色，具有活泼轻快的特点，象征着高贵、希望、快乐和光明等。黄色和黑色搭配有很强的视觉刺激性，而且黄黑在生活中常做警示标志。在网页设计中，黄色可以体现年轻、活力、时尚、略有一些高傲的感觉。黄色还可以表现童趣、卡通、趣味的格调。同时黄色也可以用来表现夏季水果类产品。蓝色，是冷色系中最典型的代表色，也是一种很大气的颜色，因为地球和宇宙都常用蓝色表现。蓝色代表科技、理智、沉思、深远、寒冷、凉爽、智慧等，所以在网页设计中蓝色的使用可以令页面看起来专业，体现出一种严谨和庄重的感觉。蓝色是大海和天空的颜色，所以补水类化妆品常用蓝色海底做背景的表现手法，既突出产品的品质感，又传达出干净、清凉、清爽的补水的感觉。暗蓝色是深海和黑夜的颜色，给人幻想、悠远、神秘之感。蓝色因其本身所具有的商务、稳定、安全的格调而常用于科技、数码家电、汽车等行业的页面设计中。绿色，是大自然的颜色，代表新鲜、青春、和平、安逸、健康、和谐、希望等。绿色由于与自然和健康关系密切，能给人清爽舒服的感觉。在网页设计中，由于绿色本身就有绿色环保的特征，所以常用于家装、家居、户外用品等行业。绿色体现生命、健康，因此常用于化妆品和保健品的设计中。绿色还是春天的颜色，代表青春岁月。设计师在设计过程中合理地运用绿色能够大大降低浏览者的视觉压力 2、灰色的运用灰色在网页交互配色中是无可替代的重要角色，它总是不露声色却又恰如其分地存在着，保证了整个页面的平衡与统一。狭义的灰色是黑色和白色混合而成的、只有明度，没有色相和纯度的中间色，它的特性就是视觉识别度不高，经久耐看，具有色彩调和作用。因而在界面交互设计中常使用灰色来陪衬其他色彩。我这里所探讨的是广义的灰色，即有色相但其明度偏高，饱和度、纯度偏低而使视觉识别度偏低的颜色。灰色在交互设计中的常见应用如下： （1）当前场景下该功能不可操作或未被激活。 这在软件的应用中特别常见。使用灰色标识不能进行操作的功能可以直观地给予用户一定的信息暗示，使用户了解当前该功能是否可用，避免用户进行无效操作，提高用户的工作效率（如图2.2.1）。倘若可用功能与不可用功能设计得无区别，当用户点击不可用功能后，系统没有反应，用户会产生疑惑，误以为自己没有点击成功而反复重复操作，不仅会给系统带来伤害，还会造成不愉快的用户体验。如果用户点击后弹出“当前不可用”对话框，这时虽然系统及时给出了反馈，但这无疑浪费了用户的时间。所以在这种情况下，用灰色来表识当前场景下不可操作的功能是最高效的办法。 （2）暗示即将发生的步骤 在页面设计中，将用户未完成的任务设计成灰色，正在进行和已经完成的任务选项会变的有色相和纯度。由于灰色的辨别度很低，所以当出现其他饱和度高的色彩时，会给人一种图标点亮了的感觉。这样的设计可以使用户对任务全局以及自己目前所处的状态有一个清晰的认识。这常用在设计者为用户设置的使用向导上（见图2.2.2），较少的步骤会促进用户快速完成任务，“离目标越近人们就越有动力去完成它，尤其是当成功近在眼前的时候7。”反之则会使用户烦躁，失去耐心而放弃任务。所以我们在设置向导时，应该尽量精炼，最好控制在三到四步就能完成。 （3）弱提示 在设计文字链接时，黑色的下划线会使整个页面看起来生硬不协调，在页面不适合使用其他色彩时，灰色便成了最好的选择。灰色能调和这些矛盾，传达出丰富的信息。灰色能使页面和谐统一，并且突出最主要的内容。在信息分隔中灰色也起到了重要的统一页面作用。如下图2.2.3所示，用浅灰做分割线，很好的降低了页面的视觉噪音；深灰色提示新闻来源，这样设计给感兴趣的浏览者看，不感兴趣用户可以直接忽视。“用户对复杂性和干扰的容忍度不一样，有的人不在乎眼花缭乱的页面和背景噪音，但多数人在乎。所以在设计中，我们要先假定所有的东西都是视觉噪音，除非证明它不是。8” （5）不鼓励用户进行的操作 在设计中，通常站在用户的角度上考虑，要将预想用户需要的功能键设计成醒目的状态，如我们操作软件时通常醒目的是“继续”，而不是“返回”，此时“继续”是有色彩的，而“返回”是灰色的，因为大部分用户都是要进行下一步，只有上一步出错的人才会点击“返回”键。下图2.2.4是用户在卸载360安全卫士时弹出的窗口，此时，企业出于盈利或对用户电脑安全的担忧并不鼓励用户卸载他们的软件，所以将“卸载安全卫士”被设置为灰色，提醒用户再考虑一下是否真的要卸载。三、长安CS75车友会网页交互设计实例 （一）实例背景介绍 本次交互设计网页实例的主题是做长安汽车CS75车友的官方认证俱乐部。目前重庆长安汽车股份有限公司打算在企业官网的导航上加设“车友社”主题一栏。我选择的CS75车友论坛是置于官网的主导航上“车友社”（如下图3.1.1和图3.1.2所示）的二级页面之下的。这个车友社是为重庆长安汽车有限公司所有自主品牌车型的客户提供结交车友、提问答疑、组织活动、畅所欲言的平台。 在官网设立车友社的版块方便企业了解客户的反馈，企业人员可以走到客户中去，认识自己的不足、了解客户的需求，为企业下一步发展找到努力的方向。同时这也使得用户能够有一个值得信赖的平台进行交流互动，当爱车遇到问题时，寻求企业人员或同一车型车友的答疑是最迅速高效的。 （二）交互设计流程在交互设计过程中我们要明白，大多数的用户既不是专家也不是新手，这些大部分用户也很难成为专家，将稳定地停留在中间用户阶段，所以我们的用户大致分为3类（见图3.2.1）。我们要时刻遵循为中间用户优化的原则9。因为我们的用户不都是专家，我们的目的不是吸引新客户，虽然每个人都会在某一阶段扮演新手的角色，是没有人会一直停留在新手阶段。因此交互设计的目标就是让新手迅速并愉悦地成为中间用户，并且让中间用户具有良好的交互体验。由此可见“以用户为中心”的设计原则是以“永久的中间用户”的需求为中心的设计原则。 交互设计遵循“以用户设计为中心（User-Centered-Design, 简称UCD）”的设计原则，在国内目前阶段中的主要使命是通过对界面和操作行为的设计提高产品的可用性。交互设计与界面设计同样是一个设计过程，它从设计之初到结束有一定的步骤和流程。当交互设计师接到一个设计项目时，要仔细考虑怎样规划能够保证产品最后符合其本身的既定功能，同时还可以达到用户体验层面的可用性和易用性。在设计网页时：第一步是任务分析，列出界面要包含的所有信息内容。第二步是建立信息框架，确定页面流程。第三步是统一页面布局（包括分区）。第四步是在页面布局基础上进行原型设计。最后编写设计说明。而交互设计是网页设计大环节中的一个点，抛开杂乱的干扰信息，单纯考虑交互设计在网页中的角色，我们就能得到一个理想化的交互设计行为流程示意图（见图3.2.2）。 （三）网页交互设计的设计原则 在网页的交互设计中，要特别注意交互环节的可视性。界面功能的可视性越高，越能帮助用户发现和了解具体的页面操作方法。交互设计效果要准确表达操作及其效果之间的映射关系，及时做出与用户操作相关的反馈信息，并在特定位置设置限制因素或准确的操作提示以防用户误操作。在整个网站中，要保证同一功能的表现和操作方式具有一致性。下面来谈一谈网页交互设计中的几个通用原则： 1、就近原则网页界面是人们进行信息传递的载体，每个网站都有非常庞大的信息量，但是用户在访问一个网页时通常带着一种选择的心理，他只需完成自己需要的任务即可，并不是网站内所有的信息浏览者都要了解。所以设计者在设计之初就要考虑网站的结构，将同一类或具有联系的功能进行恰当的分类和合理的组织后放在同一页面或下级页面中，使网页具有结构清晰、简单易用的特点。这样访问者就能迅速看到并完成操作任务。过于繁杂的界面和不合理的交互设计，会使用户产生烦躁或厌恶情绪致使网站用户流失。一个好的界面设计，必须要结构清晰，让用户在操作中清晰地知道自己当前所处的位置以及操作状态。 把页面划分为定义明确的区域很重要。因为这可以让用户不必担心漏掉什么，放心地跳过一些区域很快决定关注页面中的哪些区域。据调查，用户会很快锁定哪部分包含有用信息，然后根本不会再看其他版块。图3.3.2即我对长安汽车车友会进行的信息区域划分。 2、容错原则“最好的错误提示就是没有提示，这意味着这套系统的设计可以避免人们犯错10。”然而总有一些原因会导致出现差错，无论是用户使用失误或是产品本身存在缺陷，创建一个不存在任何错误并且保证使用者不会出现失误的软件或产品几乎是不可能的。所以设计者要容许用户犯错，并给用户纠正错误的机会，让客户可以撤销动作（见图3.3.3)。例如，当用户在访问CS75车友会论坛时，在没有登录时是不能发帖或进行回复的，这时候当浏览者点击的“发帖”或“回复”按钮时会自动弹出注册界面。图3.3.3界面提供给用户两条路，即，当用户不想注册时，可以点击界面中的返回，撤销发帖这一动作；当用户已经有账号时，可以点击右上角的弱提示立即登录继续发帖或回复操作。 若用户在执行具体破坏性操作中要求用户确认。当错误已经发生时，要及时给予用户有效的提示，不能仅仅给出“Wrong！”的提示，而是要给用户提供修正方案，这个提示必须告诉用户做了什么、解释出现了什么问题、指导用户怎样修正问题(如图3.3.4所示）。在交互式界面设计中，视觉语言必须简炼、直白和明确，使用主动语态而不是复杂的被动语态，要防止信息误导11 3、帮助原则在设计页面的过程中，不是所有的用户都能马上明白设计者的意图，这个时候设计者可以通过设置向导来设计帮助系统（如使用指南、参考手册等）引导用户完成操作。但是设置向导或“帮助”是在不得已的情况下才使用的，因为用户在浏览网页时是不会对先学习一下怎么怎样使用这个网站感兴趣的，所以通常设计者会通过设计弱提示或辅助信息来帮助用户探索和尝试，为用户提供适当的帮助。例如网页上的一个表单或一个对话框，在没有标题或者辅助信息的情况下，用户很难知道这个是用来干什么的，当然也不会想到自己是否需要使用它（见图3.3.4)。 4、惯用原则习惯性用法是设计师的好帮手。“习惯用法因为有用才成为习惯用法。适当应用习惯用法会使用户在网站之间的访问更容易，不需要花费额外的努力来得到背后的工作原理12。”网页中设计的功能要尽量符合用户习惯和预期，避免用户思考，减少用户记忆负担。例如发邮件时，收件人先显示最近联系人，然后按英文字母排序，在QQ邮箱中是按自己的好友分类排列的，这样很方便用户查找，减少键盘操作。因此，在交互设计中注意运用惯用原则能够减少用户在使用时出现错误。 5、反馈原则信息反馈是人机系统在交互过程中至关重要的一个环节，良好的信息反馈是交互过程顺利进行的前提13。当用户在网页中进行一项操作后，不管操作是正确的还是错误的，系统都应该给客户一个反馈，使用户清楚当前的使用状态。科技并不是万能的，有时候为了掩饰程序的响应速度，设计者们会使用加载条来减少用户的等待感，让用户以为程序原本就是这样运行的。程序反映速度不只是技术的问题，很多情况下与网络环境有很大的关系，所以设计者们为了给予用户操作反馈同时掩饰程序的瑕疵，让用户感觉在使用上是流畅的。没有反馈，用户因为不知道自己的操作是否有效而反复操作甚至重启计算机，这将给用户和产品都带来一定的不利后果。重视系统的反馈，强化用户体验，这是网页交互功能最基本的体现。 6、精简原则“界面中的各种小细节都会给用户的记忆带来负担，就像公路上的减速带或坑坑洼洼一样降低用户的效率14”。在设计中要牢记去除视觉噪音，常问自己是否做出了很多用户不需要的东西。有时候，决定不要什么，比决定要做什么更重要。少即是多，去掉网页中可有可无的、分散人注意力的视觉元素，让用户可以专心完成操作，带给客户良好的用户体验。简洁明了是交互设计中最基本的原则，切记图形图案或文字杂乱无章，要突出主要元素，使页面中的热点一目了然（见图3.3.6）。 Alan Cooper常说好的设计师总是设计更少的用户界面。他所说的“界面更少”不是指页面功能更少虽然有时是这样，但是他在这里强调的是“用户应该只做必要而最少的操作去完成任何一项任务15”。- 0 -结 论在这次论文对网页交互设计的应用研究中，我重新学习和定义了“设计”一词。在写论文之初，我查阅了很多相关书籍及文章期刊，其中对我影响最深的著作有三本唐纳德A诺曼的设计心理学、Steve Krug的别让我思考和Giles Colborne的交互式设计四策略。这三本书都从很细微的方面深入浅出地向读者讲解了简约至上、用户（访客）至上的设计原则。让我对今后的设计之路不再感到迷惘。在论文中我主要将我最近几个月对交互设计的理解，对网站页面设计中交互设计的表现形式、交互设计的设计原则，以及交互设计如何引导用户体验进行了整理和总结。网站是人与人或企业与客户之间双向沟通的桥梁，归根结底是供用户使用的。网站的存在是为了给用户提供便利，为了更好的为用户服务。由此可见，简洁和易于操作是网页界面设计的最重要的原则。诺曼告诉我们合理的利用限制因素、预设用途和匹配原则来做我们设计的帮手；Giles Colborne说有限的选择用户会更喜欢；Steve Krug将可用性第一定律定义为“别让我思考”。很多设计者喜欢通过设置操作向导的方式把一项任务分成几个步骤，企图以此达到教学及简化页面的目的。但其实向导意味着剥夺了用户的自主权，用户会感觉受到了向导的限制。设计一个简短的向导也许效果不错，但是向导的过程越长会导致用户的体验效果越差。这次的学习改变了我对设计的很多看法，同时也使我补充了很多专业理论知识，而且我也在尝试着将这些理论知识融入到自己的设计作品中去。今后的工作与学习中都是一直不断补充知识的过程，我将带着好学之心继续研究与学习。