神刀安全网

axure学习之路.第二弹

这个星期我就开始了我第一个正式的原型图绘画了。

我这次要画的是基于wordpress博客的一个登录界面。

我在原型图的站点地图里面设置了五个页面:有登录、注册、找回密码、后台以及条件设置。

axure学习之路.第二弹

不过最后一个条件设置在这次的原型图里面并不能起到什么作用,我只是用这个来练习条件设置罢了,这个页面我放在最后说吧。

那先从登录说起吧,首先,它在生成的html里面是这个样子的:

axure学习之路.第二弹

静态的这些页面布局以及按钮设置我就不详说了,在这里我主要想说两个点。

一是在登录出现问题时登录板块上方所出现的提示框的设置,就像这样:

axure学习之路.第二弹

这个的设置就需要用到axure的神器之一———动态面板了,所谓动态面板,说白了,就是一个巨大的容器,可以装任何你想用到的原件,但同时又不会都出现在你当前所在的这个页面上,除非是你想让他们都全部显现,同时它还有隐藏、移动等众多功能,十分的好用。

好,回到我们的登录页面。想要做这个效果,首先,在你的登录板块的上方拉出一块矩形,并且将它转换为动态面板,就像这样(黄色部分):

axure学习之路.第二弹

动态面板里面是这样的:

axure学习之路.第二弹

里面这个绿色的文字标签,先清空它,等下有地方会写它的提示内容的,只不过不是这里,另外,还要给它起个名字,因为等下需要调用它,所以肯定是需要命名的,在这里,我就叫它msg(message的意思),btw,上面那个动态面板是黄色的是因为我们现在在这里把它隐藏了,因为它不一定每次都出现,你如果登录没有问题的话当然就不会出现提示了,所以要先隐藏,只有在需要它的时候再让它出来。

说完了这个提示框,再来说说下面那个登录板块,如果登录出现问题的话,不仅上面会出现提示框,而且下面的登录板块自己也会左右的抖动,同样的,这个抖动效果也需要动态面板来进行的,那为什么这里也需要呢,是因为它下面的登录模块其实是由许多单个的原件组合而成的,但是我们需要的是整个登录模块能够左右摆动,所以就需要把它装到动态面板这个大容器里,由动态面板来集中管理。

知道了这两个,接下来的交互就好说了。

那我们就来看看登录按钮的交互设置:

axure学习之路.第二弹

一张图截不完,下面还有= =

axure学习之路.第二弹
接上

几个case,带我一个一个来解释,首先,第一个case:账号密码都为空时,提示模块隐藏。

case2:如果用户名为空,出现提示:错误:用户名一栏为空,并且登陆板块左右晃动。此时,就要用到我们刚才提到的msg了,设置文本,转入到msg,然后编辑文字:错误:用户名一栏为空;

case3同理case2:密码一栏为空;

case4:case4里面提到了有个up,还有个[[n]],up是我设置的一个全局变量

axure学习之路.第二弹

里面包含了几组默认值,在这里,我把这些默认值用作这个登录界面的账号和密码,因为没有匹配数据库嘛。。。就只有这样做了,它的格式其实是这样的:([[n]]:[[p]]),[[n]]代表账号name;[[p]]代表密码password,这个case的意思就是你所输入的name是否与up里面的可以匹配,如果不匹配,出现错误提示,如果匹配,跳转到下一个case。

然后到第五个case了,case5是为了验证密码是否正确,道理与case4相同,不过这里要说明的一点是[[username]]表示的就是用户输入的账号。

如果上面五个case都没问题了,那就可以直接跳到后台页面了。。。因为我们现在并没有后台嘛,所以我就暂时先放了一张知乎的截图装装样子。。像这样:

axure学习之路.第二弹

好吧,注册差不多就是这些了,那还有一个重头戏,就是 注册。

在注册之前,我们先要搞清楚,注册时提示框大概会出现多少种状态,因为此时不同情况的种类实在太多,所以我们这个时候就要用xmind来理一理思路。

axure学习之路.第二弹

整理完后我的内心是崩溃的= =

这就是所有可能出现的情况,然后一个会出现一个提示的情况大概是有六种(我用数字符号标注了一下,注册成功的暂时不算,这个我们单独讨论),剩下的就都是两个提示的。

然后这块的提示框和注册板块也还是要用到动态面板,原因和登录一样。

