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

来源：https://www./3777/ 标签：axure, 案例, 原型, 输入框, 搜索框 收藏：株野 日期：2018-12-18

即日起本站开始转载小楼老师的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版本，使用方法相同。

搜索框(1)输入框(2)

本文由 Axure中文网 作者：Axure中文网 发表，其版权均为 Axure中文网 所有，文章内容系作者个人观点，不代表 Axure中文网 对观点赞同或支持。如需转载，请注明文章来源。