页面交互网页设计

1、页面元素焦点切换
在WEB页面中，为了提高和用户之间的互动，需要在各类页面元素获得焦点和失去焦点的时候，在如下场景中采用网站设计页面交互的方法有：

2、 信息填写
对输入信息验证：
如果需要校验填写内容，则需要在输入框失去焦点时进行数据有效性的判断，并在输入框后给出提示。如图：



对输入信息提示：
在一组需要被验证的数据填写时，如果有必填项，需要在输入框后面给出标志，并对填入的规则加以说明。如图：



3、鼠标交互响应
对鼠标在页面中所产生的事件进行处理，当页面元素获得焦点、被点击、失去焦点时，则需要控件本身在颜色、大小或形状上的变化给与响应，亦可以添加声音响应。
下面是各种情况下的鼠标交互示例：

例如：

按钮：按钮颜色改变、或形状，或字体改变，如图：



链接：字体变粗、或字体变色、或背景变色，如图：



4、操作结果确认

在提交数据，或是载有数据的页面关闭，或其他需要和用户进行确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：

提示确认输入信息正确：弹出对话框，并将已填写的内容列出，要求用户确认内容的正确性，给出“确定”和“取消”的选择按钮；
提示确认数据更改是否保存：弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出“是”和“否”的选择按钮；
提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出“是”和“否”的选择按钮；
确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除的操作，给出“确定”和“取消”的选择按钮；

5、其他规则

对于信息交互过程中，其他需要遵守的规则有：

重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；
容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；
与正在进行的操作无关的按钮应该加以屏蔽，例如：按钮背景为灰色显示；
对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会；
非法的输入或操作应有足够的提示说明；
对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待；

6、页面信息提示

在web页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：

警告信息
禁止信息
操作执行成功信息
操作执行失败信息
错误信息
帮助信息
提示信息

这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式，对话框的页面结构如下图：

标题区：简要给出此次提示信息的性质，例如：警告：操作非法！
图标区：给出和此次提示信息性质匹配的图标；
提示信息区：给出此次提示信息的具体内容；
按钮区：给出供用户进行选择的按钮；
对于对话框的背景颜色，要求和系统的整体风格选取的颜色一致，而右上角的操作区只保留关闭一个可操作功能，最小化和最大化的功能将不显示。