The most important part of the design specification is the component specification. What are the benefits of formulating the component specification?
Efficient and simple: After you are familiar with the usage of components, when designing the interface, you can quickly build a web-side interface by using components reasonably, which is efficient and error-free. Because there is a set of component specifications, there is no need to repeat the work every time in the interaction design and visual design process.
Unified user experience: Due to the use of a unified component specification, the unity of visual and interactive design is guaranteed, and the overall user experience is guaranteed.
Improve design comprehensive ability: Due to the reduction of repetitive work on components, interaction designers/PMs can spend more time and energy on discussing business, design methods, design thinking, product definition and other comprehensive abilities. This drives business innovation.
According to the purpose of the component, it can be divided into six categories: Feedback feedback, from form, basic foundation, data data, navigation navigation, other.
This article is about the feedback feedback class; feedback is a response from the system to the user after the user performs an operation. This response will have different response forms and different effects depending on the scene.
Definition: When the user generates an operation, a toast prompt appears, which usually disappears within 2-3 seconds; the information that the user needs to know is informed through the prompt in the toast. Let the user's behavior get feedback and help in the process of use.
scenes to be used:
Feedback such as success, warning, or error can be provided.
The top is displayed in the center and disappears automatically. It is a lightweight prompt method that does not interrupt the user's operation.
For example, Jianshu clicks the Create Toast button before uploading the topic cover, and a toast prompt appears, prompting the user to upload the topic cover before creating the topic.
There are three types of toast message categories: success, failure, and general.
There are two types of component styles: clickable to make it disappear, and non-clickable to make it disappear.
Definition: When a user performs a certain operation, a corresponding warning message will appear on the website to prompt the user, and the state of the prompt message will not disappear automatically.
scenes to be used:
When a page needs to display a warning message to the user.
The static presentation form of the non-floating layer is always displayed and will not disappear automatically. Some component users can click to close.
For example, after the Taobao shopping cart is deleted, an alert warning will appear. The example of Taobao is a variant of alert. Users can click "Undo this deletion" to restore the previous destructive operation.
There are three types of message classifications for alert alerts: success, failure, and general. Of course, the icon operation can also be omitted, and the warning will be stronger if the icon operation is included.
There are two styles of alert alert component: with delete b2b data operation and without delete operation.
Definition: Used to prompt the user for the current operation, or some other additional information needed to complete a task. Dialogs can use a simple answer mode with OK/Cancel, or custom complex modes, such as form filling.
scenes to be used:
When the user performs an important operation, a second confirmation is required.
Used for important feedback prompts to let users know informational prompts.
Carry a small number of form filling classes to reduce page jumps.
The OK button of Windows system is generally on the left, and the OK button of Mac OS is generally on the right. For this reason, the determination we usually see is sometimes on the left and sometimes on the right.