交互设计中影响合用性的一些不可不做与绝不可做的东东

我们经常探讨如何让我们的网站更实用，有时候根据用户需求扭曲HTML的页面结构，有时候寻找如何最好的使用CSS来显示一条信息。但是，我们从来没有把这些考虑带进基于jQuery(或其他基于JS)的设计。我们怎样才能提高jQuery事件的用户体验和合用性呢？

接下来，我们简要的讨论一下这些交互设计的代码和效果，然后，讨论如何改善它们的合用性。

别把用户置于黑暗之中

即使不是全部，大部分的jQuery是通过某些来自用户的事件激活的，譬如加载新的内容，提交表单或是单纯的修改某些条目的描述。这些事件都是被用户的一个点击事件激活的。

作为设计者和开发者的我们即使看不到视觉上的效果，我们也知道在发生一些什么，但是用户则是在猜测这到底是怎么一回事。如果用户点击了某个元素却没有立刻出现些什么，他们可能会想页面是不是崩溃了或者他们是不是点错了什么。

但是，通过为用户提示一条信息或者加载一些图片，他们就可以肯定有什么事情正在进行中，而且，很快就会完成。

Pinchzoom在加载新的内容时总是会通过一个纺织状的图形和“正在加载”的字样给用户以提示。图形的匀速运动在告诉用户网站正在处理他们的请求。

一定要把你的代码拿去测试

作为测试环节的一部分，设计者要确保他们的交互设计是夸浏览器工作的。不幸的是，我们并不是按照普通用户的方式去测试我们的设计元素。你可能惊讶于我们使用我们自己的网站和普通用户是多么的不同。

不同用户的浏览习性和查看设备有很大的不同，所以要自觉的通过不同设备使用不同方式来测试你的设计。

通过不断尝试打破你的JS，你会遇到很多之前没有注意到的BUG，它们会帮助你创造更加稳固和坚不可摧的用户体验。如果用户遇到一些元素看起来崩溃了或者没有正确实现功能，那么用户可能会对整个网站失去信任。

不要以用户为代价添加jQuery

你最不愿意见到的就是造成用户的困扰。设计中增添了太多的交互元素会让用户无法判断该做什么或者如何找到他们需要的东西。

在构建的你网站时，要限制那些可以帮助用户达成他们目标的控件的数量。通过限制选择，你会创造更加有效的用户体验。

Crispin Porter + Bogusky的网站上能找到这样的问题的一个例子。网站存在太多的滚动导航条，太多的“阅读更多”链接，它们会让页面加载更多的内容。这样的设计将用户淹没在信息的海洋之中。新手也许会感到不知所措，不知道何去何从，又或者会想他们是不是错过了重要的信息。

速度并不总是关键

我们总是在为页面加载更快和让用户更快的完成任务优化着我们的代码。另一方面，有一些例子表明，也许让动画慢下来是可以改善我们网站的合用性的。

动画，如那些旋转的信息和图片往往设置的太快。我们必须记得用户可不喜欢被催的什么似地。要给他们吸收的时间。用户可不想读着某个条目一半的时候停下来等待旋转结束才能完成阅读。

无论你是使用插件还是核心jQuery代码来实现这些效果，总是可以设置动画的快慢的。大多数情况下，slow或fast之类的关键字是可以使用的。如果你想更加精确的计时，使用800或1200这些数字也是可行的，他们以毫秒为单位。

Postbox的主页有一个列表滚动显示新闻和重点条目。虽然这个不是该网站设计中较为出众的部分，条目之间的时间间隔是足够用户吸收信息的。

让你的标签更醒目

尽管说了这么多的设计小窍门，这一个却也是值得一提的。如果你正在使用标签来显示或隐藏内容，务必确保它们是醒目的，而且，每个标签要能够很好的描述那些内容。

标签可以有效节省空间，有人称赞它可以让设计更具创造性。但是，最好不要冒着用户可能会忽视一些潜在的重要内容的风险。

使用醒目的标签可以让用户更容易找到他们或许需要的信息。而且，描述性良好的标签可以很清楚的告诉用户他们接下来会看到什么。

Delibar把他们的标签做成书签样式。绿色和粗体很容易引起用户的注意。Delibar通过一个单词的标签简洁的传达了标签背后的产品的特性和内容。例如，“管理”标签指向的页面描述了众多用户可以用来管理他们的有趣的书签的方式。

不要剥夺用户的控制权

带有滚动条的“单页面站点”现在是一个日益增长的趋势。但是，如果用户不打算使用你提供的导航条，千万别让他们卡在某个地方。

当用户意识到页面有扩展到其他地方的时候，他们习惯性的会使用鼠标或者滚轮向下导航。如果你去除了页面滚动的功能，你就会知道缺少基本的浏览功能会在多大程度上削弱用户的整体体验。用户会感觉到他们失去了浏览的控制权。

