第3章
网站交互设计知识



3．1交 互 体 验
交互体验设计主要是针对用户心灵、眼睛、耳朵、触感等的设计，如果想提供好的用户体验，就要从感官体验、交互体验、浏览体验、情感体验等方面入手。下面从交互体验这个角度展示网站交互设计的魅力。交互体验主要面向用户操作层面，强调易用性，一般包括但不限于会员申请、会员注册、表单填写、按钮设置、单击提示、错误提示、在线问答、意见反馈、在线调查、页面刷新、资料安全等方面。那么如何实现交互体验设计成了设计师的一大困扰。首先来欣赏一个精彩的交互网站，感受体会一下网站中的交互给我们带来的愉悦体验，从中思考如何开展适合的交互体验设计。
1． 让网页看起来像画一样
音乐是听觉的享受，每个人对于音乐的诠释是不同的，通常听众都是被动地听，而Labuat的音乐网站则让听众参与进来，将自己对于音乐的感受画出来，音乐与画面相得益彰。如图3．1所示为Labuat的音乐网站界面。
Virginia Meastro Diaz是2008年西班牙Telecinco所主办的Operación Triunfo歌唱比赛的冠军得主，与音乐界著名制作人Risto Mejide及The Pinker Tones(巴塞罗那舞曲大师二人组)三方组成了一个团体——Labuat，并合作了首张同名专辑。这张专辑还特别为其主打歌Soy tu aire制作了一个Flash网站，这个网站是由Herraiz Soto&Co．及badabing两家公司联合制作的，主要运用音乐搭配AS3的音乐振幅编程技术实现了“将音乐画下来”的构想。
这是一个西班牙文网站，打开网站映入眼帘的是一张黑白的手稿，画面安静得连时间都凝滞了，似乎是让我们在音乐盛宴前平稳情绪。单击play，就可以开始每个人的音乐体验。Soy tu aire音乐响起，我们的手伴随着悠长的音乐节拍情不自禁地滑动，神奇的画面出现了： 水墨在鼠标下流动，流淌出一幅生动的水墨画，音乐或激昂或舒缓、或高亢或轻快，屏幕上的墨迹则或深或浅、或浓重或纤细，记录着我们的情绪，表达着我们对于音乐的理解。跟随鼠标飞舞的蝴蝶、飞鸟、蒲公英、鱼、烈焰红唇、人的剪影等画面，恰到好处地诠释着音乐的灵魂。画面大多数时候是纯粹的黑白，线条酣畅淋漓，在音乐的激昂婉转处，几抹红色和蓝色表现着我们情绪的变化。音乐播放完毕，我们的绘画创作也结束了。但是可以重温自己的体验，将整个绘制过程重放。这是一场音乐盛宴，鼠标随着音乐舞蹈，我们用各自独一无二的画面描绘出自己心目中不同的音乐。


图3．1Labuat的音乐网站


2． 参与网络广告
网络上的广告很多，对于浏览者而言，网络广告妨碍正常浏览，因此对于直白的推销越来越反感。如果受众参与的是一种隐形的推销，更能得到其认可。


(1) 菲亚特公益广告。
这则广告的画面很简洁，左侧是一辆菲亚特汽车，右侧是一杯啤酒。按照画面的箭头提示，用鼠标向下拖动啤酒量会减少，就如同体验者真正喝了啤酒一样，而左侧的汽车随之压扁，车玻璃的碎屑也溅出来。如图3．2所示为菲亚特公益广告界面。
当啤酒基本见底的时候，汽车已经被压成一团，露出广告语： Dot’t drink and drive.，画面虽然简洁，却使浏览者体验到了震撼的效果，广告效果不言而喻。


图3．2菲亚特公益广告界面


(2) 丰田汽车广告。
同为汽车广告，丰田YARiS车的广告也非常巧妙，画面上四辆不同的YARiS车，分别标示A、S、D、F,浏览者可以用鼠标单击汽车，就会发出敲锣打鼓的声音，每辆车的声音各不相同，也可以用键盘上的A、S、D、F键进行控制弹奏一首打击乐。如图3．3所示为丰田汽车广告界面。
浏览者还可以将自己的演奏录制下来就行播放，这样，由于浏览者的参与，这则广告变得易于接受，YARiS车也在大家的娱乐参与中不知不觉地被认知。


图3．3丰田汽车广告界面


