Axure RP 万能的标签切换面板-动态面板切换_陪学PEXUE的博客-程序员秘密

技术标签：原型设计 web 交互设计产品设计 axure

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

步骤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

本文链接：https://blog.csdn.net/PEXUE/article/details/42872473

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

spring batch学习笔记之元数据表_spring batch元数据表_财神爷驾到了的博客-程序员秘密

作用spring batch框架通过元数据表（meta data tables）来保存每个job的执行情况。包括记录每个job的名称和参数，每个job execution的状态和执行结果，每个tasklet的状态和执行结果等。配置为了能让JAVA代码访问元数据表，需要做如下配置：（1）库表准备假设通过MySQL来存储元数据，需要确保已经安装MySQL，然后创建数据库和初

python学习笔记[2]-join 和 split_aizhi5208的博客-程序员秘密

python join 和 split方法的使用,join用来连接字符串，split恰好相反，拆分字符串的。1.join用法示例 >>>li = ['my','name','is','bob'] >>>' '.join(li) 'my name is bob' >>>'_'.join(li) 'my_...

Zbrush2021写实人物肖像雕刻学习教程_云桥网络.的博客-程序员秘密

Zbrush 2021写实人物肖像雕刻学习教程 Zbrush 2021 Character Likeness Sculpting Tutorial大小解压后：24G 持续时间32h 1280X720 MP4 语言：英语+中英文字幕（根据原英文字幕机译更准确）标题:Udemy–Zbrush 2021人物肖像雕刻教程信息:安东尼·霍普金斯相似课程:你唯一需要的相似课程是让任何角色变得更像真人。你会学到什么–如何塑造照片写实的人物形象–如何将您的模型与参考相匹配。–如何在Zbrush中制..

python处理考勤数据_利用Python实现对考勤打卡数据处理的总结_weixin_39899226的博客-程序员秘密

利用Python实现对考勤打卡数据处理的总结一、背景交代二、说明三、 8种方法1. 查看文件是否存在2. 导入excel文件，并把数据保存为dataframe格式3. 计算程序运行时间4. 对格式为“年-月-日时:分:秒”的时间进行截取5. 利用已有一列得到一个新列6. 数据聚合7. 数据合并(两个dataframe的合并)8. 程序运行完毕，自主决定关闭运行窗口四、主要参考资料五、后记一、背景...

Spring实战——Bean定义中的SpEL表达式语言支持_chengqiuming的博客-程序员秘密

一配置<?xml version="1.0" encoding="GBK"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http:/...

C++标准库源码分析之 iterator_Louis-Henry的博客-程序员秘密

本文代码根据 GNU ISO C++ Library 所含库文件整理，同时参考了 Microsoft Visual Studio Community 2017 版本 15.8.4 的库文件源代码和《STL 源码分析》（侯捷著）中的第 3 章内容本文暂时略去了源文件中的异常处理代码iterator 概述每一种 STL 容器都有专属的迭代器，避免暴露容器的内部结构iterator 的种...