如果你正准备在你的设计中引入滚动页面，那你可以通过提供键盘导航或者快捷键的方式改善页面的合用性。它为用户提供了另外一种页面导航的方式。这样一来，他们可以使用滚动条、鼠标和键盘。jQuery为设计者准备了一个指南：adding keyboard navigation using jQuery.

当网站设计和jQuery想要实现的功能确定以后，要考虑一下你的决定在多大程度上阻碍了基本的功能，以及用户会作出什么样的反应。

通过使用链接导航到页面底部，designinsocial不允许用户通过鼠标或滚轮自由的浏览页面。但是，正如你接下来看到的，用户会想要使用滚轮来查看页面下方超出屏幕的内容。

使用jQuery来改进表单校验

jQuery可以轻松的改善表单校验，而且，既可以通过点击“提交”按钮，也可以通过用户焦点离开某个区域来触发。但是要记得，JS表单检验永远不能完全替代服务器端的检验。

使用jQuery来校验表单对于用户来说有两个很重要的好处：

1、用户不需要等待页面刷新才知道有错。而且，如果页面在显示错误信息前必须重新加载的话，用户可能会认为表单提交成功，因此忽略了提示信息。

2、jQuery有更容易而且更有效的错误高亮显示，例如，通过改变相关输入的边框和背景颜色或者使用提示框之类的动画效果来引起用户的注意。

Trevor Davis有一篇署名为“AJAX Forms with jQuery”的文章，中间有一些非常棒的关于如何应用jQuery来实现表单校验的窍门。

Blue Sky Resumes 在它的博客的评论中使用jQuery来改变背景色和边框颜色，以此来高亮有问题的输入区域。在表单上方还会展示一个校验总结来进一步的解释出错原因。

动画可不能卡壳哦

jQuery的一个主要特征就是它可以通过动画元素来提高你的设计品质。包括渐变、变色和移动元素。其中有一个通常用来使得页面整洁的动画，它会将图片等信息隐藏起来，然后再鼠标移动到标题上方的时候再显示出来。

然而，许多设计者和开发者都忽视的问题是这种动画可能会迅速卡壳。如果一个页面有很多的缩略图，然后用户在很短的时间内迅速让鼠标经过其中几个，这些动画会一一实现，即便此时用户已经不再移动鼠标。让你的鼠标在druckbar上快速划过，你就能发现这个问题。

你可以采取以下两种方式中的一种将你的用户从麻烦中拯救出来。第一个是.stop()方法。当某个元素上的stop方法激活时，当前运行的动画(如果有)会立刻停止。例如，对于一个通过slideup方法隐藏了的元素来说，当激活它的stop方法时，这个元素会显示，但是只显示之前高度的一部分，回调函数则不会被激活。

CSSbake使用下面的方法来防止出现上面的动画卡壳的现象。

$("ol#gallery li").hover(function () {

$(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400); },

function () { $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);

});

换一个方法，你可以使用像hoverIntent之类的jQuery插件，使用之后只有当用户的鼠标熟读慢到一定程度的时候动画才会被激活，这样一来就能明确知道用户是不是“悬浮”在某个元素上。

把内容动画减到最少

正因为用jQuery来实现JS方法是那么的容易，我们中的很多人不自觉的陶醉在动画之中，这给我们的用户造成了混乱。一些网站在用户向下滚动页面的时候通过jQuery来加载图片，这样一来初始页面就会加载的很快，用户也就可以更快得获取页面内容。Mashable，一个流行的社交媒体的新闻网站就是这么做的。虽然这对网速慢的用户来说挺棒，但是真的有它的缺陷。

引入淡入动画技术可能会比较分散用户的注意力。如果一个用户细读一篇文章，当他们向下滚动页面的时候，淡入效果可能会打断他们的思路。如果图片没有任何动画就突然显示出来，特别是突然出现在用户的视角内，这样引起的效果可能会更强烈。

所以，要考虑动画或者其他的jQuery方法会在多大程度上影响用户在重要内容上的注意力。

结论

jQuery的日益流行将它所提供的众多功能带入人们的视野。这里提到的几点只是当前交互设计趋势中的一小部分。无论你使用何种设计元素，记得要考虑你的决定对用户的影响。这些元素容易使用吗？这些流程容易理解么？如果有的地方出了错，用户会作何反响？类似的问题可以帮助我们消除错误，为用户提供更加稳固的交互设计和用户体验。

一些有效的使用了jQuery的网站

Crush + Lovely

Crush + Lovely使用jQuery来实现这样一种效果：当导航条被点击的时候实现出现平滑的滚动效果。通过键盘导航增强了用户体验：左右箭头可以在不同的版块滚动。(个人感觉如果左右键按的更快的话，那么就会出现了上面提到的问题：当我快速的来回按左右键，然后我不再按键盘了，页面还是不停的在不同版块之间滚动。O(∩_∩)O)