[Material Design visual Design language] UI Component Design (5): prompt box, visual Design ui

[Material Design visual Design language] UI Component Design (5): prompt box, visual Design ui

Author: Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email: allenwells@163.com
Blog: http://blog.csdn.net/allenwells
Github: https://github.com/AllenWells

[Material Design visual Design language] Chapter list

[Material Design visual Design language]
[Material Design visual Design language] Material Design overview
[Material Design visual Design language] Application Layout Design
[Material Design visual Design language] adaptive application Layout
[Material Design visual Design language] Application Style Design
[Material Design visual Design language] Application animation Design
[Material Design visual Design language] UI Component Design (1): button
[Material Design visual Design language] UI Component Design (2): Card
[Material Design visual Design language] UI Component Design (III): Paper
[Material Design visual Design language] UI Component Design (iv): Table
[Material Design visual Design language] UI Component Design (5): prompt box
[Material Design visual Design language] UI Component Design (6): separation line
[Material Design visual Design language] UI Component Design (7): Grid
[Material Design visual Design language] UI Component Design (8): List
[Material Design visual Design language] UI Component Design (9): Menu
[Material Design visual Design language] UI Component Design (10): Selector
[Material Design visual Design language] UI Component Design (11): progress bar
[Material Design visual Design language] UI Component Design (12): Slider
[Material Design visual Design language] UI Component Design (13): Toast
[Material Design visual Design language] UI Component Design (14th): Tabs
[Material Design visual Design language] UI Component Design (15th): Text Box

The prompt box (Dialog) is used to prompt the user to make some decisions, or some additional information required to complete a task.

A prompt box

Dialog can be a simple response mode with cancellation/confirmation. Its common application scenarios are as follows:

• The most typical application scenario of the prompt box is to prompt the user to make some scheduled decisions, which may be part of the current task or the prerequisite.
• The prompt box can be used to inform users of specific problems so that they can make important decisions, or to explain the importance and consequences of the next action (to serve as a warning ).

2. Prompt Box Structure

• Title: The title of the prompt box is optional and used to indicate the type of the prompt. It can be the program name related to it, or the content that will be affected after selection. For example, set the title of the prompt box to be displayed as a part of the prompt box.
• Content: The content of the prompt box varies. But it usually consists of text and other UI elements, and is mainly used to focus on a task or a step. For example, "Confirm" or "delete", or select an option.
• Event: the user is allowed to continue the next step by confirming a specific operation.

About the size of the button in the prompt box

Regular button

Wide vertical button

Side-by-side buttons

Interaction with three prompt boxes

The interaction of the prompt box is reflected in the event of the prompt box.

A prompt box event is a group of focused and limited events. It is usually composed of a positive event and a negative event (opposite to a positive event.

Certainly, the event is placed on the right of the prompt box and can proceed to the next step. Certainly, events can be destructive, such as "Delete" and "Remove ".

The negative event is placed on the left of the prompt box. Return the user's original screen or step.

The prompt box is separated from the parent view. Does not scroll with the parent view. However, if the content in the prompt box is too large, you can use view scrolling for the prompt box itself.

Copyright statement: When we do one thing seriously, we can discover the endless fun. The rich technologies are like the scenery on the road and enjoy them while walking.