这个星期我就开始了我第一个正式的原型图绘画了。
我这次要画的是基于wordpress博客的一个登录界面。
我在原型图的站点地图里面设置了五个页面：有登录、注册、找回密码、后台以及条件设置。
不过最后一个条件设置在这次的原型图里面并不能起到什么作用，我只是用这个来练习条件设置罢了，这个页面我放在最后说吧。
那先从登录说起吧，首先，它在生成的html里面是这个样子的：
静态的这些页面布局以及按钮设置我就不详说了，在这里我主要想说两个点。
一是在登录出现问题时登录板块上方所出现的提示框的设置，就像这样：
这个的设置就需要用到axure的神器之一———动态面板了，所谓动态面板，说白了，就是一个巨大的容器，可以装任何你想用到的原件，但同时又不会都出现在你当前所在的这个页面上，除非是你想让他们都全部显现，同时它还有隐藏、移动等众多功能，十分的好用。
好，回到我们的登录页面。想要做这个效果，首先，在你的登录板块的上方拉出一块矩形，并且将它转换为动态面板，就像这样（黄色部分）：
动态面板里面是这样的：
里面这个绿色的文字标签，先清空它，等下有地方会写它的提示内容的，只不过不是这里，另外，还要给它起个名字，因为等下需要调用它，所以肯定是需要命名的，在这里，我就叫它msg（message的意思），btw,上面那个动态面板是黄色的是因为我们现在在这里把它隐藏了，因为它不一定每次都出现，你如果登录没有问题的话当然就不会出现提示了，所以要先隐藏，只有在需要它的时候再让它出来。
说完了这个提示框，再来说说下面那个登录板块，如果登录出现问题的话，不仅上面会出现提示框，而且下面的登录板块自己也会左右的抖动，同样的，这个抖动效果也需要动态面板来进行的，那为什么这里也需要呢，是因为它下面的登录模块其实是由许多单个的原件组合而成的，但是我们需要的是整个登录模块能够左右摆动，所以就需要把它装到动态面板这个大容器里，由动态面板来集中管理。
知道了这两个，接下来的交互就好说了。
那我们就来看看登录按钮的交互设置：
一张图截不完，下面还有= =
接上
几个case，带我一个一个来解释，首先，第一个case:账号密码都为空时，提示模块隐藏。
case2:如果用户名为空，出现提示：错误：用户名一栏为空，并且登陆板块左右晃动。此时，就要用到我们刚才提到的msg了，设置文本，转入到msg，然后编辑文字：错误：用户名一栏为空；
case3同理case2：密码一栏为空；
case4:case4里面提到了有个up,还有个[[n]],up是我设置的一个全局变量
里面包含了几组默认值，在这里，我把这些默认值用作这个登录界面的账号和密码，因为没有匹配数据库嘛。。。就只有这样做了，它的格式其实是这样的：（[[n]]:[[p]]），[[n]]代表账号name；[[p]]代表密码password,这个case的意思就是你所输入的name是否与up里面的可以匹配，如果不匹配，出现错误提示，如果匹配，跳转到下一个case。
然后到第五个case了，case5是为了验证密码是否正确，道理与case4相同，不过这里要说明的一点是[[username]]表示的就是用户输入的账号。
如果上面五个case都没问题了，那就可以直接跳到后台页面了。。。因为我们现在并没有后台嘛，所以我就暂时先放了一张知乎的截图装装样子。。像这样：
好吧，注册差不多就是这些了，那还有一个重头戏，就是注册。
在注册之前，我们先要搞清楚，注册时提示框大概会出现多少种状态，因为此时不同情况的种类实在太多，所以我们这个时候就要用xmind来理一理思路。
整理完后我的内心是崩溃的= =
这就是所有可能出现的情况，然后一个会出现一个提示的情况大概是有六种（我用数字符号标注了一下，注册成功的暂时不算，这个我们单独讨论），剩下的就都是两个提示的。
然后这块的提示框和注册板块也还是要用到动态面板，原因和登录一样。
动态面板这块大概和登录差不多，不过提示框的动态面板稍稍有点不同，因为就像xmind里所展示的一样，注册出错有多种情况，所以提示情况也有所不同，有只出一个提示的，也有出两个提示的，所以在提示框的动态面板里我们要设置两个状态。state1和state2.
state1里还是和登录时时候是一样的，文本标签也还是叫msg：
state2里面是这样的，因为要出两个提示，所以有两个文本标签，这两个文本标签我分别给他们命名为msg2a和msg2b,而且矩形宽度也比state1要宽一些：
这里的注册板块同样也要用动态面板，这个我就不详说了，这里我着重说一下注册按钮的交互。如果说还是按照登录时候的那种交互设置的话，那我们的工作量将会十分巨大，因为种类实在是太多了，那我今天就不那样做，我用一种相对来说简单一点的方法来做，不过可能有一点点不太好理解，那我先上交互说明，看着交互说明我再来具体说：
在说明之前我再多嘴两句，还是因为没有数据库可以匹配嘛，所以如果输入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：三个提示语都为空，这是干嘛的呢？这其实是起到清空三个提示标语的作用，因为我们每填写一次信息就相当于赋值一次，那么第二次它就会带着上一次的赋值，所以在每次交互的开头，必须要重新清空一次。
好吧，注册也终于说完了。
还有就是找回密码、后台、以及条件这三个页面。
找回密码我还没做好（逃，只做了一些简单的静态布局，还没什么交互，所以在这里就不敖述了；
后台嘛。。。我刚才也说了，我就是放了一张知乎的截图上去装装样子（再逃，因为确实也没做后台。。
最后就是条件了。
这个页面其实就是我最开始做条件判断自己用来练手的，因为自己有一点编程基础，所以这个还是很容易理解的，很多编程语言里都有这样的条件判断结构。
这个我也就不多说了，应该一看就能懂。
最后，我想说的是，刚才那个注册页面肯定是有bug的，别的bug我不知道，至少有一个，我还是很清楚的，就是注册邮箱判断那一块，怎么样才是有效邮箱呢？因为现在我只是用一个数字2来代替了这种情况，所以现在可能不用理会，但如果有数据库匹配进来了，那时候就又要进行判断了。
这个判断就又有很多情况了：带中文的？@位置不正确？特殊符号？
这个我还在研究中。。等我研究出来了在把坑补上。
今天就这么多吧。。实在写不动了。
网友评论