第4节web页面设计规范之页面交互
WEB页面交互
页面元素焦点切换
在WEB页面中，为了提高和用户之间的互动，需要在各类页面元素获得焦点和失去焦点的时候，在如下场景中采用页面交互的方法有：
信息填写
对输入信息验证：
如果需要校验填写内容，则需要在输入框失去焦点时进行数据有效性的判断，并在输入框后给出提示。如图：
对输入信息提示：
在一组需要被验证的数据填写时，如果有必填项，需要在输入框后面给出标志，并对填入的规则加以说明。如图：
如果输入框内有默认的文字，当输入框获得焦点时，需要将输入框内的文字处于全选状态。如图：
鼠标交互响应
对鼠标在页面中所产生的事件进行处理，当页面元素获得焦点、被点击、失去焦点时，则需要控件本身在颜色、大小或形状上的变化给与响应，亦可以添加声音响应。
下面是各种情况下的鼠标交互示例：
例如：
-按钮：按钮颜色改变、或形状，或字体改变，如图：
鼠标放上获得焦点前：
鼠标放上获得焦点后：
-链接：字体变粗、或字体变色、或背景变色，如图：
鼠标放上获得焦点前：
鼠标放上获得焦点后：
-页签：获得焦点的页签颜色变化，或页签的大小和里面的字体变大，如图：
鼠标放上获得焦点前：
鼠标放上获得焦点后：
-输入框，输入框的边框变色；
鼠标放上获得焦点前：
鼠标放上获得焦点后：
-表格，表格中行的底色改变；
鼠标放上获得焦点前：
鼠标放上获得焦点后：
-等待响应：当由于载入大量数据等原因，使得用户需要等待一定时间，需要将鼠标指针的形状变成时间漏斗的形状、或其他表示鼠标不可操作的样子来提醒用户等待。如图：
对于我们所使用的有关鼠标交互响应的规范，将结合页面风格在附录中给出说明。
页面信息交互
操作结果确认
在提交数据，或是载有数据的页面关闭，或其他需要和用户进行确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：
提示确认输入信息正确：弹出对话框，并将已填写的内容列出，要求用户确认内容的正确性，给出“确定”和“取消”的选择按钮；
提示确认数据更改是否保存：弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出“是”和“否”的选择按钮；
提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出“是”和“否”的选择按钮；
确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除的操作，给出“确定”和“取消”的选择按钮；
其他规则
对于信息交互过程中，其他需要遵守的规则有：
重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；
容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；
与正在进行的操作无关的按钮应该加以屏蔽，例如：按钮背景为灰色显示；
对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会；
非法的输入或操作应有足够的提示说明；
对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待；
页面信息提示
在web页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：
警告信息
禁止信息
操作执行成功信息
操作执行失败信息
错误信息
帮助信息
提示信息
这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式，对话框的页面结构如下图：
标题区：简要给出此次提示信息的性质，例如：警告：操作非法！
图标区：给出和此次提示信息性质匹配的图标；
提示信息区：给出此次提示信息的具体内容；
按钮区：给出供用户进行选择的按钮；
对于对话框的背景颜色，要求和系统的整体风格选取的颜色一致，而右上角的操作区只保留关闭一个可操作功能，最小化和最大化的功能将不显示。
对应采用的图标的图例为：
警告信息：
禁止操作信息：
操作成功信息：
操作失败信息：
错误信息：
帮助信息：
提示信息：
提示信息内容要求：
提示信息中如有标点符号，统一为全角符号；
提示信息如有主语，统一为‘您’；
在重要或复杂的操作成功后，给予提示信息；
有后续操作的操作在成功后，也需给予提示信息，说明当前的状态。
提示信息不宜太长，宽度应不超过当前窗口宽度的1/2，当超过此比例时，请视具体情况进行换行；
当功能按钮为图片按钮时，光标停留需给予浮动提示信息；
键盘响应支持
由于用户有时候还需要结合键盘进行操作，所以页面需要提供一些简单的键盘支持，例如：“Esc”、“Enter”、“Tab”“Space”，系统应对这些键值作出响应。其中：
Esc，“取消”当前操作；
Enter，“确认”或进行下一步操作或提交；
Tab、或Shift+tab能够在页面元素中按照一定次序切换焦点，遵循从左上至右下的原则；
其他快捷键的支持，需要根据项目的实际情况来定义。
