AXURE-动态面板

1.概述

  • 动态面板原件,容器类的原件
  • 一个动态面板可以有多种状态

同一时刻只展示一个状态

默认展示第一个状态

  • 主要用于多个状态的切换
  • 可拖动

1.1 创建

  • 将原件库中的"动态面板"原件,直接拖动到工作区中,创建空白动态面板
  • 将页面中原件选中,右键-转为动态面板

1.2 编辑

进入编辑状态

  • 双击页面中的动态面板原件,可进入编辑区(以虚线框的方式显示)
  • 在概要区中单击需要编辑的状态或者状态中的原件

添加状态

  • 在已有的状态中,重复,将已有的状态进行克隆(包括状态里的原件)
  • 面板顶部,添加状态

删除状态

修改原件:进入编辑模式后,编辑

1.3样式、属性

样式工具栏:位置、尺寸

检视面板中的样式选项卡:填充、线段、滚动

  • 自适应内容:动态面板大小会根据内部原件的尺寸自动调整,不需要添加滚动也能完成显示内容
  • 滚动条:

从不滚动:如果状态中内容超过了动态面板大小,直接裁剪,不显示

按需滚动:出现水平滚动条、垂直滚动条

垂直滚动:出现垂直滚动条,水平方向超出的内容直接裁剪不显示

水平滚动:出现水平滚动条,垂直方向超出的内容直接裁剪不显示

  • 100%宽度(仅限浏览器有效):如果状态中的内容超出了动态面板大小,超出的宽度将在浏览器中完全显示出来,超出高度直接裁剪
  • 固定到浏览器:将动态面板固定到浏览器的具体位置,不会随页面滑动而移动
  • 从首个状态脱离:从动态面板里的第一个状态中脱离出来,转化为普通原件,同时状态1从动态面板里消失

1.4 事件

应用场景:轮播图、手机滑动、标签控制与拖拽效果等

  • 拖动相关事件:因拖动触发的时间
  • 滚动相关事件
  • 尺寸改变相关事件

2 动态面板示例

2.1显示/隐藏--实现登录

2.2拖动 -实现手机解锁

圆块拖动到手机最右侧,解锁

2.3 文字跑马灯

2.4banner图自动切换

(此处也可以将交互时间放到动态面板上)

自动轮播:自动轮播的同时,选中对应的小园点

小圆点点击切换图:

小圆点设为选项组

箭头左右切换:

2.6选项卡 多tab功能实现

tips:矩形小技巧

相关推荐
PMEcho14 小时前
墨刀监听变量实战:1个案例搞定高保真交互原型(附教程)
axure·变量·函数·交互设计·墨刀·原型设计·条件判断·高保真原型·监听·高级交互·高保真交互原型
PM大明同学12 天前
Axure PR 9 搜索 百度引擎 设计&交互
交互·axure
昕冉13 天前
Axure9中继器内部实现批量操作
设计模式·axure·设计
昕冉13 天前
Axure9中继器多数据实现分页
设计模式·axure·设计
昕冉13 天前
Axure9中继器实现数据排序
设计模式·axure·设计
冯浩(grow up)1 个月前
Axure Rp 11 安装、汉化、授权
axure
梓贤Vigo1 个月前
【Axure高保真原型】图片列表添加和删除图片
axure
害羞的白菜1 个月前
基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
数据分析·产品经理·axure·项目经理·墨刀
小赖同学啊1 个月前
Axure 与 Cursor 集成实现方案
axure
孤蓬&听雨1 个月前
Axure形状类组件图标库(共8套)
ui·产品经理·axure·产品设计·原型设计