mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
update docs
This commit is contained in:
hi-caicai
commit
1e06f1f8b7
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
@ -2,6 +2,6 @@ First of all, thanks for your contribution! :-)
|
||||
|
||||
Please makes sure these boxes are checked before submitting your PR, thank you!
|
||||
|
||||
[ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
|
||||
[ ] Rebase before creating a PR to keep commit history clear.
|
||||
[ ] Add some descriptions and refer relative issues for you PR.
|
||||
* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
|
||||
* [ ] Rebase before creating a PR to keep commit history clear.
|
||||
* [ ] Add some descriptions and refer relative issues for you PR.
|
||||
|
||||
24
CHANGELOG.md
24
CHANGELOG.md
@ -4,6 +4,30 @@
|
||||
|
||||
---
|
||||
|
||||
## 0.12.10
|
||||
|
||||
- 修复 0.12.9 版本 npm 包打包错误的问题。
|
||||
|
||||
## 0.12.9
|
||||
|
||||
`2016-03-11`
|
||||
|
||||
- Transfer
|
||||
- 可以定义 `notFoundContent `。
|
||||
- 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。
|
||||
- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。
|
||||
- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。
|
||||
- 调整 Tabs 样式。
|
||||
- 修复 Table 中的 Pagination 默认配置问题。
|
||||
- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141)
|
||||
- 修复 DatePicker `style` 设置错误的问题。
|
||||
- 优化 Popconfirm、Button 样式。
|
||||
- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。
|
||||
- 修复 Dialog 样式问题。
|
||||
- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159)
|
||||
- 优化 Menu、Tabs 在 Chorme 下的渲染问题。
|
||||
- Form 默认阻止 submit 事件。
|
||||
|
||||
## 0.12.8
|
||||
|
||||
`2016-03-06`
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
|
||||
|
||||
主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。
|
||||
主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -35,6 +35,9 @@ Form.propTypes = {
|
||||
|
||||
Form.defaultProps = {
|
||||
prefixCls: 'ant-form',
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
};
|
||||
|
||||
Form.childContextTypes = {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import Dialog from 'rc-dialog';
|
||||
import { Dom } from 'rc-util';
|
||||
import Button from '../button';
|
||||
@ -8,7 +8,7 @@ function noop() {}
|
||||
let mousePosition;
|
||||
let mousePositionEventBinded;
|
||||
|
||||
let AntModal = React.createClass({
|
||||
const AntModal = React.createClass({
|
||||
getDefaultProps() {
|
||||
return {
|
||||
prefixCls: 'ant-modal',
|
||||
@ -24,6 +24,21 @@ let AntModal = React.createClass({
|
||||
};
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
prefixCls: PropTypes.string,
|
||||
onOk: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
okText: PropTypes.node,
|
||||
cancelText: PropTypes.node,
|
||||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
confirmLoading: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
align: PropTypes.object,
|
||||
footer: PropTypes.node,
|
||||
title: PropTypes.node,
|
||||
closable: PropTypes.bool,
|
||||
},
|
||||
|
||||
handleCancel(e) {
|
||||
this.props.onCancel(e);
|
||||
},
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||
| okText | 确认按钮文字 | String | 确定 |
|
||||
| cancelText | 取消按钮文字 | String | 取消 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | true |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | true |
|
||||
| align | 浮层自定义位置 | Object, [dom-align](https://github.com/yiminghe/dom-align) | 距离顶部 100px |
|
||||
|
||||
### Modal.xxx()
|
||||
|
||||
|
||||
@ -56,12 +56,12 @@ export default React.createClass({
|
||||
},
|
||||
onVisibleChange(visible) {
|
||||
this.setVisible(visible);
|
||||
this.props.onVisibleChange(visible);
|
||||
},
|
||||
setVisible(visible) {
|
||||
if (!('visible' in this.props)) {
|
||||
this.setState({ visible });
|
||||
}
|
||||
this.props.onVisibleChange(visible);
|
||||
},
|
||||
render() {
|
||||
const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props;
|
||||
|
||||
@ -531,7 +531,7 @@ let AntTable = React.createClass({
|
||||
|
||||
getLocalData(dataSource) {
|
||||
let state = this.state;
|
||||
let data = dataSource || this.props.dataSource;
|
||||
let data = dataSource || this.props.dataSource || [];
|
||||
// 排序
|
||||
if (state.sortOrder && state.sorter) {
|
||||
data = data.slice(0);
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 6
|
||||
- order: 6
|
||||
|
||||
---
|
||||
|
||||
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
|
||||
|
||||
---
|
||||
|
||||
## 常规型
|
||||
|
||||
### 交互
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 5
|
||||
- order: 5
|
||||
|
||||
---
|
||||
|
||||
表格也用于展示复杂和高度结构化数据。
|
||||
|
||||
---
|
||||
|
||||
## 案例
|
||||
|
||||
### 多列数据
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
- category: 2
|
||||
- order: 2
|
||||
|
||||
---
|
||||
|
||||
作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
|
||||
|
||||
设计者进行表单设计时，应当注意这几点：
|
||||
@ -23,6 +21,8 @@
|
||||
|
||||
4. 不要提出不必要的问题。
|
||||
|
||||
---
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
- category: 3
|
||||
- order: 3
|
||||
|
||||
---
|
||||
|
||||
列表是非常常见的界面元素，有多种使用场景：
|
||||
|
||||
- 获取概览
|
||||
@ -13,6 +11,8 @@
|
||||
- 排序与过滤
|
||||
- 重新安排、添加、删除或重新分类列表项
|
||||
|
||||
---
|
||||
|
||||
## 交互
|
||||
|
||||
### 显示详情信息
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
- category: 1
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
|
||||
|
||||
1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
|
||||
2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
|
||||
3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
|
||||
|
||||
---
|
||||
|
||||
## 常见导航
|
||||
|
||||
<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 4
|
||||
- order: 4
|
||||
|
||||
---
|
||||
|
||||
表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
|
||||
|
||||
---
|
||||
|
||||
## 内容
|
||||
|
||||
<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 1
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
Ant Design React 致力于提供给程序员**愉悦**的开发体验。
|
||||
|
||||
---
|
||||
|
||||
## 第一个例子
|
||||
|
||||
最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
- category: 0
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
|
||||
|
||||
<div class="pic-plus">
|
||||
@ -24,6 +22,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
|
||||
## 特性
|
||||
|
||||
|
||||
@ -5,13 +5,15 @@
|
||||
|
||||
---
|
||||
|
||||
这里只列出升级中的不兼容改动，其他改动见 [Changelog](/changelog)。
|
||||
|
||||
## 0.11 => 0.12
|
||||
|
||||
---
|
||||
|
||||
### 使用 Form 提供的校验功能代替 Validation
|
||||
|
||||
Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子([#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized))。
|
||||
Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子（[#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized)）。
|
||||
|
||||
### Progress `format` 属性的值改为函数
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
- order: 2
|
||||
- subtitle: Alignment
|
||||
|
||||
---
|
||||
|
||||
正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
|
||||
|
||||
> 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』
|
||||
@ -14,8 +12,8 @@
|
||||
|
||||
## 文案类对齐
|
||||
|
||||
<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/halNrWDrYoFPYzC.png">
|
||||
<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/WBHYfadyasYcEIN.png">
|
||||
<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png">
|
||||
<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">
|
||||
|
||||
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
|
||||
|
||||
@ -23,7 +21,7 @@
|
||||
|
||||
## 表单类对齐
|
||||
|
||||
<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/ZRZQGhrTKBJUJYd.png">
|
||||
<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png">
|
||||
|
||||
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。
|
||||
|
||||
## ANTD Color
|
||||
## Ant Design Colors
|
||||
|
||||
Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。
|
||||
|
||||
|
||||
@ -4,14 +4,10 @@
|
||||
- order: 3
|
||||
- subtitle: Contrast
|
||||
|
||||
---
|
||||
|
||||
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
|
||||
|
||||
> 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 主次关系对比
|
||||
|
||||
@ -4,12 +4,8 @@
|
||||
- order: 5
|
||||
- subtitle: Make it Direct
|
||||
|
||||
---
|
||||
|
||||
正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 页内编辑
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。
|
||||
|
||||
|
||||
### 质量和重量
|
||||
## 质量和重量
|
||||
|
||||
在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。
|
||||
|
||||
|
||||
@ -3,11 +3,9 @@
|
||||
- category: 1
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
|
||||
|
||||
<div style="margin-left:-40px;margin-right:-40px;">
|
||||
<div style="margin-left:-40px;margin-right:-40px;overflow:hidden;">
|
||||
<div class="col-8 features">
|
||||
<img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
|
||||
<h5>微小</h5>
|
||||
@ -27,7 +25,7 @@
|
||||
|
||||
<style>
|
||||
.features {
|
||||
padding: 40px;
|
||||
padding: 0 40px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.features h5 {
|
||||
@ -36,6 +34,8 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
---
|
||||
|
||||
## 微小
|
||||
|
||||
### 微创新
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 设计基础
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。
|
||||
|
||||
---
|
||||
|
||||
## 字体家族
|
||||
|
||||
- 中文字体族：
|
||||
|
||||
@ -3,8 +3,6 @@
|
||||
- category: 0
|
||||
- order: 0
|
||||
|
||||
---
|
||||
|
||||
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
|
||||
<img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
|
||||
</div>
|
||||
@ -13,6 +11,8 @@
|
||||
|
||||
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
|
||||
|
||||
---
|
||||
|
||||
## 谁在使用
|
||||
|
||||
- 蚂蚁金服
|
||||
|
||||
@ -4,22 +4,17 @@
|
||||
- order: 8
|
||||
- subtitle: Provide Invitation
|
||||
|
||||
---
|
||||
|
||||
|
||||
很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。
|
||||
|
||||
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
|
||||
|
||||
|
||||
> ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》
|
||||
|
||||
> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
|
||||
## 静态邀请
|
||||
|
||||
指通过可视化技术在页面上提供引导交互的邀请。
|
||||
|
||||
@ -4,14 +4,10 @@
|
||||
- order: 6
|
||||
- subtitle: Keep it Lightweight
|
||||
|
||||
---
|
||||
|
||||
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
|
||||
|
||||
> 注：** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 实时可见工具
|
||||
|
||||
@ -9,8 +9,6 @@ Ant Design 提供了一些预设的组件动画样式。
|
||||
|
||||
<div id="components-motion-demo-basic"></div>
|
||||
|
||||
## 组件动画
|
||||
|
||||
通过设置组件的 `transitionName` 指定组件动画。
|
||||
|
||||
| 组件 | 中文名 | 采用动画 |
|
||||
@ -255,4 +253,3 @@ ReactDOM.render(<Test/>, document.getElementById('components-motion-demo-basic')
|
||||
width:180px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
- order: 0
|
||||
- subtitle: Introduction
|
||||
|
||||
---
|
||||
|
||||
『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。
|
||||
|
||||
我们借鉴了《写给大家看的设计书》、《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">
|
||||
|
||||
@ -4,17 +4,13 @@
|
||||
- order: 1
|
||||
- subtitle: Proximity
|
||||
|
||||
---
|
||||
|
||||
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 纵向间距关系
|
||||
|
||||
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/clilcwkwtpZduHV.png">
|
||||
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/blBCqHsUJhKxxAU.png">
|
||||
|
||||
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
- order: 10
|
||||
- subtitle: React Immediately
|
||||
|
||||
---
|
||||
|
||||
『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。
|
||||
|
||||
就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
|
||||
@ -14,8 +12,6 @@
|
||||
|
||||
> ** 牛顿第三定律 ** ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 查询模式
|
||||
|
||||
@ -4,12 +4,8 @@
|
||||
- order: 4
|
||||
- subtitle: Repetition
|
||||
|
||||
---
|
||||
|
||||
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 重复元素
|
||||
|
||||
@ -4,16 +4,12 @@
|
||||
- order: 6
|
||||
- subtitle: Stay in the Page
|
||||
|
||||
---
|
||||
|
||||
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
|
||||
|
||||
> ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》
|
||||
|
||||
> ** 心流（Flow）：也有别名以化境 ** (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 覆盖层
|
||||
|
||||
@ -4,16 +4,12 @@
|
||||
- order: 9
|
||||
- subtitle: Use Transition
|
||||
|
||||
---
|
||||
|
||||
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
|
||||
|
||||
- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。
|
||||
- Receding: 与当前页无关的信息元素应采用适当方式移除。
|
||||
- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。
|
||||
|
||||
<br>
|
||||
|
||||
---
|
||||
|
||||
## 在视图变化时保持上下文
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
- category: 设计基础
|
||||
- order: 1
|
||||
|
||||
---
|
||||
|
||||
良好的排版规范能大大提升用户的视觉体验。
|
||||
|
||||
---
|
||||
|
||||
## 行高和段落
|
||||
|
||||
考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距決定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距決定了段落上下的间距，一般为字号的一倍宽。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "0.12.8",
|
||||
"version": "0.12.10",
|
||||
"title": "Ant Design",
|
||||
"description": "一个 UI 设计语言",
|
||||
"homepage": "http://ant.design/",
|
||||
@ -102,9 +102,9 @@
|
||||
"jsonp": "^0.2.0",
|
||||
"less": "~2.6.0",
|
||||
"less-loader": "^2.2.0",
|
||||
"lesshint-antd": "^1.2.1",
|
||||
"lesshint": "^1.2.1",
|
||||
"lodash": "^4.1.0",
|
||||
"nico-jsx": "~0.8.2",
|
||||
"nico-jsx": "~0.9.0",
|
||||
"postcss-loader": "^0.8.0",
|
||||
"pre-commit": "1.x",
|
||||
"querystring": "^0.2.0",
|
||||
|
||||
@ -341,6 +341,7 @@ footer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: #666;
|
||||
box-shadow: 0 1000px 0 1000px #fff;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -474,6 +475,7 @@ footer ul li > a {
|
||||
overflow: hidden;
|
||||
padding: 24px 0 0;
|
||||
margin-bottom: 24px;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -482,7 +484,8 @@ footer ul li > a {
|
||||
margin-left: 219px;
|
||||
padding: 0 40px 120px;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
min-height: 400px;
|
||||
min-height: 80vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -711,7 +714,7 @@ footer ul li > a {
|
||||
|
||||
.toc {
|
||||
font-size: 14px;
|
||||
margin: 20px 0;
|
||||
margin: 36px 0 24px;
|
||||
background: #fbfbfb;
|
||||
border-left: 2px solid #eee;
|
||||
}
|
||||
@ -1184,8 +1187,9 @@ a.entry-link:hover .anticon-smile {
|
||||
|
||||
.preview-image-boxes {
|
||||
float: right;
|
||||
margin: 0 0 70px 20px;
|
||||
margin: 0 0 70px 28px;
|
||||
width: 616px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.preview-image-boxes + .preview-image-boxes {
|
||||
|
||||
@ -101,14 +101,14 @@
|
||||
&-clicked:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-radius: inherit;
|
||||
border: 0 solid @primary-color;
|
||||
opacity: 0.4;
|
||||
animation: buttonEffect 0.36s ease forwards;
|
||||
animation: buttonEffect 0.32s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
background-color: rgba(55, 55, 55, 0.6);
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
filter: alpha(opacity=50);
|
||||
filter: ~"alpha(opacity=50)";
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
|
||||
&-item-active,
|
||||
&-submenu-title:hover {
|
||||
transform: translateZ(0);
|
||||
background-color: tint(@primary-color, 90%);
|
||||
}
|
||||
|
||||
@ -56,10 +57,13 @@
|
||||
&-horizontal > &-item-active,
|
||||
&-horizontal > &-submenu &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-item-selected {
|
||||
color: @primary-color;
|
||||
// fix chrome render bug
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-inline,
|
||||
@ -78,6 +82,7 @@
|
||||
.@{menu-prefix-cls}-selected,
|
||||
.@{menu-prefix-cls}-item-selected {
|
||||
border-right: 2px solid @primary-color;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,6 +92,7 @@
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
margin-top: 7px;
|
||||
z-index: 1070;
|
||||
}
|
||||
|
||||
&-submenu-vertical > & {
|
||||
@ -95,6 +101,7 @@
|
||||
position: absolute;
|
||||
min-width: 160px;
|
||||
margin-left: 4px;
|
||||
z-index: 1070;
|
||||
}
|
||||
|
||||
&-item,
|
||||
@ -187,11 +194,13 @@
|
||||
top: 1px;
|
||||
float: left;
|
||||
border-bottom: 2px solid transparent;
|
||||
z-index: 1;
|
||||
|
||||
&-active,
|
||||
&-selected {
|
||||
border-bottom: 2px solid @primary-color;
|
||||
color: @primary-color;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
> a {
|
||||
@ -295,6 +304,7 @@
|
||||
&-dark&-horizontal > &-submenu:hover,
|
||||
&-dark&-horizontal > &-submenu &-submenu-title:hover {
|
||||
color: #fff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-dark &-item > a {
|
||||
@ -320,11 +330,13 @@
|
||||
border-right: 0;
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-dark &-item-active,
|
||||
&-dark &-submenu-title:hover {
|
||||
background-color: transparent;
|
||||
color: @primary-color;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.01);
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
}
|
||||
&-line-bg {
|
||||
border-radius: 100px;
|
||||
background-color: @primary-color;
|
||||
background-color: @info-color;
|
||||
transition: all 0.3s linear 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -23,10 +23,12 @@
|
||||
&-transition-forward {
|
||||
transition: right 0.3s @ease-in-out,
|
||||
left 0.3s @ease-in-out 0.3s * 0.3;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
&-transition-backward {
|
||||
transition: right 0.3s @ease-in-out 0.3s * 0.3,
|
||||
left 0.3s @ease-in-out;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -176,6 +178,7 @@
|
||||
|
||||
&:active {
|
||||
color: shade(@primary-color, 5%);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
@ -188,6 +191,7 @@
|
||||
|
||||
.@{tab-prefix-cls}-tab-active .@{tab-prefix-cls}-tab-inner {
|
||||
color: @primary-color;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,6 +224,7 @@
|
||||
|
||||
&-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active {
|
||||
animation-name: antMoveLeftIn;
|
||||
transform: translateZ(0);
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@ -236,6 +241,7 @@
|
||||
|
||||
&-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active {
|
||||
animation-name: antMoveRightOut;
|
||||
transform: translateZ(0);
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@ -249,6 +255,7 @@
|
||||
&-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active {
|
||||
animation-name: antMoveRightIn;
|
||||
animation-play-state: running;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-slide-horizontal-forward-leave {
|
||||
@ -263,6 +270,7 @@
|
||||
}
|
||||
|
||||
&-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active {
|
||||
transform: translateZ(0);
|
||||
animation-name: antMoveLeftOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
@ -397,11 +405,13 @@
|
||||
}
|
||||
&&-card &-tab-active {
|
||||
background: #fff;
|
||||
transform: translateZ(0);
|
||||
border-color: @border-color-base;
|
||||
color: @primary-color;
|
||||
}
|
||||
&&-card &-tab-active &-tab-inner {
|
||||
padding-bottom: 7px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
&&-card &-nav-wrap {
|
||||
margin-bottom: 0;
|
||||
@ -430,6 +440,7 @@
|
||||
&&-card &-tab-active .anticon-cross,
|
||||
&&-card &-tab:hover .anticon-cross {
|
||||
width: 16px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&-extra-content {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
|
||||
// Color
|
||||
@primary-color : #2db7f5;
|
||||
@info-color : #2db7f5;
|
||||
@success-color : #87d068;
|
||||
@error-color : #f50;
|
||||
@warning-color : #fa0;
|
||||
@ -117,7 +118,7 @@
|
||||
@legend-color : #999;
|
||||
@legend-border-color : @border-color-base;
|
||||
// Label
|
||||
@label-required-color : #f60;
|
||||
@label-required-color : #f50;
|
||||
@label-color : @text-color;
|
||||
// Input
|
||||
@input-height-base: 28px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user