Axure官方正版
快速原型设计工具

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

转载自小楼老师的axure 8.0实战案例系列教程。出自小楼老师新书《AxureRP8实战手册》。本系列内容建议初学者按顺序学习,理解实现的过程、思路与技巧,并以能够独立完成案例为学习目标。

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

本案例在线演示:http://www.iaxure.com/axurebook/8/case2.html

案例2.   文本输入框:边框变色

案例来源:

百度-登录界面

案例效果:

  • 光标进入文本框时:(图1-6)

1_6

案例描述:

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

元件准备:

  • 页面中:(图1-7)

1_7

包含命名:

  • 矩形(用于账号输入边框):Border01
  • 矩形(用于密码输入边框):Border02

思路分析:

  • 输入框的样式在两种不同状态下切换,可以通过交互样式来实现;(操作步骤1)
  • 文本框获取焦点时,呈现选中的样式(操作步骤2~3);
  • 文本框失去焦点时,呈现未选中的样式(操作步骤4~5)。

操作步骤:

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

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

  • 事件交互设置:(图1-8)

1_8

  • 用例动作设置:(图1-9)

1_9

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

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

  • 事件交互设置:(图1-10)

1_10

  • 用例动作设置:(图1-11)

1_11

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

补充说明:

  • 本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容,而非文本框元件。
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
转载请注明出处:Axure中文网 » Axure实战案例2:文本输入框交互 百度登录界面
axure share

评论 9

评论前必须登录!

 

  1. #8

    把输入框右击隐藏边框,然后在属性设置提示文字为密码等显示文字。图标变色和边框变色一样原理也这样设置。

    jie20004周前 (12-22)
  2. #7

    讲的不清不楚,到底用了输入框还是矩形都没讲,图标怎么变色也没讲

  3. #6

    第一:没有判断手机号是否11位,邮箱格式是否正确
    第二:密码明文显示

    嘿嘿嘿5个月前 (08-29)
  4. #5

    卡了

    5个月前 (08-25)
  5. #4

    汉化之后中文版的工具栏字体实在是太小了。。。。。看得眼都咪了。。。。例如撤销和重做这两个字体。。我看一眼都晕。。。希望改进。。。

    5个月前 (08-11)
  6. #3

    密码输入的时候直接显示明文了。这个要改

    EVA.WU5个月前 (08-09)
  7. #2

    讲的很细致,赞一个

  8. #1

    帐号与密码的图标是怎么跟着变化的?

    叶小木木6个月前 (08-03)

购买Axure RP正版授权 终身可用

购买专业版购买团队版