IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Axure 实现网站登录的交互

jerry的交互设计 2011-02-08 23:45:47 累计浏览 4,824 次
本机暂存

原图已失效

原理:

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

原型图预览

下载源文件

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,500)
  2. 流程管理与用户研究 (累计阅读 17,053)
  3. 网站导航设计的6大分类 (累计阅读 9,298)
  4. JS如何实现响应滚轮(同时设置滚动条无效) (累计阅读 9,027)
  5. 给想转行做产品经理的同学 (累计阅读 6,927)
  6. 互联网产品经理必读书目 (累计阅读 5,840)
  7. “预注册”是一把金钥匙 (累计阅读 5,677)
  8. 忘记技术原理,关注用户心智 (累计阅读 5,600)
  9. 界面设计速成 (累计阅读 5,428)
  10. Axure之变量的使用 (累计阅读 5,136)