Axure知识点：如何制作弹出效果的搜索框（以泉州师范学院官网为例）

柔情只为你懂 2022-12-13 04:58 286阅读 0赞

> 摘要：微信搜索【[三桥君][Link 1]】  
> 使用软件：Axure RP 9软件  
> 说明：实现方式不唯一，这里给出三桥君制作的一种方式。

## 一、问题 ##

三桥君在制作泉州师范学院官网**带有弹出效果的搜索框**时，属实让我犯难了。\[[泉州师范学院官网][Link 2]\]

![在这里插入图片描述][20201010171938784.gif_pic_center]  
连续几天，网上找了很多资料，绞尽脑汁还是没有做出一模一样的效果。即使问了老师，还是没有切确答案，但是给我提供了**整个页面也可以添加交互方法**，这给了我一个解决这个问题的思路。今天三桥君尝试了一早上，总算解决出来了！几乎一模一样的交互效果！

![在这里插入图片描述][20201010172504139.gif_pic_center]  
内心很是激动，决定写下教程，记录下方法，并给后来者提供参考。

**该搜索框效果是这样的：**  
1.单击搜索按钮时，搜索框会向左侧弹出来；  
2.如果搜索框没有输入内容，那再点击搜索按钮则会出现提示框，提醒输入内容。  
3.出现提示框后，除了点击确定按钮取消提示框以外，其他地方点击都没反应。  
4.只有搜索框弹出来的情况时，点击当前页面没有交互的其他区域，会弹回搜索框。  
5.（小细节）那个搜索按钮会在单击弹出搜索框时，变细一些，弹回搜索框时，变粗。

## 二、解决过程 ##

先介绍下关于这次实验相关元件的命名，还有把元件和背景色区分下，方便大家对教程内容的理解。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center]

### 1、单击搜索按钮时，如何搜索框会向左侧弹出来？如果搜索框没有输入内容，那再打击搜索按钮则会出现提示框，提醒输入内容？ ###

这个地方其实很关键，如果用错了交互效果，那么后面的方法思路可能都会错误，做不出来。  
三桥君用过弹出、推动、动态面板等等方式，后面都没成功。  
能成功的是用**移动的交互效果**。

**遮挡的作用**就是为了让**Search部分看不到**，还有就是充当**单击交互的几种情形下判断的介质**，他们都是根据遮挡矩形的**显示和隐藏情况**来执行对应交互的。

那么，单击搜索按钮的交互是怎样实现的？

![在这里插入图片描述][20201010181408315.gif_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 1]

### 2、出现提示框后，除了点击确定按钮取消提示框以外，其他地方点击都没反应。 ###

![在这里插入图片描述][20201010184358883.gif_pic_center]  
添加这个禁用效果就行了。至于其他几个元件为什么点击没反应？因为他们反应的交互条件没有出现。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 3]

### 3、只有搜索框弹出来的情况时，如何点击当前页面没有交互的其他区域，会弹回搜索框？ ###

![在这里插入图片描述][20201010184603703.gif_pic_center]  
要单击页面弹回搜索框，需要**同时满足两个条件即可**。  
一个是遮拦看不到时，另一个是关键词提示框看不到。

但是，只有这两个条件是会出现一个问题，就是点击Search框时也会弹回搜索框。  
这个是不应该的，因为我们还要在Search框中输入文字内容呢。  
所以增加第三个条件，指针不能进入Search框范围内点击才行。

**注意**：是要同时满足这三个条件，设置是匹配以下全部条件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 4]

### 4、（小细节）那个搜索按钮会在单击弹出搜索框时，变细一些，弹回搜索框时，变粗。 ###

![在这里插入图片描述][20201010185328411.gif_pic_center]  
这个地方三桥君可是研究了好久，研究出这个比较合适的方法。

就是把搜索按钮设置选中的样式效果，这里用外部阴影。  
然后设置为默认选中状态，这样就变粗了。当单击时让他选中状态为假，那么就变回原来样子，就变细了。当搜索弹框回去时，再选中为真就变粗了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 6]

--------------------

> 文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【[三桥君][Link 1]】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~

[Link 1]: https://blog.csdn.net/weixin_46218781
[Link 2]: https://www.qztc.edu.cn/
[20201010171938784.gif_pic_center]: /images/20221123/b669ebbe96874995996c0fea6015a447.png
[20201010172504139.gif_pic_center]: /images/20221123/c33abb1459cb438fb59107c6845111f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a69d0dc879f34c96ae85680093450d6b.png
[20201010181408315.gif_pic_center]: /images/20221123/d46ab3c0e2a74050a2b219bd799fede4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/a5cdc5252e98414e95949e4ba119195d.png
[20201010184358883.gif_pic_center]: /images/20221123/55bbea76b40749b3a1639998ab60297a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/0bf9f911404441ba9e14c1da25c821a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/afc208fab7f34a5b9598f4654774dacb.png
[20201010184603703.gif_pic_center]: /images/20221123/2032a7c1bb6c4ebd93b92a09461d8b22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/fa31889114664b3097ebc77e0f85493a.png
[20201010185328411.gif_pic_center]: /images/20221123/b695a129326e4fe59a997d4fc1c1a4c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/4c9ac2d3f87442a19c98dfb212c1b823.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjIxODc4MQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/52ecc778002b4525943d8d54d1326d0d.png