即日起本站开始转载小楼老师的axure 8.0实战案例系列教程。出自小楼老师新书《AxureRP8实战手册》。本系列内容建议初学者按顺序学习,理解实现的过程、思路与技巧,并以能够独立完成案例为学习目标。
带提示文本的输入框是非常常见的一种交互效果,输入文字后,提示文字消失。本教程还加上了图标字体。建议大家一起跟着做一下练习,以便熟练掌握。
案例1. 文本框:带图标文字提示
案例来源:淘宝首页-搜索框
案例效果:点击查看在线案例效果>>
- 输入文字前:(图1-1)
- 输入文字后:(图1-2)
元件准备:
- 页面中(图1-3)
案例描述:
在搜索框里面,文本框中的文字提示包含图标。
思路分析:
文本框可以添加文字提示,而图标字体中的图标也是文字。那么案例中的搜索图标,我们就可以使用图标字体来实现。
操作步骤:
1、双击安装FontAwesome字体文件,载入FontAwesome4.4.0图标字体元件库;
2、切换到FontAwesome4.4.0图标字体元件库;
3、从元件库中找到图标,拖放到画布;
4、双击图标,复制里面的图标文字;
5、将复制的内容粘贴到文本框属性的{提示文字}中,并输入其它文字;(图1-4)
6、点击【提示样式】,在样式设置界面中设置提示文字字体为“FontAwesome”,字体颜色为灰色。(图1-5)
7、参考“基础56”,在web字体设置中添加FontAwesome字体的设置方案。
补充说明:
- 本案例需要结合特殊字体元件:FontAwesome4.4.0图标字体元件库。该元件库在本书的配套资料中。
- 使用FontAwesome4.4.0图标字体元件库,除了要参考“基础30”载入元件库,还要安装相应的字体文件。安装字体文件时,请先关闭Axure,安装完字体文件后,打开Axure方可正常使用。
备注:本站中FontAwesome图标字体元件库已升级为4.5.0版本,使用方法相同。