The logical judgments involved in this article are more suitable for beginners, and are basically the most basic content. Compared with the last time, the extra function points have logical judgment and global variables. Considering that the description of the last article was too rough, it is difficult for newcomers to know how to operate. This time, the whole process will be described in more detail.
1. Production results
Please click here for experience:
Interaction Description:
The lock screen page can be swiped to the right to enter the password verification page;
The password of the password verification page has 10 digits, so when the input number is greater than ten digits, it will automatically return to the lock screen page, and the unlocking fails this time;
After entering the correct password 1234567890, you can enter the mobile phone interface;
Click the mechanical button below on any page to return to the lock screen page and perform the next unlocking operation.
2. Production process
1. Import pictures into axure
As shown in the figure above, first import all the required pictures, and import a total of three components, namely the mobile phone frame, the lock screen page, and the password input page. In actual operation, you can directly copy the lock screen page, and then replace the picture, so that you can easily get the picture with the exact same size.
Of course, you can also remember the data of the picture to adjust, so that the size and coordinates of the picture can be determined. However, Axure itself provides a reference line, it is recommended to operate manually, which is more convenient.
2. Switch to the password input page from the lock screen page
This is the first interactive action, and the setting method is very simple, as shown in the figure: the end of dragging to the right is used as the trigger condition, and the triggered behavior is to hide the lock screen interface and display the password input interface and bring it to the top layer.
3. Add components to the password verification interface
After the operation in the previous step, you can reach the password verification interface by sliding the screen. To implement the following operations, you must add a hot zone and an input box. The input box is set to transparent, and the display mode is set to password, and then put it in the position where the password is entered. Because the input box is transparent, it is completely invisible unless the content is entered.
Hotspots are placed at each interactable location, the area where the numbers 0-9 are located. Return does not set the interaction, because there are mechanical buttons.
4. Set the trigger behavior
The concept of global variables needs to be used here. The so-called global variables are variables that can be called throughout the program. The so-called variable is the amount that can be assigned a value, which is different from the constant.
As shown in the figure above: First, open the b2b data global variable dialog box in the project and set a global variable. Because only one variable is used in this example, it is not named and the default value is used directly.
Click hotspot 1 to set it up, first of all to understand what should happen when you click on number 1.
Obviously, the result we want is to have a number 1 appear in the input box after clicking the number 1. Therefore, the input logic is as shown in the figure above. When the number 1 is clicked, the global variable is connected with 1 (it is not added, it is connected, the global variable is blank by default, not 0 by default) and appears in the input box. Then assign the contents of the input box to the global variable, and the global variable itself has changed.
Similarly, other buttons are set in this way. The logic after setting is as follows: Take pressing 123 as an example.
When 1 is pressed, 1 is displayed and the global variable becomes 1;
When 2 is pressed, 2 is displayed, and the global variable becomes 12;
When 3 is pressed, 3 is displayed, and the global variable becomes 123.
5. Logical judgment
After entering the password, a logical judgment is required. The judgment method is shown in the following figure:
When the password is 1234567890, the page showing the successful unlocking is displayed, which is not difficult to understand. However, if the password is wrong, it is obviously not possible for the user to keep entering it, and the user should be informed that it has been wrong. The approach in this example is to use logical judgment to determine whether there are too many digits.
The way of judgment is shown in the figure above: when the input content is greater than 10000000000, it means that the number of digits has exceeded the standard of the password, so the user is directly informed that the password is wrong, and the way to inform is to jump back to the lock screen interface.
However, it does not end here. If you are careful, you will find that the current global variable has content. When the user unlocks the next time, he will find that the default password box already has a lot of numbers. Therefore, we need to add a step, that is, clear the global variable. zero.
Through the above method, you can clear all global variables to zero when entering the lock screen interface. So as to ensure the correct display the next time the password is entered.
6. Return key
In order to be able to repeat the demonstration, and to quickly re-enter the password when the password is wrong, the return key is set. The logic of the return key is very simple, that is, this key can work on any page and directly jump back to the lock screen interface.
Summarize
This article briefly shares an example of password judgment, and handles the situation where the password is entered incorrectly. Although the example is very simple, the logic judgment and global variables used are the basis of complex operations in the future. Mastering these two points has important implications for prototyping more complex interactions.