Axure教程

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

 

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

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

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

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

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

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

一.准备素材

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

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

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

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

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

 

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

当输入框失去焦点后，如果输入框中没有输入文字(即文字长度为0)则显示预