西安农产品网站建设,it公司,怎么做化妆品网站内容规划,东莞seo网站制作报价什么是动态面板动态面板是Axure的高级交互元件#xff0c;由不同的状态面板组成#xff0c;是我们制作交互过程中运用频率最高的元件#xff0c;很多交互效果需要依赖动态面板实现。动态面板的状态面板就像是一个容器#xff0c;我们可以在里面放置任何东西#xff0c;自由…什么是动态面板动态面板是Axure的高级交互元件由不同的状态面板组成是我们制作交互过程中运用频率最高的元件很多交互效果需要依赖动态面板实现。动态面板的状态面板就像是一个容器我们可以在里面放置任何东西自由发挥我们的设计创意甚至是为面板中的设计元素添加交互事件这一切就好像是在一个新的画布当中进行页面设计。添加动态面板在Axure中我们有两种方法添加动态面板。方法一从Default元件库直接拖拽动态面板元件至设计区域。方法二选中需要转换的目标元件鼠标右键单击选择操作命令【转换为动态面板】。编辑动态面板动态面板是由不同的状态组成每一个状态里面都可以包含多个元件。同一时间动态面板只能显示一个状态通过控制这些面板的显示状态可以实现很多丰富的交互效果。编辑动态面板状态双击动态面板选择状态进行编辑进入状态面板中我们会看到中间有一个虚线框虚线框内部为设计区域。我们的设计工作就是在这个虚线框内部完成我们可以通过改变动态面板的尺寸来调整虚线框的大小。管理动态面板状态双击动态面板进入状态编辑模式点击设计区域上方可以管理动态面板的状态在这里可以增加状态、复制状态、删除状态。隔离模式默认情况下动态面板的状态就像一个封闭的黑盒将动态面板与外面的世界进行了隔离在这个盒子当中看不到外在的东西。当我们点击状态面板右上角的隔离按钮这个封闭的黑盒将变成透明的黑子可以看到动态面板以外的设计元素但这个盒子依旧是封闭的对于动态面板以外的设计元素我们只能查看不能进行操作。关闭状态点击状态面板右上角的关闭按钮则退出动态面板状态回到页面视角。动态面板样式滚动条当动态面板尺寸小于内容尺寸时需要为动态面板设置滚动条以便查看完整内容。滚动条有四种样式设置包含禁止滚动、按需滚动、垂直滚动和水平滚动。选中动态面板在右侧样式面板中下拉选择滚动条样式。100%宽度选择此项后在浏览中查看原型时动态面板的宽度将自适应浏览器宽度不会出现水平滚动条一般用于通栏设计。需要注意的是动态面板的内容宽度要大于浏览器的宽度。选中动态面板可以通过右侧的样式面板进行设置。固定到浏览器始终固定在窗口的某个特定位置如App的底部导航资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板点击右侧样式面板的“固定到浏览器”勾选固定到浏览器窗口选择固定位置的方向设置边距勾选保持在前面(将动态面板图层置顶)。动态面板事件动态面板作为Axure的高级元件有一些自己专有的交互事件如动态面板状态改变时、拖动时、拖动结束时、向左/右/上/下拖动结束时、滚动时、向上滚动时、向下滚动时。01状态改变时该事件是由“设置面板状态”动作触发的。这个事件常用于需要进行不停改变面板状态的一连串交互动作如轮播图的循环播放。02拖动事件拖动时、向左/右/上/下拖动结束时允许我们针对拖动过程中拖动结束后设置不同的交互其中拖动结束后还可以根据拖动的方向设置不同的交互。如果你有拖动方面的需求可以将这些需要拖动的元件或元件组合转换为动态面板。拖动时用于面板的拖动过程中。向左拖动结束时面板向左拖动且完成拖动动作。向右拖动结束时面板向右拖动且完成拖动动作。向上拖动结束时面板向上拖动且完成拖动动作。向下拖动结束时面板向下拖动且完成拖动动作。03滚动事件滚动时、向上滚动时、向下滚动时允许我们针对滚动过程中不同的滚动方向设置不同的交互。我们希望向上或向下滚动时显示不同的内容这个时候我们就可以将这些有滚动需求的元件转换为动态面板。有些时候还需要根据滚动的距离显示不同的页面或内容。交互案例案例1进度条加载1. 在设计区域中添加一个动态面板命名为“状态指示器”为动态面板添加两个空状态。2. 添加两个相同尺寸的矩形将其中一个矩形填充为橙色并与另一个矩形重合对其。将橙色矩形转换为动态面板命名为“进度条”将进度条动态面板的宽度设置为1另外一个矩形命名为“背景”。3.点击页面空白处点击【新建交互】按钮选择【页面载入时】事件添加动作【设置面板状态】设置状态指示器向后循环切换循环间隔100毫秒。4. 选中状态指示器动态面板点击【新建交互】按钮选择事件【状态改变时】添加动作【设置尺寸】为“进度条”动态面板设置尺寸宽度尺寸设置为[[LVAR2.widthLVAR1.width/100]]其中LVAR1为背景LVAR2为进度条动态面板如下图所示高度设置为进度条动态面板的高度。点击添加情形设置逻辑条件当进度条宽度小于背景宽度执行刚才的【设置尺寸】动作设置如下图所示。5. 选中状态指示器动态面板为指示器添加添加第二个情形添加动作【设置面板状态】将状态指示器设置为停止循环。6. 拖动文本标签至设计区域命名为“百分比”。选中进度条动态面板点击【新建交互】按钮添加【尺寸改变时】事件添加【设置文本】动作。设置百分比文本的内容为[[Math.floor(LVAR1.width/LVAR2.width*100)]]%其中LVAR1为进度条LVAR2为背景。Math.floor为向下取整函数获取小于等于指定数值的最大整数。7. 设置完毕点击预览按钮在浏览器中查看原型。案例2音量调节器1. 从元件库拖动喇叭图标、矩形、圆至设计区域为矩形和圆设置填充色调整好矩形和圆的尺寸调整时注意圆的高度大于矩形的高度。将矩形命名为“音量杆”。2. 选中圆鼠标右键单击选择命令“转换为动态面板”动态面板命名为“调节球”。选中动态面板点击【新建交互】按钮选择【拖动时】事件选择【移动】动作设置调节球沿水平直线移动设置调节球移动边界左侧大于音量杆的水平坐标右侧小于音量杆的水平坐标音量杆的宽度。移动边界的表达式为左侧[[LVAR1.x]]右侧[[LVAR1.xLVAR1.width]]其中变量LVAR1为音量杆。3. 设置完毕点击预览按钮在浏览器中查看原型。案例3轮播图1. 拖拽动态面板元件至设计区域双击动态面板进入编辑状态。为面板添加3个状态并且为每个状态分别导入一张同样尺寸的图片。2. 选中动态面板点击【新建交互】按钮选择【载入时】事件选择【设置面板状态】动作。选择当前元件状态设置为下一项勾选向后循环进入和退出动画选择向左滑动动画时间为500毫秒循环间隔设置为2000毫秒点击“完成”按钮。3. 设置完毕点击预览在浏览器中查看原型写在末尾感谢大家的耐心阅读如果你有兴趣学习原型设计或Axure交互设计不妨关注下我的新书《Axure RP9实用教程原型高保真交互设计》马上就要上市了这是我十年来作为产品经理的实战经验总结。这本书由浅入深讲解了Axure RP9的基础功能讲解过程中结合具体的案例帮助大家加深对元件交互功能的理解。最后两个章节都是满满的干货案例旨在通过具体的元件交互案例和页面制作案例帮助大家找到Axure RP9的交互使用场景同时也是检查并巩固理论学习的过程。读完这本书你一定能够轻松驾驭Axure这款工具的使用绝对物超所值。下图是本书的封面及目录结构。本书在京东商城、当当网均有销售当然您也可以关注我的专栏学习Axure RP9教程。
