mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
finish layout translate
This commit is contained in:
parent
1b7da8f9c0
commit
968c932778
@ -80,14 +80,14 @@ List is a way to display information in parallel. A well designed list can be he
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gDwAZagDBphbcePRDnBZ.png">
|
||||
|
||||
表格作为多维信息展示的载体,使复杂的信息更易于阅读与理解。它的易读性,便捷性,易操作性对产品的体验起着举足轻重的作用。因此,我们在设计时要注意以下几点:
|
||||
Table is a carrier for multi-dimensional information. It can make complex information to be read and understood easier. 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.
|
||||
- 更多地展示用户所必须的信息,通过视觉上的调优突出展示重点信息。
|
||||
- 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 identified.
|
||||
- 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
|
||||
@ -100,7 +100,7 @@ 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:
|
||||
|
||||
- 清晰的排版格式,易于阅读的文本大小及间距,都是影响用户获取信息效率的关键因素。
|
||||
- layout format, text size and text spacing, are the key factors that affect a user's efficiency to access to 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.
|
||||
|
||||
@ -112,7 +112,7 @@ Details page usually carries a large amount of basic information, extended infor
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sqeTZuWlqiGboOITncCh.png">
|
||||
|
||||
表单页通常用来执行登录、注册、预定、下单、评论等任务,是产品中数据录入必不可少的页面模式。因此,舒适的表单设计,可以引导用户高效地完成表单背后的工作流程:
|
||||
Form page is often used for tasks such as login, register, booking, comment, etc. Form page is indispensable when you need to record a user's information. Therefore, a well designed form page can guide a 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;
|
||||
@ -121,7 +121,7 @@ Form page is often used for tasks such as login, register, booking, comment, etc
|
||||
- 标签的命名要易于用户阅读和理解,避免模糊的描述给用户造成困扰;
|
||||
- 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. It's more conducive for the 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.
|
||||
|
||||
---
|
||||
|
||||
@ -129,7 +129,7 @@ Form page is often used for tasks such as login, register, booking, comment, etc
|
||||
## Grid
|
||||
|
||||
我们通过定义网格、间距来呈现产品布局的最佳效果,设计师在设计时可按『页面总宽 1440px,内容区 1208px』来设定,并在此基础上以 24 等分的栅格来划分整个设计建议区域。
|
||||
There are `Grid` and `Gutter` in AntD. 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.
|
||||
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.
|
||||
|
||||
![](https://os.alipayobjects.com/rmsportal/bohSixChLxFkwsOEiNaF.png)
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user