案例2. 文本框:边框变色
案例来源:
百度-登录界面
案例效果:
光标进入文本框时:(图1-6)
案例描述:
在登录界面中,包含用户名与密码的输入框。当焦点进入输入框时,输入框边框与内部图标变为蓝色;失去焦点时,恢复灰色。
元件准备:
页面中:(图1-7)
包含命名:
矩形(用于账号输入边框):Border01
矩形(用于密码输入边框):Border02
思路分析:
输入框的样式在两种不同状态下切换,可以通过交互样式来实现;(操作步骤1)
文本框获取焦点时,呈现选中的样式(操作步骤2~3);
文本框失去焦点时,呈现未选中的样式(操作步骤4~5)。
操作步骤:
1、设置元件“Border01”与“Border02”的选中时交互样式为淡蓝色边框与文字;(参考“基础23”)
2、设置账号输入文本框【获取焦点时】,【选中】元件“Border01”;
事件交互设置:(图1-8)
用例动作设置:(图1-9)
3、参考上一步,设置密码输入文本框【获取焦点时】,【选中】元件“Border02”;
4、设置账号输入文本框【失去焦点时】,【取消选中】元件“Border01”;
事件交互设置:(图1-10)
用例动作设置:(图1-11)
5、参考上一步,设置密码输入文本框【失去焦点时】,【取消选中】元件“Border02”。
补充说明:
本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容,而非文本框元件。
本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~
小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。
《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】
喜欢 (52)or分享 (0)