Axure常用交互功能案例-免费

以下是一些Axure常用功能的案例：包含了几百个组件案例可供学习。

链接地址：

交互样式案例

• 按钮的悬停和按下效果：将一个矩形元件设为按钮，在“交互”板块中为其添加“鼠标悬停”样式，如改变按钮颜色或添加阴影，让用户知道鼠标在按钮上方。还可添加“鼠标按下”样式，如使按钮稍微缩小，模拟真实的按钮按下效果，增强交互体验。
• 文本框的状态样式：对于文本框元件，除了Axure默认的“提示”和“禁用”样式，还可添加“鼠标悬停”和“获取焦点”样式。比如，当鼠标悬停在文本框上时，边框颜色改变；获取焦点时，边框加粗或变色，使用户清晰了解文本框的当前状态。

动态面板案例

• 图片轮播效果：拖入一个动态面板，双击后将图片放入其中。勾选动态面板右边样式中的“自适应内容”和“100%宽度”，让面板随图片大小自适应。复制多个状态，每个状态放置不同图片，再添加箭头图标并设置交互事件，如单击箭头时，目标为动态面板，选择“上一项”或“下一项”，并勾选“向前循环”或“向后循环”，实现图片轮播。
• 多状态切换效果：创建一个包含多个状态的动态面板，每个状态代表不同的内容或页面部分。例如，设计一个底部导航栏，点击不同的导航按钮，通过动态面板切换显示不同的页面内容，模拟应用程序中不同页面之间的切换效果。

交互事件与动作案例

• 表单验证：在登录表单中，当用户点击登录按钮时，通过“交互事件”检查用户名和密码文本框的值。若值不符合要求，如用户名或密码为空，使用“显示/隐藏”动作显示错误提示信息；若值正确，使用“打开链接”动作跳转到欢迎页面。
• 下拉列表联动：有两个下拉列表，一个选择省份，一个选择城市。当省份下拉列表的选项改变时，通过“选项改变”事件获取所选省份的值，然后根据该值使用“设置选中项”动作设置城市下拉列表的可选选项，实现联动效果。

动画效果案例

• 淡入淡出效果：用于显示或隐藏元件时，使其以淡入淡出的方式出现或消失，让界面切换更平滑。例如，当弹出一个提示框时，提示框以淡入的方式显示，一段时间后以淡出的方式隐藏。
• 旋转动画：可应用于一些图标或元素，使其在特定操作下旋转。比如，点击一个刷新图标，图标以中心为锚点进行360度旋转，给用户一个视觉上的反馈，表示正在进行刷新操作。