Axure动态面板的应用与ERP系统登录界面、主页左侧菜单栏、公告栏的绘制

目录

一、动态面板

1.1 简介

1.2 使用动态面板的原因

二、动态面板之轮播图实现案例

2.1 完成步骤

 2.2 最终效果

三、动态面版之多方式登录案例

四、动态面板之后台主界面左侧菜单栏

五、ERP登录界面

六、ERP主界面菜单栏

七、ERP公告栏

八、登录页面跳转公告栏 


 

一、动态面板

1.1 简介

  1. 在Axure中,动态面板(Dynamic Panel)是一种重要的交互设计元素,用于创建可交互的原型和展示多个状态或页面之间的过渡效果。它能够模拟用户与应用程序或网站交互时的界面变化和动画效果。
  2. 动态面板由多个面板组成,每个面板代表一个不同的状态或页面。通过在动态面板中设置各个面板的可见性,可以在用户与原型进行交互时实现页面的切换、元素的显示和隐藏等效果。

1.2 使用动态面板的原因

使用动态面板,您可以创建以下交互设计效果:

  1. 页面切换:通过设置不同的面板,在用户点击按钮或链接时实现页面之间的平滑切换。

  2. 元素状态变化:可以根据用户的操作或条件变化,改变面板中元素的可见性、位置、大小等属性,以呈现不同的交互状态。

  3. 过渡效果:通过设置面板之间的转场动画,实现平移、淡入淡出、旋转等动态效果,增加用户体验的流畅感。

动态面板在Axure中非常灵活,您可以自由组合、嵌套,并与其他交互元素如按钮、链接、事件等进行配合使用,创造出更丰富和真实的交互原型。

二、动态面板之轮播图实现案例

2.1 完成步骤

放置动态面板:

 

添加状态,并且在各状态中插入一张图片,如下:

204d4bead660400e965eb966369a7e49.png

插入切换元件并且设置交互事件,如下:

65d6335090104b7c8afed2fb739ebcd8.png

 2.2 最终效果

完成效果如下:

 

三、动态面版之多方式登录案例

操作方式跟轮播图实现原理相同,这里不做过多阐述,最终效果如下:

e8942abebc974976b0a3db9f296158cb.gif

四、动态面板之后台主界面左侧菜单栏

实现过程/步骤:

先以一个类别为例,创建一个主动态面板,在其状态页面下创建一个内嵌动态面板,将预期的样式和点击效果依次加进去如下图所示:

09e703773bff4ac4a3f84ebbbd528c45.png

然后在其点击交互状态下设置推拉元件,如下:

86b93ff2025f4376b9461cd832aa02dc.png

设置前效果如下:

81a2a43634014919b3bffb2bdf0c2d66.gif

设置后效果如下:

f93f06b1fe0d411e88beed01f2457cc5.gif

五、ERP登录界面

Axure内界面展示:

f2fbd30311044540bc778fe2de03f8e0.png

预览效果如下:

4121b30e1bb7419ba2d435f49e8b1e3b.png

六、ERP主界面菜单栏

a33bc5ed1f304106a98030931f0670cb.gif

七、ERP公告栏

ea561e0299374d4e82648da89fa2d238.gif

八、登录页面跳转公告栏 

登录跳转主页公告栏演示:

e01bc41bb3ca43428bbca7fb7462cbe1.gif


最后Axure动态面板的应用与ERP系统登录界面、主页左侧菜单栏、公告栏的绘制就到这里,祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

8998465f45c840d1aeebf1302aaaceb3.png

 

 

  • 11
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
以下是使用Axure动态面板实现登录和注册的步骤: 1. 创建两个动态面板,一个用于登录,一个用于注册。 2. 在登录面板中添加用户名和密码的输入框以及登录按钮,在注册面板中添加用户名、密码和确认密码的输入框以及注册按钮。 3. 在登录按钮和注册按钮上添加交互,分别设置为显示登录面板和注册面板。 4. 在登录面板和注册面板中添加验证提示,例如当用户名或密码为空时,提示“用户名或密码不能为空”等。 5. 在登录面板和注册面板中添加返回按钮,设置为隐藏当前面板并显示主页面。 以下是使用Axure动态面板实现列表增删查改数据、分页、搜索、排序等功能的步骤: 1. 创建一个动态面板,用于展示列表数据。 2. 在动态面板中添加表格控件,用于展示数据。 3. 在表格控件中添加列,用于展示不同的数据。 4. 在表格控件中添加编辑按钮、删除按钮和添加按钮,用于编辑、删除和添加数据。 5. 在编辑按钮和删除按钮上添加交互,分别设置为弹出编辑框和删除当前行数据。 6. 在添加按钮上添加交互,设置为弹出添加框。 7. 在添加框和编辑框中添加输入框,用于输入数据。 8. 在添加框和编辑框中添加保存按钮和取消按钮,用于保存或取消编辑。 9. 在表格控件下方添加分页控件,用于分页展示数据。 10. 在表格控件上方添加搜索框,用于搜索数据。 11. 在表格控件的列标题上添加排序按钮,用于排序数据。 以下是使用Axure动态面板实现大屏动态面板滚动展示数据和多图数据展示的步骤: 1. 创建一个动态面板,用于展示大屏数据。 2. 在动态面板中添加滚动面板控件,用于滚动展示数据。 3. 在滚动面板控件中添加多个面板,用于展示不同的数据。 4. 在每个面板中添加文本框、图片等控件,用于展示数据。 5. 在动态面板中添加定时器控件,用于定时切换展示的面板。 6. 在定时器控件上添加交互,设置为切换到下一个面板。 7. 在动态面板中添加按钮控件,用于手动切换展示的面板。 8. 在按钮控件上添加交互,设置为切换到指定的面板

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kissship

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值