互联网产品交互事件分析

定义

交互设计（Interaction Design）产生于二十世纪八十年代，在1984年一次设计会议上，大名鼎鼎的英国交互设计师比尔·莫格里奇首次提出交互设计这个概念，作为一门关注交互体验的新学科而存在并发展到今天，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”――交互设计。

思考

交互设计是一种如何让产品易用并尽可能让人乐在其中的技术，他包括了解目标用户在产品使用过程中的心理反应，了解用户在同产品交互时彼此的行为，了解大部分用户交互行为的习惯，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。

交互设计在产品上的使用也越来越得到各大网站以及网民的重视，交互设计的理论也日益丰满，经典的交互案例也渐渐丰富起来。

今天我们来分析一下互联网上交互设计的一些事件，为大家的研究和应用提一些个人肤浅的看法。

其实交互可以理解为在使用产品过程中用户的感觉以及针对感觉的反馈。从这个层面上来看，生活中交互是无处不在的。交互产生的感觉就是我们平时所熟知的五感，即听觉，视觉，嗅觉，味觉，触觉。当然你一定要认为交互可以给你带来第六感，我也不反对，因为确实有好的交互让你有种神秘莫测的感觉，而且可以让你沿着设计师预想的方向去使用产品。其中应用于互联网的交互设计基本上是没有嗅觉和味觉的，虽然不排除将来可能会相关硬件产品作为这些感觉的输出设备（比如不好看的网站，某输出设备直接散发出臭味，或者某输出设备尝起来很苦），但是我们目前只讨论目前绝大部分输入设备带来的感觉。（注一）

分析

我们在使用互联网产品的时候，听觉，视觉，触觉是经常被触发的。在此我对互联网产品的交互事件进行了分类：听觉交互事件，视觉交互事件，键盘交互事件，鼠标交互事件。后两者虽然都属于触觉交互事件，但基于网民的操作习惯（键盘流，鼠标流），我觉得分开会比较容易讨论这个话题，尽管某些时候他们都混合在一起，难以分开。(注二)

听觉交互事件

听觉交互事件顾名思义就是：耳朵听到的声音给用户感觉，并产生的相关反应的过程。比如WINDOWS的系统提示音，网络游戏中的一些音效，很多论坛的短消息提醒，等等。听觉交互事件的主要交互目的是有四种：提示，警告，反馈，补充。我分别举例说明一下。

提示：比如很多即时通信软件的好友上线提示，系统消息提示。

警告：系统操作错误的警告音，软件登录密码错误，某些游戏中红血警告，时间限定警告，机会限定警告。

反馈：注册成功，升级成功，操作按钮被点击。

补充：很多FLASH站的背景音乐，游戏中的战马嘶鸣、马蹄绝尘、刀剑铿锵，电子杂志翻页音效。

声音交互事件的交互方式很单一，就是默认在交互过程中发出声音。它的优点是提醒用户注意，在输出设备（听筒、音箱等）齐全的情况下，信息传达稳定，用户容易接收，交互效果最好。但它也有缺点，就是受制于输出设备，如果没有音箱或者听筒，交互效果就基本没有。所以听觉交互事件一般不独立用在互联网产品上。

听觉交互事件的注意事项：

1.不独立使用，应该与其他交互事件配合使用，至少要与视觉交互配合。

2.不强制用户接受，有选择项可以让用户关闭，不要期待用户为你去关输出设备。

视觉交互事件

视觉交互事件就是眼睛看到的界面给用户的感觉，并产生的相关反应的过程。视觉交互事件经常和其他交互事件混合在一起使用，但它本身可以独立使用。比如很多线下活动在线上作的网络广告，某些电影的线上海报，某些牛人的个人网站通知，流程图，注册时用户确认已阅读用户协议前不可点击（或倒计时完成后方可点击）的按钮等等。

我再举一个具体的例子，某网站出现一个震撼的广告图，内容为“浙江移动推出充值200送200优惠活动，请到附近营业厅办理。”用户可能不会点击，他会打电话给移动公司询问，或者告知朋友去充值，或者直接就去营业厅办理了。这个人只要有了反应，交互事件就进行得很完美，广告效果就达到了。视觉交互与其他事件交互的结合也比比皆是，我就不一一枚举了。

