Axure 实现网站登录的交互

原理:

1. 通过变量来记住用户的状态,是处于登录前还是登录后

2. 用master 的 onPageLoad 事件来判断是显示登录前的界面还是登录后的界面

实例:

1. 将设计好登录前和登录后两种界面效果做成dynamic panel的两种state,默认state为未登录的。pannl命名为login

登录前的state命名为no:

登录后的state命名为yes:

2. 添加登录前“登录”按钮的交互事件

2.1

2.2 新建一个变量,“login”

2.3 将该变量login赋值为“yes” 表示已经登录

2.4 添加交互事件

选择reload current page方式

3. 添加登录后“退出”文字链的交互事件

3.1

将该变量login赋值为“no” 表示未登录

4. 将这panel转化成master

5. 为master添加onPageLoad事件

5.1 为交互事件设置引发条件

当变量 login 等于“yes”时,既用户已经登录

5.2 设置交互事件

切换到pannel面板的“yes”state

5.3 同上面的设置

当判断出用户没有登录(变量login等于“no”)切换到dynamic pannel 面板的“no”state

原型图预览

下载源文件

加入对话

13条评论

  1. 哥们,你这文章有点忽悠人,误人子弟,想教人也要先有货和料啊!你使用axure Pro5.5,这变量设置根本没起作用。

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注