请选择 进入手机版 | 继续访问电脑版

象涛徽软论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 573|回复: 0

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

[复制链接]

46

主题

47

帖子

10090万

积分

超级版主

Rank: 8Rank: 8

积分
100904688
发表于 2016-10-14 18:08:53 | 显示全部楼层 |阅读模式
本帖最后由 HaimengLi 于 2016-10-15 22:42 编辑

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

本系列内容建议初学者按顺序学习,理解实现的过程、思路与技巧,并以能够独立完成案例为学习目标。

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

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

案例来源:

百度-登录界面

案例效果:

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

案例描述:

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

元件准备:

  • 页面中:(图2)

包含命名:

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

思路分析:

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

操作步骤:

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

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

  • 事件交互设置:(图3)

  • 用例动作设置:(图4)

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

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

  • 事件交互设置:(图5)

  • 用例动作设置:(图6)

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

补充说明:

  • 本案例中的“输入框”是指矩形边框与文本框共同组成的一组内容,而非文本框元件。
  • 本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)
  • 转载自小楼老师的axure 8.0实战案例系列教程。出自小楼老师新书《AxureRP8实战手册》。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|XTHSOFT Inc. ( 浙ICP备14033542号-1

GMT+8, 2018-5-25 07:08 , Processed in 0.255051 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表