WEB交互界面设计和验收的指导性原则

1、WEB交互界面设计和验收的指导性原则随着企业intranet和国际internet的迅速发展，越来越多的工作流程，商务交易，教育、 培训、会议和讲座，以及个人消费娱乐都被转移到所谓的万维网World Wide Web以下简 称WEB)上来了。与此相对应的是交互操作的复杂性越来越高。随着Browser/Server模式的日渐流行，很多操作都是在浏览器环境下的网页上完成的， 并不是只有失效的链接和意外的出错才会使操作者感到烦恼，即便是一次完整的成功操作过 程，也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。本文试图阐述WEB交互页面设计的一些指导性原则，这些原则有利于避免发

2、生不愉快 的操作体验。这些原则是用户友好性的，是在完成同一种操作要求下，使用户最感到轻松、 简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的， 符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计 有所冲突。如果发生这种情况，基于“实用的就是美的”观点，我们会建议您酌情放弃原先 的美学观点与功能设计。输入控件的自动聚焦和可用键盘切换输入焦点使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB 键(IE缺省实现)或方向键切换聚焦到下一个输入控件。输入控件指WEB页面表单()中显式的，需要用户进行

3、修改、编辑操作的表单元 素。对于这些控件，如果没有自动聚焦操作，不可避免的出现一次用户鼠标定位操作(如果 用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作，实际上是键盘鼠标切 换操作)。如果鼠标定位后需要进行键盘输入操作，如果不能键盘切换输入焦点，那么不可 避免的在切换输入焦点时需要反复的键盘鼠标切换操作，这是很繁琐的。如果实现了页面加载完成即自动聚焦到第一个输入控件，并且可以键盘切换输入焦点标 定位操作，那么对于用户来说整个页面的输入操作可能都不需要鼠标操作，或次数较少，这 是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。对于有输入栏的对话框或网页，在不干预的情况下就应将当前

4、控制焦点定位在待输入的 输入栏上；如果输入栏在一般情况下不需要更改其中的内容，则应直接将焦点定在“确定” 按钮上；在几个输入栏之间应支持tab，shift+tab切换操作，“确定”和“取消”应该是切换 操作的终点，与具体所在位置无关。可用Enter (或Ctrl+Enter)键提交，确保和点击提交按钮的效果是相同的不要在提交按钮上加入onClick=”.”这样的JavaScript代码。用Enter键提交页面是原则1的自然延伸，而且这也是浏览器所缺省支持的。只所以单 独列出来是因为实际上有些设计者设计的页面不能达到这种效果，结果导致使用Enter键提 交和点击“确定”按钮提交带来的效果不一样。

5、大部分情况下是设计者在“确定”按钮上加 入了 onClik=”.”这样的代码，通过点击“确定”按钮后，会执行一段JavaScript代码，比 如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。正确的做法是把这段代码移到表单标中，以onSubmit=”.”属性引入。对于表单元素，它会消耗Enter键，因此会使得Enter键提交失效。可以引入 JavaScript代码捕捉Ctrl+Enter复合键，一旦捕捉到即执行表单的submit()方法。对于需要频 繁提交的场合，比如BBS上，这种代码是很有必要的。鼠标动作提示和回应对用户的鼠标定位操作，当移动到可响应的

6、位置上时，应给予视觉或听觉的提示。动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML 标签会自动进行这种变换ICON的行为。对于没有href属性(或没有设置href属性)的标 签，可以通过JavaScript设置style属性的cursor为hand。目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域，此时指针图形改 变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添 直观的图形，尽可能的增大按钮面积；按钮间保持适当的距离，太近增加了用户区别它们之 间界限以防误操作的负担，太远增加了用户搜索定位按钮的负担。尽可能早的在客户

7、端完成输入数据合法性验证输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器 端完成，否则验证工作应在最早能完成的情况下进行。在客户端完成数据合法性验证，可以避免一次服务器请求和回复通讯，这种通讯是需要 用户等待的，如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可 发现的，那么这种设计就是不友好的。诸如密码长度限制，用户名允许字符限制等等，显然 应该在客户端提交前就应该进行验证。根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面根据应用场景，决定是否显示接收表单页面(表单页面和提交后返回页面间的中间过渡 页面)，以及使用何种方

