A form is an important human machine interface to get a user's information. It's necessary to consider what questions should be asked according to the expected answers.
设计者进行表单设计时，应当注意这几点：
In the design of a form, it's recommended to:
1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
1. let the user knows exactly what information is required and why he is doing this.
Use daily expressions as `label`s for junior users or users who visit occasionally. Use professional terms as `label`s
For the primary user / occasional users to provide vernacular as a "label". for domain experts to provide professional terms as a "label". When the user needs to provide sensitive information, through the "input prompt" to explain why the system to do so, eg: need to obtain the identity card number, mobile phone number.
2. 让用户能在上下文中获取信息，帮助他完成输入。
2. So that users can get information in the context to help him complete the input.
Layout is the prerequisite for a webpage. It's also the foundation of follow-up interactive and visual design. In order to guarantee consistency among similar products, Ant Design provides some common layout templates. Before choosing one of these templates, you need to have a clear mind about:
Layout is the prerequisite for a webpage. It's also the foundation of follow-up interactive and visual design. In order to guarantee consistency among similar products, Ant Design provides some common layout templates. Before choosing one of these templates, you need to have a clear mind about:
- the main tasks that a user needs to accomplish and all necessary information for making such decisions.
- The main tasks that a user needs to accomplish and all necessary information for making such decisions.
- the priorities and features of those tasks and information, so as to select a reasonable layout
- The priorities and features of those tasks and information, so as to select a reasonable layout
---
---
@ -25,8 +25,8 @@ Through a large number of practices, Ant Design summarized six commonly used lay
Home page is usually the first step for a user to understand a website or the products. Generally, home page consists of product drawings, brief product introductions, and user login interfaces. In the design, we recommend you to:
Home page is usually the first step for a user to understand a website or the products. Generally, home page consists of product drawings, brief product introductions, and user login interfaces. In the design, we recommend you to:
- keep the copywriting clear and simply, which helps you better express the ideas.
- Keep the copywriting clear and simply, which helps you better express the ideas.
- use intuitive pictures for a product, which helps to deepen a user's understanding and impression.
- Use intuitive pictures for a product, which helps to deepen a user's understanding and impression.
### Dashboard
### Dashboard
@ -36,9 +36,9 @@ Home page is usually the first step for a user to understand a website or the pr
Dashboard collects a variety of information, such as digitals, graphics, copywriting, etc. Key information should be clearly represented and easily understood. Thus, displaying the complex information in a clear way is important in the design. For this propose, we recommend you to:
Dashboard collects a variety of information, such as digitals, graphics, copywriting, etc. Key information should be clearly represented and easily understood. Thus, displaying the complex information in a clear way is important in the design. For this propose, we recommend you to:
- organize the page layout according to the importance of information, so as to highlight key points.
- Organize the page layout according to the importance of information, so as to highlight key points.
- visualize the data, which allows users to understand key information as well as the overall situation in an intuitive way.
- Visualize the data, which allows users to understand key information as well as the overall situation in an intuitive way.
- use color and grid layout logically, which helps to reduce a user's visual fatigue.
- Use color and grid layout logically, which helps to reduce a user's visual fatigue.
### List page
### List page
@ -49,8 +49,8 @@ Dashboard collects a variety of information, such as digitals, graphics, copywri
List is a way to display information in parallel. A well designed list can be helpful for users to read basic information and perform corresponding operations quickly. Therefore, the "readability" and "operability" of a list are the keys to the design. For this propose, we recommend you to:
List is a way to display information in parallel. A well designed list can be helpful for users to read basic information and perform corresponding operations quickly. Therefore, the "readability" and "operability" of a list are the keys to the design. For this propose, we recommend you to:
- identify the importance of information accordingly and show nothing but key information as well as the corresponding operations.
- Identify the importance of information accordingly and show nothing but key information as well as the corresponding operations.
- fold secondary information or put it into the details page. It allows a user to access information in a progressive way when the content is too complex.
- Fold secondary information or put it into the details page. It allows a user to access information in a progressive way when the content is too complex.
### Table page
### Table page
@ -60,9 +60,9 @@ List is a way to display information in parallel. A well designed list can be he
Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easily. Its readability, convenience and operability play an essential role in the user experience. Therefore, we should pay attention to the following points in the design:
Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easily. Its readability, convenience and operability play an essential role in the user experience. Therefore, we should pay attention to the following points in the design:
- construct a clear table layout. It can be helpful for a user to receive and understand information.
- Construct a clear table layout. It can be helpful for a user to receive and understand information.
- highlight key information through some visual adjustments.
- Highlight key information through some visual adjustments.
- use the horizontal or vertical zebra strip smartly when there is a large multi-row table or there are multiple columns in each row. By doing so, information is more distinguishable and easier to be understood.
- Use the horizontal or vertical zebra strip smartly when there is a large multi-row table or there are multiple columns in each row. By doing so, information is more distinguishable and easier to be understood.
### Details page
### Details page
@ -72,8 +72,8 @@ Table is a carrier for multi-dimensional information. It can make complex inform
Details page usually carries a large amount of basic information, extended information as well as status information. It's important to identify priorities of the information. A clear layout can be helpful for a user to get key information at a glance and make decisions efficiently. In the design, it's worth noting that:
Details page usually carries a large amount of basic information, extended information as well as status information. It's important to identify priorities of the information. A clear layout can be helpful for a user to get key information at a glance and make decisions efficiently. In the design, it's worth noting that:
- layout format, text size and text spacing, are the key factors that affect a user's efficiency to access information.
- Layout format, text size and text spacing, are the key factors that affect a user's efficiency to access information.
- text with graphic can be better understood than pure text.
- Text with graphic can be better understood than pure text.
### Form page
### Form page
@ -83,10 +83,10 @@ Details page usually carries a large amount of basic information, extended infor
Form page is often used for tasks such as login, register, booking, comment, etc. Form page is indispensable when you need to record the user information. Therefore, a well designed form page can guide the user to complete the data recording workflow behind the form efficiently. We recommended you to:
Form page is often used for tasks such as login, register, booking, comment, etc. Form page is indispensable when you need to record the user information. Therefore, a well designed form page can guide the user to complete the data recording workflow behind the form efficiently. We recommended you to:
- provide a clear user's view path, in consideration of how a user will browse the information;
- Provide a clear user's view path, in consideration of how a user will browse the information;
- simplify the content of a form (try to avoid redundant inputs)
- Simplify the content of a form (try to avoid redundant inputs)
- name the tags that can be easy to read and understand. Avoid confusions caused by ambiguous descriptions;
- Name the tags that can be easy to read and understand. Avoid confusions caused by ambiguous descriptions;
- place eye-catching submit buttons on the end of a user's view path, which makes it more conducive for a user to complete all the operations.
- Place eye-catching submit buttons on the end of a user's view path, which makes it more conducive for a user to complete all the operations.
shenlin192@gmail.com
8 years ago