学习目标了解交互的原则熟悉交互的样式及条件掌握交互中的触发事件具有使用交互事件完成原型设计的能力

基本框架

界面效果

交互简介交互样式交互样式是指在触发特定事件时，用来控制元件部分样式的改变。交互样式有四种状态，分别是“鼠标悬停”、“鼠标按下”、“选中”和“禁用”。可以设置其字体、颜色、透明度等样式。

交互简介交互条件原型设计师在进行交互执行某一操作时，可能需要对其进行不同的条件设置，从而显示不同的内容。一般通过触发事件来设置交互条件，一种触发事件可以设置多个交互条件。

组件交互触发事件鼠标移入时：是指当鼠标进入到某个元件范围内之后触发鼠标移出时：是指当鼠标离开某个元件范围内之后触发鼠标单击时：应用于除了动态面板的所有元件，点击时触发按键松开时：编辑文本框内容时，在键盘上按下某一按键松开时触发

组件交互触发事件获取焦点时：一个组件通过点击触发获取焦点时用例失去焦点时：一个组件失去焦点时触发移动时：是指通过某一事件的触发控制面板移动时显示或隐藏时：当面板状态为显示或隐藏时触发

组件交互组件交互的使用组件的交互分为元件自身变化以及诱发其他元件变化。元件自身变化是指在使用触发事件时，仅仅使自身元件根据不同事件产生不同效果；诱发其他元件变化是指通过触发一个元件的某一事件，使另一元件随之发生改变。

组件交互组件交互的使用组件的交互分为元件自身变化以及诱发其他元件变化。元件自身变化是指在使用触发事件时，仅仅使自身元件根据不同事件产生不同效果。鼠标未移入时鼠标移入时

组件交互组件交互的使用诱发其他元件变化是指通过触发一个元件的某一事件，使另一元件随之发生改变。鼠标未移入时鼠标移入时

页面交互触发事件在页面交互设计中内，可根据不同应用场景选择不同的触发事件。页面中常用的触发事件有“页面载入时”、“窗口调整尺寸时”以及“窗口滚动时”。除了这三种常用的触发事件还有许多其他的触发事件。

页面交互页面交互的使用页面交互，一般是通过添加用例，链接到指定的页面或者页面地址，实现页面的跳转。第一种：链接到指定页面

页面交互页面交互的使用第二种：链接到页面地址

任务总结本任务使用动态面板以及交互的知识在组件与页面之间进行交互，实现了“腾讯QQ找回密码界面”原型设计。在熟悉元件使用的同时，掌握了组件交互与页面交互中的触发事件的使用。