视觉交互事件是用户最直观最容易获得的体验，因此它需要具备美观，吸引，冲击，共鸣等特点。这一部分与界面视觉设计需要关注的部分重合，但不完全一样。

视觉交互事件的注意事项：

1.表达清晰，有时甚至要牺牲美观来满足信息清晰的传达

2.与目标用户群产生共鸣，从文案、配色、图案等方面来提高吸引力，让用户有深入了解产品的欲望

3.配合其他交互事件使用时，尽可能满足其他交互事件的需求，避免产出好看不中用的华而不实的产品

鼠标交互事件

鼠标交互事件顾名思义就是用户使用产品时，通过鼠标操作产生感觉，并产生相关反应的过程。鼠标交互事件是最常用的也是最重要的交互事件。比如导航条，很多性格测试，不计名投票系统，一些网页版小游戏，某些FLASH广告，部分网站上出现的快捷菜单等等都属于鼠标交互事件。鼠标交互事件包括主键点击，悬浮，双击，选中，副键点击，滚动等，经常体现在超链接,JS写的ON系列事件，FLASH的按钮等场景中。

鼠标交互事件因为操作比较简单，得到很多入门级网民的喜爱，我们在用户体验研究测试中也确实能找到这一类的用户，就是传说中的“鼠标流”，整个交互过程只用鼠标来完成，虽然这不能代表所有网民，但确实代表了一种趋势，用户都喜欢简单的交互方式，只不过我们更关注的是有效，如果用户点来点去，找不到入口（出口），达不到目的，那么这个鼠标交互事件就是失败的，需要改进了。

既然鼠标交互事件有这些需求，我们就应该在设计的时候权衡简单和有效的关系了。必须需要的步骤，我们一步都不能省，我相信用户不会吝惜一次点击的。另外一方面，我们不能因为用户不在乎多一次点击，就让用户不知道先点哪个的地方或者不停地点击。再举个例子，网站的快捷菜单，可以直达很多地方。我们不能把所有的页面都列出来，那样就变成sitemap了，在某个页面上的快捷菜单最好只列出重要的，常用的，或者相关的链接就行了；也不能只列一个“帮助中心”的快捷链接，尽管我相信你的帮助中心作得非常有条理，用户还是需要点了再点，一级接一级的去找到相关的帮助，如果能直接到本页面相关的帮助不是更好？这个权衡非常具有挑战性，希望大家在作交互设计的时候多考虑，多调查，多试验，相信能找到一个比较好的方案。

鼠标交互事件的注意事项：

1.傻瓜式：简单方便，在满足用户使用需求的同时，尽量减少点击次数。

2.提示明显：让用户知道哪里地方可以点击，点击哪里可以最快达成目标。这个需要在界面及文案上对用户给予引导。

3.反馈及时：用户在鼠标交互事件产生之后，能给以及时的反馈，比如鼠标经过变色，点击错误发出警告，跳转页面后能直接到相关的位置，AJAX请求后要反馈出明显的视觉提醒或者页面变化

4.层次分明：用户点击之后，能有整个操作过程的提示，在操作失误后可以返回重新操作，已经点击过的是不是需要记录状态等等。

键盘交互事件

键盘交互事件就是用户使用产品过程中，通过键盘操作产生交互体验的过程。键盘交互在网络产品的交互过程应用得相当普遍，比如撰写日志，添加评论，ENTER提交，小键盘翻页，TAB切换焦点，某些网页游戏的快捷键等等。键盘交互事件通常和鼠标交互混合使用，构成了互联网产品的主要交互行为。用户在进行键盘交互之前，对时间和精力的花费有一定的预期，由于多年互联网产品交互过程对用户习惯的培养，用户在进行键盘交互事件的时候耐心明显多于其他交互事件。所以键盘交互事件要充分利用用户对此事件的耐心，并且要充分尊重用户的习惯。举例说明：文本框里面的提示语在焦点产生的时候要有全选功能或者删除功能；文本框输入完成后要有ENTER提交的功能，而文本域输入完成后则是CTRL+ENTER作为提交，因为ENTER此时会作为换行的用途；有些文本输入有字数限制时需要提示剩余字数；有些文本域输入有时效性，需要有保存草稿功能，或者有时效性的提示；在需要设置快捷键的时候不要和系统默认的一些快捷相冲突，如果冲突了还不如不要。

