Page interaction Page design - 上海1314龙凤鲜花坊_上海419贵族宝贝

1. Page element focus switch
In order to improve interaction with users in WEB pages, it is necessary to adopt the following scenarios when various page elements gain focus and lose focus Website Design The methods of page interaction are:

2. Information filling
Verify the input information:
If you need to verify the filled content, you need to judge the data validity when the input box loses focus, and give a prompt after the input box. As shown in the figure:

Validate input information

Prompt for input information:
When filling in a group of data to be verified, if there are mandatory items, you need to give a sign behind the input box and describe the rules filled in. As shown in the figure:

3. Mouse interaction response
Handle the events generated by the mouse on the page. When the page element gets the focus, is clicked, or loses the focus, the control itself needs to respond to changes in color, size, or shape, or add sound responses.
The following are examples of mouse interaction in various situations:

For example:

Button: button color, shape, or font changes, as shown in the figure:

Button: button color changes, or shape changes, or font changes

Button: button color changes, or shape changes, or font changes

Link: The font becomes bold, or the font changes color, or the background changes color, as shown in the figure:

Links: bold font, or color change of font, or color change of background

Links: bold font, or color change of font, or color change of background

4. Operation result confirmation

When data is submitted, or the page containing data is closed, or other scenarios need to be confirmed and interacted with the user, the software needs to provide a dialog box in the form of a pop-up page that requires the user to confirm the execution results, including:

Prompt to confirm that the input information is correct: a dialog box will pop up and the filled contents will be listed. The user is required to confirm the correctness of the contents, and the selection buttons of "OK" and "Cancel" will be given;
Prompt to confirm whether to save the data changes: a dialog box will pop up, prompting that the content of the current page has changed, asking the user to confirm whether to save the changed information, and giving "Yes" and "No" selection buttons;
Prompt to confirm the jump to the current page: a dialog box will pop up, prompting the user to jump to another page, asking the user to confirm leaving the current page, and giving the "Yes" and "No" selection buttons;
Confirm to delete data content: a dialog box pops up, prompting the user to delete the currently selected content, asking the user to confirm whether to continue the deletion operation, and giving the OK and Cancel selection buttons;

5. Other rules

Other rules that need to be followed during information interaction are:

Important command buttons and frequently used buttons should be placed at relatively fixed positions on the interface;
Buttons that are likely to cause operation errors or cause program exit and shutdown shall be unobtrusive and placed at difficult positions;
Buttons unrelated to the ongoing operation should be shielded, for example, the button background is displayed in gray;
Confirmation information must be provided for operations that may result in unrecoverable data to give users the opportunity to give up the selection;
Illegal input or operation should have sufficient prompt description;
Prompts should be given to the errors caused by problems in the running process, so that users can understand the source of the errors and avoid waiting indefinitely;

6. Page information prompt

Among the functions provided by web pages, in many cases, the system needs to send some necessary prompt information to the page for display to users. The classification of these information is as follows:

Warning message
Prohibited information
Operation execution success information
Operation execution failure information
error message
Help Information
Prompt information

This information is displayed on the current page or pop-up page. If a pop-up dialog box is used, the page structure of the dialog box is as follows:

Title area: briefly give the nature of this prompt, for example: Warning: illegal operation!
Icon area: the icon matching the nature of the prompt information is given;
Prompt information area: give the specific content of this prompt information;
Button area: buttons for users to select;
For the background color of the dialog box, it is required to be consistent with the color selected in the overall style of the system, while the operation area in the upper right corner only retains one operable function to close, and the minimized and maximized functions will not be displayed.

Interactive web page design

Date：2016-05-05 Source: Shangpin China Type: website encyclopedia
Word Size： small medium big

+86 10-60259772