养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

使用Axure如何实现手机页面的登录及退出效果

时间:2024-10-21 23:09:04

今天给大家分享下如何使腩柽鬣盛用Axure来实现登陆及退出登陆的效果,此效果常用于我们做高保真原型,希望今天的分享能给大家带来些许的帮助。

工具/原料

联想电脑

winwinwin10

AxureAxure8

动态面板

方法/步骤

1、第一,根据下图创建出个人中心的基本页面。

使用Axure如何实现手机页面的登录及退出效果

2、第二,单击选中“未登录”,然后右击,再点击“转换为动态面板”按钮,如下图。

使用Axure如何实现手机页面的登录及退出效果

3、第三,对上一步创建的动态面板进行命名,然后点击“复制”对动态面板新增一个状态,如下图。

使用Axure如何实现手机页面的登录及退出效果

4、第四,双击上一步骤新复制出来的“已登录”状态,对其名称进行编辑,如下图。

使用Axure如何实现手机页面的登录及退出效果

5、第五,创建一个弹窗,并在“确认”登陆区域覆盖一个热区,如下图。

使用Axure如何实现手机页面的登录及退出效果

6、第六,对上一步创建的弹窗进行组合,如下图。

使用Axure如何实现手机页面的登录及退出效果

7、第七,单击选中“交易记录”表单后双击右侧的“鼠标单击时”,如下图。

使用Axure如何实现手机页面的登录及退出效果

8、第八,单击“添加条件”,根据下图编辑信息。

使用Axure如何实现手机页面的登录及退出效果

9、第九,单击右侧“显示”然后勾选弹窗的各个组件按下图进行设置。

使用Axure如何实现手机页面的登录及退出效果

10、第十,选中“确认登陆”热区,双击右侧的“鼠标单击时”,如下图。

使用Axure如何实现手机页面的登录及退出效果

11、第十一,单击“隐藏”勾选弹窗的各个组件,如下图。

使用Axure如何实现手机页面的登录及退出效果

12、第十二,单击“设置动态面板状态”根据下图进行编辑。

使用Axure如何实现手机页面的登录及退出效果

13、第十三,根据下图再创建一个弹窗。

使用Axure如何实现手机页面的登录及退出效果

14、第十四,选中“退出登录”区域,双击“鼠标单击时”根据下图进行操作。

使用Axure如何实现手机页面的登录及退出效果

15、第十五,选中“退出登录”区域,双击“鼠标单击时”,如下图。

使用Axure如何实现手机页面的登录及退出效果

16、第十六,单击“隐藏”根据下图设置右侧的信息。

使用Axure如何实现手机页面的登录及退出效果

17、第十七,单击“设置动态面板”根据下图设置右侧信息。

使用Axure如何实现手机页面的登录及退出效果

18、第十八,分别将两个弹窗设为隐藏状态,并挪动到手机外壳中,如下图。

使用Axure如何实现手机页面的登录及退出效果

19、第十九,到此步骤我们就将所有的效果都实现了,看下效果图吧!

使用Axure如何实现手机页面的登录及退出效果

© 一点知识