尊重主流的操作习惯非常重要，在此特别提出。比如我很不喜欢QQ的CTRL+ALT+Z的默认提取消息，因为这是PHOTOSHOP的返回上一步的快捷键，这个设置非常干扰我的工作；我很喜欢GOOGLE文档里的CTRL+Z(俗称后悔键)和CTRL+Y（俗称恢复键），因为它符合大多数互联网产品的操作习惯。虽然有些习惯比较偏向个人，但我相信一定有很多产品自作聪明的设置了一些快捷键，反而干扰了一些常用软件或者系统的默认快捷键，本来是一个好的交互意愿，却取得了相反的交互体验。

键盘交互事件的注意事项：

1.安全性：键盘交互事件可能透露一些用户的个人信息，或者泄露一些隐私，好的互联网产品应该给于用户以保护。

2.稳定性：在利用用户对此交互事件的耐心来收集信息或者获得反馈的同时，要保证用户的耐心要有成果，不能让用户浪费时间和精力，结果前功尽弃，或者功亏一篑。

3.一致性：不要指望用户对键盘交互事件拥有高超的辨别能力而采取不同的操作方式，如果你采用了一种交互方式，尽量在相同或者相似的交互场景中延续使用相同的交互方式，退一步说，不要用不一样的交互方式，再退一步说，千万不要用相反的交互方式。这一点对视觉交互也很重要，但对于能称作界面设计师的人（不包含图片处理员）来说，一般这种一致性是可以保持的。

4.尊重习惯：目前互联网产品中有一些是非常伟大（或者说强大）的产品，不管交互方式是否绝对完美，至少他已经用市场占有率和时间的延续性培养了用户一些既有的习惯，交互设计师不要轻易打破用户的现有习惯，这并不是说不能有创新，而是指在现有习惯上优化和提升交互体验，是对现有交互方式的延展。

总结

以上是我对互联网产品的交互事件所作的分类和分析，尽管现实产品的交互事件都很复杂，但基本是这几种事件的组合，如果我们能在基础的事件上作好交互设计，那把复杂的交互事件作好希望就会很大。

另外业内对一个产品的交互设计作得好不好，没有一个标准，通过以上分析，虽然我们依然无法制定出这一标准，但是我们可以从上面的分析看出一个交互设计是不是作得不好。在我看来，这也是一个进步了。我希望各位同行都来贡献自己的力量，将好的交互设计应用在更多的产品，让用户得到更好的体验。

个人的一些分析，难免有不足，希望大家补充和指正。(本文较长，无图，枯燥，理论，对能读到这里的朋友表示感谢)

补充

注一:

与宗羲讨论时，宗羲认为： “五感”应该是交互的“输入”(input)，也就是通过人类的“五感”作为外界的信息进入大脑，而交互产生的感觉应该摘引《情感化设计》里所描速的三层来描述，即：本能层、行为层、反思层。

宗羲的解释非常正确，但我这里说的五感是具体交互事件产生的感觉，是点到线来分析问题的（纵向），而情感化设计里所提到的三层结构是点到面来分析问题（横向）。个人感觉并不冲突。

注二:

与宗羲继续讨论时，宗羲认为：我个人觉得应该从输入和输出来区分。听觉交互事件，视觉交互事件是交互中的输入(对于人类来说，下同)，即交互设备将信息反馈给人类的过程，键盘交互事件，鼠标交互事件是输出信息，即人类将反馈输出给交互设备。输入+输出就形成了“交互”。

输入和输出的区分方法是可行的，但用来归纳交互事件我觉得有不足的地方，文中有例子表明有些交互事件是直接到达反思层的，可能对交互设备根本没有输出任何信息。

所以虽然有了宗羲的提醒，本文还有留下一个遗憾，就是文章结构不够严谨。点到面的结构经过叠加，可以形成整体，而点到线的结构是不足的，如果线与线之间的关系没有明确表达出来，形成的整体是有缺陷的。