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

axure商城

转载自小楼老师的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中文网 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
15

评论:

18 条评论,访客:18 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. avatar
    蔡旭发布于: 

    DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

  2. avatar
    Moona发布于: 

    axure8输入框获得焦点后好像可以直接变为蓝色~失去焦点变为灰色

  3. tracy987
    tracy987发布于: 

    也是跟着小楼学的,但是我的输入框里面的两个文字图标却不会变色,边框就可以,不知道什么问题

  4. avatar
    鸭子发布于: 

    跟着画了个丑丑的原型,加了隐藏和显示控制,预览可见:http://6i2yyr.axshare.com,望指点~~~

  5. shihui2727
    shihui2727发布于: 

    一个文本框放入一个矩形框里面,文本框比矩形框小一点儿,文本框右键隐藏边框,其实这里直接给矩形框加交互样式,边框就变的细细的蓝色了。图片也放到矩形框里面设置。里面的文字就设置文本框的交互样式

  6. jie2000
    jie2000发布于: 

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

  7. 嘿嘿嘿
    嘿嘿嘿发布于: 

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

  8. 樱
    发布于: 

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

  9. EVA.WU
    EVA.WU发布于: 

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

  10. 叶小木木
    叶小木木发布于: 

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

发表评论