用户登录是好多网站都有的重要功能,今天使用axure制作一个用户登录,并把用户名显示到新页面的案例。

一、拖入元件并布局:

      1. 在页面中拖入两个文本框,并命名为username、password,把password的类型设置为“密码”,把两个文本框的提交按钮设置为“login”,这样就可以直接按回车键登录了;为了显得美观一点,我们不在制作传统的“用户名”“密码”提示文本,而是把提示文字放到文本框中。

      2.拖入按钮修改文本为“登录”,并命名为login。

      3.新建一个页面命名为welcome,在此页面中拖入一个文本元件,命名为welcomeUser。

wKioL1jMsADgaPaXAAAxctEj_zU622.png-wh_50

二、设置全局变量

     点击【项目-全局变量】,添加一个新的全局变量命名为users

wKiom1jMsCyBBqvqAABHKXS05Jg544.png-wh_50

三、添加用户名判断

      1.选中login按钮,双击鼠标单击时事件,添加条件:当username输入的为“李明”并且password输入的为123456时,设置动作:设置变量users的值为“李明”,并在当前窗口打开链接welcome。

wKioL1jMsYSQQ2J_AAAo2HGU804687.png-wh_50wKioL1jMsZ_gPiXEAAAaGbwjw1Y594.png-wh_50

      2.打开welcome页面,双击页面加载时事件,添加动作:设置文本welcomeUser的值,点击fx,输入  欢迎你,`users`   。

wKiom1jMswfBTVXwAAClA7BJklA923.png-wh_50

wKioL1jMswfg0eC-AABmhIHbwoQ845.png-wh_50


这样做完啦,不过在登录判断时我们只假定用户名和密码分别为李明和123456时才能登录,并没有做信息输入错误时的提示信息,这个只要在增加一个条件用例就好啦,axure新手朋友们可以自己尝试一下~~