Axure实现百度登录界面

今天主要内容是用Axure实现百度登录界面的原型，重点是实现登录界面中，选中输入框时边框变色的功能。

1,这是百度账号登录界面

2，打开Axure，在元件库中找到图片元件拖入，然后双击导入百度账号登录的截图（导入这张图片是为了方便制作的时候对照），导入之后调整到合适的大小，就可以开始下一步工作了。

3，拖入一个矩形元件。根据对照，我们可以看到登录界面的矩形是没有边框和背景颜色的。选中矩形元件，设置高度和宽度分布为520 ，500 （注意设置高度宽度时取消保持宽高比例），然后把矩形的边框设置无，背景颜色设置无。

4，接下来完成图标和“用户名密码登录”。拖入图片元件，双击导入事先准备好的图标，调整大小；拖入文本元件，输入“用户名密码登录”，调整字体大小。把两个元件摆放在合适的位置。

5，实现两个输入框，也就是本文的重点，选择输入框时边框变色。拖入矩形元件，设置大小，边框颜色，背景颜色，设置好后复制粘贴（可以按住Ctrl鼠标左键拖动）。拖入文本框元件，同样复制一份，摆放在合适的位置，选中2个文本框，点击属性，勾选隐藏边框，另外在设置提示文字框中输入“手机/邮箱/用户名”和“密码”，“密码”类型选择“密码”

完成好之后，设置矩形的交互样式，实现选中输入框变色。将两个输入框的矩形分别命名为box1,box2；同时选中两个矩形，在属性中点击鼠标选中时，在弹出来的界面中勾选线段颜色，设置成蓝色，点击确定。设置交互样式，选中第一个文本框，双击获取焦点时，在弹出来的界面，动作里选择选中，选择box1，点击确定，同样的方法设置第二个文本框。设置失去焦点时的交互，选择取消选中，目标box1，同样方法设置第二个文本框。

6，将剩下的补充完就大功告成啦。拖入复选框，文字更改为“下次自动登陆”，拖入矩形，文字更改为“登录”，设置填充蓝色，拖入文本框，隐藏边框，文字更改为“忘记密码”。最后完成啦，上图~