Axure制作账号扫码切换登录、控制按钮启用/禁用

时间:2024-05-21 09:25:26
  1. 从元件库中拖拉一个动态面板,设置想要的宽度和高度
    Axure制作账号扫码切换登录、控制按钮启用/禁用Axure制作账号扫码切换登录、控制按钮启用/禁用
  2. 双击动态面板,设置需要切换的面板数量,命名清楚
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  3. 点击state进入面板详细页,自己设计想要的样式
    Axure制作账号扫码切换登录、控制按钮启用/禁用Axure制作账号扫码切换登录、控制按钮启用/禁用
  4. 选中点击触发操作的元件,添加鼠标单击用例:设置面板状态-选中动态面板-【选择状态】选择单击后需要切换到的面板,各个元件命名清楚哦~
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  5. 账号登录中文本框禁用/启用登录按钮,选中文本框,添加文本改变时用例
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  6. 设置用例:【元件文字】【元件名称-自己命名的】【== 等于】【值】【空】,因为两个文本框是或的关系,所以符合任何一个条件的情况下即用户名和密码有一个为空,登录按钮都是禁用状态(自己设置禁用状态)
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  7. 设置好文本框用例后,设置按钮的启用/禁用,点击确定后,将用户名文本改变时案例复制给密码文本框,即可控制登录按钮
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  8. 设置错误信息提示,自己用文本标签写出用户名和密码错误时的提示放置提示位置,默认隐藏(隐藏功能在快捷功能栏),在页面即为黄色块,如图
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  9. 给登录按钮加单击时用例即可触发隐藏提示显示:选中登录按钮-添加登录正确的条件(正确的用户名密码)-链接新页面表示登录成功,用例中账号密码:admin/111111,因为账号和用户名都正确才能登录,所以需要都符合即and
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  10. 根据需要链接新页面或窗口
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  11. 给登录按钮添加登录错误的单击用例,即除了admin/111111以外的都会触发,所以不用自己设置新的条件,点击添加用例,默认的则是else if true,添加登录失败时显示提示信息的用例
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  12. 有错误提示后,重新输入错误提示需要消失,即可为用户名和密码的文本框添加获取焦点时的用例
    Axure制作账号扫码切换登录、控制按钮启用/禁用
  13. 确定后就完成登录的基本交互啦,一些鼠标悬停点击的交互没有写,大家注意哦~~