axure9实用操作通过设置尺寸和移动交互事件实现页面大小和内容展示动态变化

最新推荐文章于 2024-08-06 13:32:27 发布
最新推荐文章于 2024-08-06 13:32:27 发布
阅读量4.4k 收藏
点赞数
分类专栏： 工具 文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qw8704149/article/details/106535027
版权
本文介绍如何根据用户选择的不同选项（如总行或广州分行），动态调整弹窗的尺寸和内容。当选择总行时，弹窗尺寸会减小并隐藏父级节点字段；而选择广州分行时，弹窗尺寸恢复并显示所有字段。通过添加交互事件实现这一功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.需求说明

需求说明1
需求说明2
如以上两图，选择"总行"时,点击修改按钮打开修改组织弹窗，表单行"父级节点"消失，余下表单上移，弹窗尺寸变小，而选择"广州分行"时,点击修改按钮打开修改组织弹窗，表单行"父级节点"重新显示，其余表单行下移，弹窗尺寸变大

2.实现步骤

  1. 为"总行"选择按钮添加交互事件
    总行设置尺寸
    如上图 添加"选中时-设置尺寸"交互事件，示例中是将原来高度520调整为450
    总行移动事件
    如上图，添加"选中时-移动"交互事件，示例中移动方式To ，y轴方向-70

  2. 为"广州分行"选择按钮添加交互事件
    广州分行设置尺寸
    如上图 添加"选中时-设置尺寸"交互事件，示例中是将高度还原为520
    广州分行移动事件
    如上图，添加"选中时-移动"交互事件，示例中移动方式To ，y轴方向还原为0

至此配置完成，以上说明仅为实现编辑弹窗显示前弹窗大小和弹窗内容动态变化，弹窗的显示隐藏需通过修改按钮和关闭弹窗的按钮配置

