Axure如何制作提示搜索框效果

在电商网站或App中，搜索框是一个非常重要的功能，为了提高用户的体验，带提示的搜索框变得非常重要。在Axure中，也能制作出这种效果。那么，Axure如何制作提示搜索框效果呢？本文就由小编带大家了解一下，一起来看看吧~

工具/原料

Axure版本:企业版8.0.0.3338

PC电脑：Windows 10

方法/步骤

1.准备一个【搜索框图片】和一个【文本框】元件，如图

2.将【文本框】移动到搜索框内，并勾选文本框的【隐藏边框】功能，如图

3.在文本框中输入提示语【请输入商品名称】并将文本文字调整为灰色，如图

4.选择文本框的交互动作【获取焦点时】，如图

5.设置获取焦点时的用例为【将当前元件文本值设置为空】，如图

6.预览效果，当文本框获得焦点时，提示文字消失。提示框效果完成。如图

总结：

1.准备一个【搜索框图片】和一个【文本框】元件；

2.将【文本框】移动到搜索框内，并勾选文本框的【隐藏边框】功能；

3.在文本框中输入提示语【请输入商品名称】并将文本文字调整为灰色；

4.选择文本框的交互动作【获取焦点时】；

5.设置获取焦点时的用例为【将当前元件文本值设置为空】；

6.预览效果，当文本框获得焦点时，提示文字消失。提示框效果完成。

注意事项

Tips:为了更好的体现提示搜索框效果，还可以设置失去焦点时的用例展示提示文字。