神刀安全网

零基础学Axure之部件-动态面板(Dynamic Panel)


目录

0.Axure软件分享
1.动态面板的简介
2.动态面板的创建
3.动态面板的状态管理
4.动态面板的样式
5.动态面板的属性
6.动态面板的使用——广告轮播(附.rp文件)

0 Axure软件分享

好吧,我承认你电脑里首先要有个Axure的软件。当然,如果你还没安装的话也没关系,我已经准备好了安装包(Axure RP 8.0 )给你:
Mac版:https://pan.baidu.com/s/1kVHbfnD 密码: tjqx
Win版:https://pan.baidu.com/s/1nuUTSzn 密码: ujrm

1 动态面板简介

简单地可以将动态面板理解为一个相册,动态面板的每一个State(状态)相当于相册里的一页。相册里的照片可以增加、减少,相对应的,动态面板的State可以增加、减少、显示、隐藏。这么理解的话,再来看Axure中动态面板的图标,有没有感觉很形象。

零基础学Axure之部件-动态面板(Dynamic Panel)

2 动态面板的创建

动态面板的创建方式有两种:

  1. 直接创建:在部件库拖动“动态面板”到画布,即创建成功
  2. 将其他部件转换为动态面板:选择相应的部件,单击鼠标右键,选择“转换为动态面板”,即转换成功
零基础学Axure之部件-动态面板(Dynamic Panel)

3 动态面板的状态管理

在画布上双击创建好的动态面板,即可弹出动态面板状态管理窗口:

零基础学Axure之部件-动态面板(Dynamic Panel)

  1. 新增一个空白动态面板
  2. 复制并新增一个动态面板(内容也一起复制)
  3. 上下箭头用来调整动态面板的顺序
  4. 编辑选中的动态面板状态
  5. 编辑所有的动态面板状态
  6. 删除选中的动态面板状态
  7. 动态面板状态列表

4 动态面板的样式

在Axure右上角即可看到“检视:动态面板”,点击样式,如下图所示:

零基础学Axure之部件-动态面板(Dynamic Panel)

动态面板样式

背景图片样式同电脑桌面背景样式。

5 动态面板的属性

在Axure右上角即可看到“检视:动态面板”,点击属性,如下图所示:

零基础学Axure之部件-动态面板(Dynamic Panel)

动态面板的属性

从上至下依次为:

  1. 自动调整为内容尺寸
    零基础学Axure之部件-动态面板(Dynamic Panel)

  2. 滚动条

    零基础学Axure之部件-动态面板(Dynamic Panel)

    注:为了正常显示滚动条,动态面板状态中的内容尺寸一定要比动态面板的固定尺寸大,且不能勾选[自动调整为内容尺寸]。

  3. 固定到浏览器
    回想一下QQ的弹窗新闻,你一定能以最快的速度理解什么是固定到浏览器。

    零基础学Axure之部件-动态面板(Dynamic Panel)

    QQ新闻弹窗(图片来自网络)

  4. 100%宽度(仅限浏览器中有效)
    这个选项会使动态面板的宽度==浏览器的宽度。
    注:将图像转化为动态面板是无法实现这个功能的。
  5. 允许触发鼠标交互
    如果对动态面板不同状态中的部件设置了[鼠标悬停时]、[鼠标按下时]等交互样式,勾选此项,当鼠标指针接触到动态面板的范围时,就会触发该部件的交互。
  6. 禁用
  7. 选中

6 动态面板的使用——广告轮播

最终效果如下:

零基础学Axure之部件-动态面板(Dynamic Panel)

广告轮播

需要实现的交互包括:

  1. 图片每隔三秒自动切换,效果为淡入淡出
  2. 图片下方的小圆点每隔三秒自动切换,无效果;切换的同时显示是第几个状态,当前状态用不同颜色表示
  3. 点击第N个小圆点切换到第N张图片
  4. 鼠标移动到动态面板的箭头上时,两个箭头出现;并且鼠标指针下方的箭头颜色加深
  5. 单击右(左)箭头,图片和小圆点同时切换到下(上)一状态

实现步骤:

  • 准备工作:
    1. 打开Axure——新建文件
    2. 拖动部件“图片”到画布——双击“图片”——选择图片
    3. 鼠标右键图片——转化为动态面板——将动态面板命名为“图片”
    4. 双击动态面板——点击“state1”——在“图片”动态面板中复制5个state1
    5. 点击“图片”动态面板中的各个状态,更换图片
    6. 同样的步骤新增小圆点,将这个动态面板命名为“小圆点”;设置改动态面板第N个状态的第N个小圆点的颜色为橘色
    7. 拖入“箭头”,命名为“左箭头”,增加[鼠标悬停时]的交互(更换为深色图片)
    8. 复制“左箭头”,旋转180度,命名为“右箭头”(注:交互一起复制)
  • 设置“页面载入时”图片和小圆点滑动切换交互

    1. 单击“页面载入时”
    2. 如下图设置:
      零基础学Axure之部件-动态面板(Dynamic Panel)

    3. 预览效果
      零基础学Axure之部件-动态面板(Dynamic Panel)

      注:我们已经实现了要求的第1个和第2个交互。

  • 设置小圆点点击切换的交互

    1. 设置“图片”和“小圆点”停止循环
      零基础学Axure之部件-动态面板(Dynamic Panel)

    2. 设置小圆点对应的图片
      零基础学Axure之部件-动态面板(Dynamic Panel)

    3. 设置等待三秒,避免刚切换到某张图片,就立刻滑动到下一张图片
      零基础学Axure之部件-动态面板(Dynamic Panel)

    4. 设置“图片”和“小圆点”动态面板继续滑动切换
      零基础学Axure之部件-动态面板(Dynamic Panel)

    5. 复制交互到所有小圆点
    6. 预览效果
      零基础学Axure之部件-动态面板(Dynamic Panel)

      注:我们已经实现了要求的第1个、2、3个交互。

  • 设置两个箭头的交互

    1. 选中“左箭头”和“右箭头”,右键转化为动态面板,命名为“箭头”
    2. 设置“箭头”动态面板隐藏
    3. 点击“图片”,设置“鼠标移入时”交互
      零基础学Axure之部件-动态面板(Dynamic Panel)

      设置鼠标移入时显示

      零基础学Axure之部件-动态面板(Dynamic Panel)

      设置轮播停止

    4. 设置“鼠标移出时”交互
      零基础学Axure之部件-动态面板(Dynamic Panel)

      设置轮播继续

    5. 设置“鼠标单击时”交互
      点击“箭头”动态面板,进入state1,设置右箭头交互,左箭头同理:
      零基础学Axure之部件-动态面板(Dynamic Panel)

      设置点击切换下一张

      重点:

      零基础学Axure之部件-动态面板(Dynamic Panel)

      左箭头的鼠标单击交互需要增加一步,否则就会出现单击左箭头之后,轮播逆序播放的情况!

      PS:感谢@AlexGZ同学的问题!

    6. 预览效果
      零基础学Axure之部件-动态面板(Dynamic Panel)

      ✅✅✅

      OK,交互实现了,快去找点素材练练手吧。这个是Axure源文件:https://pan.baidu.com/s/1i49xzRf 密码: hhys

参考《Axure RP 8 网站和APP原型制作从入门到精通》

- end -

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 零基础学Axure之部件-动态面板(Dynamic Panel)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址