动态面板这块大概和登录差不多,不过提示框的动态面板稍稍有点不同,因为就像xmind里所展示的一样,注册出错有多种情况,所以提示情况也有所不同,有只出一个提示的,也有出两个提示的,所以在提示框的动态面板里我们要设置两个状态。state1和state2.

axure学习之路.第二弹

state1里还是和登录时时候是一样的,文本标签也还是叫msg:

axure学习之路.第二弹

state2里面是这样的,因为要出两个提示,所以有两个文本标签,这两个文本标签我分别给他们命名为msg2a和msg2b,而且矩形宽度也比state1要宽一些:

axure学习之路.第二弹

这里的注册板块同样也要用动态面板,这个我就不详说了,这里我着重说一下注册按钮的交互。如果说还是按照登录时候的那种交互设置的话,那我们的工作量将会十分巨大,因为种类实在是太多了,那我今天就不那样做,我用一种相对来说简单一点的方法来做,不过可能有一点点不太好理解,那我先上交互说明,看着交互说明我再来具体说:

axure学习之路.第二弹

axure学习之路.第二弹

在说明之前我再多嘴两句,还是因为没有数据库可以匹配嘛,所以如果输入1(用户名和邮件都是)表示该用户名/邮件已被注册,输入2,则表示该用户名/邮件是无效用户名/邮件,什么都不输入,则将会提醒你填写用户名/邮件。

好,开始说明。首先case4先不管它,先跳到前三个case1,可以看到,在判断用户注册的用户名是否有错误,这错误又包括三个方面:没有填写、用户名已被注册、以及无效用户名,要注意的是,无论出现这三个错误中的哪一个,提示语都 会先赋给msg,然后同时也赋给msg2a, 下面三个case1同理:提示语都 会先赋给msg,然后同时也赋给msg2b,然后,重点来了,看到那个case5了吗,如果msg、msg2a、msg2b都等于空的话,就说明账号和邮件都没出现三个问题中的任何一个问题,就说明这个用户名和邮件都是ok的,所以就注册成功了(注册成功后的页面现在还没做出来,所以就让它先跳转到登录页面),直接跳转到登录页面;但如果不是,就跳到case2,(注意,这里是else if),case2就会判断msg2a和msg2b是否都不为空,如果不为空,就跳转到注册模块动态面板的state2里面,此时msg2a和msg2b所带有的提示语就是刚才在前六个case1里面所得到的提示语,这样就巧妙的解决了双提示语多种情况的问题。如果既不是都空也不是msg2a和msg2b都带有提示语,那么就只可能是msg带有提示语了,这是就是指出现一个提示标语的情况,也就是case3的内容了。 好吧,最后就只剩一个case6了,case6就很好理解了,msg !=    or  msg2a  !=  or  msg !=  ;就是说只要出现任何一个提示语,那么就会有注册模块的抖动效果。对了,还有最上面那个case4:三个提示语都为空,这是干嘛的呢?这其实是起到清空三个提示标语的作用,因为我们每填写一次信息就相当于赋值一次,那么第二次它就会带着上一次的赋值,所以在每次交互的开头,必须要重新清空一次。

好吧,注册也终于说完了。

还有就是找回密码、后台、以及条件这三个页面。

找回密码我还没做好(逃,只做了一些简单的静态布局,还没什么交互,所以在这里就不敖述了;

后台嘛。。。我刚才也说了,我就是放了一张知乎的截图上去装装样子(再逃,因为确实也没做后台。。

最后就是条件了。

这个页面其实就是我最开始做条件判断自己用来练手的,因为自己有一点编程基础,所以这个还是很容易理解的,很多编程语言里都有这样的条件判断结构。

axure学习之路.第二弹

axure学习之路.第二弹

axure学习之路.第二弹

这个我也就不多说了,应该一看就能懂。

最后,我想说的是,刚才那个注册页面肯定是有bug的,别的bug我不知道,至少有一个,我还是很清楚的,就是注册邮箱判断那一块,怎么样才是有效邮箱呢?因为现在我只是用一个数字2来代替了这种情况,所以现在可能不用理会,但如果有数据库匹配进来了,那时候就又要进行判断了。

这个判断就又有很多情况了:带中文的?@位置不正确?特殊符号?

这个我还在研究中。。等我研究出来了在把坑补上。

今天就这么多吧。。实在写不动了。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » axure学习之路.第二弹

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