Axure Tutorial: Multi-User Login Pages
Introduction
Multi-user login is a feature required by many apps and websites. For example, enterprise users, individual users and staff login in social networking sites. Now let's learn how to make multi-user login web pages. After making, users can select different types of users to enter different pages. Then input different types of user accounts and passwords to realize the login of different users.
Features to be Realized
1. Select different roles to enter different login pages.
2. Enter the saved user name and password to log in.
How to Realize these Features
1. Create login pages for different roles. When you click the role icon, you will enter the login page of response.
2. Use the repeater to save the user names and passwords of different roles. When the user input is correct, enter the login success page. When the input is wrong, notify user with text.
Preview the completed prototype for this tutorial
Widgets and Pages Setup
1. Create 7 pages. In the Lading Page, users can choose different user types to log in. Individual, enterprise and employee pages are login pages for different user types. Then there are three successful login pages.
2. The lading page is relatively simple, including hint text (please select your account type) and three options (rectangle + icon), as shown in the image below.
3. The individual user login page mainly includes return icon, text label (Individual User Login), text fields (Phone number and password), login button, error hint texts, background picture and repeater, as shown in the below image.
4. The Enterprise user login page mainly includes return icon, text label (Enterprise User Login), text fields (Enterprise mailbox and password), login button, error hint texts, background picture and repeater, as shown in the below image.
5. The Staff login page mainly includes return icon, text label (Staff User Login), text fields (Staff ID and password), login button, error hint texts, background picture and repeater, as shown in the below image.
6. The successful login page includes the information of success text.
Interactions Setup
1. On the landing page, set the jump links. And set the hover effect of the buttons.
2. On the login page, after entering the mobile phone number and password, click the login button. Here, you need to use the repeater to judge whether the mobile phone number and password are correct. The repeater is used to judge whether the mobile phone number and password correspond to the repeater data one by one. The repeater contains Phone Number and Password, in which we can fill in the default phone number of individual users and the corresponding password. Here, the repeater is only used for recording, so it can be hidden by default and the internal rectangle can be deleted.
3. We need to filter the repeater first. The filter condition is that the value of the repeater Phone Number column is equal to the content in the mobile phone number text field, and the value of the Password column is equal to the value in the password text field.
4. After filtering, the number of visual items of the repeater needs to be determined, that is, whether the repeater has visible content after filtering. We can use the VisibleItemCount function for statistics. Generally speaking, only 1 or 0 will appear in the result. If it is equal to 0, it proves that the phone number or password we entered is wrong. At this time, we show phone number or password error hint.
5. If the result is greater than 1, the mobile phone number and password we entered are correct, we can complete the login, and we will jump to the successful login page.
6. The enterprise user login page and the staff login page are similar to the individual user login page. The only thing is that enterprise users log in with enterprise email, and employee login pages log in with staff ID. Therefore, in the setting of repeater, we need to change these contents.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Leave a comment