combox控件触发事件_UI设计|网站公共控件及交互事件

一.网站地图与模块设计

网站地图又名SITE MAP,站点地图呈现树状结构，以主页为树的跟节点，站点地图采用树状结

构的优点是可以让我们对我们的产品整体模块和不同栏目、功能单元有一个清晰的认识。

网站地图分为扁平化模块的网站地图，还有纵向深入型，还有复杂深度型。

网站地图一般分2种，一种是给捜索引擎看的，一种是给用户看的，前者帮助捜索引擎更好地

收录你的网站，后者帮助用户更好的了解你的网站整体结构、更快的找到他们想要找的内容。

二.网页常见控件类型

1.控件尺寸，常见网页UI控件包括：

Label （标签）、ScrollView （滚动视图）、ScrollBar （滚动条）和 Mask （遮罩）。

Button （按钮）、ProgressBar （进度条）、EditBox （输入框）、CheckBox （复选

框）、Image （图片）、List （列表）、Menu （菜单）、navigation （导航）、Tab （选

项卡）、toast （提示）、alert （警示提示）、dialog （对话框）、Divider （分割线）、

timepicker （时间选择器）等。

各类网页UI控件还会自带样子，我们可以为同样的功能设计多种样式，举例时间选择器。

2.页面操作还会触发事件，例如；

按钮属性用于设置当按钮处在

普通（Normal）、按下（Pressed）,悬停（Hover）、禁用（Disabled）四种状态。

toast的消息提示分类一共有三种类型：成功类、失败类、常规类。

3.网页端表单的五种操作状态：

标签一输入框一反馈一动作一帮助

(1)标注一提示当前表单是做什么的

(2)输入框一用来输入信息的

(3)反箴一用户做了动作之后，界面回馈用户的信息

(4)动作一表单中的按钮，帮助人机操作的按键

(5)帮助一辅助用户了解用户功能的信息

4.反馈信息的类型：

A.push指的是系统的通知，从下到上弹出。

B.toast自己出现，自己消失，时间只有1秒，文字简短只有一行。

C.Tips是APP内部，或者网站内部，由顶部往下而来的通知。

Tips可以系统关闭，push-般不能。

D.下拉菜单和边栏，一般采取递进形式，每层级只一个关键字段信息。

E.Disable状态的提示（可点击状态，用颜色的灰度，告诉UI或者研发是不可用的。）

三.网页常见事件

1.UI事件：当用户与页面上的元素交互时触发。

•焦点事件：当元素获得或失去焦点时触发。

•鼠标事件：当用户通过鼠标在页面上执行操作时触发。

•滚轮事件：当使用鼠标滚轮时触发。

•文本事件：当在文档中输入文本时触发。

•键盘事件：当用户通过键盘在页面上执行操作时触发。

2.变动事件：当底层DOM结构发生变化时触发

•load：当页面完全加载后在window上面触发；当所有框架都加载完毕时在框架集上面触

发；当图像加载完毕时在＜img＞上面触发；或者当嵌入的内容加载完毕时在＜ object＞元素

上面触发。

•unload：当页面完全卸载后在window上面触发；当所有框架卸载后在框架集上面触发；或

者当嵌入的内容且在完毕后在＜object＞元素上触发。

•abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在＜object＞元素上触发。

•error：当发生javascript错误时在window上触发，当无法加载图像时在＜img＞元素上触

发，当无法加载嵌入内容时在＜ object内容上触发。

•select：当用户选择文本框(＜ input＞或＜textarea＞)中的一或多个字符时触发。

•resize：当窗口或框架的大小变化时在window或框架上面触发。

•scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。

•当焦点从页面的一个元素移动到另一个元素，会依次触发下列事件：

•focusout：在失去焦点的元素上触发

•focusin：在获得焦点的元素上触发

•blur：在失去焦点的元素上触发

•focus：在获得焦点的元素上触发