携手共进
创造美好未来

什么是动态面板,页面跳转和数据模型详解?


什么是动态面板

动态面板是Axure的高级交互元件,由不同的状态面板组成,是我们制作交互过程中运用频率最高的元件,很多交互效果需要依赖动态面板实现。动态面板的状态面板就像是一个容器,我们可以在里面放置任何东西,自由发挥我们的设计创意,甚至是为面板中的设计元素添加交互事件,这一切就好像是在一个新的画布当中进行页面设计。

添加动态面板

在Axure中我们有两种方法添加动态面板。

方法一:从Default元件库直接拖拽动态面板元件至设计区域。

方法二:选中需要转换的目标元件,鼠标右键单击选择操作命令【转换为动态面板】。

编辑动态面板

动态面板是由不同的状态组成,每一个状态里面都可以包含多个元件。同一时间,动态面板只能显示一个状态,通过控制这些面板的显示状态,可以实现很多丰富的交互效果。

编辑动态面板状态:双击动态面板选择状态进行编辑,进入状态面板中,我们会看到中间有一个虚线框,虚线框内部为设计区域。我们的设计工作就是在这个虚线框内部完成,我们可以通过改变动态面板的尺寸来调整虚线框的大小。

管理动态面板状态:双击动态面板进入状态编辑模式,点击设计区域上方可以管理动态面板的状态,在这里可以增加状态、复制状态、删除状态。

隔离模式:默认情况下,动态面板的状态就像一个封闭的黑盒,将动态面板与外面的世界进行了隔离,在这个盒子当中看不到外在的东西。当我们点击状态面板右上角的隔离按钮,这个封闭的黑盒将变成透明的黑子,可以看到动态面板以外的设计元素,但这个盒子依旧是封闭的,对于动态面板以外的设计元素,我们只能查看,不能进行操作。

关闭状态:点击状态面板右上角的关闭按钮,则退出动态面板状态,回到页面视角。

动态面板样式

滚动条:当动态面板尺寸小于内容尺寸时,需要为动态面板设置滚动条以便查看完整内容。滚动条有四种样式设置,包含:禁止滚动、按需滚动、垂直滚动和水平滚动。选中动态面板,在右侧样式面板中下拉选择滚动条样式。

100%宽度:选择此项后,在浏览中查看原型时,动态面板的宽度将自适应浏览器宽度,不会出现水平滚动条,一般用于通栏设计。需要注意的是动态面板的内容宽度要大于浏览器的宽度。选中动态面板,可以通过右侧的样式面板进行设置。

什么是动态面板,页面跳转和数据模型详解?

固定到浏览器:始终固定在窗口的某个特定位置,如App的底部导航,资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板,点击右侧样式面板的“固定到浏览器”,勾选固定到浏览器窗口,选择固定位置的方向,设置边距,勾选保持在前面(将动态面板图层置顶)。

动态面板事件

动态面板作为Axure的高级元件,有一些自己专有的交互事件,如:动态面板状态改变时、拖动时、拖动结束时、向左/右/上/下拖动结束时、滚动时、向上滚动时、向下滚动时。

01状态改变时

该事件是由“设置面板状态”动作触发的。这个事件常用于需要进行不停改变面板状态的一连串交互动作,如轮播图的循环播放。

02拖动事件

拖动时、向左/右/上/下拖动结束时,允许我们针对拖动过程中,拖动结束后设置不同的交互,其中拖动结束后还可以根据拖动的方向设置不同的交互。如果你有拖动方面的需求,可以将这些需要拖动的元件或元件组合转换为动态面板。

拖动时:用于面板的拖动过程中。

向左拖动结束时:面板向左拖动,且完成拖动动作。

向右拖动结束时:面板向右拖动,且完成拖动动作。

向上拖动结束时:面板向上拖动,且完成拖动动作。

向下拖动结束时:面板向下拖动,且完成拖动动作。

03滚动事件

滚动时、向上滚动时、向下滚动时,允许我们针对滚动过程中,不同的滚动方向设置不同的交互。我们希望向上或向下滚动时,显示不同的内容,这个时候我们就可以将这些有滚动需求的元件转换为动态面板。有些时候,还需要根据滚动的距离显示不同的页面或内容。

