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 priorities and features of those tasks and information, so as to select a reasonable layout
Through a large number of practices, Ant Design summarized six commonly used layout templates. There are home page, dashboard, list page, table page, details page and form page. Knowing these templates helps to find out a suitable layout for your product quickly.
### 网站展示页
### Home page
@ -31,130 +23,94 @@ 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:
- 明确你要传达的内容，保持简短而清晰的文案。
- 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.
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.
- 将数据可视化，让用户可以直观地了解关键信息及整体情况。
- 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.
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.
- 当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
- 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 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.
- 更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
- 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.
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.
- 图文搭配比单文本展示信息能更好地提高用户的理解。
- text with graphic can be better understood than pure text.
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;
- 内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
- 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;
- 醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
- 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.
There are `Grid` and `Gutter` in AntD layout. During the design, you can make an assumption that the "total page width is 1440px, and the "content area width is 1208px". Based on this assumption, you can design the page in 24 evenly divided columns.
It is recommended that the number of blocks arranged in the horizontal direction be at most four, at least one, so as to guarantee the comfort of view.
The `Gutter` value in ant design is fixed. When the width of a browser decrease or increase within a certain range, the width of `grids` will be changed accordingly, but the width of `Gutter` remains unchanged.
在 Ant Design 中，我们定义了两种 Gutter：
There are two `Gutter`s in Ant Design
- 网站展示页和 Dashboard 的 Gutter 宽度为 24px。
- 24px width `Gutter`, which is used in home page and Dashboard
- 列表、表格、详情和表单页面的 Gutter 宽度为 16px。
- 16px width `Gutter`, which is used in list Page, table page, details page and form page.
shenlin192@gmail.com
7 years ago