恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Axure动态面板常用就这几个
0.0°
2018-05-17 原创文章 教程 举报 7797 19 22 4

本节课和大家一起分享axure的动态面板的用法以及如何在案例中灵活的运用,在大部分的交互结构中,我们都可以用动态面板去模拟实现出来。



大家好!我是海哥。欢迎阅读学习《海哥交互行》精品课程。



本节课和大家一起分享axure的动态面板的用法以及如何在案例中灵活的运用,在大部分的交互结构中,我们都可以用动态面板去模拟实现出来。所以,我们掌握动态面板就可以掌握axure的一些核心内容。那常用的动态都会运用到那些模式呢?在这里我向大家列举了9中案例模式,最后带大家一起用实践去练习如何的掌握这九种动态面板使用方法。


Image title


露一半(裁切)


在动态面板中,露一半(裁切)在很多图片、视频等展示的时候,为了节省空间,从而采取的一种交互模式,在移动端通常通过左右滑动,在PC端通过点击左右切换来实现查看更多。这样的交互方式可以更好的排版空间,而展示更多的内容。


Image title

案例详情

首先我们需要用axure画出下面交互原型图


Image title然后单击右键通过转化为动态面板


Image title


最后就可以通过调整动态面板的大小来实现内容区显示区域大小

Image title


栏目跳转


栏目跳转主要运用在一些需要当前页面切换的地方,比如类似下面的给出的这种菜单切换。也是最核心和最直接的使用模式。

Image title案例详情


首先我们需要用axure画出下面交互原型图


Image title


然后单击右键通过转化为动态面板


Image title


通过双击弹出动态面板,建议给动态面板以及状态层命好名称,不然当动态面板过多的时候就会找不到哪一个是你需要的。通过添加ioc给面板添加状态,在这里我们只添加了三个,当然你也可以添加更多。


Image title


接下来就是我们要给状态添加内容了,在这里我们通过复制状态里面的内容给到状态二和三,复制完成后记得修改每个状态的颜色也就是切换后的导航标签颜色。尽量把状态内容区域做成不一样,这样切换的时候就更加的直观。


Image title


后面就是加上交互效果,在这里我们是给状态导航标签添加热区。通过添加鼠标点击时交互事件,调出事件编辑,设置配置动作,选择动态面板,最后选择状态。在通过这样方式复制到其它两个状态,完成交互事件的设定,最后预览效果。


鼠标单击用例


Image title


设置面板状态


Image title


选择配置动作和状态


Image title


最后可以预览一下效果是否完成


编辑状态


用户需要做局部的数据输入或操作的时候就会用到编辑状态这种动态面板的操作。比如下面这种用户需要输入文字添加新标签的方式,这种在移动端会经常使用。

Image title


首先我们需要用axure画出下面交互原型图,并选中所有转化为动态面板。


Image title


通过双击面板弹出面板状态,给面板添加两个状态,并命名。因为我们是需要添加一个标签的样式,通过复制的方法制作,制作添加以后的状态样式。


Image title



应为我们这个是直接按钮,所以我们就可以直接在上面做点击交互事件,当鼠标点击时切换成输入文字状态,所以需要设置动态面板状态,并选中这个动态面板和状态,完成配置动作的设置。


Image title


最后预览一下制作效果


下拉菜单


这种下拉菜单在网页导航中会运用的比较多,通过鼠标移入时,展开导航下面的层级,鼠标移除是隐藏展开,从而形成一种闭环的交互形式,就比如下面的真实案例中所运用。


Image title


首先我们需要用axure画出下面交互原型图,并将需要将隐藏的图层转化为动态面板,给面板命名。右键单击面板选中设为隐藏并给面板添加状态。

Image title


通过复制得到下面这个新状态,并赋予热区。


Image title


通过给导航切换便签添加热区,并给热区添加鼠标移入移除交互事件。选中设置面板状态,配置动作。


Image title


最后预览一下制作效果


鼠标经过状态发生变化


这种交互模式大多使用在PC端,主要会运用在图片层的上面,通过移入图片,从而图片上出现文字,给用户一种反馈状态。

Image title Image title


