Editor's Guide: Multi-role login is a feature that many systems need to have, for example, in the recruitment website, the role of login includes, job seeker, hr of recruitment company, headhunter, internal employee and so on. The author of this article shares how to make a prototype template for multi-character login in Axure, hoping to help you.
Multi-role login is a feature that many systems need to have, for example, in the recruitment website, the login role includes, job seeker, hr of recruitment company, headhunter, internal employee and so on. So today we will learn how to make a prototype template for multi-character login in Axure, after the production is completed, you can choose different types of users according to the selection, so as to enter different pages, and we can use repeaters to remember the account passwords of different types of users to achieve the effect of high-fidelity login.
Prototype address: https://fwosap.axshare.com/#g=1
Here we directly use the dynamic panel, the case dynamic panel has a total of 4 states, namely status 1 (user selection page), status 2 (individual user login page), status 3 (enterprise user login page), status 4 (internal employee login page)
Status 1 (User Selection Page)
As shown in the following figure, the user selection page is relatively simple, including prompt text (please select your identity to log in), 3 selection items (rectangle + icon), as shown in the following figure.
The interaction of the page is also very simple, when the mouse clicks on the individual user, we use the interaction of setting the panel state to set the dynamic panel to the individual user login page.
Similarly, when the mouse clicks on the enterprise user, the dynamic panel is set to the enterprise user login page with the interaction of the setting panel state, and when the mouse clicks the internal employee, the dynamic panel is set to the internal employee login page with the interaction of the setting panel state.
Status 2 (Individual User Login Page)
The individual user login page mainly includes the return icon, text label (individual user login), input box (mobile phone number and password), login button, error prompt pop-up window, background picture and repeater, as shown in the following figure.
Return to the interaction of the icon: set the panel state, set the dynamic panel back to state 1 (the user selects the page).
Login button: When the mouse clicks the login button, we must first determine whether the mobile phone number is empty, if it is empty, we must set the location of the prompt pop-up window to enter the mobile phone number.
Then the error pop-up window is displayed, if the password input box is empty, it is to set the text of the prompt pop-up window to please enter the password.
Finally, it is also necessary to judge whether the mobile phone number and password are correct, and the repeater needs to be used here, and the role of the repeater is to determine whether the mobile phone number and password correspond one-to-one. The repeater contains two columns of account and password, where we can fill in the default personal user mobile phone number and the corresponding password. Here the repeater is only used for logging, so you can hide by default, or delete the rectangle that comes with it inside.
Back to the interaction of clicking the login button with the mouse, if the mobile phone number and password box above are not empty, then we have to filter the repeater first, and the filter is that the value of the repeater accout column is equal to the content of the mobile phone number input box, and the value of the password column is equal to the value in the password input box.
After the filtering, it is necessary to follow the number of visible lines of the repeater, that is, after the filtering is completed, the repeater still has no displayed content. We can use the visibleItemCount function for statistics. Generally speaking, the result will only appear 1 or 0, if it is equal to 0, to prove that the mobile phone number password group we entered is wrong, which is the pop-up window where we set the error message as the mobile phone number or password error, and displays the error message;
If the result is equal to 1, that is, the mobile phone number and password we entered are correct, can correspond, then we can complete the login, generally speaking, it will jump to the home page or the previous page, we can do it with the interaction of opening the link.
If the result is greater than 1, it proves that there are 2 or more sets of mobile phone numbers and passwords, which may be that we accidentally filled in the wrong initial data.
Finally, there is the interaction of the error prompt pop-up window: the default is hidden, if the above 3 errors are triggered, it will be displayed, which belongs to the soft prompt, and the prompt can be hidden after 3 seconds.
Status 3 (Enterprise User Login Page)
In fact, the interface of enterprise users and the login interface of individual users are similar to those including return icons, text labels (enterprise user login), two input boxes, login buttons, error pop-up windows, background pictures, repeaters, the difference is that enterprise users generally use enterprise mailboxes to log in, and individual users log in with mobile phone numbers. We can copy the individual page above and then modify the text, images, and typography.
Return to the interaction of the icon: as above, the panel state is set, and the dynamic panel is set back to state 1 (user selection page).
Login button, pop-up window interaction logic ideas are the same as the above, but the specific text of the setting prompt has changed, if it is copied, you only need to simply modify the text content, icons, backgrounds, password groups in the repeater, and the prompt text set in the interaction.
Status 4 (internal login page)
The internal employee login page and the material of the above two login pages are the same, but the text and background have been changed, and what has been logged in is not a mobile phone number or enterprise mailbox, but an employee number.
The interaction is the same, we can simply modify the text of the pop-up window in 3 error states.
In this way, we have completed the prototype template of multi-role login, and if you want to add a role page in the future, it is very simple, you only need to copy a login page, and you can simply change the text, icons, and background.
That's all there is to it, thank you for reading, we'll see you in the next issue, 88~~~
This article is originally published by @Make Product but not Manager Everyone is a Product Manager, and reproduction without the permission of the author is prohibited
The title image is from Unsplash, based on the CC0 protocol