AxureRP教程–动态面板高级应用

kuaidi.ping-jia.net  作者:佚名   更新日期:2024-07-02

  顾名思义,这个交互事件是用来设置动态面板的二维坐标位置的,应用频率较高,在需要更改某部分内容的位置时,都需要使用这个功能,与AxureRP的其他功能配合使用,如变量等,会做出很多效果。本文是一篇关于动态面板高级应用的文章。我们一起来了解下,希望对您有所帮助。

  前面介绍了动态面板的基本应用,通过设定不同的状态页面和按钮的单击事件,来完成小页面切换的效果,适用于TAB标签,图片轮换等效果。前面只应用到了动态面板的一个交互事件,即切换动态面板的显示状态,不过这也是最常应用到得状态,本文介绍动态面板的其他几种交互事件,包括显示动态面板,隐藏动态面板,切换动态面板可见属性,移动动态面板和将动态面板置为最前。

  在主页面上添加两个动态面板,一个为有产品,活动,新闻三个状态的动态面板Paneltest,一个为只设置一个测试状态的`Paneltest2,分别做好初始化的设置,并将Paneltest2的默认显示设置为隐藏。

  显示动态面板,隐藏动态面板和切换动态面板可见属性

  前面两项在动态面板的自身属性里面就能设置,在已添加的动态面板上右键—编辑动态面板,可看到设为可见和设为隐藏两个选项。这三项交互事件都是用来设置动态面板是否可见的,第三项就是当动态面板隐藏时将其设为可见,当动态面板可见时将其设置为隐藏,设置比较简单,选择了交互事件后再选择目标动态面板即可,不做过多介绍,一般应用在设置隐藏菜单,隐藏交互效果上,如隐藏的下拉式表单,隐藏的交互式提醒等。

  将动态面板置为最前

  这个与设置动态面板的可见属性有点类似,用来设置动态面板的显示层级,在同一片区域内有多部分内容重叠的时候,就可以用这个交互事件来设置当前的最顶层显示,这个设置也比较简单,选择好目标动态面板即可,一般应用不多,设计页面的时候不会有太多重叠内容,设置日期控件的时候会碰到,带选择日期功能的,另一种可能情况就是需要有覆盖功能的。

  移动动态面板

  顾名思义,这个交互事件是用来设置动态面板的二维坐标位置的,应用频率较高,在需要更改某部分内容的位置时,都需要使用这个功能,与AxureRP的其他功能配合使用,如变量等,会做出很多效果。移动动态面板分定位(to(x,y))和位移(by(x,y))两种,前者依据AxureRP自带的标尺来精确定位,后者则是根据设定的位移值来上下左右移动,都以像素为单位。设置时先选择目标动态面板,再选择移动方式,最后设置移动坐标或位移值。常见应用于流水线式的动态效果,抽屉式交互效果,可伸缩式导航菜单等,如常见的循环滚动展示效果,可用于图片展示。

  Example1-延时移动

  这个是例子是演示通过一个开关的控制,使设置页面是否展示出来的效果,动态面板会逐渐移动来实现延时的效果,首先设计一个设置页面,比如添加两个复选框组件设置复选功能,再添加一个动态面板覆盖在设置页面上,并设置一个状态页面,上面为提示性文字,再添加一个动态面板作为开关,设置两个状态,一个为打开设置,一个为关闭设置,这里也可以用按钮来控制,为了增加开关的可切换效果,采用了动态面板。

  初始化完成之后,设置开关的交互事件,分别选择移动动态面板,其中“打开设置”是使面板向下移动,“关闭设置”是使面板向上移动,这里采用位移的方式,需要注意的是,AxureRP的画布上标尺是朝右下的坐标轴,因此向下移动是正值,向上移动是负值。这里也可以用定位的方式做,不过会比位移的方式复杂很多,需要计算当前坐标。

  其实也可以用是否将面板设置为最前来达到相同的效果,即将设置页面也做成一个动态面板中的一个状态页 ,然后通过切换是否前置来完成效果,不过这样就没有延时的效果了。

  Example2-抽屉效果

  这个例子的实现原理与第一个例子差不多,是别人制作分享的,这里拿来举个例子,有兴趣的可以自己看源文件。



  • AxureRP教程–动态面板高级应用
    答:首先设计一个设置页面,比如添加两个复选框组件设置复选功能,再添加一个动态面板覆盖在设置页面上,并设置一个状态页面,上面为提示性文字,再添加一个动态面板作为开关,设置两个状态,一个为打开设置,
  • Axure RP 8怎么设置动态面板显示隐藏对象?
    答:1、双击打开Axure RP 8软件,查看动态面板的位置,如下图所示:2、在左侧基本元件中拖一个动态面板到画布上,调整位置和大小,如下图所示:3、选中该动态面板,双击它打开面板状态管理窗口,设置两个面板状态,如下图所示:4、打开面板状态管理,双击首页面板状态,移动一个文字标签到界面上,修改内容,...
  • axurerp快捷键_axurerp怎么用
    答:1、打开Axure RP 8,新建一个矩形元件。2、在右侧界面中选择“样式”中的“草图/页面效果”,可以选择想要的字体系列。3、对“不增加线宽”进行修改。4、调整上面“页面效果”,会发现数值越大,草图效果越明显 4. Axure使用 axure安装后,打开 工具栏-帮助-管理授权密钥,输入即可 5. AXURERP Axure...
  • Axure RP怎么设计弹出窗口的效果
    答:1、我日常工作中使用的是Axure RP8.0,并且已经安装了汉化包,详细版本信息如下 截图,在使用的过程中如果版本不一样,菜单会有些差异,但是操作步骤基本上是可以借鉴的。   2、正常打开Axure RP8.0工具,如下图,创建一个新的RP文件 。   3、在空白页面上从...
  • Axure正式版更新了哪些功能,如何在新版本中添加超链接和设置动态面板...
    答:组件样式编辑区增加了旋转功能,使得在Axure中创建斜线更加便捷。 对于输入表单,可以直接设置回车响应的默认执行按钮,只需右键选择"Assign Submit Button"并指定链接即可。 动态面板的固定位置功能简化了操作,现在可以通过右键选择"Pin to Browser..."来设置面板在浏览器窗口中的固定位置。 滚动到...
  • axurerp8怎么做轮播图
    答:axurerp8怎么做轮播图1、首先,拖拽一个动态面板到页面里2、双击动态面板调出:动态面板状态管理框,点击动态面板状态管理框的+号,设置轮播图的数量,及State的数量。点击确定按钮设置成功。3、重新双击页面里的动态面板。调出弹框,双击State1,进入到banner1设置中,放入图片;同样的操作,state2和state3...
  • Axure RP 8怎么设置页面弹出框居中显示?
    答:Axure RP 8网页中的弹窗正常情况都希望居中显示,该怎么设置呢?下面我们就来看看详细的教程。1、新建一个空白页面,本文以上传文件的操作为例进行说明,在页面中也已经加如动态面板,如下图所示 2、如果没有设置对话框居中,则弹出框的位置就会根据设计者摆放的位置进行展示,预览效果如下图所示。3、...
  • Axure RP中怎样使鼠标悬停在某处?
    答:1、正常打开Axure RP 工具,本文以新建一个空白页面为例进行说明。2、从左侧元件库中拖拽一个文本标签到空白页面中,如下所示。3、从左侧元件库中拖拽一个动态面板到空白页面中,双击该动态面板,编辑面板的名称和内容,如下所示。4、将该动态面板设置为隐藏。光标移到动态面板处,鼠标右键点击该元件,...
  • Axure RP 6.5版本。 一个单选框空间,动态面板A和动态面板B,一个按钮控 ...
    答:第一步把下图的部件都放在编辑区域 第二步选中按钮双击右侧上方的单击时三个字 第三步点选弹出窗口上方的添加条件如下设置:选中于==》单选框==》等于==》值==》真 》》》确定 选中左边栏中的显示动态面板右侧选A面板 选中左边栏中的隐藏动态面板右侧选择B面板》》》确定 第四步 复制用例原位置...
  • 如何用axure制作网页如何用axure做网页
    答:打开Axure8(axure7也是这样的axure7),默认是新创建的项目,找到“动态面板”组件,如下图所示:将组件拖到工作区,并将动态面板命名为图中所示的任意位置:TestPanel。双击动态面板组件,状态state1出现。双击进入状态1的编辑:拖拽一个图像元素到状态1,双击找到准备好的图片(红旗),这样第一个状态就编辑...