8、式显示接收表单页面。表单页面和接收表单页面是大部分WEB交互操作赖以实现的配合模式。关于表单页面 和接收表单页面的相互关系的设计，要做如下几个方面的考虑。一，对于需要频繁操作的场合，从操作便利和快捷性出发，尽可能的减少服务器和客户 端交互次数，应该避免使用中间过渡页面。提交完毕直接返回原来的表单页面或默认页面。 在这种情况下要考虑到数据安全和可恢复性。如果因为用户输入的数据不合格，需要重新输入，那么，去除中间页面，把错误信息直 接显示在原表单页面上的设计方式，将是最简洁的处理方式。用户只需要根据错误提示进行 更正即可。当然这样做稍微增加了编程负担。在表单接收页面上需要包含原表单页面的内容， 而

9、且输入数据项都必须用服务器端代码或客户端JavaScript设置成用户输入的值。为了开发 快捷，可以这样做：表单页面和接收表单页面用同一个服务器端脚本页面实现。这个页面按 如下流程完成原来两个页面的工作：页面脚本初始化I检查“提交”变量是否设置卜已设置，做数据验证I卜验证通过一 业务逻辑处理一 使用包含页面方式或重定向方式返回到特定页面I验证不通过一 保存用户输入的数据一退出表单提交处理到表单页面流程中未设置，做表单页面流程，如有来自提交流程中产生的用户输入数据，则显示出来其中，使用包含页面方式返回到特定页面可以避免一次客户端重定向过程，比客户端重 定向过程还要快捷和稳定一些。但是有些情况下因

10、为代码变量冲突或其他原因，使用包含页 面方式可能并不方便，这时候可以使用服务器端重定向技术，在ASP里是Server.Transfer 方法，在 Java Servlet 里是 RequestDispatcher.forward()方法。不要使用 Response.Redirect 或者 HttpServletResponse.sendRedirect()这种客户端 HTTP 重定向方 法。不使用中间过渡页面也就意味着用户不能后退浏览原先已经填好的表单页面，因为使用 的是同一个URL。所以在验证不通过情况下保存用户输入的数据就是必不可少的。不使用中间过渡页面带来的另一个问题就是使用包含页面方式

11、或服务器端重定向方式 返回会使得URL和页面内容不能一一对应。对于用户可能会直接用这个URL（会收藏这个URL） 访问返回页面的情况，他会发现实际上到达的是表单页面，不是他想要的那个返回结果页面。 所以，去除中间过渡页面，确实会带来URL和内容含混不清的情况，因而不适合需要URL 和页面内容一一对应的场合。二，从技术角度考虑，使用中间过渡页面能保证URL和页面内容一一对应，简化页面开 发工作。为了保证页面内容总是和固定的URL联系起来，必须使用客户端重定向： 提交业务逻辑处理（中间过渡页面）表单页面 接收表单页面 显示处理结果 客户端重定向到特定页面客户端重定向分几种情况：1，使用 HTTP

12、Header重定向， Location:,这种定向是最快的，在窗口一片空白的情况下就迅速访问 （GET）另一个页面。这种方式实际上不能显示处理结果，只能说是向第一种快速重定向方 式的一种折衷处理；2,HTML 标签刷新，META HTTP-EQUIV=Refresh CONTENT=5;URL=，这种定向比较友好，在这个页面加载完毕 后访问另一个页面。很多设计者把这个作为一个技巧使用，在载入一个大页面前放置一个缓 冲页面以避免用户乏味的等待；3, JavaScript重定向。由于是用代码控制重定向，可以做的 更灵活。比如根据用户习惯，控制操作完毕后的转向流程。4,被动式的重定向。在页面上 放置

13、按钮或链接，由用户手动决定返回到特定页面。这种情况适合于处理结果的显示页面包 含相当多的信息，需要用户仔细浏览，而决定下一步的操作。在使用中间过渡页面的情况下，不能再使用页面过期失效了。否则一旦出现错误，需要 用户重新输入表单数据，用户就不能用后退按钮恢复此前填写的表单数据了。除非设计者有 意禁止这种恢复。防止表单重复提交处理对提交按钮点击后做变灰处理避免在网络响应较慢情况下用户重复提交同一个表单。使 用页面过期失效避免用户后退浏览重复提交表单。有些复杂的应用会导致需要较长时间的等待才会返回处理结果。而在较慢的网络环境 中，这种情况更是频繁发生。焦急等待的用户往往会重复点击提交按钮。这种情况是

