Axure的简单操作(模糊搜索)

模糊搜索框

接下来要演示的是如何在Axure中做一个jd搜索商品的搜索框。

具体如下所示:

 Axure的简单操作(模糊搜索)_第1张图片

=========================================================

 Axure的简单操作(模糊搜索)_第2张图片

=========================================================

 Axure的简单操作(模糊搜索)_第3张图片

=========================================================

 Axure的简单操作(模糊搜索)_第4张图片

=========================================================

 Axure的简单操作(模糊搜索)_第5张图片

=========================================================

 Axure的简单操作(模糊搜索)_第6张图片

======================================================

 Axure的简单操作(模糊搜索)_第7张图片

=========================================================

 Axure的简单操作(模糊搜索)_第8张图片

=========================================================

 Axure的简单操作(模糊搜索)_第9张图片

=========================================================

然后把不透明度变为0

=========================================================

 Axure的简单操作(模糊搜索)_第10张图片

=========================================================

右键矩形框,再点击“顺序”,再点击置于顶层

=========================================================

接下来就可以看看执行效果了,然后发现我需要把提示的文字用一个矩形框围着,并且刚初始化页面的时候要把提示文字的动态面板隐藏好。

=========================================================

 Axure的简单操作(模糊搜索)_第11张图片

========================================================

 Axure的简单操作(模糊搜索)_第12张图片

=========================================================

 Axure的简单操作(模糊搜索)_第13张图片

=========================================================

 Axure的简单操作(模糊搜索)_第14张图片

=========================================================

接下来要搞定的是输入文字后有提示。

=========================================================

 Axure的简单操作(模糊搜索)_第15张图片

=========================================================

 Axure的简单操作(模糊搜索)_第16张图片

=========================================================

 Axure的简单操作(模糊搜索)_第17张图片

=========================================================

 Axure的简单操作(模糊搜索)_第18张图片

=========================================================

接下来要解决的是,点击提示内容,把提示的文字搬到输入框中。

=========================================================

 Axure的简单操作(模糊搜索)_第19张图片

=========================================================

 Axure的简单操作(模糊搜索)_第20张图片

=========================================================

 Axure的简单操作(模糊搜索)_第21张图片

=========================================================

 Axure的简单操作(模糊搜索)_第22张图片

=========================================================

 Axure的简单操作(模糊搜索)_第23张图片

=========================================================

 Axure的简单操作(模糊搜索)_第24张图片

=========================================================

这个时候我们来运行一下,发现并不能够选到提示的文字,我们接着需要做如下处理。

=========================================================

首先选中输入框,删掉失去焦点的事件,然后再加入一个矩形的背景,如下图所示:

Axure的简单操作(模糊搜索)_第25张图片

你可能感兴趣的:(交互设计)