3．2用 户 体 验
用户体验是指用户访问一个网站或者使用一个产品时的全部体验感受，包括他们的印象和感受是怎样的，是否还想再来使用，以及他们对出现的问题的忍受程度等。下面分别从用户体验的内涵与作用两个方面进行说明。
1． 用户体验的内涵
总体来说用户体验可以包括满意度、忍受度、期望值三个部分。
(1) 满意度。
当用户第一次访问网站时会有一个第一印象，从UI设计、内容等方面，用户会有一个宏观上的印象，如果网站内容是自己感兴趣的，则会继续浏览并使用，在使用细节上会对网站的访问和使用流程有一个综合的感受，一个是否满足主要需求的感受，这受用户自身的认知、习惯影响，存在一些不确定因素。
(2) 忍受度。
忍受度即用户对问题的接受程度，比如用户访问一个网站，看到一则广告，并不影响浏览的热情，但是再往下看全是广告，没有什么有价值的内容，从此就不会再上这个网站了。用户对网站的容忍度还体现在对烦琐的操作流程、复杂的表单设计以及网站BUG等方面的接受程度。
(3) 期望值。
用户在浏览网站或者使用网站产品功能时会有一个期望值，通过这个期望值与当前浏览的网站进行对比从而产生一个差异程度。当用户深入访问一个网站的时候，会下意识地再一次生成期望值。如果这次访问得到的收获高于期望值，则会形成较好的用户体验，反之可能会有“上当受骗”的感觉。
2． 用户体验的作用
作为设计师，我们不可否认设计的真正使用者是用户，在进行设计时要从用户的角度上去进行策划和设计，要从整体去衡量用户在网站内容、视觉设计、操作流程、功能设计等多个方面的用户使用感受，以提供用户最完善的使用体验。
事实上，不仅仅是网站、软件、计算机、影碟机、手机等，任何交互产品的设计，都必须要以“人性化”的思维方式，充分考虑用户在使用时的感受，才能开发出令人满意的产品。设计师必须明白，用户根本不在乎设计师采用什么技术，有什么深刻的内涵，他们只需要感到好用、方便、舒适就可以了，做到这一条，设计的目的也就达到了。因此，用户体验虽然是包含不确定因素的主观心理感受，但它是衡量一个网站是否受欢迎、网站策划设计是否成功的重要标准。
3．3可用性
可用性是交互设计基本而且重要的指标，它是对可用程度的总体评价，是良好用户体验的衡量标准，是从用户角度衡量产品是否有效、易学、安全、高效、好记、少错、有满意度的质量指标。
互联网资源非常丰富，用户的选择余地非常大，可以自由地浏览网站，那些使用流畅带来舒适感的网站会让用户悠闲地冲浪，如果网站设计的像迷宫一样让人摸不着头脑，这样的网站只能让人心烦意乱，一走了之。
可用性好的网站会极大提高用户的体验，并且良好的用户体验会让用户更加快乐，用聪明的设计满足用户，而不是阻挠他们。
1． 视觉表达清晰
一个网站中的信息很多，这么多的内容必须要整合分类，各个内容之间要有明确的划分。哪些信息是要首先传递给用户的？这是首先要确定的，网站是用来浏览的，用户最想得到的那些信息自然是吸引用户浏览网站的重点，即用户浏览的视觉中心。一个好的网站要有明确的用户浏览视觉中心，各部分信息要层次分明，引导用户按部就班地浏览网站信息。
2． 信息言简意赅
网络用户一般不会在线精读文本内容，通常是快速浏览，因此，应该尽量使用简短、醒目的文本，这样可以方便访问者快速获取主旨信息和中心思想。
简洁的方式更让人易于把握，在快节奏的现代生活中，如果需要用户了解你的信息内容，就必须以最快的速度让用户感知。
3． 操作简捷
设置超文本链接的目的是被单击，确保它们很容易被单击才有意义。太小的链接单击难度太高，可单击区域大，则单击起来非常方便。例如，注册表单是网站中重要的交互信息，但是，长而烦琐的表单设计，往往会成为用户注册的障碍，通过尽可能缩短注册表单的内容，我们可以减少这种阻碍。
事实上，大多数注册系统的目的通常仅仅是能够识别每一个用户，所以，分析注册表单的所有信息，其最基本的要求就是一个独特的用户名或是Email地址，还有一个密码。注册普通用户根本不需要那么多的个人信息，如果你不需要更多信息，就不要问得过多，让表单尽可能短。当然，如果是注册VIP用户就不同了。因此，在进行表单设计时就要充分考虑到功能需求，尽可能简化流程，让用户享受这个过程，而不是设置障碍，让用户郁闷、放弃。
3．4网站用户体验改进方法
1． 视觉方面

在改进阶段可以从视觉方面、交互方面等改进用户体验。视觉方面的改进是直观有效的，不同的颜色所带给用户的感觉是不同的，这是要视具体场景而定的。如冷色调倾向理性、冷静，暖色调倾向热情、感性、女性等。
2． 交互方面
工具类产品需要强调易用性，操作要简单有效，因而交互设计效果不宜过于花哨，要能使用户第一时间完成其目的。社交、娱乐等产品，考虑到用户使用时心情相对比较轻松，可以通过一些更有趣的交互效果和用户形成人机互动，使用户得到一种心情上的满足感。
3． 文字方面
在文字方面的处理同样与用户体验有关。大部分在文字的处理上要以简洁明了为主。如果用户的年龄较低，则可以增加一些有趣图案，明快的色彩，以减少与用户之间的距离感； 如果用户年龄已经比较成熟，那不适合过于趣味性，应表现得更为稳重。
3.5设 计 作 业
基于交互设计师的职责，针对第2章设计作业中查找到的网站，从用户体验层面提出视觉、交互、文字等方面提升体验的建议，并进一步完善设计报告。