《Axure RP 9网站与App产品交互设计实践》课件 5.Axure交互基础

Axure交互基础技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理第五章AxureRP交互基础5.1AxureRP交互的三要素5.2实现注册信息验证交互功能第五章AxureRP交互基础5.1AxureRP交互的三要素事件（events）：是一个交互的触发器，例如，一个点击，鼠标悬停，鼠标拖动，一个拖放等。不同的部件拥有不同的响应事件。用例（cases）：是响应事件的路径，它可以定义条件逻辑。动作（actions）：对事件的响应，也可以理解为事件的结果。事件：当……，什么时候第五章AxureRP交互基础Axure的事件有两种：页面事件：页面加载时/页面载入……页面载入时OnPageLoad:当页面启动加载时窗口改变大小时OnWindowResize:当浏览器窗口大小改变时窗口滚动时OnWindowScroll:当浏览器窗口滚动时鼠标单击时OnClick:页面中的任何部件被点击时（不含空白处）鼠标双击时OnDoubleClick:当页面中的任何部件被双击时（不含空白处）鼠标右键单击时OnContextMenu:当页面中的任何部件被鼠标右键点击时（不含空白处）鼠标移动时OnMouseMove:当鼠标在页面任何位置移动时按键按下时OnKeyDown:当键盘上的按键按下时按键弹起时OnKeyUp:当键盘上的按键释放时自适应视图更改时OnAdaptiveViewChange:当自适应视图更改时当……什么时候第五章AxureRP交互基础Axure的事件有两种：元件事件鼠标单击时/鼠标移入时……鼠标点击并保持超过2秒时OnLongClick:当一个部件被点击并且鼠标按键保持超过2秒时按键按下时OnKeyDown:当键盘上的键按下时按键弹起时OnKeyUp:当键盘上的键弹起时移动OnMove:当面板移动时显示OnShow:当面板通过交互动作显示时隐藏OnHide:当面板通过交互动作隐藏时获取焦点OnFocus:当一个表单获取焦点时失去焦点时OnLostFocus:当一个部件失去焦点时鼠标单击时OnClick:当部件被点击鼠标移入时OnMouseEnter:当光标移入部件范围鼠标移出时OnMouseOut:当光标移出部件范围鼠标双击时OnDoubleClick:当时鼠标双击时鼠标右键单击时OnContextMenu:当鼠标右键点击时鼠标按键按下时OnMouseDown:当鼠标按下且没有释放时鼠标按键释放时OnMouseUp:当一个部件被鼠标点击,这个事件由鼠标按键释放触发鼠标移动时OnMouseMove:当光标在一个部件上移动时鼠标悬停超过2秒时OnMouseHover:当光标在一个部件上悬停超过2秒时动作动作1.链接：切换用户UI链接动作包括当前窗口打开链接、新窗口/标签页打开链接、弹出窗口打开链接、父窗口打开链接、关闭窗口、内部框架打开链接以及滚动到部件（锚点链接）。动作2.元件：元件效果元件动作是常用到的交互行为，它分为元件的显示/隐藏行为、设置元件文本行为、设置元件图像行为、设置元件选择/选中行为、设置元件选定的列表项行为、设置元件启用/禁用行为，设置元件移动行为，设置元件置于顶层/底层行为、设置元件获得焦点行为、设置元件展开/折叠树节点行为，元件的交互行为越丰富，制作出的原型交互效果体验度越真实。动作3.设置动态面板动态面板的动作包括设置动态面板的显示、隐藏以及设置动态面板的显示效果，同时可以设置动态面板的大小，通过动态面板的使用，可以使原型的交互效果更真实，体验度更好动作4.中继器：动态操作数据中继器的动作可以实现对数据的增加、删除、修改、查询等功能，模拟真实系统的数据库操作，进一步加强交互效果，给用户最真实的系统使用体验。案例当“用户名”文本框获取焦点时，显示提示信息；当“用户名”文本框失去焦点时，隐藏提示信息；交互对象：用户名文本框事件：当用户名文本框获取焦点时动作：显示提示信息事件：当用户名文本框失去焦点时动作：隐藏提示信息注意：提示信息初始状态为隐藏。交互对象：密码文本框事件：当密码文本框获取焦点时动作：显示密码提示信息用例1.新建、删除条件和条件之间关系当选择“全部”的时候，多个条件是并集关系，当设置的条件都满足时，才执行相关动作。选择“任意”的时候，当多个条件有一个满足时，就可以执行相关动作。2.条件设置条件设置部分可以理解为三个部分，用来比较图的圈4和圈6的关系，图圈5是运算符，是比较方式。随着图的圈4选择，圈6也是随着变化。交互对象：密码文本框事件：当密码文本框失去焦点时用例1：密码文本框

元件文字长度<6动作1：隐藏密码提示信息动作2：密码格式提示

设置文本

密码格式不符合要求

用例2：密码文本框

元件文字长度>=6动作：隐藏密码提示信息动作2：密码格式提示

设置文本“”案例当“密码”文本框失去焦点时，判断密码是否大于6位，否则显示提示信息：密码设置不符合要求；案例:多个逻辑条件当鼠标单击“注册”按钮时，如果用户名、手机号、密码文本框为空，则提示“用户名、密码、手机号不符合要求”；当鼠标单击“注册”按钮时，如果未选中“阅读同意协议”，则提示“请阅读并同意用户协议”；当鼠标单击“注册”按钮时，如果文本框不为空且同意协议，则打开链接“注册成功”页面。案例:多个逻辑条件5.2实现注册信息验证交互功能案例描述：当鼠标悬停用户名、手机号、密码文本框或获取焦点时，边框颜色改变；当“用户名”文本框获取焦点时，显示提示信息，失去焦点时，隐藏提示信息；当“密码”文本框失去焦点时，判断密码是否大于6位，否则显示提示信息；当鼠标单击“注册”按钮时，如果用户名、手机号、密码文本框为空，则提示“不能为空”；当鼠标单击“注册”按钮时，如果为选中“阅读同意协议”，则提示“请阅读并同意用户协议”；当鼠标单击“注册”按钮时，如果