在Axure中使用动态面板

目录

一. 什么是动态面板

二. 了解动态面板

三. 轮播图的实现

        3.1 操作

        3.2 演示效果 

四. 多种方式登录

        4.1 操作

        4.2 演示效果

五.  导航栏的实现

        5.1 操作

        5.2 演示效果

六. ERP相关设计

        6.1 设计ERP登录界面

        6.2 设计ERP的左侧菜单栏

        6.3 设计ERP的公告栏


一. 什么是动态面板

        动态面板是Axure中最常用的组件之一。专门用于设计原型中的动态功能可以让你实现高级的交互功能实现原型的高保真度。它可以包含一个或多个状态,每个状态就是一个页面可包含一系列控件 (任何时候都只有一个状态可见),可以随意编辑,通过控制状态的切换或状态的显示/隐藏,实现一些常见的交互效果。

二. 了解动态面板

        位于元件中的基本元件里面,它的图标也很特殊,很形象的表示出其多状态管理的特点。

        1. 拖出来以后双击进入状态编写中。

        2. 点击状态就进入到默认状态里,在画布或者概要里均可以去添加和修改状态名。

        3. 点击隔离指的是只显示动态面板里的内容,不显示动态面板外面的内容。

三. 轮播图的实现

        3.1 操作

1. 将图片元件放置到动态面板中。

2. 让动态面版自适应元件的大小,不然元件比动态面板大,对于我们画原型图是十分不利的

3. 想要实现几张图片轮播,就建立几个状态。并将各图片直接放入各状态中 (可以右键使用重复状态来快速复制状态) 。

4. 帮动态面板取个名字 

 5. 开始设置交互事件:

  1. 首先设置交互,点击动态面板。
  2. 点击右侧功能栏的交互,并新建交互,添加动态面板事件已载入,添加设置面板状态操作:

双击进入详细的操作界面,设置动态面板运行的方式  (下一张的元件交互与上一张的方法相同)

        3.2 演示效果 

四. 多种方式登录

        4.1 操作

1. 注意:矩形要在动态面板中,把动态面板放到账号登录的位置,选择自适应模式

2. 复制状态 ,把动态面板放到短信登录的地方,然后给对应的元件还有动态面板取名

3. 新建交互,选择交互的方式,如图所示: 

4. 把账号以及短信登录的信息在动态面板中写出来 ,在对应的交互地方双击添加更多的交互

5. 增加更多的交互

① 添加目标         ② 勾选登录面板         ③ 在状态的位置根据登录的不同方式选择对应的状态

        4.2 演示效果

账号登录界面

短信登录界面 

 

不同方式登录的效果演示: 

五.  导航栏的实现

        5.1 操作

1. 在大的动态面板中放入小的动态面板,然后放入对应的元件,记得给每个元件都取上对应的名字,易于区分。会议管理是一级菜单,其余是二级菜单。

2. 复制状态, 取名为收起状态,除了一级菜单留下,把其余的二级菜单删了,在一级菜单的地方放入一个元件,用于进行交互 。(分清楚展开和收起的状态)

3. 可以复制整个会议管理面板来制作别的面板,比如投票管理面板,系统管理面板。但是在运行时发现会议管理一级菜单在点击收起的时候出现了留白。

4. 选中进行交互的元件,双击打开交互编辑器,选中设置面板状态,勾选推动和拉动元件。 

5. 把每个进行交互的元件都如此操作一次,再次刷新就没有留白了。 

        5.2 演示效果

六. ERP相关设计

        6.1 设计ERP登录界面

        6.2 设计ERP的左侧菜单栏

        6.3 设计ERP的公告栏

  • 30
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值