Axure makes an interactive prototype tutorial for mobile APP address book search;
First, we use repeater to make a list of personnel information. A rectangle with a white background, a picture element (corresponding to the head of a person) and a text label (corresponding to the name of a person) are placed in the west of the repeater.
In the repeater table, we insert two corresponding columns, namely, name (corresponding name) and picture (corresponding head). We fill in the name in the repeater table and import the corresponding avatar:
When the repeater loads each item, it sets the interaction, sets the value of the name column in the table as a text label with the text interaction, and then sets the picture in the table as a picture element with the picture interaction.
Second, the production of fuzzy search effect We need an input box, a search button, a cancel button, a background rectangle and a search background rectangle:
Because the mobile terminal generally does not need to click the search button, we write the filtered interaction in the input box when the text changes, and we filter the duplicates by adding the filtered interaction. Here, we need to use the indexof function, targeteitem. Name. Index of (this.text) to see if the value entered in the current text box is included in the value of the name column of the repeater table. If it is, the result will be greater than-1, so we filter it.
This is the most basic fuzzy search. If you need to consider the case relationship, such as the name cat, you can't enter it in the above way to search. If you want to search regardless of case, the toUpperCase function can convert all corresponding values to uppercase. We can use this function to convert the value in the Name column and the value in the input box to uppercase, so that we can conduct case-insensitive fuzzy search interaction.
Considering that there is no search effect here, we add a text label (no text) to the first line of the repeater. As for the bottom floor, it is just shielded by the repeater. If there are no result rows, you will see the following prompt text. If there is data, the data will be blocked.
If the search box wants top-level effect, we will turn the repeater and the prompt text on it into a dynamic panel, and then bring up the vertical scroll bar, or turn the elements in the search area into a dynamic panel with a fixed upper left corner.
Then we turn all the components into a dynamic panel, and the status is named search page, and then we add a status on it, named address book, and we do the effect of letter positioning on it.
Therefore, when we click the Cancel button, we will cancel the search filtering. Here we can set the value of the input box to be empty by setting the text interaction, and then set the dynamic panel to the address book state by setting the panel state interaction.
Third, the address book page settings are mainly anchor rectangles and duplicates, search icons and text placement of A-Z and #:
The above address book, search picture and background rectangle can be turned into a dynamic panel and fixed in the upper left corner.
Click the search button with the mouse, and we set up the whole dynamic panel to set the panel state and jump to the search page, which is the content above.
In the following part, we need to use a rectangle as the anchor point of ABCD first, and then we can copy the repeater made earlier and place it under the corresponding anchor point separately according to the content.
After putting them in the corresponding positions one by one, we add A-Z and # to turn them into dynamic panels and fix them in the corresponding positions on the right.
When the mouse clicks the letter A, we use the interaction of scrolling to the component to set the anchor point in the rectangle A to increase the linear animation effect.
When the mouse clicks on the letter B, we use the interaction of scrolling to the component to set the anchor point in the rectangle B to increase the linear animation effect.
When the mouse clicks the letter C, we use the interaction of scrolling to the component to set the anchor point in the rectangle C, which increases the linear animation effect.
When the mouse clicks the letter Z, we scroll to the interaction of components, set anchor points in the rectangle Z, and add a linear animation effect.
When the mouse clicks #, we use the interaction of scrolling to the component to set the anchor point in the rectangle # and add the linear animation effect.
We will complete the effect of letter positioning.
The above is about "How does Axure make an interactive prototype of mobile APP address book search?" I have shared all the wonderful contents, I hope it will help you! Learn more about Axure prototype skills. Why not read more articles about Axure? In fact, learning Axure is very simple, and you can quickly master its principles with methodology! Come on, learn from the teacher, and make Axure you can get started quickly ~