交互案例

案例1:进度条加载

1. 在设计区域中添加一个动态面板,命名为“状态指示器”,为动态面板添加两个空状态。

2. 添加两个相同尺寸的矩形,将其中一个矩形填充为橙色,并与另一个矩形重合对其。将橙色矩形转换为动态面板,命名为“进度条”,将进度条动态面板的宽度设置为1,另外一个矩形命名为“背景”。

3.点击页面空白处,点击【新建交互】按钮,选择【页面载入时】事件,添加动作【设置面板状态】,设置状态指示器向后循环切换,循环间隔100毫秒。

4. 选中状态指示器动态面板,点击【新建交互】按钮,选择事件【状态改变时】,添加动作【设置尺寸】,为“进度条”动态面板设置尺寸,宽度尺寸设置为[[LVAR2.width+LVAR1.width/100]],其中LVAR1为背景,LVAR2为进度条动态面板,如下图所示,高度设置为进度条动态面板的高度。点击添加情形,设置逻辑条件,当进度条宽度小于背景宽度,执行刚才的【设置尺寸】动作,设置如下图所示。

5. 选中状态指示器动态面板,为指示器添加添加第二个情形,添加动作【设置面板状态】,将状态指示器设置为停止循环。

6. 拖动文本标签至设计区域,命名为“百分比”。选中进度条动态面板,点击【新建交互】按钮,添加【尺寸改变时】事件,添加【设置文本】动作。设置百分比文本的内容为[[Math.floor(LVAR1.width/LVAR2.width*100)]]%,其中LVAR1为进度条,LVAR2为背景。Math.floor为向下取整函数,获取小于等于指定数值的最大整数。

7. 设置完毕,点击预览按钮,在浏览器中查看原型。

案例2:音量调节器

1. 从元件库拖动喇叭图标、矩形、圆至设计区域,为矩形和圆设置填充色,调整好矩形和圆的尺寸,调整时,注意圆的高度大于矩形的高度。将矩形命名为“音量杆”。

什么是动态面板,页面跳转和数据模型详解?

2. 选中圆,鼠标右键单击选择命令“转换为动态面板”,动态面板命名为“调节球”。选中动态面板,点击【新建交互】按钮,选择【拖动时】事件,选择【移动】动作,设置调节球沿水平直线移动,设置调节球移动边界,左侧大于音量杆的水平坐标,右侧小于音量杆的水平坐标+音量杆的宽度。移动边界的表达式为左侧>[[LVAR1.x]],右侧<[[LVAR1.x+LVAR1.width]],其中变量LVAR1为音量杆。

什么是动态面板,页面跳转和数据模型详解?
什么是动态面板,页面跳转和数据模型详解?

3. 设置完毕,点击预览按钮,在浏览器中查看原型。

案例3:轮播图

1. 拖拽动态面板元件至设计区域,双击动态面板,进入编辑状态。为面板添加3个状态,并且为每个状态分别导入一张同样尺寸的图片。

什么是动态面板,页面跳转和数据模型详解?

2. 选中动态面板,点击【新建交互】按钮,选择【载入时】事件,选择【设置面板状态】动作。选择当前元件,状态设置为下一项,勾选向后循环,进入和退出动画选择向左滑动,动画时间为500毫秒,循环间隔设置为2000毫秒,点击“完成”按钮。

3. 设置完毕,点击预览,在浏览器中查看原型

写在末尾

感谢大家的耐心阅读,如果你有兴趣学习原型设计或Axure交互设计,不妨关注下我的新书《Axure RP9实用教程:原型+高保真+交互+设计》马上就要上市了,这是我十年来作为产品经理的实战经验总结。这本书由浅入深讲解了Axure RP9的基础功能,讲解过程中结合具体的案例帮助大家加深对元件交互功能的理解。最后两个章节,都是满满的干货案例,旨在通过具体的元件交互案例和页面制作案例,帮助大家找到Axure RP9的交互使用场景,同时也是检查并巩固理论学习的过程。读完这本书,你一定能够轻松驾驭Axure这款工具的使用,绝对物超所值。下图是本书的封面及目录结构。

未经允许不得转载:老汪网 » 什么是动态面板,页面跳转和数据模型详解?