14、设计者 所不希望看到的。使用JavaScript在点击提交按钮后使按钮失效变灰是一个最直接的办法（根据原则2这 段代码应该放在form标签里onSubmit=” 做）。此外，在表单页面上，用服务器端脚本 设置HTTP Header的Expires为立即过期可以保证用户没办法使用后退浏览恢复表单页面。 注意这样做的代价可能是用户辛辛苦苦填写很长的内容，结果一旦操作失误就没法恢复。所 以应该避免在包含textarea表单元素的页面上使用页面过期失效。应该说，更严格的方法是，服务器端脚本就应该具备抵抗重复提交的能力。例如，为这 个表单分配一个唯一 ID或一个使用一次即失效的验证码。此外，这个表单处理

15、还应具有事 务性质，如果表单不被接受，所做的改变还是能恢复的。在金融应用场合，重复提交同一笔 交易是肯定不被允许的。能在重复提交中获利的一方总是会想办法绕过浏览器的限制，所以 不能依赖于客户端的技术。页面链接是打开新窗口、使用原窗口还是弹出窗口的原则一般而言，首页上链接可以使用target=”_blank”属性打开新窗口，而其他页面上的链接 都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可 以使用弹出窗口方式。一般情况下应该使用原窗口，把是否保留原窗口内容的权利留给用户。除非设计者相信 原页面是如此重要，在用户发出点击指令后还有使用上的价值，以至于不能被随便更新

16、或覆 盖。一般来说，只有首页才会处于这样一个地位，用户在首页上打开一个链接后，一般还会 在这个首页上去打开另一个链接。比如首页包含极多链接的门户网站，或者搜索引擎的搜索 结果页面。G以前的搜索结果页面上的链接是使用原窗口的，后来他们意识到用 户会反复使用这个页面，而改成打开新窗口了。一般的网站如果首页链接不多，就不必使用 新窗口，这是用户友好的设计原则。上述情形的一个极端情况就是新页面内容比起原页面内容的重要性差很多，以至于都未 必需要打开一个新页面。这时候使用弹出窗口比较合适。用JavaScript弹出窗口有好几种： 一个是window.open()函数。这里有个技巧。应该使用window.

17、open()先打开一个空白窗口， 再使用location.replace()用目标页面替换。这样做可以避免在打开新页面的过程中导致原页 面失去响应。Window.open()将打开一个新的浏览器窗口进程，因此资源消耗比较大。另一 个是由微软DynamicHTML规范中扩充的方法createPopup()。createPopup()可以创建无边框 的弹出窗口，消耗系统资源较小。还有一个就是用页面中隐藏的层div来模拟一个弹出页 面。后两种可以使用JavaScript代码填充弹出窗口内容。如果需要下载网页作为其内容的话， 需要微软DynamicHTML规范中的download标签。尽可能少的排列可

18、选项，尽可能少的安排操作步骤根据用户操作习惯安排尽可能少的操作菜单选项，同时要保证尽可能少的操作步骤。在不降低功能多样性的前提下减少菜单项和操作步骤是用户友好的设计。要做到这一点 很不容易。要从用户出发考虑他们最频繁的操作是什么。正常情况下一个用户需要的操作总 可以归类为5个以下的种类，如果出现更多的种类，那一定是没有针对用户兴趣去区分主次。 一个用户同时有5个以上的强烈兴趣中心是难以想像的，走马观花似的随意点击浏览的用 户，是不大可能在某个种类上进行深入的交互操作的。在这5个种类中，每个种类都可能有 若干个可操作的二级种类。如果这些二级操作项是不可见的，那么意味着要做两次选择才能 进入可操作页面。这就违背了 “尽可能少的安排操作步骤”这一原则。如果使用JavaScript 制作二级菜单，避免请求服务器，会好一些。如果二级菜单项总共不超过20个左右，不妨 将二级菜单直接显示出来，比如放在左列一字向下排开，这样只需要一次选择到可