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

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

链接地址:

交互样式案例

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

动态面板案例

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

交互事件与动作案例

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

动画效果案例

  • 淡入淡出效果:用于显示或隐藏元件时,使其以淡入淡出的方式出现或消失,让界面切换更平滑。例如,当弹出一个提示框时,提示框以淡入的方式显示,一段时间后以淡出的方式隐藏。
  • 旋转动画:可应用于一些图标或元素,使其在特定操作下旋转。比如,点击一个刷新图标,图标以中心为锚点进行360度旋转,给用户一个视觉上的反馈,表示正在进行刷新操作。
相关推荐
太阳上的雨天14 小时前
与 TRON (波场) 区块链进行交互的命令行工具 (CLI): tstroncli
typescript·区块链·交互·tron·trx·trc20
白云~️1 天前
js实现宫格布局图片放大交互动画
开发语言·javascript·交互
大曰编程2 天前
行为型模式-协作与交互机制
wpf·交互
贝格前端工场3 天前
旧系统UI焕新陷阱:保留业务习惯与引入新交互的平衡点把控
ui·交互
重生之我是Java开发战士3 天前
WEB :实战演练——从零实现一个交互轮播图(附源码)
前端·交互
好好研究4 天前
js的基本内容:引用、变量、打印、交互、定时器、demo操作
前端·javascript·交互
易知微EasyV数据可视化4 天前
EasyMan 数字人服务全面焕新,交互型AI数字人助推孪生体验全新升级
人工智能·交互·数字孪生·数字人
星期天要睡觉6 天前
python网络爬虫(第三章/共三章:驱动浏览器窗口界面,网页元素定位,模拟用户交互(输入操作、点击操作、文件上传),浏览器窗口切换,循环爬取存储)
爬虫·python·交互
格调UI成品7 天前
游戏化营销新玩法:Three.js打造可交互品牌虚拟空间的技术与创意融合
javascript·游戏·交互
AI 嗯啦7 天前
爬虫小知识(二)网页进行交互
运维·服务器·开发语言·爬虫·python·交互