第 2 章 基于用户体验的网页交互设计
2.1 用户体验的阐述
近年来，“用户体验（UE）”一词尤为流行，它指的是目标使用群体通过亲身经历与参与，在内心中对客观事物所建立的一种主观的感受、看法和评价。用户体验是一个十分宽泛的概念，涉及人们生活中的方方面面。有产品，且有人在使用，就会产生体验。用户体验既是对产品是否好看、好用、能否赢得用户芳心的最有效评判，同时也是用户在产品使用前、使用过程中以及使用后的一系列心理情感的流露，囊括了用户对产品的全部感受，包括知觉、印象、情感、信仰、信念、喜好、生理和心理反应、行为等诸多方面。星巴克就是一个十分注重体验之道的成功案例。在这里，消费者总是能够被美妙的体验所包围。它也许来源于一杯高品质、口感地道香醇的咖啡；或是店内热情、贴心的服务；又或是舒适座椅、轻缓音乐以及暖色墙面烘托下一流的环境和雅致的氛围。无论是安静的阅读、与友人闲聊、网络办公还是项目洽谈，这里都成为了消费者寻求生活平衡的最好去处，能够真正让客户放松下来享受这份自在与闲适。在星巴克处处流露出一种慢生活的态度，它的文化和品牌形象更是深入人心，有力的占据了消费者的心智地盘，于无形之中使客户的忠诚度大大提升，成为了现代都市人除家以外最留恋的地方。
就互联网行业来说，用户体验是指用户在与计算机进行交互过程中的全部体验，即用户在访问网站平台时所形成的所有认知、记忆和感受。它具有以下三个特征。第一，主观性。体验是一个较为主观抽象的概念，它受个体差异的影响，没有一个确切的评判标准。由于每个人的喜好、思维方式、心理状态、情感诉求等不同，造成的产品作用在用户身上的表现方式也不相同。即使是相同的产品或服务，不同的用户也可能获得完全不同的体验，给出不一样的评价。就像淘宝中同一件商品的出售，同样的服务过程，网站中就会出现千万条不同的评价，有好评也有差评。第二，整体性。用户体验不仅是网站中某一部分的体验，而是包括了网站内容、界面、交互、效率等在内的各个部分的总和，是整个网站呈现给用户的总体性的感受。第三，情境性。也就是用户在使用计算机时的环境和情境。
由于环境和情境是经常改变的，具有很大的不确定因素，所以造成用户体验也会常常发生变化。那么什么样的用户体验才称得上是最佳的？首先，用户与网站之间的互动过程一定是非常享受的，用户如同孩子沉迷于他喜爱的玩具一般，能够全心全意的沉浸其中。其次，用户与网站的互动频率十分频繁并格外关注该产品或服务，成为该网站或产品的忠实粉丝。就如同当今盛传的一句口头语一样：“有问题、找度娘”,足以证明用户对百度网站及其公司的信赖和忠诚。此外，衡量一个网站用户体验是否足够友好，也有相对明确的评判标准。主要包含以下五个方面。第一，网站界面的美观程度，能否带给用户良好的视觉、听觉、触觉等感官体验；第二，网站带给用户怎样的认知以及能帮助用户解决什么样的问题，是否存在访问漏洞或令人疑惑的地方，也就是网站使用户获取怎样的思考体验；第三，网站的互动方式是否合理、过程是否流畅，功能上是否易用，即网站具备怎样的行为体验；第四，网站整体气质如何，用户在与网站互动时态度和情绪是怎样的，具备什么样的情感体验；第五，应用环境、情景、文化、民族等差异对一个网站的影响，使得带给用户怎样的关联体验。这五个方面综合起来，在网页设计中相互影响、缺一不可，共同带给用户最佳的用户体验。
2.2 交互设计的阐述
交互一词（英文 interaction），可将其分解为“相互之间（英文 inter-）”和“行为（英文 action）”,简单的说，也就是人与物之间的互相交流、互相作用。就计算机而言，它指的是人在进行计算机的行为操作后，计算机收到相应指令并给人以反馈，从而再次影响人的下一步行为操作的一系列循环往复的过程。
设计，就是一种方法、手段、措施。交互设计，又叫互动设计，是研究如何通过合理的方式、手段使人与物进行有效对话与沟通的学科，它的出现与计算机的发展息息相关。伴随着二十世纪中后期，IBM 公司研发的第一台个人电脑 5150 的诞生，计算机逐渐走入了人们的视野，尽管带来了意味人类计算机水平标志性提高的喜悦，但随之也引发了一系列问题，晦涩难懂的计算机语言、复杂的操作步骤、呆板单调的界面、大块的体积使得很多用户望而却步，不愿意去尝试、学习和使用这些操作指令，因而这款电脑的发明在市场中的反响并不乐观，也没有让人们感受到极大的便捷与高效，反而觉得十分陌生，比较难用。于是，人们迫切想要改变这一现状，设计出一款让用户感觉亲切又具备友好功能的产品。至此，人去适应计算机的思想逐渐向计算机如何更好的为人类服务的观念进行转变，交互设计应运而生。
交互设计最早是由工业设计大师比尔·莫格里奇在 1984 年提出的。在交互设计出现之初，常常被认为与视觉设计相类似，突出的是怎样让界面的呈现更加漂亮，然而两者却有本质上的区别。如果网站只通过好看的界面来吸引用户的访问，仅仅带给用户静态的浏览体验，供用户去欣赏，而缺乏实际的有用性和易用性，就会很难长久的留住用户，降低用户对网站的忠诚度。
与视觉设计不同的是，交互设计不仅仅关注于网页的内容和表现形式，更着眼于用户的行为，强调的是用户在使用计算机时一系列的动作设计，更加关注用户在使用过程中的体验与感受。交互设计在传统设计、可用性和工程学科的影响下，它要求时刻从用户的角度出发，理解用户的认知与心理，以用户的预期与行为习惯为依据，通过对用户需求的准确把控，呈现出简洁优化的操作界面、合理易用的互动方式，从而使用户获得亲切、友好的体验。
2.3 交互设计的构成要素
交互设计作为着重设计一系列行为和反馈的学科，它是由用户、行为、工具、目的、环境这五个方面构成的，如图 2.3 所示。这也是国际体验设计专业委员会（IXDC）副主任委员、卡耐基梅隆大学设计哲学博士--辛向阳教授在广州举办的首届“2010 中国交互设计体验日”大会上反复提到的。他意在告诉设计师，在进行网页交互设计时，首先要明确为什么要做这个交互，即交互的目的是什么，通过执行相应的操作步骤来完成怎样任务；做这个交互行为的过程是怎样的，也就是在互动流程中的一系列动作的设计；参与进行交互的人有哪些，分析用户群体的差异与喜好以及他们在实际操作中有怎样的认知和使用习惯；用户在什么样的环境下进行交互，比如嘈杂、昏暗、寂静、行走等等，其网速是怎样的；以及用什么样的工具来更好的实现交互。这五个方面相互作用、缺一不可，共同影响了网页中的交互设计。
2.4 交互设计的法则
2.4.1 了解用户是前提
用户是人机互动的主体，是产品的最终使用者。对于一个网站而言，用户指的是浏览网页、与网站进行互动的人，是交互设计最重要的组成部分，也是进行交互设计时，首要必须考虑的关键因素。美国着名的互动设计理论家、认知心理学家--唐·诺曼（Don Norman）曾说过：如果在用户界面设计和人机交互领域中有任何神圣的原则，那必然是“了解你的用户”
2.这里所说的用户并非是所有人，它指的是使用某一产品、技术和服务的特定人群，又被成为用户角色。网站中的用户角色，从广义上讲，主要包括两方面：一是指网站常驻的目标使用群体；二是网站未来潜在的使用群体，也就是弹性用户群体。要想准确的了解目标用户群体，就必须深入用户中去，倾听用户的心声。运用用户调研的方法，通过对真实用户群体中的大多数进行观察、走访、问卷、电话等调查方式，对受众群体的性别、年龄、职业、文化程度、收入、日常圈子、生活环境等诸多方面进行全面的分析与梳理，完成对相关数据信息的归纳、比对与总结，从而了解产品概念在用户心中的心理预期以及用户的实际需求，将整合后的用户意见恰当的运用到网页交互设计的界面中去，最后绘制出几个备选方案。当然，这并不等于大功告成，新一轮的用户调研又将开始，通过将起草的方案效果图供目标用户投票选择，最终定出最佳方案，进行制作。
了解目标用户的核心在于读懂用户内心真实的渴望与诉求，清楚的知道用户最想要的是什么。诚然，每一个用户都是一个独立的个体，受上述所调查的年龄、性别、教育、生活环境等因素的不同，对同一事物的理解与认知也有些许差异。
这就要求设计师要学会抽丝剥茧，既能够抓住用户的共性，为大多数使用者进行设计，同时，又要注重用户之间的差异，为不同用户群体进行量身打造，只有这样，才能真正使网页设计具有有效性、针对性，迅速抓住受众群体的心，让用户有种私人定制的感觉，以赢得更多用户的喜爱。此外，这种同时从目标用户群体共性与个性的角度出发进行的网页交互设计，与其它网页相比，往往具有更多的亮点，更容易在众多网页中脱颖而出，增加网页的亲和力，从而提升用户对网页的新鲜感。
如图 2.4.1.1 为易迅网和美丽说官网比对图，两个同为电子商务类购物网站，都是为用户提供购买、支付、售后等一系列服务的网上商城，因而两者的功能模块都基本相同，都具备注册、登录、商品搜索、我的购物车、我的订单、用户中心等功能，但由于两者间所针对的用户群体的差异，网站界面的视觉呈现完全不同。易迅网主营数码、家电产品，其用户群体多为男性，因而页面以大面积的蓝色调为主，界面中对光的打造、星空的运用随处可见，使得画面动感十足。通过水平、垂直线条所构成的矩形分割，强化了页面中的体块感，给用户呈现了更加硬朗、男性化、沉稳中又不失活力、富有高科技的视觉效果。然而，对于以主营流行、时尚为主的快销服饰的美丽说而言，它的用户群体多为 18-25 岁的年轻女性，因而界面在色彩上以粉色的暖色调为主，画面中较少的体块分割与曲线图形、图标的运用，使得网站的视觉对比度较弱，画面更加柔和，整个网站烘托出了一种温暖、可爱、女性化视觉氛围，受到了众多女生的喜爱。
除了了解用户内心中真实的期望外，还必须对用户认知与行为进行深入研究。认知，就是用户对一件事物的认识与感知，是基于客观事物所形成的主观感受和评价。具体说来，就是将人们通过视觉、听觉、触觉等感官器官接收到的信息，在人脑中进行判断、加工、处理，继而形成一定看法的过程。由于用户所处生长环境、文化水平的不同，用户的认知也存在差异。
行为指的是用户与计算机之间进行的操作，顾名思义，也就是用户在浏览网页时利用鼠标和键盘对界面进行控制。行为是交互设计的核心，也是最重要的元素。
当电脑还处于要执行相应操作必须事先输入特定指令的时候，杰夫·拉斯金已经用他极具前瞻性的眼光开辟了在图形化界面中简单、便捷的交互操作模式，并发明了鼠标 “点击”和“拖拉”的操作功能。这些创造对现代交互设计中的行为研究做出了重大贡献，并给予了重要启示。在杰夫·拉斯金的影响下，人们对于 PC端的交互行为不断的进行探索，对于鼠标的操作功能给予了更多的延伸和扩展，使得当今网页中的交互行为更为合理化、多样化。用户在浏览网页时最常见的交互行为有：鼠标移动、左键单击、左键双击、左键拖拽、右键单击、右键拖拽、滑轮向上滚动、滑轮向下滚动、中键单击（点击滑轮）。而对用户在实际操作中的调查得知，使用频率最高的莫过于鼠标移动、左键单击与滑轮的上下滚动。
在网页交互设计中，用户的认知与行为有着直接必然的联系。通常，固有的认知会支配着用户的操作行为。例如，在图 2.4.1.2 中，当看到人物头像和锁的图标时，登录框中即使没有任何过多的文字介绍，用户也会很容易就明白此处是要输入用户名和密码，这就是一个认知支配行为的典型案例，用户在日常重复多次的操作后，会在脑海中对相应的符号指令所形成的操作结果构成一定的认知记忆，当再次出现相类似的情况时，留在人脑中的认知记忆便会支配着用户的行为，继而发出操作指令。此外，行为也会反作用于认知。良好的交互行为，就如同一次愉悦的旅行，总让人记忆犹新、念念不忘，于无形中使用户对该网站颇具好感，从而潜意识里具有很高的接受度和认可度，提高了用户对网站的忠诚度。相反，当用户的行为受到界面或者交互流程的干扰时，就会增加其认知阻力，加重用户的记忆负担，用户在无法及时、准确在头脑中找到相关认知后，就很容易产生怀疑、不信任的负面情绪，从而使用户对网页持否定态度，最终导致页面中用户蹦失率升高。
2.4.2 尊重用户的操作习惯是关键
习惯来源于对熟知事物所形成的惯性的思维模式，是一种长期反复发生的行为方式。在使用网页的过程中，面对新的事物或遇到一些问题和状况时，用户在大脑中经过一系列的思考后，做出一定的反应，继而发出相应的行为指令，当这些事物和问题多次出现后，思考的过程不断缩短，直至被省略，用户本能的条件反射般发出惯常的行为作为回应，这就是用户的操作习惯，它是一种无意识下的行为方式。例如，在中国时常可以看到许多苹果电脑中装的是 Windows 或者含有Windows 的双系统。究其原因，一部分是因为 Mac OS X 操作系统的开源性较为受限，但最主要的还是与用户以往的操作习惯差异较大。比如在 Windows 操作系统中用户习惯性的会点击右上角的叉号来关闭页面，点击左上角向左的箭头来返回到上一步操作，鼠标滚轮向下滑动页面往上走，呈现的是下部的内容。而面对近几年风靡的苹果电脑中的 Mac OS X 操作系统，关闭和返回按钮的位置都被至于左上角，鼠标滚轮向下滑动页面往下走，呈现的是上部的内容，一些快捷键的使用也有较大差别。对于 Windows 系统的使用者约占 90%的大陆用户而言，其普及时间之久、范围之广使得用户早已习惯了它的界面呈现和交互方式，很多在 Windows上的使用习惯在苹果电脑的 Mac OS X 操作系统下无法得以延续，而关于 Mac OS X操作系统的使用引导的宣传力度也远远不够，从而造成了很多用户觉得麻烦、难用的感受。这个例子直接、浅显的表明了，用户操作习惯的养成不是一早一夕，而是在长年累月的长期实践的考验中所形成的，操作习惯一旦形成也是不易改变的，强制改变用户已有的习惯，接受一个新的操作模式往往困难重重。
由上述案例可知，在进行网页交互设计时，学会尊重用户已有的操作习惯是多少重要。人们总是会倾向于按照自己所熟悉的方式做事。在网页中就存在着一些基于用户习惯下的默认设计规范，比如，logo 的位置一般要放置页面左上角，导航栏常放置于页面顶部，下拉滚动条一般置于页面右侧，页面最底部的内容一般为版权信息或版本号等等。尊重用户的这些操作习惯，不仅在很大程度上减少了网页中的交互障碍，降低用户的学习成本，而且更容易最大限度的留住用户，提升用户对页面的忠诚度。
当然，用户的操作习惯并不是一成不变的。网页中的交互设计，也并非是墨守成规，当固有的操作习惯不能够有效的满足用户的使用，甚至带来诸多不变时，亦或是有明显的好于往常操作习惯的新的行为模式出现时，用户就会抛弃以往习惯，尝试接受更优化、高效的操作行为。
如图 2.4.2 所示，就像乔布斯开创了 iphone 带来的触屏手机时代取代了以诺基亚为首的老式的按键手机一样，即便是轰动一时的诺基亚 n97 也没能真正实现交互方式的创新，而 iphone 大刀阔斧的抛弃了昔日真实键盘的概念，转向了全部虚拟触摸的行为操作，这不仅替代了旧有的笨拙、厚重、费时费力的按键操作方式，还创造性的为用户提供了最大化的屏幕尺寸。以简约的界面、简化的交互流程、大屏幕的可视窗口以及轻量化的体积迅速受到了用户的追捧，这就是突破的力量。然而，这种对用户操作习惯的革新，并非是一挥而就，它是建立在对原有习惯做出深入研究、确信会给用户带来较大益处，并且在用户可接受的范围之内，而不会令其感到困扰的基础之上的一种渐进式的过程，沿用好的行为习惯，改善不合理操作，不断创新，在实践中持续引导用户行为，创造出让用户惊喜又行之有效的操作方式。否则，应尽量尊重用户已有的操作习惯，遵循长期以来所总结出的网页中成熟的设计规范，减少产品在用户心中的陌生感、距离感，将用户的学习成本降至最低，为用户提供一个认可度高、易上手的行为方式，呈现出亲切、友好的操作界面。
2.4.3 效率优先，为用户节省时间
面对当今这个竞争激烈的时代，人们的生活节奏不断加快，每天被海量的网络信息所包围，使得越来越多的用户变得烦躁且缺乏耐性，如何提高一个网页的效率和速度，使用户工作的更加快速、便捷，减少用户流失，给用户浮躁的内心中一点安抚，成了众多设计师和公司长久追寻、努力实现的目标。调查显示，网站在一秒以内的显示或跳转，常常使用户感到交互是及时的、响应的；三秒以内的延迟，用户通常是可以接受与适应；十秒以内的，会让用户产生怀疑与困惑；而超过十秒以上的加载，用户往往会将其关闭。由此可见，效率和速度直接影响着用户对网站的第一印象，也是取决于用户满意与否的重要因素。
提高网站效率的有效方式之一就是扭转思想，做简单的设计。常常可以看到一些网站集炫酷动效、影音，精美的图标、优质的图片于一身，但却没有受到用户的赞美与喜爱。因为比起页面中各种视觉元素造成的干扰，使其不知所措，用户反而更倾向于简单、高效的设计，网页中的内容能够较少的受网速和设备的影响，直观、醒目的展现出来，强调页面的响应速度。如同扁平化的图标依照其独有的易于识别、所占存储空间小、加载速度快的特点，从产生之初就一路风靡，渐渐代替了拟物化图标的设计。
如图 2.4.3.1 是一个网站建设团队的首页界面，整个界面采用扁平化的风格，简洁的图形、单色的背景填充、代码实现的动态的交互效果，除此之外，没有任何多余的装饰，使得网站在打开的 0.1 秒后就能完全显示，用户在半分钟之内就能明白网站的意图和功能。
那么，如何才能使一个网站真正做到简单、高效呢？
就网页设计来说，首先，要保持页面设计的一致性，主要包括同一页面内的视觉元素和同一产品下不同页面之间的视觉元素。其中最突出案例就是响应式设计。
响应式设计就是使网页内容自动匹配设备屏幕的大小，无论屏幕尺寸怎样改变，网站的呈现效果始终是一样的。具体说来，页面中内容要相同，包括字体、图像、版式、音频、视频等元素的位置、比例不应有太大变化，页面风格与交互方式应保持高度统一，以减少用户再次学习的成本。其次，要着重注意网页中图片、音频、视频等文件的大小。若非必要，并且能够帮助用户很好的理解网页中的内容，页面中的图片、音频、视频等元素都应尽量少用或不用，尤其对于将整张图片作为网站背景的表现手法而言，这种仅仅为了烘托网站氛围而造成用户漫长的等待，是得不偿失的。
此外，在网页制作上，能用代码实现的网页效果绝不使用图片。随着 html5 和css3 语言发展的逐步成熟，代码可以实现的视觉效果越来越丰富，如渐变、投影、边框、圆角、透视等，还可以通过 canvas 标签中定义坐标值的方式绘制各种各样的图形。Javascript 技术的普及，使得网页中的交互方式更为多样化，且在各个浏览器中的兼容性良好，比如折叠、翻转，滑动、旋转、放大缩小等。另外，应注意代码的书写规范，上传到服务器的文件应压缩到最小，页面中多个小图片应将其拼合在一起，做成 css 精灵图，以减少 HTTP 请求，提高网站性能，从而提升网站的运行速度。如图 2.4.3.2 所示，在淘宝网的网页制作中，网页中的一些小图片、小图标就被集合成了 css 图像精灵进行加载，利用坐标定位的方法，使得用户在访问页面时，通过加载一整张的组合图片来代替加载每个单独的图片，这样只需向服务器发出一次请求就能够无延迟地将载入的多个图片同时显示出来，使整个页面的显示更加流畅。
2.4.4 人性化设计，满足用户的需要
人性化设计，主张用设计改善生活，用设计温暖生活，强调的是设计中的人文关怀。具体说来，就是从人的操作习惯、逻辑思维出发，设计师不仅要使产品在功能上更加完善、合理，合乎人的生理需要；而且要在情感上不断关注人的精神文化建设，满足人的心理需求。近年来，伴随着科技的飞跃，互联网覆盖千家万户，海量的用户群体的暴增，使得仅仅依靠完成任务型的枯燥、沉闷、机械的操作方式已经无法满足用户需求，越来越多的设计师积极探索如何赋予产品以生命，使旧有的人与物的对话模式转向人与人的对话，摆脱人造物带来的冷漠感、距离感，让产品更加亲切、有爱，更具人情味儿，以便于人们获得更为舒适、友好的体验。
一个网站是否能够受用户欢迎、给用户留下好的印象，并且获得较高的肯定与评价，通常在页面打开后的一瞬间就已经决定了。就网站开发而言，越来越多的公司和从业人员往往会将大量时间和精力花费在网站首页的设计以及页面中代码的精简与规范上，当然这是无可厚非的，但受页面内容、网速等因素的影响，即便网站优化做的再完善，也很难能够做到瞬间响应用户。于是，页面中一些小细节的处理对整个网站用户体验的提升也是非常关键的。进度条作为在网页加载过程中告知用户完成度的实时提醒，是一个网站的起始，也是许多设计师最容易忽视的部分。下图 2.4.4.1 为浏览器自带的加载效果与经过设计后的网页进度条加载效果对比图。可以看出，由浏览器自身显示的加载进度一般出现在标题栏中网站名称的前面，为旋转的半圆弧，在加载完成前，圆弧不停地 360 度转动，页面为空白，不呈现任何内容，用户只能单靠页面顶部旋转的圆弧小图标来判断页面仍在加载，但具体还要加载多久，用户需要等待多长时间并不得而知，尤其对于比较复杂的网页来说，面对长时间空白的工作区，用户会感到十分茫然、困惑，在一点点丧失耐心的过程中，页面就会被果断关闭。而经过设计后的页面，除了上述标题栏中圆弧小图标的旋转外，页面工作区中也会呈现着更加明显的进度条标识，如图 2.4.4.1 右侧所示，当用户打开页面后，一个十分醒目的钱币符号在不停地跳动，随后慢慢变为记录收支的彩色饼状图，使得网站在未显示任何内容之前，用户仅从进度条中就已经很明确的了解到网站的主题--一个记账理财软件的官网。饼状图由三角形慢慢增长直至逐渐变成整个圆形的趣味动态过程，不仅预示着页面的加载进度，使用户通过页面中图形的变化，可以有效预估还需等待多常时间，而且还能够在情感上给予用户安慰，让用户有所期待。这种人性化的进度条设计，既结合了网站内容，又充分考虑到了用户的内心感受，注重用户的情感体验，尽可能的减少用户在等待过程中所产生的负面情绪，与浏览器自带的加载效果相比，更生动、直观、功能性更强。
除此之外，人性化设计还反映在网页设计中的方方面面。比如在图 2.4.4.2新浪微博的注册页面中，网站的整个界面十分清新、简洁。白色背景衬托下的黄色注册按钮格外突出，使得整个页面的操作入口相当明确；输入框右侧实时的信息提示，可方便用户随时检验所填写的内容是否有效；如有任何疑问，页面右侧的帮助信息早已为用户准备好了常见的问题答疑，指导用户更好的完成交互。也许会有人质疑，当前许多注册登录的页面几乎都已经具备了上述功能，那么这里有何不同？巧妙之处在于，在下图昵称栏的填写中，用户只要输入想到的昵称，页面就会及时反馈出这个昵称是否被使用，若已被使用，系统就会根据数据库中的信息提供多个未被使用的相关昵称来供用户选择，用户再也不用经过反复思考后，一遍遍地去尝试这个昵称是否可用，而只要在下方给出的昵称中选择一个自己喜欢的即可，这种站在用户的角度贴心的代替用户去思考的过程，不仅为用户节省了大量时间，也使得交互方式更为友好。
