2.5 用户体验与交互设计的关系
交互设计极其影响着网站的用户体验。网页交互中的用户体验是用户在自主操作后所留下的心理感受。这种操作不同于商品，有说明书可以参照，它没有任何外界指导，完全依赖于用户按照自身的理解去摸索、探寻互动的途径。不友好的交互，往往会带来较差的用户体验，降低用户对网站的好感。
举例来说，如图 2.5 所示，DoNews 作为中国最大的 IT 社区网站，在其早期官网界面中，尽管模块化分割的版式运用使得整个网站更有秩序，各个模块的功能更加明晰。但顶部直通车一栏中，只有登录没有注册功能入口的页面设计，对于以注册认证的 IT 社区网站来说，令很多新手用户常常感到困惑，无法顺利的与网站进行交互。而只有少数熟悉网站的老用户会清楚，注册功能入口被放置在了二级页面中的一个不起眼区域。这样的体验是非常不好的，用户也是不会买账的。
由此可见，要做好网站中的用户体验并不容易，其中最重要一点就是要切实站在用户的角度进行思考。
因此，一方面，交互设计的合理与否已经成为用户获得良好体验的重要因素，直接决定着用户参与互动时的热情和内心情感的变化。良好的交互设计应遵循用户的思维方式，用适时的帮助和提醒来防止用户行为上的误操作，以免给用户造成任何困难或阻碍，从而确保简单、顺畅的交互带来最佳的用户体验。另一方面，用户体验是进行交互设计时的重要依据，也是检验交互是否合理的首要指标。它贯穿于交互设计的全过程，从起始的流程分析到原型图的绘制以及交互界面的呈现，直至最后的网站测试，都必须从用户的角度出发，以使用户获得良好体验为根本。所以，在进行网页交互设计时，如何能够使用户获得最佳的体验，成为设计师们着重关注的重点。
用户体验作为衡量网站友好度的重要标杆，主要来源于网站中的内容、行为和形式。交互设计的重点是针对于用户行为的设计，但也绝不能否认网页中内容与形式的作用，忽视行为与内容、形式间的关联。网页中的内容决定了行为的步骤和方式，而交互行为设计的呈现，又离不开视觉的展示，也就是形式的表现。这三者间相互影响、相互作用、密不可分，共同带给用户更为舒适的体验与感受。
因此，本节从用户体验中的效力、效率和满意度这三个方面出发，以探究用户行为的易用性为主，以内容的有用性和形式的美观性为辅，结合用户对网站喜爱程度的评判，通过对网页中交互具体细节的分析，来探讨如何更好的打造交互设计以提升网站的用户体验。
2.6 从用户体验出发检验网页中的交互设计
2.6.1 内容上的有用性
内容指的是网站中呈现给用户的所有信息，它是一个比较宽泛的概念，包括文字、图像、色彩、版式以及多媒体等元素。内容上的有用性，也就是通过对网站中各个元素进行不断梳理与编排，使得页面中的所有信息要能够被用户所使用，且能够准确传达网站的目的、意图，并帮助用户更有效、快速的获得所需信息。
内容是交互设计的基础，一个网站只有具备了使用功能，才有了存在的意义。内容上的有用性直接影响到网站中交互行为的易用和界面形式的优化，满足的是用户最低层次的需求，即最基本的是否能够被识别与认知。
要想使网站中的内容具有最佳的使用价值，最关键的一点是必须要清楚的了解目标用户的阅读方式。正如同美国知名的信息架构和用户体验大师 Steve Krug 在《Don't Make Me Think》一书中所强调的观点：用户在浏览网页时，从来不是阅读，而是信息的扫描3.的确，在这个快节奏的时代里，在信息极度膨胀的当下，人们没有更多的时间去细细看完页面中的所有板块，从中找到他们所需要的信息，而常常是用极短的时间如浮光掠影般地在网站中瞥过一眼。因而，设计师必须在短暂的时间内，在有限的版面中，在确保网站的内容传达准确、有效的前提下，迅速抓住用户的眼球，展现给用户最想看、最需要的信息。
眼动研究是设计师快速了解用户阅读方式的重要手段。通过眼球追踪仪可以更加灵活、敏捷地观察到用户眼球的变化，捕捉测试者的眼动数据，使网站开发团队能够精确的了解到用户的注视区域、注视时间、注视频率、注视顺序等结果。
根据这些测试结论所绘制的注视热点图，可帮助设计师和开发团队有效掌握用户的阅读轨迹，确切的知晓用户在浏览网页时依次都看了什么，在哪些区域，看了多久，为设计师在进行网站设计的过程中对文字、图像、色彩的位置、比例，以及版式中主要内容所在的区域、大小等提供了可靠依据。
如图 2.6.1 所示，为 Facebook 公司根据多名参与者所做的一个网站个人主页的眼动测试，从下图视觉注视热区的标记可以看出，用户的视觉焦点最容易停留在页面的上半部区域，尤其对用户头像、个人信息注视时间最长。图片相比文字更容易受到用户的注意，而文字主要依靠其所在位置和大小来吸引用户。在版式上，规整的分栏布局，使得用户能够很好的沿袭纸质阅读的浏览顺序，从左至右，从上到下，越靠下的内容越容易被忽视。因而，也就不难理解，为何 Facebook 会将广告以一排小图片的形式固定放置于页面中上部，这样巧妙的安排，使得广告更好的植入到页面中，无形中增加了用户的关注度，强化了广告品牌的影响力和渗透力。
依照对 Facebook 网站眼动研究案例的分析可知，最大程度的实现网站的使用功能，使得页面中的内容更为有用，也是有一定方法可循的。
在文字运用上，应尽量做到简洁有力，同时，确保网页中信息传达的完整性、有效性、实时性，注重文字的可读性和易读性。一方面要组织好页面中文本内容的表达。以用户最容易理解的语言，清晰直观的展示信息。避免生僻、晦涩难懂的字句，减少用户的认知障碍；另一方面，要易于阅读。注重字体、大小、颜色、间距、应用设备等因素的影响，注意文字间跳跃率的运用。文字跳跃率越低，页面往往给人一种高品质、高格调的印象，反之，则给人一种生动、愉悦的感受。
网页中的文字运用应主次分明、调理清晰，以此提高用户在浏览时的理解力、准确度及速度，让用户在有效的时间内，真切的明白网页到底在说些什么。
在图像选择上，必须准确、有效、具有美感。首先，图像内容必须切合页面主题，与文本信息相一致，做到有目的性、有针对性。那些仅仅作为页面装饰的图像，不仅毫无意义，而且更容易引起用户的误解，影响阅读效率。其次，依照用户浏览网页时的视觉轨迹规律，对图像在页面中的所占位置、面积大小、组成元素、表现形式等进行恰当合理的安排。此外，尤其要注意图像在页面中的加载速度和不同屏幕分辨率下的呈现品质，避免给用户带来糟糕的等待体验。最后，好的图像一定是美的，是能够触人心弦的。要注重图像在网页中视觉美感的表达，在带给用户独特视觉享受的同时，能真正打动人心，使人印象深刻。
在色彩应用上，要符合用户的心理预期，懂得色彩背后所蕴含的寓意以及带给用户的心理映射，与网站的整体气质相适宜。网页中的色彩以帮助用户更好的理解网站内容为前提，以深化企业或品牌形象、烘托网站氛围为目的，在运用过程中应秉持搭配协调、特色鲜明、注重艺术性的原则，此外，还应考虑人的生理特点、地域文化等差异的影响。高纯度的单一色彩，容易造成视觉疲劳，应避免大面积使用。页面中色彩过多、面积过大也容易干扰用户视线，造成不和谐的页面。色彩运用是一门艺术，应遵循相应的艺术规律，根据页面自身的特点不断进行创新，创造出既具有良好的视觉效果，同时又能引发用户情感共鸣的网站。
在版式编排上，应遵循用户从上至下、从左至右的阅读习惯，根据网站性质和用途，将文字、图像、动画等视觉元素依照一定的次序和规范进行恰当的排列，营造出美观且易于浏览的视觉效果。网格约束是版式设计中最常用的方法，它是利用水平和垂直方向参考线的交叉组合，以一定的计算比例，来把握版心、分栏等模块，使文本、图片、动画等依照参考线的区域范围进行排列。网格约束率越高，页面中每个元素越能清晰可见，画面就越理性、严谨、井然有序。比如百度图片和花瓣网以及新浪、网易等大型门户类网站。网格约束率越低，画面中往往有一个明确的视觉中心点，就越显得自由、活泼、有趣。比如个人网站、趣味网站等。依据网站功能的差异以及受众群体的不同，选择恰当的网格划分，使得页面中的版式更加合理、有效。
在多媒体使用上，必须紧扣网站主题，这里所说的多媒体主要包括音频、视频、动画等形式。具体说来，多媒体元素的应用必须具有一定依据，不能为了添加而添加，那样只能哗众取宠，反而破坏整个网页的呈现效果。尽管网站中多媒体运用好处多多，不仅带来了良好的视听效果，使页面内容更加生动，提高了用户的浏览兴趣，而且具有极强的吸引力和感染力，有助于网站知名度的提升，但它的应用并不是越多越好。一方面，在置入多媒体元素时，尤其要重视对网页加载速度的影响，注意文件的大小和长度，做好压缩。同时，要考虑文件在各个版本浏览器下的呈现效果，当版本过低而无法兼容时，应保证其他信息的完整性，在任何情况下都不能影响用户对网站的正常使用，以免弄巧成拙。另一方面，多媒体元素的交互方式要友好，保证页面中的多媒体元素被打开的同时也能够被及时关闭，避免对用户造成困扰。尤其对于最容易被忽视的背景音乐而言，应及时做好网站优化，提高网页的友好度。
2.6.2 行为上的易用性
行为上的易用性是指网页中所呈现的互动方式的改良设计，也就是用户执行相应的行为操作完成目标任务时的效率是怎样的，即界面中以怎样的方式传达信息，以及用户如何通过便捷高效的操作获取信息，从而给用户带来舒适、愉悦体验的过程。易用性是交互设计的核心，主要包括行为上的便捷、高效、易用、好记、少错等内容，它源于内容的有用性，又高于有用性，指的是网站的实际使用功能超出用户原本预期，解决的是如何帮助用户“毫不费力”的进行交互的问题，实现的是用户在网站能用基础之上的更高层次的需求，即在顺畅、快速完成行为操作的同时，追求精神上的享受。其最终目的是为了通过用户体验的优化，使网站的用户转化率大大提升，以此提高网站的综合运营实力。因此，下文以用户行为的易用为根本，探索如何使用户与网站中最常见的按钮、表单、搜索框、验证码以及弹窗之间的互动更为友好。
按钮的单击行为是网页中最基本的交互形式。用户通过鼠标进行点击操作，来触发页面做出反馈。参照上述交互设计法则，网页中按钮的交互行为设计，应以最少的点击次数，最简化的操作步骤，来完成对目标网页的互动，切实做到省时、高效、为用户带来方便。例如，在 2012 年百度图片的改版中，也是通过减少按钮的点击次数来提高工作效率，从而不断优化用户交互行为的典型案例。如图2.6.2.1 所示，新版的百度图片中，取消了原有底部的一排页码按钮，变为滚动条自动加载，使以前只有通过鼠标点击触发才能显示下一页内容的多页显示模式改为由鼠标滚轮触发进行加载的瀑布流式的单页显示模式。加载多页后，用户仍可以手动点击“加载更多图片”的按钮来继续加载，以防滑轮不停滚动造成无休止加载的困扰。这种交互行为设计不仅帮助用户省去了多次点击翻页按钮的繁琐操作步骤，使得页面响应更加及时、快速，而且增加了用户在有限区域内的可视内容。网页只有在鼠标滑轮滚动时才会调取数据加载后面的图片，这种操作模式沿用了多页加载的工作原理，在鼠标滑轮未滚动时，不做加载。这样的交互行为方式并不会带来改版后图片加载速度缓慢，造成用户体验差的感觉，反而会让用户感到使用起来更加方便、快捷了。
此外，简化用户的操作步骤，还体现在用户与表单的交互设计上。表单的填写是用户与网页进行交互时最常见的行为方式，常常用于网页中用户注册、登录、投票等功能，是网站留住目标用户群体，掌握用户个人信息、收集用户意见的有效途径，也是网站管理者与用户进行沟通的最直接纽带。表单直接影响着网站中的用户体验。如果一个网站表单的用户体验不好，无疑会降低网站的用户粘性，造成用户群体的流失。因此，表单设计中最关键的一点就是不要试图考验用户的耐心。正如第二章交互设计法则中所述，用户喜欢简单、便捷的操作，因而网页中用户与表单间的交互流程应尽量简化，比如以注册表单为例，其操作步骤最好控制在三步左右：立即注册-填写个人信息-注册完成。其中在填写个人信息的页面中，需要注意的是应确保用户所填写的每一栏都是决定用户身份的必须项，比如邮箱、密码、手机号码等，从而避免让用户输入大量繁琐的信息，而至于诸如家庭住址、兴趣爱好等类似补充项应放置为在用户注册成功后的个人中心板块中进一步完善的内容。注册表单的终极目标是能够像全自动洗衣机一般使用户实现傻瓜式的一键操作模式。如图 2.6.2.2,在千图网页面中，注册、登录表单就是最简单的一键式操作。无论是用 qq 登录还是微信扫码登录，用户都将再也不必为了填写琐碎的个人信息而烦恼，仅仅只需一步点击进行授权即可，网站会根据用户操作，自动调取用户在 qq 或微信中的授权接口，从而获取用户的个人信息。当然，这些数据资料在默认情况下网站会替用户进行保密，所以不用过多的担心个人信息的泄漏。
搜索框是网站为用户提供检索服务的功能入口。用户在搜索框中通过键盘敲击或鼠标点击的行为置入想要查找的信息，与网站进行互动，网站就会根据用户输入的关键词，从数据库中自动检索出用户所需要的相关信息并展现出来。搜索框的应用领域十分广泛，最知名的就是像谷歌、百度等这些人们耳熟能详的大型搜索引擎类网站，它们不仅具有庞大的数据库，更有着极为友好的用户体验。然而，近几年随着电商行业的蓬勃发展，搜索框的运用也成为电商网站中用户与网站进行交互的最重要方式。如图 2.6.2.3 所示，淘宝网的搜索功能也是十分强大，用户只要在搜索框中发出行为指令，无论输入的是汉字还是拼音，当输入第一个关键字时，网站就会立刻根据用户的浏览历史，按照搜索热度在搜索框下方依次罗列出一些相关提示，其中用户长期关注的或者以前搜索过的内容会被排在前面，方便用户再次快速进入。此外，当用户用鼠标划过下方这些小提示时，当前所选项的详细分类信息就会在右侧区域展现出来，并以灰色块加以区分，便于用户缩小搜索范围，进行更为精确的查找。这种切实从用户行为出发所做的搜索框设计，使得用户在进行搜索操作时，无需将关键词全部输入完整，只要在下方选择所需范围进入即可。这样大大提高了用户与网站间的互动效率，致使网站对用户行为的响应更加智能、及时。
验证码的输入是用户与网站进行注册、登录、发帖、刷票等互动时的常见行为操作，它就像网站筑起的一道保护屏障，可以有效的提高网站的安全系数，防止某些黑客或者一些恶意人士利用机器人通过组合码刷机等方式对用户的帐号、密码进行盗取，造成网站遭受攻击与用户个人信息泄漏所带来的一系列损失。验证码的常见形式主要由两种，一是由一组随机数字字符串组成的四位数字型验证码。
这种验证码的验证意义不大，对机器破解的安全防范作用不高，因而较少在网页中进行应用；二是由英文大小写字母、阿拉伯数字、汉字、颜色、图形以及随机干扰的线条像素等组成的图片型验证码，主要有 GIF、PNG、BMP 和 JPG 等格式。
这种形式的验证码由于对机器识别造成较大干扰，必须通过人工进行分辨，因而具有较高的安全系数，在网页中的运用也比较常见。比如 qq 就是利用数字和英文大小写字母随机组成的动态的 PNG 格式的图片验证码进行登录验证的。而网站中对验证码的设计不仅要考虑其与用户交互时防护功能的强弱，更要考虑页面中的用户体验，注重在验证过程中交互行为是否易用。如图 2.6.2.4 所示，分别为 12306的规避了机器自动识别进行验证的风险，是目前众多形式的验证码中安全性能最佳的，但是两者又有很大区别。对于备受争议的 12306 铁路订票系统登录界面中的验证码来说，其难度系数更高，它需要用户根据已给出的关键词，辨识并选出图片中与文字相匹配的图形，有时关键词不止一个，而对于下方令人眼花缭乱的图形来说，所选中的匹配图形也常常不止一个，一般有两到三个，这样复杂的交互方式，无形中增加了用户的记忆负担和点击次数，容易导致用户在登录过程中出错率的增多，违背了上述交互行为中简单、好记、少错的原则。相比之下，淘宝网验证码的验证方式就十分人性化、更注重用户进行交互时的体验与感受，用户只需通过鼠标进行一步拖拉操作即可。因此，即使一个网站验证码的安全系数非常之高，页面功能十分有用，也绝不能忽视网站的用户体验，忽略用户行为上的易用性，不能让用户觉得难以辨认，给用户的使用带来麻烦，否则这个验证码的设计就是失败的。
弹窗是指用户在与网页交互时的自动弹出窗口，主要分为以功能为主的警告框、提示框、确认框、对话框等和以宣传为主的广告窗口。它一般出现在页面的最前面，具有更为突出的强调功能，主要是通过强制提醒的窗口形式来迫使用户引起注意。因此，网站中弹窗的运用应更为慎重。如需必要，弹窗设计应本着不给用户的使用造成任何困扰为根本，且注重其在页面中的面积大小、位置区域等问题，做到真正切合网站的整体风格，最终使用户感觉自然并且乐于接受。网页中除了某些作为对用户行为操作具有着重警示作用的功能型弹窗需要放在页面中间区域外，弹窗设计应秉持着不能影响用户的正常阅读为首要，尤其对于那些在页面打开时就肆意弹出的对话窗、广告窗，更要严加杜绝。因为这种非用户本意，只为强制用户进行关注的流氓方式，不仅严重打断了用户的思路，造成了使用上的不便，用户不得不不断的关掉页面中的弹窗才能保证网页浏览的继续进行，更容易导致用户产生难以忍受、反感、抓狂等负面情绪。如图 2.6.2.5 所示，为笔者在公司实践中所做的友联官网界面设计图，就页面中弹窗的优化来说，早期的“在线客服”是一个突出人工服务的矩形弹窗，该弹窗面积区域较大且固定在页面中间。而对大多数访客而言，他们在不了解网站业务或者没有明确需求的情况下，很难立刻产生疑问，所以这种主动邀请型对话框在此类页面中的运用效果并不好，反而会妨碍用户对网页的正常使用，导致用户在浏览网页时必须将其关闭才能保证页面内容不受遮挡，这种体验是非常不好的。另外，用户关心的重点是能否有效的解决问题，至于是人工还是机器服务，用户并不是那么在意。因此，网站只需要在用户的可视范围之内，留一小块区域作为访问入口，确保既不影响用户访问网站的内容，又能够在用户需要时可以及时与网站进行对话。当用户点击固定在页面左侧的“在线交谈”区域时，对话窗口随即弹出，且窗口的大小和位置可随着鼠标的拖拽进行改变。用户也可通过将对话窗口最小化的方式，一边了解网站的产品和服务，一边向客服进行咨询。整个弹窗界面与页面风格高度一致，极大的强化了页面的视觉效果，这种由主动邀请变为被动接受型的弹窗模式大大降低了对用户的打扰，促进了网站中用户体验的优化。
2.6.3 形式上的美观性
网页中的交互设计，不仅要有恰当的内容做铺垫、良好的行为方式做支撑，同时也离不开形式美感的表达。随着互联网科技的发展与人类审美水平的不断提高，仅仅拥有完备功能的网站已经难以满足用户的需求，渐渐丧失了市场竞争力，而网页形式中的艺术之美正愈发受到用户的关注与喜爱。形式也就是网站界面中视觉的表现方式，它直接作用于人的感官。形式设计，确切的说是将网页中的内容和行为在有限的屏幕空间中进行更为合理的部署，使得界面视觉美观、内容编排得当，交互行为高效。网页中的内容与行为都依靠一定的形式来呈现。形式设计的优劣直接影响着用户访问网页时的第一印象，也是用户获得最直接、强烈视觉感受的关键。令人赏心悦目的界面形式就如同一支催化剂，可极大的赢得用户内心的好感，增加用户的使用欲望。当用户的视觉、听觉等感官感受受到界面形式的吸引时，就会产生浓厚的兴趣，引发强烈的心理认同与情感共鸣，从而使用户获得令人愉悦的美学体验和情感体验，并最终促进用户更积极主动的与网站进行互动，这就是网页中形式美的力量。
因此，如何才能确保网页中的形式设计更具美感呢？首先，在进行形式设计时，应尽量使网页的视觉呈现简洁化，摆脱一切束缚，完成从复杂到简单的视觉提炼，还原页面本真。简洁的页面可以避免分散用户的注意力，最容易凸显内容、引导用户的视觉焦点。其次，要能够唤醒用户的欲望与激情。在网络与电脑成为人们生活必备品的当下，信息泛滥，网页大军铺天盖地般涌来，要在众多网页中脱颖而出，受到用户的信任与喜爱，提高用户的忠诚度，就必须以情动人。把计算机当作人而不是机器，来与用户进行对话。注重用户在使用时方方面面的感受，通过视觉引导，辅助用户顺畅、高效的完成交互行为。在界面上要做到独具匠心，让人眼前一亮，在不影响页面友好度的前提下，通过适当的多媒体元素的应用，给用户带来全方位的感官刺激。
2.6.4 用户的喜用性
用户的喜用性指的是用户对网站的喜爱程度，其中评判因素有很多，比如网站的日均访问量、网站的访问群体、访问次数、浏览时间、参与互动的积极性、关注的热点区域以及与同行业网站的对比等等。用户对网站的喜爱程度，是衡量网站用户体验是否友好的最终标准，反之，用户体验的好坏常常也决定了网站能否俘获用户的芳心，受到用户的喜爱。网站中用户的喜用性越高，往往能够最大化的留住用户，赢得更多的信任和依赖。甚至，用户会将其喜欢的网站设为主页或者加入收藏夹，于潜意识里养成一种习惯，在同类网站中坚持只使用这一个，还会长期关注、定期浏览网页内容的更新或功能上的优化，积极参与网站中的活动并及时与他人分享，最终成为网站的忠实粉丝。当一个网站汇聚了大量的粉丝用户时，品牌效应也就诞生了。就如同提到“企鹅”,用户会自然而然的想到 qq,脑海中蹦出“嘀嘀嘀”的声音；提到购买数码产品，人们一定会想到京东一样。
一个深受用户喜爱的网站，必定是能够带给用户快乐的网站。这种快乐体现在网站设计中的方方面面：首先，网站要足够“智能”,如同用户肚子中的蛔虫一般，能够真正了解并满足用户的需要，网站中的内容要能够切实给用户带去一定价值且让用户有所收获的；其次，网站要足够“聪慧”,避免给用户带来麻烦，交互行为要简单、高效，能够及时帮助用户解决某些问题，满足甚至超出用户的预期；再次，网站要足够“漂亮”,要深入了解目标用户的喜好和关注热点，使得界面设计更加实用、美观，具有强烈的创造力和视觉吸引力。最后，网站要足够“轻松”,大多数用户上网是为了使来自生活和工作中的紧张的状态得以缓解和放松，就算是在办公状态时，用户也一定不愿意面对非常严肃、沉重的网站，因为无形之中会给用户带来压力。所以，呈现给用户一个轻松、自由的网站氛围非常重要，它更容易使用户享受这个访问的过程，在与网站进行交互时获得快乐，只有这样才能给网站带来大量可观的流量和广泛的用户群体。这就是为什么那么多类似影视、时尚、动漫、游戏等娱乐类型的网站那么受用户欢迎。
