header_v0.7.2

聊聊Axure RP 8 的动态面板

22天前发布

原创文章 / 网页 / 书籍
数艺社 原创,如需商业用途或转载请与数艺社联系,谢谢配合。

把动态面板放到画布中,看上去它是一个半透明的形状。但是,如果在浏览器中查看原型,是看不到动态面板的存在的。动态面板总的来说有几种独有的特性,分别是容器、多状态、拖动、循环、适应宽度和相对固定。

▶ 1.1 动态面板简介

50cb595b060ea8012193a3bd0854.jpg

    把动态面板放到画布中,看上去它是一个半透明的形状。但是,如果在浏览器中查看原型,是看不到动态面板的存在的。也就是说,动态面板本身是个透明的元件(如下图)。

a7be595b0644a8012193a3dc9d6b.jpg

    

    接下来,介绍动态面板的结构和特点。

    对于一个陌生的元件,可以双击试试看。双击动态面板,弹出一个窗口,这个窗口的标题是“面板状态管理”。可以单击【+】按钮,添加新的状态。也可以单击上下箭头按钮,调整状态的顺序。还可以选中一个状态,然后单击【复制】按钮,复制一个状态。还有【删除】按钮,可以删除状态(如下图)。

4973595b0663a8012193a337f3bf.jpg

    

    但是,状态又是什么呢?如果要做一个比喻的话,可以将动态面板想象成幻灯片的放映机。而状态就是幻灯片。幻灯片里面可以放置内容,状态也一样可以编辑。可以单击编辑状态的按钮,或者直接双击某个状态的名称,打开状态的编辑界面。状态的编辑区域和页面的编辑区域一样,可以放置各种各样的元件,组成内容(如下图)。

0ed2595b068ca8012193a3cd5e16.jpg

    动态面板的样式设置中,可以单独为各个状态设置背景颜色或图片(如下图)。

b6be595b06b8a8012193a39fbeb4.jpg


f986595b06c6a8012193a3f0d10d.jpg25c3595b06d3a8012193a3a97189.jpg

3051595b06faa8012193a384c1a3.jpg

f85e595b070ea8012193a36cab1a.jpg

▶ 1.2 动态面板特性——循环

315b595b0762a8012193a3aa3485.jpg


案例——使用循环实现图片轮播

步骤1 把一个图片元件放到画布中,双击图片元件导入第一张宣传图片。

2380595b07a6a8012193a3d1a51c.jpg


步骤2 在图片上单击鼠标右键,在弹出的快捷菜单中选择【转换为动态面板】命令。


步骤3  双击动态面板,在弹出的编辑界面中将动态面板命名为“ImagePanel”,然后选中第一个状态,将其复制5次。


步骤4 修改状态“State2~State6”的图片为其他几张宣传图片。比较快捷的方法是双击两次概要中相应的图片,即可进行导入。


步骤5 页面打开时,图片就会自动循环切换播放,切换时为渐变效果,所以,为动态面板“ImagePanel”添加【载入时】的用例,设置动作为【设置面板状态】,勾选“当前元件”或“ImagePanel”,{ 选择状态} 为【Next】;勾选【向后循环】和【循环间隔】复选框,设置间隔时间为“3000”毫秒;勾选【首个状态延时3000毫秒后切换】复选框;{进入动画}选择【逐渐】,{ 时间} 为“500”毫秒;{ 退出动画} 也选择【逐渐】,{ 时间} 为“500”毫秒。用例动作如图所示。


交互事件如图所示。


▶ 1.3 动态面板特性——适应宽度


案例——横向铺满屏幕的背景条

步骤1 放入一个动态面板到画布中;在动态面板的样式设置中,设置动态面板的高度为背景图片的原始高度“160”;然后,为状态“State1”【导入】背景图片,设置图片【填充】动态面板的状态。


步骤2 勾选动态面板属性中的【100%宽度】复选框。


3e2c595b0929a8012193a3e6a122.jpg


▶ 1.4 动态面板特性——相对固定


案例——导航菜单顶部固定的效果

步骤1 放入两个图片元件,分别双击并导入代替导航菜单与页面内容的图片,将它们摆放在合适的位置。


步骤2 在代替导航菜单内容的图片上方单击鼠标右键,在弹出的快捷菜单中选择【转换为动态面板】命令。


步骤3 在动态面板属性中单击【固定到浏览器】,在弹出的对话框中勾选【固定到浏览器窗口】复选框,{ 水平固定} 选择【居中】,{垂直固定} 选择【上】。



7797595b0b0ba8012193a34646da.jpg

更多内容:http://old.zcool.com.cn/article/ZNTE2MDMy.html

1

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功