axure7.0教程(图文案例).pdf

作者：陪学 地址： 分类：axure交互设计 初学axure时会想如何快点实现做交互的效果，做交互要对部件的属性和axure 的基础功能有认识和了解才能更快的实现，我介绍这个案例主要用到的部件是“动 态面板”需要对动态面板的属性有所了解。 切换面板在网页中算是非常常见的，如视频网站的电视剧分类标签、资讯网站 的资讯分类等，当鼠标移入到这个标签的时候显示的内容会相应的变化，同时标签 的样式也会发生变化；这些交互效果都可以利用动态面板的几个状态来进行相互切 换得来。 步骤1：从部件库中拖拽一个动态面板到线框图编辑区中，并在“部件交互和注 释”窗口中命名为“通知” 步骤2 ：双击动态面板“通知”，打开 动态面板管理窗口，点击“+”按钮，新增4个状态，并将状态命名为：公告、规则、 论坛、安全、公益 步骤3：在“通知”动态面板管理窗口中，双击“公告”状态，打开“公告”状态，在 公告状态中输入公告的内容 步骤4 ：选中公告中的文字，在“部件属性和样式”窗口中，点击“ 鼠标悬停时”， 打开“设置交互样式”窗口，设置鼠标悬停时字体颜色：#FF4400 ；切换到标签“ 鼠标 按键按下时”，设置字体颜色：#FF4400 。 小技巧：经常看到在网页中，当鼠标悬停时两个或多个部件（例如图片和文字 ）的样式同时发生变化，要实现这个效果只要把要改变样式的两个部件放在动态面 板同一个状态中，设置它的交互样式，同时在动态面板属性中勾选“触发鼠标交互 样式”这样就可以实现了 步骤5：打开“公告”状态，选中“公告”，在“部件交互和注释”窗口中，双击“ 鼠标 移入时”事件，打开用例编辑器 步骤6：在用例编辑器中，第二步：点击新增动作—— 选择“动态面板”；第四步：配置新动作—— 勾选中“通知（面板状态）”，在“选择状态”后下拉选择“公告”；点击“确定”，保存设 置，并关闭用例编辑器。 步骤7：参考步骤3-4，给其他面板状态添加内容并设置交互样式；参考步骤5- 6，分别给“规则”、“论坛”、“安全”、“公益”添加“ 鼠标移入时”事件，设置面板状态到 对应的状态中； 步骤8：回到首页线框图编辑区中，选中动态面板“通知”，在“部件属性和样式” 窗口中，勾选“调整大小以适合内容” 步骤9：保存，生成原型预览效果