Axure RP 万能的标签切换面板-动态面板切换

 切换面板在网页中算是非常常见的，如视频网站的电视剧分类标签、资讯网站的资讯分类等；这些交互效果都可以利用动态面板的几个状态来进行相互切换得来。下面来介绍一下如何制作这样的标签。

步骤1：

从部件库中拖拽一个动态面板到线框图编辑区中，并在“部件交互和注释”窗口中命名为“通知”

步骤2：
双击动态面板“通知”，打开动态面板管理窗口，点击“+”按钮，新增4个状态，并将状态命名为：公告、规则、论坛、安全、公益

 

步骤3：
在“通知”动态面板管理窗口中，双击“公告”状态，打开“公告”状态，在公告状态中输入公告的内容

 

步骤4：
选中公告中的文字，在“部件属性和样式”窗口中，点击“鼠标悬停时”，打开“设置交互样式”窗口，设置鼠标悬停时字体颜色：#FF4400；切换到标签“鼠标按键按下时”，设置字体颜色：#FF4400。

 

步骤5：
打开“公告”状态，选中“公告”，在“部件交互和注释”窗口中，双击“鼠标移入时”事件，打开用例编辑器

 

步骤6：
在用例编辑器中，
第二步：点击新增动作——选择“动态面板”；
第四步：配置新动作——勾选中“通知（面板状态）”，在“选择状态”后下拉选择“公告”；
点击“确定”，保存设置，并关闭用例编辑器。


步骤7：
参考步骤3-4，给其他面板状态添加内容并设置交互样式；
参考步骤5-6，分别给“规则”、“论坛”、“安全”、“公益”添加“鼠标移入时”事件，设置面板状态到对应的状态中；

步骤8：
回到首页线框图编辑区中，选中动态面板“通知”，在“部件属性和样式”窗口中，勾选“调整大小以适合内容”

 

步骤9：
保存，生成原型预览效果

axure快速原型设计免费教程网站“陪学网“（www.pexue.com），该视频教程的学习地址：http://www.pexue.com/Course/newlesson/a23c3faa-b542-4d1f-8b73-2e7025be36d3?specialid=fc936bf5-a87a-4f3d-b75d-c09be7963cf5