Axure怎么设计页面标签可以切换的登录框?

Axure中想要设计两个标签中选择相关的登录方式，该怎么设计呢？登录框的两个标签可以任意切换，未选中的标签突出显示。下面我们就来看看详细的设计教程。

1、拖动一个动态面板Dynamic Panel到页面编辑区域，设置大小为300*300。双击Dynamic Panel，或者右键选择“Manage Panel States”，根据你的需要给动态面板添加标签和状态。现在将动态面板命名为“会员登录框”，添加“企业会员”和“个人会员”两种状态。

2、在Widget Manager里可以看到有两个状态，双击便可打开页面编辑。

3、将矩形组件拖到企业会员的动态面板处，编辑组件内容。如下图

4、将矩形组件拖到个人会员的动态面板处，编辑组件内容。如下图

5、设计好两个状态的界面后，添加交互。以“企业会员”状态为例，选中“企业会员”这几个字的矩形组件，选择“OnClick”（单击时），在“Dynamic Panels”里选“Set Panel State”，勾选最右侧的“会员登录框”，下方可以选择状态“企业会员”。同理，设置“个人会员”组件的交互。

6、设置两个标签未被选中时的状态。在“企业会员”状态设置“个人会员”矩形组件的填充颜色，选择渐变色则有突起的效果。在“个人会员”状态设置“企业会员”矩形组件的填充颜色，和“个人会员”矩形组件颜色一致。最后生成原型查看效果，如下。

以上就是Axure登录框设计两个标签的教程，希望大家喜欢，请继续关注我们。

赞 (0)

相关推荐

  • 如何彻底关闭Chrome浏览器中标签页切换建议的功能？

    如何彻底关闭Chrome浏览器中标签页切换建议的功能？

    相信很多小伙伴都有在使用Chrome浏览器,其中标签页切换建议的功能如何才能关闭呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开"Chrome浏览器",在地址栏中 ...

  • 禁止firefox页面标签(tab)内的文字显示省略号

    省略号会占据很多空间，并且没有太大意义 我们可以禁止firefox页面标签（tab）内的文字显示省略号 操作步骤: 在地址栏中输入:about:config 在过滤器文本框中输入:ellipsis 在 ...

  • 设计Blogging标签--Word 2007高级应用

    设计Blogging标签——Word 2007高级应用（六） 我希望在Ribbon里新增一个Blogging标签放置相关的按钮，而不是和现有的按钮混在一起。要做到这样，你需要对Visual Studi ...

  • Axure怎么设计网页强密码验证效果?

    Axure制作的密码输入需要验证验证是否包含大写字母,小写字母,数字和特殊符号,但是Axure不支持正则表达式,所以做一些规则上的验证,嵌套很多,下面我们就来分享强密码验证效果的制作方法,请看下文实例 ...

  • Axure RP 8怎么制作按钮控制下拉框选项?

    Axure RP 8怎么制作按钮控制下拉框选项? 1.打开Axure RP 8软件,在软件库中找到下拉框元件,拖一个到画布上,如下图所示: 2.再次在元件库中找到"主要按钮",拖一 ...

  • 今日头条APP怎么切换账号登录？

    今日头条APP怎么切换账号登录? 点击进入今日头条APP,在页面右下方的菜单栏看到“我的”选项,点击进入“我的”界面. 点击“我的”界面后,最上方的个人资料的选项,进入“个人主页”. 在“个人主页”界 ...

  • 爱奇艺怎么切换账号登录？爱奇艺切换账号登录教程

    爱奇艺是一款人人都在用的视频播放软件,当我们在公共电脑的网页上登录爱奇艺,却不知道如何退出的时候,将会十分烦恼,接下来就跟着小编的步骤,在网页上只需要几步操作就可退出账号,避免自己的账号被共享.也可以 ...

  • 如何在支付宝中快速切换账号登录？

    如何在支付宝中快速切换账号登录？

    相信很多小伙伴都有在使用支付宝,在其中如何才能切换账号登录呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开手机上的"支付宝".进入首页后,点击右下角的" ...

  • 钉钉账号登录错了如何切换账号登录

    钉钉账号登录错了如何切换账号登录

    今天给大家介绍一下钉钉账号登录错了如何切换账号登录的具体操作步骤.1. 解锁手机后,找到桌面上的钉钉APP,打开:2. 进入主页面后,点击页面左上角的个人头像:3. 在打开的左侧菜单中,找到设置图标, ...