首先我们需要用axure画出下面交互原型图,并将第一个转化为动态面板,双击面板弹出动态面板状态,为动态面板添加状态,并把第二个交互图放到第二个状态中。


Image title


通过给动态面板设置鼠标移入时状态的交互事件,以及设置面板状态,配置动作。


Image title


最后预览一下制作效果


弹出菜单


弹出层主要是通过点击按钮从而弹出一个图层让用户选择操作,就比如下面的案例。


Image title


首先我们需要用axure画出下面交互原型图,作为弹窗的背景。接着需要作出前面需要弹出的图层,通过转化为动态面板并隐藏,将弹出层移动到背景图层的下方位置(相对位置),这样的目的是通过移动绝对位置从而实现弹出。


Image title Image title


下面就是需要为续期会员案例添加点击事件,这里主要是运用鼠标点击时,显示动态面板,以及鼠标点击时移动动态面板到绝对位置。


Image title


最后就是要形成一个闭环,就是鼠标点击关闭按钮,隐藏动态面板。在这里我们需要进入到动态面板的状态中,给关闭添加热区形成按钮,通过鼠标点击时关闭,隐藏动态面板而形成一个闭环的流程。


Image title

Image title


最后通过预览查看一下效果。


小动画


小动画在交互原型中使用的比例会比比较少,而我们在考虑使用动画是是不是需要动画的操作,因为动画需要一定的过程,而用户在使用过程中,并不一定能够发现,所有使用动画需谨慎。

Image title


首先我们需要用axure画出下面交互原型图,并将需要运动的图标转化为动态面板。


Image title


接下来就是需要给动画按钮添加移入时的动作,需要给图标这个动态面板一个移动的动作,通过绝对位置来控制图标的位置,当然也可以用相对位置。在给一个鼠标移除效果,也是通过绝对位置,从而回到原处的一个交互动作。


Image title


最后预览一下效果


移动定位


移动定位在实际的案例中可能会运用的比较少,它主要的目的是通过点击每个标签或者按钮,通过定位到该内容区域。


Image title


首先我们需要用axure画出下面交互原型图,在这里我们页面会分为三大块,首页、关于、案例三部分,通过点击右侧的标签从而实现页面的定位。我们首先需要把页面转化为动态面板,通过拖动调整动态面板的大小,从事使动态面板正好一屏的位置。


Image title

Image title


接下来我们需要给动态面板状态中添加状态,并分别给面板和状态命名。进入动态面板中的状态页,这时候我们需要把页面转化为动态面板,因为我们需要在这个页面上做移动定位。在做页面定位的时候,我们需要记住每一部分到一定位置的参数,这个参数决定了后面我们给页面做绝对位置的参数。下面就是各部分的位置设定,分别是首页、关于、案例。


Image title

Image title

Image title


最后预览一下效果


手机浏览拖拽


浏览拖拽在移动端会使用比较多,就是在可视窗口以内通过上下滑动的交互方式完成操作,出现在一些比较长的移动端页面。


Image title


首先我们需要用axure画出下面交互原型图,并转化为动态面板。调整页面在手机模型的可视操作区域,并给面板命好名称。添加面板状态,进入状态页面,这里也需要把状态页面转化为动态面板并给面板命好名称。


Image title


下面回到我们的首页面板中,给面板添加拖动交互事。


Image title


添加配置动作


Image title


因为在拖动时为了保证不会拖出边界,所以就需添加边界,设置局部变量条件。


Image title

Image title


最后预览一下效果








更新:2018-05-17

收藏

19人已收藏

Hi海哥

15年人机交互经验,前华为部门设计负责人,5年创业经验

  • 37

    作品

  • 2207

    粉丝

  • 0

    关注

  • 别让我思考,让产品更易用,记住这“321法宝”
  • 2019年汽车HMI仪表交互汇集(PDF下载)
  • 5G路上,你了解HMI了吗?
  • Adobe PS里的10个交互设计原则
相关标签
教程

    猜你喜欢

      2018-05-17 原创文章 教程 举报 7797 19 22 4

      Axure动态面板常用就这几个

      0.0°

      你确定要举报Axure动态面板常用就这几个

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      22
      19
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录