页面交互网页设计

1、页面元素焦点切换

在WEB页面中，为了提高与用户的交互，当各种页面元素需要获得或失去焦点时，以下几种场景的网站设计页面交互的方法是：2、 信息填写

验证输入信息：

如果需要验证填写的内容，需要在输入框失去焦点时判断数据的合法性，并在输入框后给出提示。如图所示：

提示输入信息：

在填写一组需要验证的数据时，如果有必填项，需要在输入框后面给出一个标志，并说明填写规则。如图：3、鼠标交互响应

处理鼠标在页面上产生的事件。当页面元素获得焦点、被点击或失去焦点时，需要响应控件本身的颜色、大小或形状的变化，也可以添加声音响应。

以下是各种情况下的鼠标交互示例：

例如：

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

链接：字体变粗，或者字体颜色改变，或者背景颜色改变，如图：

4、操作结果确认

在提交数据，或者关闭包含数据的页面，或者其他需要用户确认和交互的场景下，软件需要能够以弹窗的形式提供一个要求用户确认执行结果的对话框-up 页面，包括以下几种情况：

提示确认输入信息是否正确：弹出对话框，列出填写的内容，要求用户确认内容的正确性，并给出“确定”和“取消”的选择按钮；

提示确认数据变更是否保存：弹出对话框，提示当前页面内容发生变更，要求用户确认是否保存变更信息，并给出“是”和“”的选择按钮不”;

提示确认是否跳转当前页面：弹出对话框，提示用户跳转到另一个页面，要求用户确认是否离开当前页面，并给出“是”和“否”的选择按钮；

确认删除数据内容：弹出对话框，提示用户删除当前选中的内容，要求用户确认是否继续删除操作，并给出“确定”和“取消”选择按钮；5、其他规则

对于信息交换的过程，需要遵循的其他规则是：

重要的命令按钮和经常使用的按钮应该放在界面上相对固定的位置；

容易造成操作错误或导致程序退出或关闭的按钮，应不显眼，放置在不易点击的地方；

与正在进行的操作无关的按钮应该被屏蔽，例如：按钮的背景显示为灰色；

对可能导致数据不可恢复的操作必须提供确认信息，给用户放弃选择的机会；

非法输入或操作应有充分的提示；

对于操作过程中出现问题而出现错误的地方应该有提示，让用户了解错误的来源，避免无休止的等待；6、页面信息提示

在网页提供的功能中，很多时候，系统需要向页面发送一些必要的提示信息，以显示给用户。这些信息的分类如下：

警告信息

禁止信息

操作执行成功消息

操作执行失败信息

错误信息

帮助信息

提示信息

此信息显示在当前页面或弹出页面上。如果是弹出对话框的形式，对话框的页面结构如下：

标题区：简要给出提示信息的性质，例如：警告：非法操作！

图标区：给出符合提示信息性质的图标；

提示信息区：给出本次提示信息的具体内容；

按钮区：给出按钮供用户选择；

对话框的背景颜色要求与系统整体风格选择的颜色一致，右上角的操作区只保留一个可操作的功能关闭，最小化和最大化功能会不被显示。