AxureRP8实战手册-案例2(文本框:边框变色)

AxureRP8.0教程 小楼一夜听春语 16012℃ 0评论

案例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 RP 8精品课程系列,全新的套路,经典的姿势,更舒爽,更润滑,更紧致,更销魂,想体验这种欲罢不能的学习感觉?快从下面进入!

《AxureRP 8 入门与实战 - 入门篇》------从零入门的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例2(文本框:边框变色)

喜欢 (23)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(25)个小伙伴在吐槽
  1. 那关于文本框前的元件(用户和小锁子)怎么变色呢
    鹿柒2016-07-06 15:51 回复
    • 在配置动作里勾选你要变色的原件就可以了,就是把用户和小锁子也勾选上
      Jan3212016-07-08 15:44 回复
      • 关键是用户和小锁子是文本框的提示文字啊……如果只是文字作为提示文字,图标作为矩形的文字的话,预览输入的时候,输入的文字会覆盖小图标。我搞了两个小时了各种试……不知道是我步骤错了还是有问题昂……
        陌上郎2016-10-25 15:45 回复
        • 我弄出来了,要把文本框的边框隐藏了!
          陌上郎2016-10-25 16:02 回复
    • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
      小楼一夜听春语2016-07-23 22:21 回复
      • 老师怎么将图标字体打进矩形内,我试过了复制不进去,拖回去的话,图标字体和矩形不是一体的,设置交互样式时,边框变色了,但是图标字体没有
        河边的鹅卵石2016-09-21 21:29 回复
    • 在矩形内选择编辑文字,然后使用小楼老师字体原件库里的用户图标跟锁定图标,这时候矩形跟图标是一个整体,选择交互形式就可以了。
      鹿鹿2016-09-03 21:18 回复
      • 编辑文字的时候又如何使用库里的图标呢
        Ian2016-12-09 13:37 回复
      • 这样也不是一体的
        路路2017-01-10 17:26 回复
        • 点导航菜单,在线阅读,里面有视频。
          小楼一夜听春语2017-01-10 19:58 回复
  2. 事件交互设置应该是文本框[鼠标移入时],选中矩形和[鼠标移出时],取消选中矩形。文本框获取焦点的动作,是需要点击文本框,与楼主设定的效果不符。(小白一枚,亲试出来的^^)
    小小白2016-07-08 16:36 回复
    • 预设场景就是光标进入文本框,而不是光标移入文本框。可以参考在线阅读中的案例效果。
      小楼一夜听春语2016-07-08 17:03 回复
      • 多谢小楼老师指点
        小小白2016-07-08 17:14 回复
  3. 在线阅读那里打开是案例case,那里怎么下载素材?
    旋木有光兮2016-07-14 19:33 回复
  4. 请问小楼老师用户图标和密码图标怎么变色啊?谢谢啦!
    阿福2016-07-21 00:27 回复
    • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
      小楼一夜听春语2016-07-23 22:20 回复
  5. 这个案例需要文本框与矩形重合着来用才行的
    伟哥2016-07-31 15:59 回复
    • 怎么结合着用
      产品小白求指教2016-09-28 20:23 回复
    • 怎么结合用?
      StayReal_Po2016-11-14 13:43 回复
  6. 请问老师为什么我的文本框的边框样式设置呈灰色无法使用呢?
    deng2016-08-07 23:34 回复
    • 我也想问一下 总是有边框 看着都烦
      杨宇宇宇2016-08-31 11:19 回复
      • 文本框-属性里面勾选隐藏边框,就不会有边框了
        sarah2016-09-28 15:04 回复
  7. 在用例中可以一直选切换选中状态,也能实现,两者有什么不同吗
    小天2016-10-08 16:12 回复
  8. FontAwesome4.4.0图标字体元件库里的用户图标和密码图标有点大呀,看起来与实际状态不太相符,可以改变图标的大小吗?
    楚留香2016-10-19 14:44 回复
  9. 请问我设置完交互样式后,两个同时变色了,不晓得为什么?
    爱学习的人2017-02-05 09:04 回复