Abstract: WeChat search [Mr. Sanqiao ]
Software: Axure RP 9 software
Description: The implementation method is not unique. Here is a way to make it by Mr. Sanqiao.
One, the problem
When Mr. Sanqiao made the search box with pop-up effect on the official website of Quanzhou Normal University , it really made me difficult. [ Quanzhou Normal University official website ]
For several days, I searched a lot of information on the Internet, but I still didn't make the exact same effect. Even if I asked the teacher, there was still no exact answer, but I was provided with the entire page to add interactive methods , which gave me an idea to solve this problem. Today, Mr. Mihashi tried it all morning and finally solved it! Almost the same interactive effect!
I was very excited, so I decided to write a tutorial, record the method, and provide reference to the latecomers.
The search box effect is like this:
1. When you click the search button, the search box will pop up to the left;
2. If there is no input in the search box, then click the search button and a prompt box will appear to remind you to enter the content.
3. After the prompt box appears, except for clicking the OK button to cancel the prompt box, there is no response to other clicks.
4. When only the search box pops up, click on other areas of the current page without interaction, and the search box will pop up.
5. (Small details) The search button will become thinner when you click the pop-up search box, and thicker when it pops back to the search box.
2. Resolution process
Let me first introduce the naming of the relevant components of this experiment, and distinguish the components from the background color, so that everyone can understand the content of the tutorial.
1. When I click the search button, how does the search box pop up to the left? If there is no input in the search box, then click the search button again and a prompt box will appear to remind you to enter the content?
This place is actually very important. If the wrong interaction effect is used, then the following method ideas may be wrong and cannot be done.
Mr. Mihashi used pop-ups, pushes, dynamic panels, etc., but failed later.
What can be successful is the interactive effect of mobile .
The role of occlusion is to make the Search part invisible , and to act as a medium for judgment in several situations of click interaction . They all perform corresponding interactions based on the display and hiding of the occluded rectangle .
So, how is the interaction of clicking the search button realized?
2. After the prompt box appears, except for clicking the OK button to cancel the prompt box, there is no response to other clicks.
Just add this disable effect. As for the other components, why are there no response when clicking? Because the interactive conditions they reacted did not appear.
3. When only the search box pops up, how to click on other areas that are not interactive on the current page and the search box will pop back?
To click the page to return to the search box, you need to meet two conditions at the same time .
One is when the blocking is not visible, the other is when the keyword prompt box is not visible.
However, only these two conditions will cause a problem, that is, when you click the Search box, the search box will pop back.
This should not be done, because we have to enter text in the Search box.
So add the third condition, the pointer cannot enter the Search box and click.
Note : It is necessary to meet these three conditions at the same time, and the setting is to match all the following conditions.
4. (Small details) The search button will become thinner when you click the pop-up search box, and thicker when it pops back to the search box.
Mr. Mihashi has studied this place for a long time, and has come up with this more appropriate method.
It is to set the selected style effect of the search button, and the outer shadow is used here.
Then set it to the default selected state, so it becomes thicker. When you click it, let him select the status to be false, then it will change back to the original appearance and become thinner. When the search pop-up box goes back, it becomes thicker if it is selected again.
It is not easy to organize articles. If you have any help, please like and follow your support, thank you! Wechat search for [ Sanqiao Jun ], and reply [Follow] with a resource package prepared by me. Follow-up continuous update~~~