Axure9原型设计:动态面板实现页面增删改查模式弹窗效果

2021-03-0309:39:56原型设计Comments2,140 views字数 677阅读模式

9.0的版本下,动态面板实现页面增删改查模式弹窗效果,没有示例,所以做了一个简单的示例说明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

区别于8.0的版本,Axure9.0一些细节的改变让人感觉陌生了些。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

步骤如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

一、动态面板设置

1. 拖出动态页面,双击进入动态页面设计页面,增加相应的状态

比如增删改查四个状态,然后就在这四个状态下,完成各自的设计:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

Axure9原型设计:动态面板实现页面增删改查模式弹窗效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

其中确定按钮,有个点击事件,是用来隐藏动态面板,其实没有这个事件,鼠标点击在页面外也可以实现隐藏效果,只是增加了用户操作学习的成本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

2. 设计完动态面板各个状态之后,修改动态面板的几个属性

  1. 勾上“自适应内容”;
  2. 设置“固定到浏览器”,弹出后页面的位置,我设置为横竖居中;
  3. 初始状态“不可见”(这个很重要)。

Axure9原型设计:动态面板实现页面增删改查模式弹窗效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

实现弹出效果,不需要在动态面板上增加交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

二、弹出的操作

1. 给增删改查几个按钮,增加对应的交互

每个交互都是类似的,列举详情按钮。新建交互的时候,鼠标在移动过程中会出现“添加情形”“添加目标”“添加动作”这些提示(交互的设置个人觉得跟8.0版本区别比较大)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

Axure9原型设计:动态面板实现页面增删改查模式弹窗效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

打开交互编辑器,按顺序:添加事件、添加情形、添加目标、添加动作、设置动作:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

  1. 添加事件:单击时;
  2. 添加情形:“详情”,注意的是,没有设置任何条件,相当于 if 1=1 的效果;
  3. 添加目标:选择动态面板;
  4. 添加动作:这里有2个动作“显示/隐藏”、“设置面板状态”,意思是:点击详情按钮时,以灯箱效果来显示动态面板的详情页。

Axure9原型设计:动态面板实现页面增删改查模式弹窗效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

2. 给其他几个按钮也设置类似的交互

每个按钮需要显示的动态面板状态页面不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

效果:https://e6osrz.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

本文由 @头发渐少脾气渐涨 原创发布于人人都是产品经理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/20994.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/20994.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定