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

时间:2024-03-20 07:06:48

摘要:微信搜索【三桥君
使用软件:Axure RP 9软件
说明:实现方式不唯一,这里给出三桥君制作的一种方式。

一、问题

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

Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
连续几天,网上找了很多资料,绞尽脑汁还是没有做出一模一样的效果。即使问了老师,还是没有切确答案,但是给我提供了整个页面也可以添加交互方法,这给了我一个解决这个问题的思路。今天三桥君尝试了一早上,总算解决出来了!几乎一模一样的交互效果!

Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
内心很是激动,决定写下教程,记录下方法,并给后来者提供参考。

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

二、解决过程

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

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

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

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

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

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

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

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

Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
添加这个禁用效果就行了。至于其他几个元件为什么点击没反应?因为他们反应的交互条件没有出现。

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

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

Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
要单击页面弹回搜索框,需要同时满足两个条件即可
一个是遮拦看不到时,另一个是关键词提示框看不到。

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

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

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

4、(小细节)那个搜索按钮会在单击弹出搜索框时,变细一些,弹回搜索框时,变粗。

Axure知识点:如何制作弹出效果的搜索框(以泉州师范学院官网为例)
这个地方三桥君可是研究了好久,研究出这个比较合适的方法。

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

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


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