Axure实战——改变元件尺寸、增减商品数量、图片边框移动
格物的专栏
08-27 5467
改变原件尺寸 增减商品数量 图片外框移动 This:标识当前元件对象，指事件交互所在的元件 Target：表示目标元件对象，指case动作中所控制的元件 width：获取元件对象当前的宽度，使用方法“[[元件对象.width]]” height：获取元件对象当前的高度，使用方法“[[元件对象.height]]” 1、改变原件尺寸 点击之前： 点击之后： 设置鼠标点击事件，...
Axure内联框架跟着页面内容自动改变高度
qq_41490172的博客
07-14 5528
今天突然在做Axure内容的时候，想到能不能将内联框架做的像HTML界面一样，跟随页面内容自适应高度。想到这，就开始着手研究一波，最后成功找到思路。 先打开三个界面 从元件库中拉出两个按钮和一个内联框架 内联框架样式选择为隐藏边框，从不滚动 在按钮测试1上打开交互，添加交互，点击单机时，选择框架中打开链接，链接到界面测试2，点击完成 在按钮测试2上做如4操作，界面链接至测试3 点击项目，打开全局变量，添加全局变量为height，默认值为0 在测试2页面中拉入一个矩形框
【Axure教程】Axure控件大小调整小技巧
liuping750929的专栏
11-01 3177
转载：老二牛车教育 » 【Axure教程】Axure控件大小调整小技巧 使用Axure RP 制作原型时，经常需要对Widgets的大小做调整；一般我们都是通过拖动控件的边框来实现调整大小，但是如果目标区域比较狭小的时候，调整大小就比较费力，不是拖大了就是拖小了； 试试方向键吧！选中需要微调大小或位置的控件，再选中需要微调的条件，如图，调整控件的高度： 如果需要增加控
Axure 交互案例：放大缩小图片
03-25 2681
产品经理在进行原型设计的时候，时常会遇到这样一种动态效果：鼠标移入到页面中的某个图片或者图标上，图标会进行放大，提醒用户现在鼠标所在的位置为当前的图片。移出该图片时，图片的尺寸回复为原本大小。 通常我们会在图片的展示页面中用到它，比如电商网站中商品的展示页面。 在前面的分析中，我们基本知道这个交互的逻辑是怎样的了，那么这个效果在Axure RP9中应该怎么样去操作设置呢？我们一步步...
axure9设置放大隐藏的弹窗（含遮罩层）
weixin_68221025的博客
12-29 1429
同时也拖拽出通过点击需要显示的元件，并隐藏，如下图，黄色的区域为隐藏的元件（我此处是做了一个动态面板，下图中命名的“抓拍录像弹窗”，通过点击抓拍、录像来放大显示不同的图片或者视频，因此可以直接将两个弹窗放在动态面板当中）。给图中“点击的元件”设置点击事件：当鼠标单击时，设置到动态面板抓拍录像弹窗到图片，隐藏/显示中选择显示动态面板抓拍录像弹窗 且选中显示到最顶层，选择灯箱的遮罩层。首先，在axure中拖拽出需要点击的元件，通过点击此元件来显示其他元件的作用。下图为“放大显示的区域/元件”的具体展示。
【Axure教程】根据标签数自动调整尺寸的多选下拉列表
mushe93的博客
06-15 1747
今天教大家在Axure里如果用中继器制作一个多选下拉列表，并且根据已选项自动生成标签的原型模板~~~
Axure RP 9：使用数据列表展示动态内容
# 1. 简介 ...而数据列表可以帮助我们以结构化的方式展示和管理这些动态内容，同时还可以通过数据的加载和筛选功能，实现内容的动态展示和交互效果。因此，在设计交互原型时，使用数据列表展示动态内容
axure-rp-pro-中高级交互实例教程共21页.pd
11-21
Axure RP Pro是一款强大的原型设计工具，主要用于中高级交互设计师创建和实现复杂的Web和移动应用交互。本教程“axure_rp_pro_中高级交互实例教程共21页.pdf”涵盖了Axure RP Pro的高级功能和实用技巧，旨在帮助用户...
Axure RP界面设计初探：基础操作与实用技巧
最新发布
2301_79599164的博客
08-06 1311
Axure RP是目前流行的设计精美的用户界面和交互软件。Axure RP提供了一组丰富的RP。UI 控件，这些控件根据它们的应用领域进行分类。作为Axure的国产替代品，它可以在线协同工作，浏览器可以在不下载客户端的情况下立即打开和使用。如果以前用Axure，想切换到即时设计，直接拖Axure是很简单的。即时设计工作台上的RP文件，可以一键导入Axure文件，云加载流畅，省时省力，高效迁移。
AxureRP9进阶技巧：动态面板与复杂交互的创建秘籍
首先介绍了动态面板的基础概念和基本操作，接着分析了如何通过动态内容加载、交互逻辑和状态管理实现复杂交互。性能优化和用户体验设计是确保动态面板高效运行的关键部分，文中提供了实用的性能调优技巧和用户体验...
Axure动态轮播图实现与按钮演示教程
2. 交互动作（Interactions）：通过设置交互动作，可以定义当用户进行特定操作（如点击按钮或滑动）时，动态面板中的内容如何变化。通常，设计师会设置自动播放功能，让轮播图按照设定的时间间隔自动切换状态。 3. ...
qgraphicsview 添加矩形框并拖动改变大小_Axure教程：列表拖动排序
weixin_39845113的博客
12-06 445
本文将为大家介绍如何用Axure实现列表拖动排序的上下拖动，希望该教程对你有所帮助。最近使用Axure过程中碰到要对列表做排序，自然想到的是用中继器来实现。看了这篇文章《Axure教程：列表拖动排序的实现方式》 受到了不少的启发，但是只能向上拖动毕竟不太好，经过研究发现还是有办法实现上下拖动的。我使用的是Axure RP 9，如果是Axure RP 8原理上基本相同。一、原型原理要进行拖动排序，主...
Axure RP9 ——【面板随鼠标方向移动】
两条线-twolines
11-19 3461
面板随鼠标方向移动 目录 面板随鼠标方向移动 I.效果演示 II.页面布局 I.效果演示 当鼠标从元件的【上、下、左、右】方向移入时，则浮层从对应方向滑进。 当鼠标从其它方向移出时，则跟随一起移出，效果如下： Axure RP9——【面板随鼠标方向移动】 II.页面布局 1.元件 （1）提前准备好的图片；可自行固定一个尺寸；这里为：500*200； 设置一个“浮层”，用矩形框和文本制作即可，填充颜色，更改透明度；大小和尺寸和图片一样 （2）...
Axure RP9 动态面板操作使用
m0_65421975的博客
03-08 9152
一、制作折叠菜单 首先我已将Axure RP9汉化了，所以用起来比较方便。 1.打开Axure RP9工具新建文件，从左侧元件库中基本元件拉出一个矩形，这里我设置是w为200，h为50（设置宽高随意），色值为#333333，在矩形框内输入“菜单”，然后命名为“一级菜单”。 2.再拖进一个矩形，同样的宽高比例，色值为#FFFFFF(纯白色)，在矩形内输入“一”，然后在复制两个分别为“二”“三”。 3.设置交互模式，全选“一、二、三”，右键点击交互样式，选择鼠标悬停，色值#D7D7D7,然后再选“选
Axure RP9教程 列表分页大小
jun118166的博客
06-28 1万+
Axure RP9教程 利用中继器设置每页下项目数一、说明二、案例演示三、操作说明 一、说明 上一篇我给大家介绍了列表查询功能，本篇将给进一步给大家介绍如何设置列表每页项目数，如何实现这样一个功能，axure中的中继器设置每页项目数给我们提供了良好的工具。 二、案例演示 案例链接 三、操作说明 在列表元件底部添加一个分页下拉控件，分别为10，20，30，40，50； 为了让我们实现一个设置分页项目效果，我需要列表中的数据进行填充至30行以上； 数据填充完之后我们发现列表的高度超过了页面本身，下拉框也被撑
Axure rp9的使用——动态面板
热门推荐
GrantF的博客
02-23 3万+
一、动态面板 1、面板折叠 我们是需要在做好动态页面后，有两个面板页面，即一个展开一个折叠。 这就是前期我们准备折叠的部分， 接下来返回，对面板添加交互——页面点击时——设置面板状态，设置动作如下 就可以。这样就可以查看到页面的折叠效果，但是这里有一个需要注意的地方，我们需要将向下滑动的时间尽可能的短，否则下滑效果会很难受，很清晰的看到每一个动画滑过的状态。 2、标签导航 实现效果就是一般...
axure 图片切换图片的交互_Axure：图片切换放大、缩小效果展示
weixin_34566429的博客
01-03 702
下面分享一个常见的图片切换效果(放大缩小的感觉)，要学会该效果，需掌握两个知识点：改变组件尺寸和移动组件位置。先看下完成的效果：step1：基础知识点掌握1. 改变图片尺寸(1)缩小效果【缩小效果】点击“缩小”按钮时，以左上角为中心，缩小图片尺寸为原图片长宽的80%，[[Target.width*0.8]]中，Target指目标组件，因为该事件改变的是图片组件，所以Target指原型中图片，Tar...
Axure 9 实战案例，动态面板的应用 1，导航栏如何实现100%宽度
默林工作室
12-15 4407
这一节，我们首先来讲解一下，顶部导航栏怎样才能自适应窗口宽度，也就是实现100%宽度。为了节省教学时间，这里提前把导航栏的基本要素设计出来了，下面开始讲解。在导航背景上点击右键，在弹出菜单中选择“转换为动态面板”。我们再次在导航背景上点击右键，这时候可以看到，弹出菜单上多了一些选项。因为这是动态面板，我们可以对它进行很多设置，这里我们选择1...
Axure基础：事件和动态面板
若云流风的专栏
03-08 1440
Axure基础，事件和动态面板
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值