axure商城

Axure实战案例1:带提示文字的输入框 淘宝搜索框

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

带提示文本的输入框是非常常见的一种交互效果,输入文字后,提示文字消失。本教程还加上了图标字体。建议大家一起跟着做一下练习,以便熟练掌握。

案例1.   文本框:带图标文字提示

案例来源:淘宝首页-搜索框

案例效果:点击查看在线案例效果>>

  • 输入文字前:(图1-1)

Axure实战案例1:带提示文字的输入框 淘宝搜索框

  • 输入文字后:(图1-2)

Axure实战案例1:带提示文字的输入框 淘宝搜索框

元件准备:

  • 页面中(图1-3)

Axure实战案例1:带提示文字的输入框 淘宝搜索框

案例描述:

在搜索框里面,文本框中的文字提示包含图标。

思路分析:

文本框可以添加文字提示,而图标字体中的图标也是文字。那么案例中的搜索图标,我们就可以使用图标字体来实现。

操作步骤:

1、双击安装FontAwesome字体文件,载入FontAwesome4.4.0图标字体元件库;

2、切换到FontAwesome4.4.0图标字体元件库;

3、从元件库中找到图标,拖放到画布;

4、双击图标,复制里面的图标文字;

5、将复制的内容粘贴到文本框属性的{提示文字}中,并输入其它文字;(图1-4)

Axure实战案例1:带提示文字的输入框 淘宝搜索框

6、点击【提示样式】,在样式设置界面中设置提示文字字体为“FontAwesome”,字体颜色为灰色。(图1-5)

Axure实战案例1:带提示文字的输入框 淘宝搜索框

7、参考“基础56”,在web字体设置中添加FontAwesome字体的设置方案。

补充说明:

  • 本案例需要结合特殊字体元件:FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。
  • 使用FontAwesome4.4.0图标字体元件库,除了要参考“基础30”载入元件库,还要安装相应的字体文件。安装字体文件时,请先关闭Axure,安装完字体文件后,打开Axure方可正常使用。

备注:本站中FontAwesome图标字体元件库已升级为4.5.0版本,使用方法相同。

给TA打赏
共{{data.count}}人
人已打赏
案例教程

创意实例:不偷看密码的登录页面

2016-4-8 1:38:30

案例教程

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

2016-7-30 15:24:46

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索