mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 07:56:28 +08:00
New design docs (#5370)
* refactor design documentations * update color document * Add icon * Fix images in documentation * fix some documentation style * Finish icon doc * Add copywriting doc * Add layout.md and navigation.md * Add more docs * Fix error color * improve markdown doc width * update some details * fix doc detail * Add motion.md
This commit is contained in:
偏右
GitHub
parent
f6b1e942e3
commit
84e3aa2a37
@ -7,11 +7,17 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
多用在两列式布局。
|
||||
侧边两列式布局。页面横向空间有限时，侧边导航可收起。
|
||||
|
||||
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
|
||||
|
||||
## en-US
|
||||
|
||||
Be used in the two-columns layout.
|
||||
Two-columns layout. The sider menu can be collapsed when horizontal space is limited.
|
||||
|
||||
Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
|
||||
|
||||
The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents
|
||||
|
||||
````jsx
|
||||
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
|
||||
|
||||
@ -9,10 +9,17 @@ title:
|
||||
|
||||
最基本的『上-中-下』布局。
|
||||
|
||||
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic "header-content-footer" layout.
|
||||
|
||||
Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it.
|
||||
We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.
|
||||
|
||||
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links
|
||||
|
||||
````jsx
|
||||
import { Layout, Menu, Breadcrumb } from 'antd';
|
||||
const { Header, Content, Footer } = Layout;
|
||||
|
||||
@ -5,9 +5,47 @@ cols: 1
|
||||
title: Layout
|
||||
---
|
||||
|
||||
When you are handling the overall layout of a page, this component might be helpfull.
|
||||
Handling the overall layout of a page.
|
||||
|
||||
## Overview
|
||||
## Specification
|
||||
|
||||
### Size
|
||||
|
||||
The first level of the navigation is placed near by a logo inclined left, and the secondary menu is placed inclined right.
|
||||
|
||||
- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level of navigation `48px`。
|
||||
- Top Navigation(contents page): the height of the first level navigation `80px`, the second level of navigation `56px`。
|
||||
- Calculation formula of a top navigation:`48+8n`.
|
||||
- Calculation formula a aside navigation:`200+8n`.
|
||||
|
||||
### Interaction rules
|
||||
|
||||
- The first level navigation and the last level navigation should be distincted by visualization;
|
||||
- The current item should have the highest priority of visualization;
|
||||
- When the current navigation item is collapsed, the stlye of the current navigation item will be applied to the parent level of it;
|
||||
- The left side navigation bar support for both the according and the expanding style, you can choose the one of it case by case.
|
||||
|
||||
## Visualization rules
|
||||
|
||||
Style of a navigation should conform to the level of it.
|
||||
|
||||
- **Emphasis by colorblock**
|
||||
|
||||
When background color is a deep color, you can use this pattern for the parent level navigation item of current page.
|
||||
|
||||
- **The highlight match stick**
|
||||
|
||||
When background color is a light color, you can use this pattern for the current page navigation item, we recommed to use it for the last item of the navigation path.
|
||||
|
||||
- **Hightlighted font**
|
||||
|
||||
From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.
|
||||
|
||||
- **Enlarge the size of the font**
|
||||
|
||||
`12px`、`14px` is a standard font size of navigations，14 is used for the first and the second level of the navigation. You can choose a approprigate font size in terms of the level of your navigation.
|
||||
|
||||
## Component Overview
|
||||
|
||||
- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.
|
||||
- `Header`: The top layout with default style, in which any element can be nested, and must be placed in `Layout`.
|
||||
|
||||
@ -6,9 +6,47 @@ cols: 1
|
||||
title: Layout
|
||||
---
|
||||
|
||||
可协助进行页面级整体布局。
|
||||
协助进行页面级整体布局。
|
||||
|
||||
## 概述
|
||||
## 设计规则
|
||||
|
||||
### 尺寸
|
||||
|
||||
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
|
||||
|
||||
- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
|
||||
- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。
|
||||
- 顶部导航高度的范围计算公式为：`48+8n`。
|
||||
- 侧边导航宽度的范围计算公式：`200+8n`。
|
||||
|
||||
### 交互
|
||||
|
||||
- 一级导航和末级的导航需要在可视化的层面被强调出来；
|
||||
- 当前项应该在呈现上优先级最高；
|
||||
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
|
||||
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
|
||||
|
||||
### 视觉
|
||||
|
||||
导航样式上需要根据信息层级合理的选择样式：
|
||||
|
||||
- **大色块强调**
|
||||
|
||||
建议用于底色为深色系时，当前页面父级的导航项。
|
||||
|
||||
- **高亮火柴棍**
|
||||
|
||||
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
|
||||
|
||||
- **字体高亮变色**
|
||||
|
||||
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
|
||||
|
||||
- **字体放大**
|
||||
|
||||
`12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
|
||||
|
||||
## 组件概述
|
||||
|
||||
- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
|
||||
- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
|
||||
|
||||
@ -84,8 +84,8 @@ title:
|
||||
|
||||
### 输入提示 & 输入提醒
|
||||
|
||||
<img class="preview-img" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
|
||||
<img class="preview-img" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
|
||||
<img class="preview-img inline" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
|
||||
<img class="preview-img inline" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
|
||||
|
||||
输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
|
||||
|
||||
@ -99,8 +99,8 @@ title:
|
||||
|
||||
### 校验
|
||||
|
||||
<img class="preview-img" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
|
||||
<img class="preview-img" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
|
||||
<img class="preview-img inline" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
|
||||
<img class="preview-img inline" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
|
||||
|
||||
<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://zos.alipayobjects.com/rmsportal/xTtVSREbASRMstTggVGD.png">
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 1
|
||||
order: 2
|
||||
title: Cases
|
||||
---
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 1
|
||||
order: 2
|
||||
title: 实践案例
|
||||
---
|
||||
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
---
|
||||
category:
|
||||
zh-CN: 设计基础
|
||||
en-US: Design Fundamental
|
||||
order: 2
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 色彩
|
||||
en-US: Colors
|
||||
@ -14,6 +11,8 @@ title:
|
||||
- 视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；
|
||||
- 遵守 WCAG 2.0 的 标准，保证足够的对比度，让色彩更容易被视障碍（色盲）用户识别。
|
||||
|
||||
---
|
||||
|
||||
## Ant Design Colors
|
||||
|
||||
Ant Design PC 端的色板由 10 个由浅至深的色彩单元格组成，我们为部分色彩格定义了默认使用场景，用户在进行色彩配色时只需根据关键词选择一条色板即可得到一套完整的系统配色方案。在理论上，在 UI 设计中的色彩都应取自这份色板。
|
||||
@ -24,7 +23,6 @@ Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）
|
||||
|
||||
> 注：在由浅至深的色板里，第 6 格色彩单元格普遍满足 [WCAG 2.0](http://leaverou.github.io/contrast-ratio/) 的 4.5:1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。
|
||||
|
||||
|
||||
`````__react
|
||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||
import { message } from 'antd';
|
||||
@ -140,5 +138,53 @@ const ExtendPalettes = React.createClass({
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<ExtendPalettes key="palettes" />, mountNode);
|
||||
`````
|
||||
|
||||
为了考虑文本在不同颜色背景下的呈现，我们选择了『White #FFFFFF』和『Black #000000』并配以透明度来区分文本的等级层次。详情请查看 [字体颜色]()。
|
||||
|
||||
---
|
||||
|
||||
## 色彩应用
|
||||
|
||||
### 品牌色的应用
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/lVKfKMuLmaTlnTDitPEJ.png" alt="Ant Design 品牌色常用色值">
|
||||
|
||||
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需先了解品牌色在界面中的使用场景及选色范围。以 Ant Design 网页组件的默认样式为例，品牌色主要体现在关键行动点及操作状态、重要信息高亮等场景。
|
||||
|
||||
> 注：图形插画和 logo 可以不必遵循色板，但需保持相近的色系。
|
||||
|
||||
### 中性色的应用
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AmXwsVOWrLxDfwLNlyvL.png" alt="Ant Design 中性色常用色值">
|
||||
|
||||
灰色（Gray）作为中性色在 Ant Design 的网页设计中被大量使用到，它的使用有利于关键内容的衬托和功能的引导。这类色彩主要体现在导航框架、背景底色、描边、或次级操作等等。
|
||||
|
||||
### 功能色的应用
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ADUfVlZwjziJRUQSMbMt.png" alt="Ant Design 功能色卡">
|
||||
|
||||
UI 设计中，比较稳定的色彩除了中性色外还有具备特定含义的功能色，这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。
|
||||
|
||||
### 视觉层次
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/mewwdThVwyTQzpZQtYXw.png" alt="正确示例" description="通过品牌色引导用户的视线路径">
|
||||
|
||||
将品牌色赋予在重要信息或关键主动点上，并衬以大面积的中性色，可以让用户更聚焦到任务本身，从而提高任务的执行效率。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/RmSDSeAAYphuiDFszIMa.png" alt="错误示例" description="操作界面使用的色彩应尽量避免面积过大或种类过多而造成用户视觉疲劳">
|
||||
|
||||
> 注：界面用色建议不超过三种（数据图表和图形类插画除外）。
|
||||
|
||||
### 色彩的易识别性
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jeyvhMIQgoPUotNerRGy.png" alt="正确示例">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ppdlrVnFCsYVicjDrnzi.png" alt="错误示例" description="当对比度数值低于 3:1 时，弱视用户将很难识别">
|
||||
|
||||
Ant Design 的色板颜色遵守 WCAG 2.0 的标准，操作类的色彩搭配都应满足颜色对比值 3:1 的最低标准。
|
||||
|
||||
- [色彩对比值校验工具](http://leaverou.github.io/contrast-ratio/#%23454545-on-%23fff)
|
||||
|
||||
@ -17,10 +17,8 @@ Contrast is one of the effective ways to add visual interest to your page, and t
|
||||
|
||||
In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized.
|
||||
|
||||
|
||||
> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items.
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" description="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
|
||||
|
||||
285
docs/spec/copywriting.md
Normal file
285
docs/spec/copywriting.md
Normal file
@ -0,0 +1,285 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 文案
|
||||
en-US: Copywriting
|
||||
---
|
||||
|
||||
在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。 在使用和书写文案时有以下几点需要注意：
|
||||
|
||||
- 从用户角度出发
|
||||
- 表述一致
|
||||
- 重要的信息放在显著位置
|
||||
- 专业、精准、完整
|
||||
- 精简、友好、正面
|
||||
|
||||
---
|
||||
|
||||
## 语言
|
||||
|
||||
在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，
|
||||
同时让用户体验更加友好。
|
||||
|
||||
### 明确表述立足点
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YNOszTuSiTsssVpHhEGs.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NRHIpjNTFNPcrWIDnJwS.png" alt="错误示范" description="侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。">
|
||||
|
||||
在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。
|
||||
|
||||
既然以用户为中心，文案就应该尽量以用户为主体来写作。
|
||||
|
||||
> 注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。
|
||||
|
||||
### 精简语句
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/ZiROyfAdBfUrEdOBYAIb.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/TLTPbYTIYtiFBdhGzzuH.png" alt="错误示范">
|
||||
|
||||
省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。
|
||||
|
||||
尽量提供简短、易于快速获取的内容。
|
||||
|
||||
### 使用用户熟悉的语言
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/mnKFWLrBvzWLrfYALlkZ.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/KOubjQVgYFwpvYJwXXrQ.png" alt="错误示范" description="站在用户的角度，说用户熟悉的话。">
|
||||
|
||||
使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。
|
||||
|
||||
间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。
|
||||
|
||||
### 表述一致
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/kZxTKnieUptIioCYsMFD.png" alt="正确示范" description="备注描述使用相同的介词。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/moXaaoyeNxPHLcanTNVG.png" alt="错误示范" description="同一区块描述中出现了『受』和『被』两个不同的介词。">
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/gwNjncNTEREdWiKYrUAL.png" alt="正确示范" description="在同一页面、同一区域在语序上一致。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/DYJkKoQzEKCQGxATBdsB.png" alt="错误示范" description="语序上不一致，会影响用户理解成本。">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/pZZSDjsQLqSVPKOYPgso.png" description="操作名称和目标页面的标题一致。">
|
||||
|
||||
- 描述同一个事物的词汇要保持统一;
|
||||
- 上下文的语法、语种、语序要保持统一;
|
||||
- 操作的名称和目标页面标题的名称保持一致。
|
||||
|
||||
### 重要的信息放在显著位置
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/AGAnUPBZlPrjyXIktJCq.png" alt="正确示范" description="在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mylnmEBXVmlLurzJWiZq.png" alt="错误示范" description="用户最关心的信息内容藏在段落中，不易搜寻。">
|
||||
|
||||
让用户第一眼看到最重要的内容，不用到段落中寻找。
|
||||
|
||||
> 注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。
|
||||
|
||||
### 完整、直接得阐述信息
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GASGWmhAxtIgBeJWVtBu.png" alt="正确示范" description="用户可以从中了解了设置后会有什么好处。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pEJsSOGVBiAjcSPhYWkh.png" alt="错误示范" description="用户感受不到设置的意义，不会去设置。">
|
||||
|
||||
当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/tizekZPwmzDRErFQHORz.png" alt="正确示范" description="相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/AdKMFRcCKgTLUuYaAAkN.png" alt="错误示范" description="对于异常情况不是冷冰冰告诉你『失败』。">
|
||||
|
||||
报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。
|
||||
|
||||
### 用词精准完整
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/munDtTOsHjRcvOfVEsCS.png" alt="正确示范" description="完整的表达。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/itpQLlpjvEGgdvHkdGOC.png" alt="错误示范" description="不完整，有歧义或太口语化。">
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/DOJdYTWqpbrwFJMTDAZD.png" alt="正确示范" description="专业用语精准。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EYQBkePnyOXZhirDXBJu.png" alt="错误示范" description="专业的行业用词有别字。">
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/KMnFshyMGODpIBEzWGci.png" alt="正确示范" description="时间信息的表述精准完整。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/MOppPcGzLxutrzmtxNSd.png" alt="错误示范" description="时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。">
|
||||
|
||||
<table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
|
||||
<tr>
|
||||
<th style="border-bottom: 2px solid #108ee9;width:20%;">使用</th>
|
||||
<th style="border-bottom: 2px solid #f04134;width:25%;">不使用</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>其他</th>
|
||||
<td>其它</td>
|
||||
<td>『其他』的应用范围更广</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>抱歉</th>
|
||||
<td>对不起</td>
|
||||
<td>如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，不能使用。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>验证码</th>
|
||||
<td></td>
|
||||
<td>4位或多位数字或字母图片，可有效防止黑客发起对账户的登录尝试。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>校验码</th>
|
||||
<td></td>
|
||||
<td>手机或即时通讯工具收到的6位数字，用于验证用户的身份。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>登录</th>
|
||||
<td>登陆</td>
|
||||
<td>登记记录用户输入的注册账号和密码。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>此</th>
|
||||
<td>该</td>
|
||||
<td>当要表达当前事物时，『此』更加明确。</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
通用基本用词要规范，不要写错字，词语表达要完整。
|
||||
|
||||
专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。
|
||||
|
||||
---
|
||||
|
||||
## 语气
|
||||
|
||||
语言定义的是内容，而情绪和气氛更多的是通过语气来表达，并且同样的内容面对不同的用户我们可以使用不同的语气来表达；例如，我们对应专业的运维人员和小白用户应有不同的表达方式。
|
||||
|
||||
### 拉近彼此的距离
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/qYJmqCMojZrLHDhTeDDC.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/VtTmFViiLyzffMlylBab.png" alt="错误示范" description="建议不要使用『您』，太过客气，让用户感觉有些疏远。">
|
||||
|
||||
直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/yjQeptUiKWSvRBhgiBEi.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/EvbzsGGPhPvPwUEAEjui.png" alt="错误示范" description="同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。">
|
||||
|
||||
> 注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。
|
||||
|
||||
### 友好、尊重用户
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/MxAUSbigfmwsTsDGrKAh.png" alt="正确示范" description="引导用户正确输入内容。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XvmDmIOKZiKbPdXiVlow.png" alt="错误示范" description="不能、不要、请勿都给人命令或强迫的感觉。">
|
||||
|
||||
多给用户支持与鼓励，不要命令和强迫用户。
|
||||
|
||||
如果你想留住你的用户，当出错的时候就不要责怪用户。专注于解决问题，而不是指责。
|
||||
|
||||
### 表述不应过于极端
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nZjyHDlBnVtMSTBbhlxj.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ruQzHpRSGjXwERKXiVXi.png" alt="错误示范" description="『绝不』过于绝对，让用户感到不适。">
|
||||
|
||||
不要使用过于绝对的表述，这样会让用户觉得不适。
|
||||
|
||||
## 大小写和标点符号
|
||||
|
||||
### 英文名词大小写规范
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/CytTOToWDKUvpWlAHwBu.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/JuyMVqYJOnQzwZnwucml.png" alt="错误示范">
|
||||
|
||||
产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；
|
||||
|
||||
> 注：整个单词都大写不利于阅读和识别，应尽量避免这种用法。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/nKHHKvQMIKGTmNSVtIZQ.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ndRBdHSdlsTogOxfiyYg.png" alt="错误示范">
|
||||
|
||||
正确使用专有名词的大小写规范。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/GCqgBzYXTRBbfffRoFaK.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/hDoSuattUMGWQNPOMysN.png" alt="错误示范">
|
||||
|
||||
全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。
|
||||
|
||||
### 统计数据使用阿拉伯数字
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/jUlNKkbKgKsviSGZpEyu.png" alt="正确示范" description="阿拉伯数字的信息传递效率更高">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pLAutmjpTnexUTaUAEXN.png" alt="错误示范">
|
||||
|
||||
这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。
|
||||
|
||||
### 省略不必要的标点
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/asvLGJUPfJmkSthIWzcG.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/mrUQxiFLinuBELviCRIP.png" alt="错误示范">
|
||||
|
||||
为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。
|
||||
|
||||
以下元素单独出现时可以省略标点：
|
||||
|
||||
- 标签
|
||||
- 标题
|
||||
- 输入框下的提示
|
||||
- 悬停文本中的提示
|
||||
- 表格中的句子
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/bviZMQSqXqCSNTBTJwzs.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/QrcYEddtAMTHkPeeqiFw.png" alt="错误示范">
|
||||
|
||||
以下元素单独出现时需要加上标点：
|
||||
|
||||
- 多句或多段的文案和列表内容。
|
||||
- 任何文字链前的句子。
|
||||
|
||||
### 谨慎使用感叹号
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/omCTCcBDzuFueCjjPxNJ.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/XlPHSVrOFXYkYbgKEwYQ.png" alt="错误示范">
|
||||
|
||||
感叹号会让文案显得过于激动，容易让气氛变得过于紧张。
|
||||
|
||||
> 注：当向用户表达问候或祝贺时，使用『！』是合理的语境，例如『欢迎回到社区！』。
|
||||
|
||||
### 基本标点规范
|
||||
|
||||
<table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
|
||||
<tr>
|
||||
<th>标点名称</th>
|
||||
<th>字符</th>
|
||||
<th>描述</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>空格</th>
|
||||
<td> </td>
|
||||
<td>段落句子中的链接和文字之间增加空格；
|
||||
全角字符和半角字符搭配时，需要添加空格，如：两个、2 个、50%。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>句号</th>
|
||||
<td>。</td>
|
||||
<td>以下情况中不使用句号：输入框下的提示；表格中的句子；句末为文字链（链接前使用句号）；按钮和标题。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>感叹号</th>
|
||||
<td>！</td>
|
||||
<td>只在需要表达强烈情感的情况下使用。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>连接号</th>
|
||||
<td>-</td>
|
||||
<td>不使用中文全角的连接号。如：2012-11-12。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>省略号</th>
|
||||
<td>…</td>
|
||||
<td>使用半角的『…』为省略号。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>隐藏符号</th>
|
||||
<td>*</td>
|
||||
<td>多用于替换显示隐私信息。</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
正确得使用标点符号会让句子看起来更清晰和具有可读性。
|
||||
|
||||
具体使用请参考1995年中国标准出版社出版的[《标点符号用法》](http://www.gddx.gov.cn/jjxjyb/resource/cms/2016/05/2016051420583039892.pdf)，右图为重点列出的在设计中需要注意的部分。
|
||||
78
docs/spec/data-display.md
Normal file
78
docs/spec/data-display.md
Normal file
@ -0,0 +1,78 @@
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 数据展示
|
||||
en-US: Data Display
|
||||
---
|
||||
|
||||
合适的数据展示方式可以帮助用户快速地定位和浏览数据，以及更高效得协同工作。在设计时有以下几点需要注意：
|
||||
|
||||
- 依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
|
||||
- 注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等。
|
||||
|
||||
---
|
||||
|
||||
## 表格 Table
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/OGkfpUVQFWqlioeslvue.png">
|
||||
|
||||
表格被公认为是展现数据最为清晰、高效的形式之一。它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。
|
||||
|
||||
> 注：
|
||||
> 1. 表格中的时间、状态、操作栏需保持词语完整不过行。
|
||||
> 2. 当数据为空时，可使用『- -』来表示暂无数据。
|
||||
|
||||
## 折叠面板
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/UzmOpWyvIZmFibFPOjuo.png">
|
||||
|
||||
折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。
|
||||
|
||||
这类组件在导航中大量使用，同时也适合冗长的、无规则的内容管理。
|
||||
|
||||
> 注：
|
||||
> 若折叠内容彼此之间关联度较低时，可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板，只允许单项内容区域展开。
|
||||
|
||||
---
|
||||
|
||||
## 卡片 Card
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fpXuAguWCWWbmQNzOmnM.png" description="如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。">
|
||||
|
||||
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
|
||||
|
||||
> 注：
|
||||
> 1. 卡片通常根据栅格进行排列，建议一行最多不超过四个
|
||||
> 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用用于中台…』
|
||||
|
||||
---
|
||||
|
||||
## 走马灯 Carousel
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fELwaApwGyZoUDCZQtLb.png">
|
||||
|
||||
作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
|
||||
|
||||
> 注：
|
||||
> 1. 轮播的数量不宜过多以免造成用户厌烦，控制在 3~5 个之间为最佳
|
||||
> 2. 建议在设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知
|
||||
|
||||
---
|
||||
|
||||
## 树形控件 Tree
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iIicElfzdIoNzyRJXlqx.png">
|
||||
|
||||
『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。
|
||||
|
||||
用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。
|
||||
|
||||
---
|
||||
|
||||
## 时间轴 Timeline
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/bIYaUSPaBWSzXEpRsIjO.png">
|
||||
|
||||
垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。
|
||||
|
||||
每一条信息以时间为主轴，内容可涵盖主题、类型、相关的附加内容等等。适用于包括事件、任务、日历标注以及其他相关的数据展示。
|
||||
146
docs/spec/data-entry.md
Normal file
146
docs/spec/data-entry.md
Normal file
@ -0,0 +1,146 @@
|
||||
---
|
||||
order: 9
|
||||
title:
|
||||
zh-CN: 数据录入
|
||||
en-US: Data Entry
|
||||
---
|
||||
|
||||
数据录入是获取对象信息的重要交互方式，用户会频繁的增加、修改或删除信息。多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验。设计者应当注意这几点：
|
||||
|
||||
- 为初级用户／偶尔访问的用户提供简单易懂的文案作为『标签（Label） 』；为领域专家提供专业术语作为『标签（Label） 』。当需要用户提供敏感信息时，通过『暗提示』来说明系统为什么要这么做，例如：需要获取身份证号码、手机号码时；
|
||||
- 让用户能在上下文中获取信息，帮助他完成输入。使用『良好的默认值』、『结构化的格式』、『暗提示』、『输入提醒』等方式，避免让用户在空白中猜测输入。
|
||||
|
||||
---
|
||||
|
||||
## 文本录入
|
||||
|
||||
输入框为用户提供了编辑文本的控件，是录入数据最基础和常见的方式。
|
||||
|
||||
### 文本框（Input）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/BPMNkGkHFqbBCRMUdfRh.png">
|
||||
|
||||
输入较少的字符总数，使用单行的输入形式。
|
||||
|
||||
> 注：可以对一些文本（如数字和网址）运用特别的样式。详见 [输入框（Input）](/components/input/)。
|
||||
|
||||
### 文本域（Textarea）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QVRSSdYrWjthpCOupqON.png">
|
||||
|
||||
录入长篇幅的单一的文本使用多行的文本区域。
|
||||
|
||||
### 提示与帮助
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/KSWwgpyjPkbwclNvbvvR.png" alt="基本样式">
|
||||
|
||||
为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。
|
||||
|
||||
> 注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RtFCPKSMfRlgISbMJJRy.png" description="当说明文案较长时，你可以使用一个『信息』图标或者提示工具。">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/rElfIRpcmLsCTFzZDINy.png" description="对于那些短的输入提醒（短于一句），你可以将其放置在输入框的下方。">
|
||||
|
||||
### 搜索（Search）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ycPmRlbZtsoYAibbwMCZ.png">
|
||||
|
||||
搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。
|
||||
|
||||
---
|
||||
|
||||
## 选择录入
|
||||
|
||||
让用户在一个预定的范围中进行选择。
|
||||
|
||||
#### 单选框（Radio Button）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/EvxgOJzHiQAxpuRaEhbH.png">
|
||||
|
||||
单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
|
||||
|
||||
> 注：单选框（Radio Button）一定多于 2 个，一般少于 5 个。
|
||||
|
||||
### 复选框（Checkbox）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/duKUrQDKiyPnYaWtvkQK.png">
|
||||
|
||||
复选框用于在一组可选项中进行多项选择时。
|
||||
|
||||
> 注：
|
||||
> 1. 复选框（Checkbox）一般用于状态标记，需要和提交操作配合；
|
||||
> 2. 单个复选框可以表示两种状态之间的切换。
|
||||
|
||||
### 开关（Switch）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/aIdIORGzFNjqMwrmiguZ.png">
|
||||
|
||||
用于切换单个选项的状态。『开关』的内联标签应该显示清楚，例如：禁用/启用，不允许/允许等。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/qoqGjsZYATDiXiWEjNIK.png" alt="正确示范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/ZcWvStIELApkpnkDOWDG.png" alt="错误示范" description="切换『开关』结果会立即生效，无需与操作按钮搭配使用。">
|
||||
|
||||
> 注：当用户切换『开关』按钮将直接触发状态改变。
|
||||
|
||||
### 选择列表（Dropdown）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iGSmUHkADwVyhuTOBkpJ.png">
|
||||
|
||||
选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。
|
||||
|
||||
> 注：
|
||||
> 1. 当选项多于 5 项时使用；
|
||||
> 2. 列表选项按照逻辑排序，并尽量让内容显示完整。
|
||||
|
||||
### 滑块选择（Slider）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/JJZycUHtpopKCMxXyQpx.png">
|
||||
|
||||
滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/hWhUUUzikHarZSBhefDI.png">
|
||||
|
||||
> 注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。
|
||||
|
||||
### 穿梭框（Transfer）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/VpfyicZPlNugqEjQKSDf.png">
|
||||
|
||||
穿梭框用直观的方式在两栏中移动元素，完成选择行为。
|
||||
|
||||
### 日期选择器（DatePicker）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gaaLemRmjgNpcnlthmkr.png">
|
||||
|
||||
日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。
|
||||
|
||||
---
|
||||
|
||||
## 文件上传
|
||||
|
||||
上传是将本地的相应信息(包含本地和云储存)通过网页或者上传工具发布到远程服务器上的过程。
|
||||
|
||||
### 简单点击上传
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/aqMzAypQRBkmWfMOpOCE.png">
|
||||
|
||||
一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。
|
||||
|
||||
### 显示缩略图上传
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/oUsyeTsjadJfieTspgVq.png">
|
||||
|
||||
一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
|
||||
|
||||
### 拖拽上传
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/euEBewdgKmhThFWrWHIm.png">
|
||||
|
||||
把文件拖入指定区域，完成上传，同样支持点击上传。
|
||||
|
||||
> 注：文件上传需要提供明确的文件大小和文件格式，例如：请选择大小不超过 5M 的文本文件（支持 PDF.ZIP.EXL），上传时需要有明确的进度提示。
|
||||
@ -4,7 +4,7 @@ order: 5
|
||||
title: Make it Direct
|
||||
---
|
||||
|
||||
As Alan Cooper states：『Where there is output, let there be input』. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.
|
||||
As Alan Cooper states：『Where there is output, let there be input』. This is the principle of direct manipulation. eg：Instead of editing content on a separate page, do it directly in context.
|
||||
|
||||
---
|
||||
|
||||
@ -41,7 +41,7 @@ More mode of 『In-page Edit』 ，please visit [『Mode／Table／Interaction
|
||||
|
||||
---
|
||||
|
||||
## Drag and Drop
|
||||
## Drag and Drop
|
||||
|
||||
<img class="preview-img" align="right" alt="Example of Drag and Drop List" description="Status 1: On mouse hover,a removable 『icon』 appears.；<br>Status 2： When hovering over the 『icon』，the pointer changes into a 『hand』， click-and-drag operation can be used；<br>Status 3：Drag target to the placeable block. When blue stroke appears, inform user that object can be placed in the block." src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png">
|
||||
|
||||
@ -56,13 +56,3 @@ Drag and Drop can only limited in one dimension（upper/down or left/right）
|
||||
Drag and Drop picture/file
|
||||
|
||||
<br>
|
||||
|
||||
<p><span class="waiting">Drag and Drop Object（Coming Soon）</span></p>
|
||||
|
||||
<p><span class="waiting">Drag and Drop Multi-Objects（Coming Soon）</span></p>
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
<h2><span class="waiting">Direct Selection（Coming Soon）</span></h2>
|
||||
|
||||
114
docs/spec/feedback.md
Normal file
114
docs/spec/feedback.md
Normal file
@ -0,0 +1,114 @@
|
||||
---
|
||||
order: 11
|
||||
title:
|
||||
zh-CN: 反馈
|
||||
en-US: Feedback
|
||||
---
|
||||
|
||||
为了帮助用户了解应用当前要做什么，也给用户的下一步行为做参考，以及了解操作后所产生的结果 ，当用户和系统需要交互时，使用不同的模式来反馈信息或结果。当设计者使用反馈或者自定义一些反馈时，请注意：
|
||||
|
||||
- 为用户在各个阶段提供必要、积极、即时的反馈；
|
||||
- 避免过度反馈，以免给用户带来不必要的打扰，能够及时看到效果的、简单的操作，可以省略反馈提示。
|
||||
|
||||
---
|
||||
|
||||
## 提示信息
|
||||
|
||||
任何一个产品，即使用户界面做的再好，也离不开用户引导和信息提示。提示信息是用来告诉用户需要知道什么、采取什么样行动的内容。
|
||||
|
||||
### 警告
|
||||
|
||||
#### 警告提示（Alert）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/MPBsvIMFPMeocAailbIW.png">
|
||||
|
||||
是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
> 注：关闭按钮可根据业务需要增加或隐藏。
|
||||
|
||||
### 通知
|
||||
|
||||
#### 通知提醒（Notification）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/icHybUesGmjYbfxfSoQY.png" description="较为复杂的通知内容时使用。">
|
||||
|
||||
系统主动推送的重要的全局性通知信息，在系统右上角显示。
|
||||
|
||||
#### 徽标数（Badge）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/tmthsGOQKqdMUEAFeTYT.png" description="当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。">
|
||||
|
||||
用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。
|
||||
|
||||
> 注：相对重要和用户关联度更高的信息提示，使用数字精准提示；权重不高和不是用户特别关心的消息提示，使用红点做提示。
|
||||
|
||||
### 帮助
|
||||
|
||||
#### 气泡卡片（Popover）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/vDfayzqikMEWAcTrXRzD.png">
|
||||
|
||||
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
|
||||
|
||||
> 注：和 Tooltip 的区别是，Popover 可以承载更复杂的内容，比如链接或按钮等。
|
||||
|
||||
#### 文字提示（Tooltip）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/oOXzRKnHokbLCbRWPNrk.png">
|
||||
|
||||
用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。
|
||||
|
||||
---
|
||||
|
||||
## 过程反馈
|
||||
|
||||
操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。
|
||||
|
||||
### 加载状态进度反馈
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iwEcSHfcdVYLkcWopOzK.png" description="当用户不必等待较长时间的加载时使用。">
|
||||
|
||||
在操作需要一段时间（一般为超过2秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。
|
||||
|
||||
<br />
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/iwEcSHfcdVYLkcWopOzK.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
|
||||
|
||||
> 注：若加载时间较长，应提供取消操作。
|
||||
|
||||
### 录入反馈
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/luLujTAQqovClEOmgqzj.png">
|
||||
|
||||
操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。
|
||||
|
||||
> 注：反馈文字紧跟着要说明的区块（反馈内容一般是错误说明），不自动消失（当用户进行相应的交互操作后才消失）。
|
||||
|
||||
#### 气泡确认框（Popconfirm）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/adnYamnCJfmYrNLZOxdn.png" description="和全屏居中模态对话框相比，交互形式更轻量。">
|
||||
|
||||
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
|
||||
|
||||
---
|
||||
|
||||
## 结果反馈
|
||||
|
||||
操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。
|
||||
|
||||
### 顶部全局提示反馈（Message）
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/rLXuVmbjsSNJWClJyocT.png" description="当用户不必等待较长时间的加载时使用。">
|
||||
|
||||
通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FJkgswzSavkIhZjFAqjj.png" alt="正确示例" description="失败时建议使用对话框形式提示并告知失败原因。">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/dBBUQzfBveiWCLwjiCSX.png" alt="错误示例" description="失败时不建议使用轻量级提示方式。">
|
||||
|
||||
### 对话框反馈
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QxDepeJNSzmgjuNjRVoU.png">
|
||||
|
||||
通过一个操作引发的反馈浮层位于页面中心，反馈内容可通过确认或取消按钮进行关闭，用户在反馈层出现时不可进行任何的操作，用于重要的反馈。
|
||||
|
||||
> 注：除失败时避免显示不必要的提醒弹窗。弹窗是很强的反馈机制，只有在传递非常重要，且可操作的信息时才需要使用它。
|
||||
@ -1,8 +1,5 @@
|
||||
---
|
||||
category:
|
||||
zh-CN: 设计基础
|
||||
en-US: Design Fundamental
|
||||
order: 0
|
||||
order: 5
|
||||
title:
|
||||
zh-CN: 字体
|
||||
en-US: Font
|
||||
|
||||
112
docs/spec/icon.md
Normal file
112
docs/spec/icon.md
Normal file
@ -0,0 +1,112 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 图标
|
||||
en-US: Icon
|
||||
---
|
||||
|
||||
图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致，
|
||||
Ant Design 的图标在设计和使用时有以下两个原则点需要注意：
|
||||
|
||||
- 简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
|
||||
- 保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
|
||||
|
||||
---
|
||||
|
||||
## 系统图标
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png">
|
||||
|
||||
系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
|
||||
|
||||
- [查看图标库](/components/icon/)
|
||||
|
||||
### 关键轮廓线
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="网格和关键轮廓线">
|
||||
|
||||
根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
|
||||
|
||||
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
|
||||
|
||||
- [制作小技巧](https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png)
|
||||
|
||||
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="正方形外轮廓">
|
||||
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="横向矩形外轮廓">
|
||||
|
||||
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="圆形外轮廓">
|
||||
<img class="preview-img no-padding inline" align="right" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.png" alt="纵向矩形外轮廓">
|
||||
|
||||
### 细节
|
||||
|
||||
#### 笔画
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="正确示范" description="icon 的线条粗细统一保持为 72px">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="错误示范" description="icon 的线条粗细不统一">
|
||||
|
||||
一致的笔画权重是保持整个图标系统视觉统一的关键，Ant Design 系统图标的线条统一为 72px 宽度。
|
||||
|
||||
#### 边角
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="正确示范" description="图标的边角设计都遵循了 Ant Design 的规范">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="错误示范" description="线条的终端并不是圆角">
|
||||
|
||||
一致的角度半径也是保持整个图标系统视觉统一的重要元素。
|
||||
|
||||
Ant Design 的图标设计中，外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
|
||||
|
||||
#### 视觉修正
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="正确示范" description="对于图标内较复杂的 “JPG” 字母在笔画权重上进行了微调，让图标看上去更和谐">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="错误示范" description="icon 图形太复杂，空间显得拥挤">
|
||||
|
||||
在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
|
||||
|
||||
### 透视角度
|
||||
|
||||
<img class="preview-img no-padding good" align="right" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="正确示范" description="保持平面、简洁的风格">
|
||||
<img class="preview-img no-padding bad" align="right" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="错误示范" description="图标具有俯视角度，并不是在一个维度空间内">
|
||||
|
||||
始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。
|
||||
|
||||
### 命名规则
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png">
|
||||
|
||||
统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
|
||||
|
||||
### 图标尺寸
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png">
|
||||
|
||||
应用于页面时请使用 Ant Design 的规范尺寸，与字体搭配时和字体的尺寸保持一致。
|
||||
|
||||
例如：和 12pt 字体搭配时，图标使用 12px，图标与文字的间距为 8px。
|
||||
|
||||
### 颜色
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" description="注：表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9">
|
||||
|
||||
icon 的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
|
||||
|
||||
---
|
||||
|
||||
## 业务图标
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sBoyTTymmdhEuYUPEGAd.png">
|
||||
|
||||
业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
|
||||
|
||||
> 注：业务图标的设计原则与系统图标基本一致，在细节处理上（如笔画权重、圆角大小等）可视具体场景而定。
|
||||
|
||||
### 图标尺寸
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png">
|
||||
|
||||
在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
|
||||
|
||||
### 颜色
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png">
|
||||
|
||||
业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。
|
||||
114
docs/spec/layout.md
Normal file
114
docs/spec/layout.md
Normal file
@ -0,0 +1,114 @@
|
||||
---
|
||||
order: 7
|
||||
title:
|
||||
zh-CN: 布局
|
||||
en-US: Layout
|
||||
---
|
||||
|
||||
布局是页面构成的前提，是后续展开交互和视觉设计的基础。Ant Design 提供了常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：
|
||||
|
||||
- 明确用户在此场景中完成的主要任务和需获取的决策信息。
|
||||
- 明确决策信息和操作的优先级及内容特点，选择合理布局。
|
||||
|
||||
---
|
||||
|
||||
## 常用布局
|
||||
|
||||
通过大量的中台设计实践，Ant Design 总结了六类常用的页面布局模板：网站展示页、Dashboard、列表页、表格页、详情页、表单页。在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局。
|
||||
|
||||
### 网站展示页
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/olHkTiGQqfwThlgPIXzx.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/uxbNrsFCmPFjYdhDowky.png">
|
||||
|
||||
网站展示页（即官网页）通常是用户了解网站或产品的第一步。这类页面通常会包含产品展示图，简短的产品介绍信息，以及用户登录入口等。在设计时我们建议：
|
||||
|
||||
- 明确你要传达的内容，保持简短而清晰的文案。
|
||||
- 搭配清晰、直观的产品图片，有助于加深用户对产品的理解和记忆。
|
||||
|
||||
### Dashboard
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/fCVwqOiItdbzyZkQOOiQ.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/LvYKhbKsPzIRLGsBxUJA.png">
|
||||
|
||||
Dashboard 集合了大量多样化的信息（如数字，图形，文案等），需要一目了然地将关键信息展示给用户。因此，如何将庞大复杂的信息精简清晰地展示出来，是设计此类页面的关键。在设计时要注意以下几点：
|
||||
|
||||
- 按照信息的重要程度来组织页面排版，突出展示关键信息。
|
||||
- 将数据可视化，让用户可以直观地了解关键信息及整体情况。
|
||||
- 合理地使用颜色及栅格排版，减轻用户的视觉负担。
|
||||
|
||||
### 列表页
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/GSIyiSRJmxUhmxpMoyrj.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/VyFWYXzkQYYzMzqBXfzO.png">
|
||||
|
||||
列表设计是并列式展现信息，方便用户能快速查看基本信息及操作。因此，信息的「可阅读性」及「可操作性」是设计的关键。在设计时要注意以下几点：
|
||||
|
||||
- 根据用户需求来定义信息展示的等级，仅展示关键信息及操作。
|
||||
- 当信息内容较为复杂时，可将次要的信息折叠或放到详情页面中，以递进的方式让用户获得更多的信息。
|
||||
|
||||
## 表格页
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/ArRESSbBrLJWhjscKiZh.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/gDwAZagDBphbcePRDnBZ.png">
|
||||
|
||||
表格作为多维信息展示的载体，使复杂的信息更易于阅读与理解。它的易读性，便捷性，易操作性对产品的体验起着举足轻重的作用。因此，我们在设计时要注意以下几点：
|
||||
|
||||
- 构造清晰的表格布局，有利于提升读者对信息的接收速度和理解程度。
|
||||
- 更多地展示用户所必须的信息，通过视觉上的调优突出展示重点信息。
|
||||
- 当界面需要在一个很大的多纵行表格中展示数据，或每一横列数据有多行信息时，可以巧妙地运用横向或纵向斑马条，使得信息条目之间更为分明，视觉上更易区分。
|
||||
|
||||
### 详情页
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/wRdLpkIoTNfxOvNOqKyf.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/IWXpmErtdIHzDYbtNohi.png">
|
||||
|
||||
详情页面一般会承载大量的基本信息，扩展信息，或者状态信息。对于信息效率和优先级判定的要求会比较高。清晰的布局能帮助快速看到关键信息，提高决策效率。这设计时有以下几点需要注意：
|
||||
|
||||
- 清晰的排版格式，易于阅读的文本大小及间距，都是影响用户获取信息效率的关键因素。
|
||||
- 图文搭配比单文本展示信息能更好地提高用户的理解。
|
||||
|
||||
### 表单页
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/AVxFnNgjBPIaxLnCOxJv.png">
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://zos.alipayobjects.com/rmsportal/sqeTZuWlqiGboOITncCh.png">
|
||||
|
||||
表单页通常用来执行登录、注册、预定、下单、评论等任务，是产品中数据录入必不可少的页面模式。因此，舒适的表单设计，可以引导用户高效地完成表单背后的工作流程：
|
||||
|
||||
- 考虑用户的浏览方式，提供清晰的用户视线浏览路径；
|
||||
- 内容是表单的核心，保证表单的内容精简（尽量避免多余的输入项）；
|
||||
- 标签的命名要易于用户阅读和理解，避免模糊的描述给用户造成困扰；
|
||||
- 醒目的提交或完成按钮，放在用户的浏览线的终点更有利于用户的完成操作。
|
||||
|
||||
---
|
||||
|
||||
## 栅格 Grid
|
||||
|
||||
我们通过定义网格、间距来呈现产品布局的最佳效果，设计师在设计时可按『页面总宽 1440px，内容区 1208px』来设定，并在此基础上以 24 等分的栅格来划分整个设计建议区域。
|
||||
|
||||
|
||||
|
||||
建议横向排列的区块数量最多四个，最少一个，以保证视觉层面的舒适感。
|
||||
|
||||
|
||||
|
||||
> 注：图中灰色部分为栅格的列，定义为『Colume』，白色部分为栅格的间隔，定义为『Gutter』。
|
||||
|
||||
### 栅格公式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/htXqyMPydaagYLdAGEJK.png">
|
||||
|
||||
我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
|
||||
|
||||
在 Ant Design 中，我们定义了两种 Gutter：
|
||||
|
||||
- 网站展示页和 Dashboard 的 Gutter 宽度为 24px。
|
||||
- 列表、表格、详情和表单页面的 Gutter 宽度为 16px。
|
||||
|
||||
> [设置栅格的小技巧](https://zos.alipayobjects.com/rmsportal/cbxeMLaFnqQEvFgmhSTS.png)。
|
||||
@ -1,226 +0,0 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 可收起展开的侧边导航
|
||||
en-US: Collapsed aside
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。
|
||||
|
||||
## en-US
|
||||
|
||||
This pattern is used when the horizontal space is limited. By default, Aside navigation is collapsed. You can click the button at the bottom to expand it.
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
const AsideCollapse = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
collapse: true,
|
||||
};
|
||||
},
|
||||
onCollapseChange() {
|
||||
this.setState({
|
||||
collapse: !this.state.collapse,
|
||||
})
|
||||
},
|
||||
render() {
|
||||
const collapse = this.state.collapse;
|
||||
return (
|
||||
<div className={collapse ? "layout-aside layout-aside-collapse" : "layout-aside"}>
|
||||
<aside className="layout-sider">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
|
||||
<Menu.Item key="user">
|
||||
<Icon type="user" />
|
||||
{!collapse && <span className="nav-text">Navigation 1</span>}
|
||||
</Menu.Item>
|
||||
<Menu.Item key="setting">
|
||||
<Icon type="setting" />
|
||||
{!collapse && <span className="nav-text">Navigation 2</span>}
|
||||
</Menu.Item>
|
||||
<Menu.Item key="laptop">
|
||||
<Icon type="laptop" />
|
||||
{!collapse && <span className="nav-text">Navigation 3</span>}
|
||||
</Menu.Item>
|
||||
<Menu.Item key="notification">
|
||||
<Icon type="notification" />
|
||||
{!collapse && <span className="nav-text">Navigation 4</span>}
|
||||
</Menu.Item>
|
||||
<Menu.Item key="folder">
|
||||
<Icon type="folder" />
|
||||
{!collapse && <span className="nav-text">Navigation 5</span>}
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
<div className="aside-action" onClick={this.onCollapseChange}>
|
||||
{collapse ? <Icon type="right" /> : <Icon type="left" />}
|
||||
</div>
|
||||
</aside>
|
||||
<div className="layout-main">
|
||||
<div className="layout-header"></div>
|
||||
<div className="layout-container">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>App list</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Any app</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 220 }}>
|
||||
Contents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-footer">
|
||||
Ant Design all rights reserved © 2015 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.layout-aside .layout-logo {
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-logo {
|
||||
width: 32px;
|
||||
margin: 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider {
|
||||
width: 64px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider > .menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider > .menu > .menu-item {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider > .menu > .menu-item .nav-text {
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider > .menu > .menu-item > .anticon {
|
||||
transition: font-size .3s;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item {
|
||||
transition: all 0s ease;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
|
||||
background: #2db7f5;
|
||||
color: #fff;
|
||||
transition: all 0s ease;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background: #2db7f5;
|
||||
color: #fff;
|
||||
padding-right: 16px;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
/* 实际使用中需要改成 position: fixed */
|
||||
.layout-aside .aside-action {
|
||||
height: 42px;
|
||||
width: 224px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #656565;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .aside-action {
|
||||
width: 64px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.layout-aside .layout-main {
|
||||
margin-left: 224px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside-collapse .layout-main {
|
||||
margin-left: 64px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.layout-aside .layout-container {
|
||||
margin: 12px 16px 24px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-top: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}
|
||||
````
|
||||
@ -1,134 +0,0 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 侧边导航
|
||||
en-US: Aside
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
顶级导航在侧边栏。
|
||||
|
||||
侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。
|
||||
|
||||
## en-US
|
||||
|
||||
Aside top level navigation
|
||||
|
||||
A left-right structure of page layouts is used to Aside navigation, Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.
|
||||
|
||||
The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="layout-aside">
|
||||
<aside className="layout-sider">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu mode="inline" theme="dark"
|
||||
defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />Navigation 1</span>}>
|
||||
<Menu.Item key="1">item 1</Menu.Item>
|
||||
<Menu.Item key="2">item 2</Menu.Item>
|
||||
<Menu.Item key="3">item 3</Menu.Item>
|
||||
<Menu.Item key="4">item 4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="laptop" />Navigation 2</span>}>
|
||||
<Menu.Item key="5">item 5</Menu.Item>
|
||||
<Menu.Item key="6">item 6</Menu.Item>
|
||||
<Menu.Item key="7">item 7</Menu.Item>
|
||||
<Menu.Item key="8">item 8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub3" title={<span><Icon type="notification" />Navigation 3</span>}>
|
||||
<Menu.Item key="9">item 9</Menu.Item>
|
||||
<Menu.Item key="10">item 10</Menu.Item>
|
||||
<Menu.Item key="11">item 11</Menu.Item>
|
||||
<Menu.Item key="12">item 12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="layout-main">
|
||||
<div className="layout-header"></div>
|
||||
<div className="layout-container">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>App list</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Any App</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 590 }}>
|
||||
Contents
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-footer">
|
||||
Ant Design all rights reserved © 2015 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.layout-aside .layout-logo {
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-aside .layout-sider > .menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.layout-aside .layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-container {
|
||||
margin: 12px 16px 24px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-top: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layout-aside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}
|
||||
````
|
||||
@ -1,87 +0,0 @@
|
||||
---
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 吊顶规范
|
||||
en-US: Ceiling
|
||||
---
|
||||
## zh-CN
|
||||
|
||||
吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。
|
||||
|
||||
吊顶背景深色，高度 `30px`，和浅色调的主导航配合使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Generally, ceiling is used for cross system/applications, where you can put uniform login/help information on top of the page.
|
||||
|
||||
Background color of a ceiling is a dark color, height is `30px`, and a light color foreground for the mainnav should be used.
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb } from 'antd';
|
||||
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="layout-ceiling-demo">
|
||||
<div className="layout-ceiling">
|
||||
<div className="layout-wrapper">
|
||||
<ul className="right">
|
||||
<li>xxx@example.com</li>
|
||||
<li>|</li>
|
||||
<li>Help Center</li>
|
||||
<li>|</li>
|
||||
<li>Custom Service/Complaint Center phone：400-826-7710</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.layout-ceiling-demo {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-ceiling {
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #242736;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.layout-ceiling .right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.layout-ceiling ul li {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.layout-ceiling-demo .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.layout-ceiling-demo .layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.layout-ceiling-demo .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
````
|
||||
@ -1,148 +0,0 @@
|
||||
---
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 顶部导航 + 侧边栏
|
||||
en-US: Top aside
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
顶级导航在头部，次级导航在侧边栏。
|
||||
|
||||
## en-US
|
||||
|
||||
The top navigation is placed on the top, and the secondary navigation is placed on the aside.
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="layout-topaside">
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">Navigation 1</Menu.Item>
|
||||
<Menu.Item key="2">Navigation 2</Menu.Item>
|
||||
<Menu.Item key="3">Navigation 3</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-subheader">
|
||||
<div className="layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">Second nav</Menu.Item>
|
||||
<Menu.Item key="2">Second nav</Menu.Item>
|
||||
<Menu.Item key="3">Second nav</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-wrapper">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>App list</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Any app</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-container">
|
||||
<aside className="layout-sider">
|
||||
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />Navigation 1</span>}>
|
||||
<Menu.Item key="1">item 1</Menu.Item>
|
||||
<Menu.Item key="2">item 2</Menu.Item>
|
||||
<Menu.Item key="3">item 3</Menu.Item>
|
||||
<Menu.Item key="4">item 4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub2" title={<span><Icon type="laptop" />Navigation 2</span>}>
|
||||
<Menu.Item key="5">item 5</Menu.Item>
|
||||
<Menu.Item key="6">item 6</Menu.Item>
|
||||
<Menu.Item key="7">item 7</Menu.Item>
|
||||
<Menu.Item key="8">item 8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu key="sub3" title={<span><Icon type="notification" />Navigation 3</span>}>
|
||||
<Menu.Item key="9">item 9</Menu.Item>
|
||||
<Menu.Item key="10">item 10</Menu.Item>
|
||||
<Menu.Item key="11">item 11</Menu.Item>
|
||||
<Menu.Item key="12">item 12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</aside>
|
||||
<div className="layout-content">
|
||||
<div style={{ height: 240 }}>
|
||||
<div style={{clear: 'both'}}>Contents</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-footer">
|
||||
Ant Design all rights reserved © 2015 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.layout-topaside {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-container {
|
||||
background: #fff;
|
||||
margin: 12px 0 0;
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-sider {
|
||||
width: 224px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-content {
|
||||
border-left: 1px solid #e9e9e9;
|
||||
padding: 0 24px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.layout-topaside .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
````
|
||||
@ -1,118 +0,0 @@
|
||||
---
|
||||
order: 0
|
||||
title:
|
||||
zh-CN: 顶部导航
|
||||
en-US: Top
|
||||
---
|
||||
## zh-CN
|
||||
|
||||
一二级导航都在顶部。
|
||||
|
||||
顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
|
||||
|
||||
> `<BrowserDemo />` 做演示用，无须复制。
|
||||
|
||||
## en-US
|
||||
|
||||
The first and second level nav are both on the top.
|
||||
|
||||
A top-bottom structure of page layouts is used for top navigation. Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it.
|
||||
We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.
|
||||
|
||||
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
|
||||
|
||||
> `<BrowserDemo />` This is for demo, don't need to copy.
|
||||
|
||||
````jsx
|
||||
import { Menu, Breadcrumb } from 'antd';
|
||||
import BrowserDemo from 'site/theme/template/BrowserDemo';
|
||||
|
||||
ReactDOM.render(
|
||||
<BrowserDemo>
|
||||
<div className="layout-top">
|
||||
<div className="layout-header">
|
||||
<div className="layout-wrapper">
|
||||
<div className="layout-logo"></div>
|
||||
<Menu theme="dark" mode="horizontal"
|
||||
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
|
||||
<Menu.Item key="1">Navigation 1</Menu.Item>
|
||||
<Menu.Item key="2">Navigation 2</Menu.Item>
|
||||
<Menu.Item key="3">Navigation 3</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-subheader">
|
||||
<div className="layout-wrapper">
|
||||
<Menu mode="horizontal"
|
||||
defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
|
||||
<Menu.Item key="1">Second nav</Menu.Item>
|
||||
<Menu.Item key="2">Second nav</Menu.Item>
|
||||
<Menu.Item key="3">Second nav</Menu.Item>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-wrapper">
|
||||
<Breadcrumb>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>App list</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Any app</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div className="layout-container">
|
||||
<div style={{ height: 210 }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="layout-footer">
|
||||
Ant Design all rights reserved © 2015 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</BrowserDemo>
|
||||
, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
.layout-top {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layout-top .layout-wrapper {
|
||||
padding: 0 50px;
|
||||
}
|
||||
|
||||
.layout-top .layout-header {
|
||||
background: #404040;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.layout-top .layout-logo {
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
margin: 16px 24px 16px 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.layout-top .layout-subheader {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layout-top .layout-container {
|
||||
background: #fff;
|
||||
margin: 12px 0 0;
|
||||
position: relative;
|
||||
padding-top: 24px;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layout-top .layout-footer {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
````
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
template: component
|
||||
category: Design Fundamental
|
||||
order: 4
|
||||
cols: 1
|
||||
title: Layout
|
||||
---
|
||||
|
||||
Layout and Navigation is the backbone of productions, it is one of the most important design pattern of a page,
|
||||
and it is also a base when you create a page, it will establish a interactive and visual style for a production.
|
||||
|
||||
The Layout and Navigation design specification for Ant Design are as follows:
|
||||
|
||||
### The specification of size
|
||||
|
||||
The first level of the navigation is placed near by a logo inclined left, and the secondary menu is placed inclined right.
|
||||
|
||||
- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level of navigation `48px`。
|
||||
- Top Navigation(contents page): the height of the first level navigation `80px`,the second level of navigation `56px`。
|
||||
- Calculation formula of a top navigation:`48+8n`.
|
||||
- Calculation formula a aside navigation:`200+8n`.
|
||||
|
||||
### The principle of interaction
|
||||
|
||||
- The first level navigation and the last level navigation should be distincted by visualization;
|
||||
- The current item should have the highest priority of visualization;
|
||||
- When the current navigation item is collapsed, the stlye of the current navigation item will be applied to the parent level of it;
|
||||
- The left side navigation bar support for both the according and the expanding style, you can choose the one of it case by case.
|
||||
|
||||
### The principle of visualization
|
||||
|
||||
Style of a navigation should conform to the level of it.
|
||||
|
||||
- **Emphasis by colorblock**
|
||||
|
||||
When background color is a deep color, you can use this pattern for the parent level navigation item of current page.
|
||||
|
||||
- **The highlight match stick**
|
||||
|
||||
When background color is a light color, you can use this pattern for the current page navigation item, we recommed to use it for the last item of the navigation path.
|
||||
|
||||
- **Hightlighted font**
|
||||
|
||||
From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.
|
||||
|
||||
- **Enlarge the size of the font**
|
||||
|
||||
`12px`、`14px` is a standard font size of navigations，14 is used for the first and the second level of the navigation. You can choose a approprigate font size in terms of the level of your navigation.
|
||||
|
||||
In almost middle-back systems, Ant Design uses two general layouts of top navigation and aside navition, we collect some basic layouts of middle-back systems are designed by Ant Design as follows. The demo code below is used of sample, you should [Layout](/components/layout/) component in real project.
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
template: component
|
||||
category: 设计基础
|
||||
order: 4
|
||||
cols: 1
|
||||
title: 常用布局
|
||||
---
|
||||
|
||||
布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。
|
||||
|
||||
Ant Design 的布局和导航设计规范如下：
|
||||
|
||||
### 尺寸规则
|
||||
|
||||
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
|
||||
|
||||
- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
|
||||
- 顶部导航（展示类页面）：一级导航高度 `80px`,二级导航 `56px`。
|
||||
- 顶部导航高度的范围计算公式为：`48+8n`。
|
||||
- 侧边导航宽度的范围计算公式：`200+8n`。
|
||||
|
||||
### 交互原则
|
||||
|
||||
- 一级导航和末级的导航需要在可视化的层面被强调出来；
|
||||
- 当前项应该在呈现上优先级最高；
|
||||
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
|
||||
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
|
||||
|
||||
### 视觉原则
|
||||
|
||||
导航样式上需要根据信息层级合理的选择样式：
|
||||
|
||||
- **大色块强调**
|
||||
|
||||
建议用于底色为深色系时，当前页面父级的导航项。
|
||||
|
||||
- **高亮火柴棍**
|
||||
|
||||
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
|
||||
|
||||
- **字体高亮变色**
|
||||
|
||||
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
|
||||
|
||||
- **字体放大**
|
||||
|
||||
`12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
|
||||
|
||||
|
||||
在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。以下演示代码仅用于参考，可以直接使用 [Layout](/components/layout/) 组件进行搭建。
|
||||
@ -14,7 +14,6 @@ Fitts’s Law is an ergonomic principle that ties the size of a target and its c
|
||||
|
||||
## Always-Visible Tools
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill colour of the button changes to a dark colour, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png">
|
||||
|
||||
If an action is critical, expose it directly in the interface and keep it always visible.
|
||||
@ -36,12 +35,10 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
|
||||
|
||||
## Toggle-Reveal Tools
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png">
|
||||
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
@ -54,7 +51,6 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T
|
||||
|
||||
<img class="preview-img" align="right" alt="bad example" description="The copy icon appears near the copyable text." src="https://os.alipayobjects.com/rmsportal/MfbnQfAJhQfIODY.png" bad>
|
||||
|
||||
|
||||
If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise.
|
||||
|
||||
Some relative knowledge of [Providing an Invitation](/docs/spec/invitation) can also be applied.
|
||||
@ -75,4 +71,4 @@ The clickable area of hypertext is affected by the length of the string in a cel
|
||||
|
||||
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
|
||||
|
||||
>Note that it is especially suited for Mobile.
|
||||
> Note that it is especially suited for Mobile.
|
||||
|
||||
@ -12,7 +12,6 @@ title: 简化交互
|
||||
|
||||
## 实时可见工具
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png">
|
||||
|
||||
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
|
||||
@ -34,12 +33,10 @@ title: 简化交互
|
||||
|
||||
## 开关显示工具
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击『修改』后，Table 中『文本』变成『输入框』，开启编辑功能。" src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png">
|
||||
|
||||
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
@ -52,7 +49,6 @@ title: 简化交互
|
||||
|
||||
<img class="preview-img" align="right" alt="不推荐示例" description="在可复制内容的附近出现『图标』，点击后复制。" src="https://os.alipayobjects.com/rmsportal/MfbnQfAJhQfIODY.png" bad>
|
||||
|
||||
|
||||
如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。
|
||||
|
||||
此处也可以运用[『提供邀请』](/docs/spec/invitation) 相关的知识点。
|
||||
@ -73,4 +69,4 @@ title: 简化交互
|
||||
|
||||
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
|
||||
|
||||
>注：在移动端尤其适用。
|
||||
> 注：在移动端尤其适用。
|
||||
|
||||
@ -1,250 +1,7 @@
|
||||
---
|
||||
category:
|
||||
zh-CN: 设计基础
|
||||
en-US: Design Fundamental
|
||||
order: 5
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 组件动画
|
||||
zh-CN: 动效
|
||||
en-US: Motion
|
||||
link: http://motion.ant.design
|
||||
---
|
||||
|
||||
依据『巧用过渡』的设计原则，Ant Design 提供了一些预设的组件动画和缓动函数。更多动画可参考 [Ant Motion](https://motion.ant.design/)
|
||||
|
||||
> 示例延长了动画时长以便展示。
|
||||
|
||||
`````__react
|
||||
const cssAnimation = require('css-animation');
|
||||
const antd = require('antd');
|
||||
const Select = antd.Select;
|
||||
const Option = Select.Option;
|
||||
const OptGroup = Select.OptGroup;
|
||||
|
||||
let motions = [];
|
||||
motions = motions.concat([[{
|
||||
name: '淡入',
|
||||
value: 'fade',
|
||||
direction: 'enter',
|
||||
type: '渐隐'
|
||||
}, {
|
||||
name: '淡出',
|
||||
value: 'fade',
|
||||
direction: 'leave',
|
||||
type: '渐隐'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '中心放大',
|
||||
value: 'zoom',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '中心缩小',
|
||||
value: 'zoom',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '上方放大',
|
||||
value: 'zoom-up',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '上方缩小',
|
||||
value: 'zoom-up',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '下方放大',
|
||||
value: 'zoom-down',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '下方缩小',
|
||||
value: 'zoom-down',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '左方放大',
|
||||
value: 'zoom-left',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '左方缩小',
|
||||
value: 'zoom-left',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '右方放大',
|
||||
value: 'zoom-right',
|
||||
direction: 'enter',
|
||||
type: '缩放'
|
||||
}, {
|
||||
name: '右方缩小',
|
||||
value: 'zoom-right',
|
||||
direction: 'leave',
|
||||
type: '缩放'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '上方滑入',
|
||||
value: 'move-up',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '上方滑出',
|
||||
value: 'move-up',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '下方滑入',
|
||||
value: 'move-down',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '下方滑出',
|
||||
value: 'move-down',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '左方滑入',
|
||||
value: 'move-left',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '左方滑出',
|
||||
value: 'move-left',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '右方滑入',
|
||||
value: 'move-right',
|
||||
direction: 'enter',
|
||||
type: '移动'
|
||||
}, {
|
||||
name: '右方滑出',
|
||||
value: 'move-right',
|
||||
direction: 'leave',
|
||||
type: '移动'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '上方展开',
|
||||
value: 'slide-up',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '上方缩回',
|
||||
value: 'slide-up',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '下方展开',
|
||||
value: 'slide-down',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '下方缩回',
|
||||
value: 'slide-down',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '左方展开',
|
||||
value: 'slide-left',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '左方缩回',
|
||||
value: 'slide-left',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '右方展开',
|
||||
value: 'slide-right',
|
||||
direction: 'enter',
|
||||
type: '伸缩'
|
||||
}, {
|
||||
name: '右方缩回',
|
||||
value: 'slide-right',
|
||||
direction: 'leave',
|
||||
type: '伸缩'
|
||||
}]]);
|
||||
motions = motions.concat([[{
|
||||
name: '摇摆',
|
||||
value: 'swing',
|
||||
direction: 'enter',
|
||||
type: '其他'
|
||||
}]]);
|
||||
|
||||
var leave = '-leave';
|
||||
var Test = React.createClass({
|
||||
handleChange(e) {
|
||||
var value = e;
|
||||
if (value) {
|
||||
this.demoNode.style.visibility = '';
|
||||
cssAnimation(this.demoNode, value, () => {
|
||||
if (value.slice(-leave.length) === leave) {
|
||||
this.demoNode.style.visibility = 'hidden';
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
componentDidMount() {
|
||||
this.demoNode = ReactDOM.findDOMNode(this.refs.demo);
|
||||
},
|
||||
render() {
|
||||
const options = [<Option value="" key="placeholder">请选择预设动画</Option>].concat(motions.map(function (m, groupIndex) {
|
||||
const opts = m.map(function (m2, optIndex) {
|
||||
return <Option key={optIndex} value={m2.value + "-" + m2.direction}>{m2.name + " " + m2.value}</Option>
|
||||
});
|
||||
return <OptGroup key={groupIndex} label={m[0].type}>{opts}</OptGroup>;
|
||||
}));
|
||||
return <div>
|
||||
<div className="motion-container">
|
||||
<div ref="demo" className="motion-example"></div>
|
||||
</div>
|
||||
<div className="motion-select-wrapper">
|
||||
<Select value="" className='motion-select' onChange={this.handleChange}>{options}</Select>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Test key="motion" />, mountNode);
|
||||
`````
|
||||
|
||||
## 组件动画
|
||||
|
||||
| 组件 | 中文名 | 采用动画 |
|
||||
|--------------|--------------------|-------------------------------------------------|
|
||||
| Popover | 气泡浮出 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| Popconfirm | 气泡确认 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| Tooltip | 文字提示 | `zoom-up` `zoom-down` `zoom-left` `zoom-right` |
|
||||
| Modal | 弹出框 | `zoom` |
|
||||
| Badge | 徽标数 | `zoom` |
|
||||
| message | 信息提示条 | `move-up` |
|
||||
| notification | 通知框 | `move-right` & `slide-up` |
|
||||
| Dropdown | 下拉菜单 | `slide-up` |
|
||||
| Select | 选择框 | `slide-up` |
|
||||
| Cascader | 级联选择框 | `slide-up` |
|
||||
| TreeSelect | 树选择框 | `slide-up` |
|
||||
| DatePicker | 日期选择框 | `slide-up` |
|
||||
| TatePicker | 日期选择框 | `slide-up` |
|
||||
| Alert | 警告提示 | `slide-up` |
|
||||
| Menu | 导航菜单 | `slide-up` |
|
||||
|
||||
在 React 的前端实现中，可以使用 [rc-animate](https://github.com/react-component/animate) 的 [transitionName](http://react-component.github.io/animate/examples/simple.html) 属性来给任意元素指定动画。
|
||||
|
||||
## 缓动函数
|
||||
|
||||
> `move@enter` 表示 `移动@进入`。
|
||||
|
||||
| 名称 | 参数 | 说明 | 应用动画 |
|
||||
| -------------------|------------------------------------------|--------------------|------------|
|
||||
| @ease-out | `cubic-bezier(0.215,0.61,0.355,1);` | 默认后缓动 | |
|
||||
| @ease-in | `cubic-bezier(0.55,0.055,0.675,0.19);` | 默认前缓动 | |
|
||||
| @ease-in-out | `cubic-bezier(0.645,0.045,0.355,1);` | 默认前后缓动 | |
|
||||
| @ease-out-back | `cubic-bezier(0.18,0.89,0.32,1.28);` | 结束回动 | |
|
||||
| @ease-in-back | `cubic-bezier(0.6,-0.3,0.74,0.05);` | 开始回动 | |
|
||||
| @ease-in-out-back | `cubic-bezier(0.68,-0.55,0.27,1.55);` | 前后回动 | |
|
||||
| @ease-out-circ | `cubic-bezier(0.08,0.82,0.17,1);` | 圆形后缓动 | `move@enter` `zoom@enter` |
|
||||
| @ease-in-circ | `cubic-bezier(0.6,0.04,0.98,0.34);` | 圆形前缓动 | `move@leave` |
|
||||
| @ease-in-out-circ | `cubic-bezier(0.78,0.14,0.15,0.86);` | 圆形前后缓动 | `zoom@leave` |
|
||||
| @ease-out-quint | `cubic-bezier(0.23, 1, 0.32, 1);` | quint 后缓动 | `slide@enter` |
|
||||
| @ease-in-quint | `cubic-bezier(0.755, 0.05, 0.855, 0.06);`| quint 前缓动 | `slide@leave` |
|
||||
| @ease-in-out-quint | `cubic-bezier(0.86, 0, 0.07, 1);` | quint 前后缓动 | |
|
||||
|
||||
116
docs/spec/navigation.md
Normal file
116
docs/spec/navigation.md
Normal file
@ -0,0 +1,116 @@
|
||||
---
|
||||
order: 8
|
||||
title:
|
||||
zh-CN: 导航
|
||||
en-US: Navigation
|
||||
---
|
||||
|
||||
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。当设计者使用导航或者自定义一些导航结构时，请注意：
|
||||
|
||||
- 尽可能提供标识、上下文线索，避免用户迷路；
|
||||
- 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
|
||||
- 尽可能减少页面间的跳转（例如：一个常见任务需要多个页面跳转时，请减少至一到两次），让用户移动距离保持简短。
|
||||
|
||||
---
|
||||
|
||||
## 导航菜单
|
||||
|
||||
导航菜单是将内容信息友好地展示给用户的有效方式。在确定好网站的信息架构后，应当按需选取适当的导航菜单样式。
|
||||
|
||||
### 顶部导航菜单
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/CHLsYZJzIISKiFegqrXQ.png">
|
||||
|
||||
顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。
|
||||
|
||||
### 侧边导航菜单
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/iSgvIOKsqAdpJUeHVnnl.png">
|
||||
|
||||
垂直导航较横向的导航更灵活，易于向下扩展， 且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。
|
||||
|
||||
- 更多常用导航布局可以参考 [Layout 组件](/components/layout/)。
|
||||
|
||||
---
|
||||
|
||||
## 面包屑
|
||||
|
||||
面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/uJPTOTAzNbKEfBKJbZmG.png">
|
||||
|
||||
> 注意事项：
|
||||
> 1. 层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级；
|
||||
> 2. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
|
||||
|
||||
---
|
||||
|
||||
## 标签页
|
||||
|
||||
标签页把大量信息进行分类展示，用户可以方便地切换标签，而不必跳转页面进行比较浏览，可以在有限的显示区域内展示更多信息。分类可根据业务类别、业务状态或者操作类型等并列关系来分，分类标题长度为 2-6 个中文字。
|
||||
|
||||
### 基本样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/DIrWhQPjVkVXMTurmFtj.png">
|
||||
|
||||
引领整个页面的内容，用于主功能切换。
|
||||
|
||||
### 卡片样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/qUhhphhCUqcTBQuryPVz.png">
|
||||
|
||||
用于页面中局部展示，包裹型容器能很好的和其它内容隔离。
|
||||
|
||||
### 胶囊型样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/JGxYplcbVQZiDBFUKnDa.png" description="一般用于小版块内，或与基本样式、卡片样式搭配使用。">
|
||||
|
||||
用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。
|
||||
|
||||
### 竖状样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/HcKwSTAlBhXwJBmrILoj.png">
|
||||
|
||||
用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。
|
||||
|
||||
---
|
||||
|
||||
## 步骤条
|
||||
|
||||
步骤条是引导用户按照流程完成任务的导航条，可以帮助用户对操作流程长度和步骤有个预期，并且知道自己当前在哪个步骤，同时也可以对用户的任务完成度有明确的度量。当任务复杂或者存在先后关系时，将其分解成一系列步骤。
|
||||
|
||||
### 横向流程步骤条
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/lPqKbrGtQTqzzdwofzok.png">
|
||||
|
||||
步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。
|
||||
|
||||
### 竖向流程步骤条
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/gYnwqXKtCTaIQnvbhMlo.png">
|
||||
|
||||
一般居页面左侧，悬浮固定，可追加多行文字描述，适合较多步骤或步骤数动态变化时使用，例如：时间步骤跟踪描述。
|
||||
|
||||
---
|
||||
|
||||
## 分页器
|
||||
|
||||
当有大量内容需要展现时进行分页加载处理，分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。
|
||||
|
||||
### 标准样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/tarFEzfOZhEYtclFAsJX.png" description="当页数超过 5 页时，可以提供快速跳转页面的功能。">
|
||||
|
||||
当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。
|
||||
|
||||
### 迷你样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/rIilfwNWTONzxGOWXbVM.png">
|
||||
|
||||
一般用于卡片或者浮层。
|
||||
|
||||
### 简易样式
|
||||
|
||||
<img class="preview-img no-padding" align="right" src="https://os.alipayobjects.com/rmsportal/viUMXhmLoFTqjTgoJNxZ.png">
|
||||
|
||||
一般用于卡片或者统计类表格展示，在 10 页之内。
|
||||
@ -1,46 +0,0 @@
|
||||
---
|
||||
category: Principles
|
||||
order: 0
|
||||
title: Introduction
|
||||
---
|
||||
|
||||
“It is more difficult to find good design than bad ones. ” Because good design are so natural, it can help users to easily meet the targets, so that the users are not aware of the existence of good design.
|
||||
|
||||
After referring to the summary and reasoning of design principles from The Non-Designer’s Design Book” and “Designing Web Interfaces”, and combining with our practice and understanding of the team, we developed the following ten principles, which provide specific criteria and enlightenment of the solutions to problem for designers.
|
||||
|
||||
> Note: the design principle is the abstraction and summary of representational design. However, users’ perception of the entire product is from global aspect to local aspect. So it is not desirable to ignore the full picture and only use partial principles. For the design principles, designers should learn them rationally, and then abandon them bravely.
|
||||
|
||||
---
|
||||
|
||||
<div class="resource-cards">
|
||||
<a target="_blank" href="http://www.peachpit.com/store/non-designers-design-book-9780133966152" class="resource-card">
|
||||
<img src="http://www.peachpit.com/ShowCover.aspx?isbn=9780133966152&type=f">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Non-Designer's Design Book</span>
|
||||
<span class="resource-card-description">Author: Robin Williams</span>
|
||||
<span class="resource-card-description">Publisher: Peachpit Press</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://shop.oreilly.com/product/9780596516253.do" class="resource-card">
|
||||
<img src="http://akamaicovers.oreilly.com/images/9780596516253/cat.gif">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Designing Web Interfaces</span>
|
||||
<span class="resource-card-description">Author: Bill Scott, Theresa Neil</span>
|
||||
<span class="resource-card-description">Publisher: O'Reilly Media</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
#### Ant Design Principles
|
||||
|
||||
- [Proximity](/docs/spec/proximity)
|
||||
- [Alignment](/docs/spec/alignment)
|
||||
- [Contrast](/docs/spec/contrast)
|
||||
- [Repetition](/docs/spec/repetition)
|
||||
- [Make it Direct](/docs/spec/direct)
|
||||
- [Keep it Lightweight](/docs/spec/lightweight)
|
||||
- [Stay on the Page](/docs/spec/stay)
|
||||
- [Provide Invitation](/docs/spec/invitation)
|
||||
- [Use Transition](/docs/spec/transition)
|
||||
- [React Immediately](/docs/spec/reaction)
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
category: 设计原则
|
||||
order: 0
|
||||
title: 引言
|
||||
---
|
||||
|
||||
『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
|
||||
|
||||
我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下设计原则，为『设计者』提供解决具体问题的准则和启示。
|
||||
|
||||
> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。
|
||||
|
||||
---
|
||||
|
||||
<div class="resource-cards">
|
||||
<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">写给大家看的设计书</span>
|
||||
<span class="resource-card-description">作者: Robin Williams</span>
|
||||
<span class="resource-card-description">出版社: 人民邮电出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
|
||||
<span class="resource-card-content">
|
||||
<span class="resource-card-title">Web 界面设计</span>
|
||||
<span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
|
||||
<span class="resource-card-description">出版社: 电子工业出版社</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
#### Ant Design 十大设计原则
|
||||
|
||||
- [亲密性 Proximity](/docs/spec/proximity)
|
||||
- [对齐 Alignment](/docs/spec/alignment)
|
||||
- [对比 Contrast](/docs/spec/contrast)
|
||||
- [重复 Repetition](/docs/spec/repetition)
|
||||
- [直截了当 Make it Direct](/docs/spec/direct)
|
||||
- [简化交互 Keep it Lightweight](/docs/spec/lightweight)
|
||||
- [足不出户 Stay on the Page](/docs/spec/stay)
|
||||
- [提供邀请 Provide Invitation](/docs/spec/invitation)
|
||||
- [巧用过渡 Use Transition](/docs/spec/transition)
|
||||
- [即时反应 React Immediately](/docs/spec/reaction)
|
||||
@ -16,7 +16,6 @@ While there is a possibility of too much feedback (or, more accurately, too much
|
||||
|
||||
## Lookup Patterns
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncetain." src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">
|
||||
@ -37,6 +36,7 @@ Refining Search: Refining Search provides a set of live filters that allow the s
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## Live Suggest
|
||||
|
||||
<img class="preview-img" align="right" alt="example of Live Preview" description="Depending on the type of the input from the user, the system provides instant feedback on password strength and validation." src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png">
|
||||
|
||||
@ -16,7 +16,6 @@ title: 即时反应
|
||||
|
||||
## 查询模式
|
||||
|
||||
|
||||
<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png">
|
||||
|
||||
<img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">
|
||||
@ -37,6 +36,7 @@ title: 即时反应
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 反馈模式
|
||||
|
||||
<img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入，提供关于密码强度和有效性的实时反馈。" src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png">
|
||||
|
||||
@ -69,10 +69,6 @@ Calling out an Object: Click the page element and call out a new object.
|
||||
|
||||
If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.
|
||||
|
||||
<br>
|
||||
|
||||
<p><span class="waiting">Image (coming soon)</span></p>
|
||||
|
||||
---
|
||||
|
||||
## Natural Motion
|
||||
|
||||
@ -1,122 +0,0 @@
|
||||
---
|
||||
category:
|
||||
zh-CN: 设计基础
|
||||
en-US: Design Fundamental
|
||||
order: 1
|
||||
title:
|
||||
zh-CN: 排版
|
||||
en-US: Typography
|
||||
---
|
||||
|
||||
良好的排版规范能大大提升用户的视觉体验。
|
||||
|
||||
---
|
||||
|
||||
## 行高和段落
|
||||
|
||||
考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距决定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距决定了段落上下的间距，一般为字号的一倍宽。
|
||||
|
||||
<div class="row" style="width: 80%">
|
||||
<div class="col col-12 paragraph-12px">
|
||||
<h3>12px 段落</h3>
|
||||
<p>汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。</p>
|
||||
<p>另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。</p>
|
||||
<p>文案来自 <a href="https://github.com/vinta/paranoid-auto-spacing#%E7%82%BA%E4%BB%80%E9%BA%BC%E4%BD%A0%E5%80%91%E5%B0%B1%E6%98%AF%E4%B8%8D%E8%83%BD%E5%8A%A0%E5%80%8B%E7%A9%BA%E6%A0%BC%E5%91%A2">此处</a>。</p>
|
||||
</div>
|
||||
<div class="col col-12 paragraph-14px">
|
||||
<h3>14px 段落</h3>
|
||||
<p>汉学家称这个空白字为「盘古之白」，因为它劈开了全角字和半角字之间的混沌。</p>
|
||||
<p>另有研究显示，打字的时候不喜欢在中文和英文之间加空格的人，感情路都走得很辛苦，有七成的比例会在 34 岁的时候跟自己不爱的人结婚，而其余三成的人最后只能把遗产留给自己的猫。毕竟爱情跟书写都需要适时地留白。</p>
|
||||
<p>文案来自 <a href="https://github.com/vinta/paranoid-auto-spacing#%E7%82%BA%E4%BB%80%E9%BA%BC%E4%BD%A0%E5%80%91%E5%B0%B1%E6%98%AF%E4%B8%8D%E8%83%BD%E5%8A%A0%E5%80%8B%E7%A9%BA%E6%A0%BC%E5%91%A2">此处</a>。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.paragraph-14px, .paragraph-12px {
|
||||
padding: 15px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.paragraph-14px p,
|
||||
.paragraph-12px p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.paragraph-14px {
|
||||
font-size: 14px;
|
||||
}
|
||||
.paragraph-12px {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## 标点和空格
|
||||
|
||||
<img style="float: right; width: 200px;" src="https://t.alipayobjects.com/images/T1KrXhXlxnXXXXXXXX.png" />
|
||||
|
||||
1. 使用全角中文标点。
|
||||
2. 遇到完整的英文整句、特殊名词，其内容使用半角标点。
|
||||
3. 数字使用半角字符。
|
||||
4. 不重复使用标点符号。
|
||||
|
||||
### 空格规范
|
||||
|
||||
1. 中文和英文间需要空格。
|
||||
2. 数字与单位之间需要增加空格。
|
||||
例外：度、百分比与数字之间不需要增加空格。
|
||||
3. 中文链接之间增加空格。
|
||||
|
||||
|
||||
## 文字背景
|
||||
|
||||
当文字和背景明暗对比小于一定比值时，人眼识别文字信息将会变得吃力，尤其在明亮的室外或晃动的情况下。
|
||||
|
||||
方法：若彩色背景，可先将色彩去色转为黑白，分别吸取并查看背景和文字的 `HSV` 色值。
|
||||
两者的 V 值的差额便是明暗对比差。这个明暗对比差建议不小于 40。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1UYphXe8lXXXXXXXX.png" width="90%">
|
||||
|
||||
|
||||
## 对齐
|
||||
|
||||
### 中文/英文居左对齐
|
||||
|
||||
中文和英文均采用左对齐的方式，是因为文字的阅读顺序一般是从左到右的。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1nHhhXl4mXXXXXXXX.png" width="100%">
|
||||
|
||||
### 数字/小数点对齐
|
||||
|
||||
<img style="float: right; width: 400px;" src="https://t.alipayobjects.com/images/T1YbthXhRkXXXXXXXX.png" />
|
||||
|
||||
<p style="height:220px;width:380px;">数字通常采用右对齐或小数点对齐，这样便于对个十百千位上的数字进行对比。</p>
|
||||
|
||||
|
||||
### 冒号对齐
|
||||
|
||||
<img style="float: right; width: 400px;" src="https://t.alipayobjects.com/images/T1hcJhXnlXXXXXXXXX.png" />
|
||||
|
||||
<p style="height:220px;width:380px;">以冒号对齐的方式在表单中尤其常见。主要是为了区分标题和内容区块，除了美观简洁外，让用户能迅速看清标题减少出错概率。</p>
|
||||
|
||||
## 文案长度
|
||||
|
||||
语言通常是越简单越明确，而提示性文字更需要简明扼要，让用户一目了然，减少操作失误。提示性句子长度视业务而定，建议一般不超过 16–18 个字。
|
||||
|
||||
<img style="float: right; width: 300px; margin:30px 100px;" src="https://t.alipayobjects.com/images/T17cthXgpbXXXXXXXX.png" />
|
||||
|
||||
保持简明准确的方法：
|
||||
|
||||
- 每个句子只包含一个观点；
|
||||
- 使用明确的词；
|
||||
- 尽可能使用主动语态少用被动语态；
|
||||
|
||||
## 层级引导
|
||||
|
||||
我们通常使用对比的手法来区分出信息的层次感，信息主次分明能准确地将信息清晰地传达给用户，让用户第一眼获取所需资讯，提升阅读体验。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1GYBhXghjXXXXXXXX.png" width="600">
|
||||
|
||||
### Squint test
|
||||
|
||||
我们可以采用 [模糊测试](https://chrome.google.com/webstore/detail/the-squint-test/gppnipfbappicilfniaimcnagbpfflpg) 的方法，即眯起眼睛从整体来检视结构上的合理与否。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1bY4hXkpfXXXXXXXX.png" width="600">
|
||||
@ -89,7 +89,7 @@
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"babel-preset-stage-0": "^6.16.0",
|
||||
"bisheng": "^0.22.0",
|
||||
"bisheng-plugin-antd": "^0.12.0",
|
||||
"bisheng-plugin-antd": "^0.13.0",
|
||||
"bisheng-plugin-description": "^0.1.1",
|
||||
"bisheng-plugin-react": "^0.5.0",
|
||||
"bisheng-plugin-toc": "^0.4.0",
|
||||
|
||||
@ -14,10 +14,8 @@ module.exports = {
|
||||
htmlTemplate: './site/theme/static/template.html',
|
||||
themeConfig: {
|
||||
categoryOrder: {
|
||||
设计原则: 0,
|
||||
Principles: 0,
|
||||
设计基础: 1,
|
||||
'Design Fundamental': 1,
|
||||
设计原则: 2,
|
||||
Principles: 2,
|
||||
},
|
||||
typeOrder: {
|
||||
General: 0,
|
||||
|
||||
@ -32,13 +32,16 @@ a {
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 130px 120px 40px;
|
||||
padding: 0 40px 120px;
|
||||
margin-left: -1px;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #e9e9e9;
|
||||
position: relative;
|
||||
&-component {
|
||||
padding-right: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #f50;
|
||||
background: @error-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -79,7 +79,7 @@
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
color: #999;
|
||||
color: @text-color-secondary;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
.preview-image-box img {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
transition: all .3s;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-base;
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes.pack img {
|
||||
.preview-image-boxes.preview-image-boxes-with-carousel img {
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
|
||||
}
|
||||
@ -128,10 +128,9 @@
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
text-align: left;
|
||||
bottom: -10px;
|
||||
li {
|
||||
margin: 0;
|
||||
bottom: 4px;
|
||||
li button {
|
||||
background: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { PropTypes } from 'react';
|
||||
import { Link } from 'bisheng/router';
|
||||
import { Row, Col, Menu, Icon } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import Article from './Article';
|
||||
import ComponentDoc from './ComponentDoc';
|
||||
import * as utils from '../utils';
|
||||
@ -147,18 +148,24 @@ export default class MainContent extends React.Component {
|
||||
const menuItems = utils.getMenuItems(
|
||||
moduleData, this.context.intl.locale
|
||||
);
|
||||
const categories = Object.keys(menuItems).filter(isNotTopLevel);
|
||||
const topLevel = this.generateSubMenuItems(menuItems.topLevel);
|
||||
const subMenu = Object.keys(menuItems).filter(isNotTopLevel)
|
||||
.sort((a, b) => themeConfig.categoryOrder[a] - themeConfig.categoryOrder[b])
|
||||
.map((category) => {
|
||||
const subMenuItems = this.generateSubMenuItems(menuItems[category]);
|
||||
return (
|
||||
<SubMenu title={<h4>{category}</h4>} key={category}>
|
||||
{subMenuItems}
|
||||
const result = [...topLevel];
|
||||
result.forEach((item, i) => {
|
||||
const insertCategory = categories.filter(
|
||||
cat => (themeConfig.categoryOrder[cat] ? themeConfig.categoryOrder[cat] < i : i === result.length - 1)
|
||||
)[0];
|
||||
if (insertCategory) {
|
||||
const target = (
|
||||
<SubMenu title={<h4>{insertCategory}</h4>} key={insertCategory}>
|
||||
{this.generateSubMenuItems(menuItems[insertCategory])}
|
||||
</SubMenu>
|
||||
);
|
||||
});
|
||||
return [...topLevel, ...subMenu];
|
||||
result.splice(i, 0, target);
|
||||
categories.splice(categories.indexOf(insertCategory), 1);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
flattenMenu(menu) {
|
||||
@ -192,6 +199,9 @@ export default class MainContent extends React.Component {
|
||||
const menuItems = this.getMenuItems();
|
||||
const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
|
||||
const localizedPageData = props.localizedPageData;
|
||||
const mainContainerClass = classNames('main-container', {
|
||||
'main-container-component': !!props.demos,
|
||||
});
|
||||
return (
|
||||
<div className="main-wrapper">
|
||||
<Row>
|
||||
@ -206,7 +216,7 @@ export default class MainContent extends React.Component {
|
||||
{menuItems}
|
||||
</Menu>
|
||||
</Col>
|
||||
<Col lg={20} md={18} sm={24} xs={24} className="main-container">
|
||||
<Col lg={20} md={18} sm={24} xs={24} className={mainContainerClass}>
|
||||
{
|
||||
props.demos ?
|
||||
<ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
|
||||
|
||||
Loading…
Reference in New Issue
Block a user