Axure实战案例之文本输入框交互 百度登录界面

　　文本输入框：边框变色

　　案例来源:

　　百度-登录界面

　　案例效果：

　　光标进入文本框时

　　案例描述：

　　在登录界面中，包含用户名与密码的输入框。当焦点进入输入框时，输入框边框与内部图标变为蓝色;失去焦点时，恢复灰色。

　　元件准备：

　　页面中

　　包含命名：

　　矩形(用于账号输入边框)：Border01

　　矩形(用于密码输入边框)：Border02

　　思路分析：

　　输入框的样式在两种不同状态下切换，可以通过交互样式来实现;(操作步骤1)

　　文本框获取焦点时，呈现选中的样式(操作步骤2~3);

　　文本框失去焦点时，呈现未选中的样式(操作步骤4~5)。

　　操作步骤：

　　1、设置元件“Border01”与“Border02”的选中时交互样式为淡蓝色边框与文字;(参考“基础23”)

　　2、设置账号输入文本框【获取焦点时】，【选中】元件“Border01”;

　　事件交互设置

　　用例动作设置

　　3、参考上一步，设置密码输入文本框【获取焦点时】，【选中】元件“Border02”;

　　4、设置账号输入文本框【失去焦点时】，【取消选中】元件“Border01”;

　　事件交互设置

　　用例动作设置

　　5、参考上一步，设置密码输入文本框【失去焦点时】，【取消选中】元件“Border02”。

　　补充说明：

　　本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容，而非文本框元件。

　　本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。