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

  发布时间:2017-11-08 16:08:36   作者:佚名   我要评论
Axure怎么设计页面标签可以切换的登录框?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登录框设计两个标签的教程,希望大家喜欢,请继续关注脚本之家。

相关推荐:

Axure RP 8输入框中怎么显示日期?

Axure RP 8怎么设置页面弹出框居中显示?

axure怎么给下拉框/列表框和元件文本添加内容?

相关文章

  • Axure RP 8怎么设计立体的圆角矩形按钮?

    Axure RP 8怎么设计立体的圆角矩形按钮?Axure RP 8中想要设计一个查询的圆角矩形按钮,该怎么设计呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-11-02
  • axure怎么设计鼠标展开折叠效果?

    axure怎么设计鼠标展开折叠效果?axure中想要绘制一个可以折叠展开功能的原型,该怎么设计呢?下面我们就来看看axure制作折叠效果的教程,需要的朋友可以参考下
    2017-11-01
  • Axure怎么给图片增加点击事件?

    Axure怎么给图片增加点击事件?Axure中想要给图片添加鼠标单击事件,如果鼠标单击图片返回主页,该怎么实现这个效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-11-01
  • axure怎么调整字间距? axure字间距的设置方法

    axure怎么调整字间距?axure中想要调节文字的行间距,该怎么调节呢?下面我们就来看看axure字间距的设置方法,需要的朋友可以参考下
    2017-09-30
  • axure团队项目怎么获取? axure获取并打开团队项目的方法

    axure团队项目怎么获取?axure做项目的时候,想要获取团队项目,该怎么获取呢?下面我们就来看看axure获取并打开团队项目的方法,需要的朋友可以参考下
    2017-09-28
  • axure怎么设计一个倒计时效果的模型?

    axure怎么设计一个倒计时效果的模型?axure中设计网页圆形很简单,今天我们就来看看使用axure设置一个倒计时效果的教程,需要的朋友可以参考下
    2017-09-28
  • axure网页原型怎么预览和生成原型文件?

    axure网页原型怎么预览和生成原型文件?axure中设计好的文件原型想要预览并生成,该怎么预览呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-09-25
  • axure原型无法签出怎么办? axure不能签出的解决办法

    axure原型无法签出怎么办、?axure中设计网页原型很方便,设计完成以后发现无法签出,该怎么办呢?下面我们就来看看axure不能签出的解决办法,需要的朋友可以参考下
    2017-09-24
  • Axure怎么新建元件库? Axure元件库的使用方法

    Axure怎么新建元件库?想要把常用的组件制作一个元件,放到自己的元件库中,该怎么操作呢?下面我们就来看看Axure元件库的使用方法,需要的朋友可以参考下
    2017-09-13
  • axure中的单元格怎么合并?

    axure中的单元格怎么合并?axure制作的网页原型中插入了表格,想要将表格中的单元格合并呢?下面我们就来看看详细的教程,需要的朋友可以参考下
    2017-09-08

最新评论