【Axure教程】制作高保真登录界面

转载自：老二牛车教育 » 【Axure教程】制作高保真登录界面

在使用Axure制作网页的原型图时，经常会有注册、登录页面需要设计，这样的页面时常作为一个产品的首页出现在人们面前而且往往会被一点而过，如果我们能在这样的页面上加入一些细节的设计，一定会给我们的原型图加分不少!是的，今天我们探讨的中心就是：如何制作一个高保真的登录界面!下面先看下我做的效果图：

高保真登录框rp文件下载：高保真登录框

作为一个高保真的登录框，其制作的重点在于：

1.如何在点击输入框时，输入框内的文字消失

2.如何让登录框能够识别我输入的：“用户名”、“密码”、“验证码”

3.当我输入错误时，下面的提示文字是怎么显示的

解决以上3个问题，需要讲到axure条件中的“文字在部件”这样一个选择项，下面我们一起来尝试制作吧!

一.准备素材

还是和之前的教程一样，寻找我们需要的素材。制作登录框的素材相对比较简单，只需要用矩形工具制作一个如图示的“框”，可以适当调整大小和排布让它变的美观一点。在相对应的控件中填入相应的文字(如图)

(注：在登录的上方有一个透明的矩形，用来显示提示文字)

二.制作“鼠标点击时，输入框内文字消失”效果

这一步相对比较简单，只需要考虑“输入框获得焦点”、“输入框失去焦点”两种情况

当“输入框获得焦点”时，按照下图设置交互动作

当我们设置文字在部件 密码等于“”后，我们单击输入框，输入框内就会显示空格了。(4为空)

当输入框失去焦点后，如果输入框中没有输入文字(即文字长度为0)则显示预设文字;当有输入文字时，显示输入文字。如下图设置：

三.当输入错误时，下方提示文字的显示

在这一个步骤中，只需要注意一个问题就可以了：在编辑条件中，设置登录失败的三种情况(用户名错误、密码错误、验证码错误)，在设置否命题时，只需要列举一项不满足即可。笔者在这里设置的“用户名为[email protected]，密码为123456，验证码为GOOD”只要三个输入框的任意一个不符合预设，则登录失败，在提示文字区域显示对应文字。如图

当用户名输入错误时的条件为;
当某项输入错误时

在这些条件全部编辑完成后，一个高保真的登录框就完成了!在这篇文章中，主要讲到了axure中的“文字在部件”这样一个条件的使用，相信各位应该对这样一个选择项有所认识了吧!

合理的运用axure条件中的一些选择项可以让我们的原型更加功能性，交互设计的更加完善，今天的介绍就到这里，期待下次相见!

转载请注明：老二牛车教育 » 【Axure教程】制作高保真登录界面