分享此网站可得100G教程,联系小洁领取点击这里给我发消息

Axure教程-动态面板详解

交互设计 学UI设计 47次浏览 0个评论

动态面板的学习可以帮助我们完成十分复杂的动作设计,今天我们详细学习一下动态面板的使用。

Axure教程-动态面板详解

图:Axure中代表动态面板的icon

 

从这个icon可以看出:

  • 1.这个动态面板有多个层
  • 2.每个层有自己的顺序
  • 3.每个层的可以放不同的内容

 

我们可以用动态面板做什么?

Axure教程-动态面板详解

举例:动态面板变换与控制

 

上面的例子简单的演示了动态面板的使用。

  • 动态面板支持在同一个区域内放置多个状态的内容,
  • 选择显示其中一个状态的内容,不能同时显示多个状态。
  • 支持外部通过命令来切换动态面板的状态,
  • 面板的状态有先后顺序,支持正序和倒序变换。
  • 在状态变化时支持一些简单的过场动画。

 

下面我们开始banner的制作

首先我们去找几张图作为素材,我在京东上找了几张banner,我们就仿一个京东banner吧。

 

第一步

把找到的图分别放到同一个动态面板的不同状态内。

Axure教程-动态面板详解

我新建了一个动态面板,设置了5个状态,分别放了五张图。我们的banner目前还不能动。我们来给他添加操控。

 

第二步

我们新建5个圆点,来分别控制banner动态面板的5个状态,这里我们在切换动画上加上“向右滑动”,

Axure教程-动态面板详解

 

圆点的交互设置

Axure教程-动态面板详解

这样就完成了点击之后滑动切换banner图了。

 

第三步

优化,一般我们看到的banner控制点会有两个状态,当前图片的控制点会突出显示。我们来完成这步。

我们新建一个动态面板,分成五个状态,并且每个状态与banner的面板对应,将圆点突出处理。

Axure教程-动态面板详解

在每个圆点上再加一个控制自身状态的命令,保证两个动态面板的一一对应

Axure教程-动态面板详解

我们现在就完成了90%了,看看效果

Axure教程-动态面板详解

为什么说是90呢?

  • 因为真正的滚动banner不仅有一个方向,应该点击左边的点向左滑切换,点击右边的点才像右滑才对。实现可以左右切换效果的方法也比较多,大家可以自己思考一下。
  • 另外,在banner图的左右两边加个左右箭头控制前后图的切换就是满分了。这个就比较简单了。

本节涉及到略微复杂的内容,面板与面板之间的互相控制,小伙伴们练习一下。

 

题外话

当初豆子开axure教程时,是想大家可以学会本教程后,不用学习代码就可以作出自己的个人网站,其实今天的banner就可以作为大家个人站的一部分啦。个人网站对于专业设计师来说真的是必备的,没有的小伙伴可以准备起来了。

好久没更新教程,之前有点偷懒,后续还会继续更新axure的教程,尽量以简单易懂、几分钟看完就会的小知识点写给大家。

 

原文地址:紫说(公众号)

作者: 紫大文


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!