动态面板axure

课程目标

掌握动态面板的使用：新建、状态、管理动态面板
掌握动态面板的常用功能：显示与隐藏，调整大小
实例：淘宝登录页签的切换效果

课程结果

淘宝登录页的切换效果

下拉菜单效果

动态面板的使用

概述

Axure官方给出的解释： 动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件，任何时候都只有一个状态可见。

由上面的解释，我们可以注意到“状态”是动态面板的核心，一切的交互都是围绕着其进行展开的。

理解：作业本叠放——每个作业本都是一个状态，每次只能看到一个作业本，其它被覆盖。

基本操作

• 拖动一个动态面板到page区域后出现一个淡蓝色的矩形状态，即动态面板，可以理解为一个容器，该容器内可以存储多个状态（多个作业本）

• 单击动态面板后，右侧的交互窗口中需要给其命名，方便后期使用。

• 双击后，动态面板中会存在一个默认的状态。可以根据需求进行增删。

• 可以通过选中下拉中指定的状态进行编辑，可以在白色区域中显示对应的内容，超出白色区域将会被隐藏。

动态面板的常用功能

动态面板可以实现哪些功能？

• 动态面板的显示与隐藏效果

• 动态面板的调整大小以适合内容

• 动态面板的滚动栏设置

• 动态面板的固定到浏览器

• 100%宽度

• 从动态面板脱离

• 转换为母版

动态面板的显示与隐藏效果

我们经常在做原型的时候，需要点击按钮后出现一些界面上没有的元素：

• 情景A：登录功能在不填写用户名时点击登录按钮，显示出要求用户填写用户名的提示。

• 情景B：当我们需要在用户的某一个操作时，弹出一个提示框。当用户点击提示框的确定按钮时提示框消失。

动态面板初始状态是隐藏还是显示，可以通过右键单击动态面板—编辑选项—设为显示（或）设为隐藏来实现。