mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
remove unused doc
This commit is contained in:
afc163
parent
de544ad21b
commit
d013952398
@ -8,15 +8,22 @@ title:
|
||||
en-US: Colors
|
||||
---
|
||||
|
||||
## 有意义的色彩
|
||||
设计中对色彩的运用不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向简洁实用一些。在选择色彩时有以下三个注意点：
|
||||
|
||||
色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。
|
||||
- 色彩应与产品定位相匹配，且符合用户心理认知；
|
||||
- 视觉层次应清晰分明，为重要行动点或关键信息定义一个主色，并建立视觉连续性；
|
||||
- 遵守 WCAG 2.0 的 标准，保证足够的对比度，让色彩更容易被视障碍（色盲）用户识别。
|
||||
|
||||
## Ant Design Colors
|
||||
|
||||
Ant Design 的色板由 8 种基本色彩组成，通过一套[精心设计的色彩算法](https://github.com/ant-design/ant-design/blob/734beb84ffc3f0469fbae1566aa8450f966cb261/components/style/color/colorPalette.less)，每种基本色又自动衍生出 10 种渐变色，其中第 6 种为基本色。
|
||||
Ant Design PC 端的色板由 10 个由浅至深的色彩单元格组成，我们为部分色彩格定义了默认使用场景，用户在进行色彩配色时只需根据关键词选择一条色板即可得到一套完整的系统配色方案。在理论上，在 UI 设计中的色彩都应取自这份色板。
|
||||
|
||||
经过设计师和程序员的精心调教，结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，得出一套[色板生成算法](https://github.com/ant-design/ant-design/blob/734beb84ffc3f0469fbae1566aa8450f966cb261/components/style/color/colorPalette.less)。使用者只需指定主色，便可导出一条完整的渐变色板。
|
||||
|
||||
Ant Design 的色板由 8 种基本色彩组成，每种基本色（第 6 格）又按上述算法衍生出 10 种渐变色。
|
||||
|
||||
> 注：在由浅至深的色板里，第 6 格色彩单元格普遍满足 [WCAG 2.0](http://leaverou.github.io/contrast-ratio/) 的 4.5:1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。
|
||||
|
||||
> 我们结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，调教出一套色彩算法。使用者只需指定主色，便可导出一条完整的渐变色板。
|
||||
|
||||
`````__react
|
||||
const rgbToHex = (rgbString) => {
|
||||
@ -118,118 +125,3 @@ const ExtendPalettes = React.createClass({
|
||||
});
|
||||
ReactDOM.render(<ExtendPalettes key="palettes" />, mountNode);
|
||||
`````
|
||||
|
||||
## 色彩和交互
|
||||
|
||||
设计元素本身由于交互行为会引发一系列细微的视觉变化，而元素本身的颜色变化有时也能很好的实现这一目的。在进行这类设计的同时，建议采取在颜色上添加黑色或者白色并按照 `n+5%` 的规律递增的方式来实现。以下图为例，当鼠标 hover 某个特定元素，就视为浮起，对应颜色就相应增加白色叠加，相反点击的行为可以理解为按下去，在颜色上就相应的增加黑色的叠加。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1ZHxhXdNmXXXXXXXX.png" width="100%">
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1fZJhXahgXXXXXXXX.png" width="100%">
|
||||
|
||||
## 色彩识别
|
||||
|
||||
合适的色彩对比为信息传达加分，同时也应放考虑到有颜色识别障碍人群的需求。我们将每种主色衍生出来的颜色进行了打标，在考虑对比颜色的选择时建议两种颜色对应标签数值的差要大于等于 5。
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1hLphXgXcXXXXXXXX.png" width="100%">
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/rmsweb/T1v2phXj8bXXXXXXXX.png" width="100%">
|
||||
|
||||
## 色彩换算工具
|
||||
|
||||
> 正数为变淡 `tint` ，负数为加深 `shade`。
|
||||
|
||||
`````__react
|
||||
const Values = require('values.js');
|
||||
const CopyToClipboard = require('react-copy-to-clipboard');
|
||||
const classNames = require('classnames');
|
||||
const antd = require('antd');
|
||||
const Button = antd.Button;
|
||||
const InputNumber = antd.InputNumber;
|
||||
const Slider = antd.Slider;
|
||||
const Tooltip = antd.Tooltip;
|
||||
const TintShadeTool = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
result: '#2db7f5',
|
||||
color: '#2db7f5',
|
||||
justCopied: false,
|
||||
darkBackground: false,
|
||||
value: 80
|
||||
};
|
||||
},
|
||||
handleChangeColor(e) {
|
||||
this.setState({
|
||||
color: e.target.value
|
||||
}, this.calculate);
|
||||
},
|
||||
handleChangeValue(value) {
|
||||
this.setState({
|
||||
value: value
|
||||
}, this.calculate);
|
||||
},
|
||||
componentDidMount() {
|
||||
this.calculate();
|
||||
},
|
||||
calculate() {
|
||||
if (this.state.value === 0) {
|
||||
this.setState({
|
||||
result: this.state.color
|
||||
});
|
||||
return;
|
||||
}
|
||||
const tintOrShade = this.state.value > 0 ? 'tint' : 'shade';
|
||||
const c = new Values(this.state.color);
|
||||
const resultColor = c[tintOrShade](Math.abs(this.state.value));
|
||||
this.setState({
|
||||
result: '#' + resultColor.hex,
|
||||
darkBackground: resultColor.getBrightness() < 50
|
||||
});
|
||||
},
|
||||
copySuccess(e) {
|
||||
this.setState({ justCopied: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ justCopied: false });
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
render() {
|
||||
const marks = {
|
||||
'-100': '加黑',
|
||||
'0': '原色',
|
||||
'100': '加白'
|
||||
};
|
||||
const className = classNames({
|
||||
'color-block': true,
|
||||
copied: this.state.justCopied,
|
||||
dark: this.state.darkBackground,
|
||||
});
|
||||
return <div style={{margin: '40px 0'}}>
|
||||
<div>
|
||||
<Tooltip title="点击色块复制色值">
|
||||
<CopyToClipboard
|
||||
className={className}
|
||||
onCopy={this.copySuccess}
|
||||
text={this.state.result}
|
||||
>
|
||||
<div style={{backgroundColor: this.state.result}} />
|
||||
</CopyToClipboard>
|
||||
</Tooltip>
|
||||
<span style={{width: 188, display: 'inline-block', fontFamily: 'Consolas'}}>{this.state.result}</span>
|
||||
<input className="ant-input" style={{width: 80, color: this.state.color, marginRight: 8}} value={this.state.color} onChange={this.handleChangeColor} />
|
||||
<InputNumber style={{width: 70}} value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} />
|
||||
<span style={{margin: '0 0 0 8px'}}>%</span>
|
||||
</div>
|
||||
<div style={{width: 420, margin: '40px 10px 60px'}}>
|
||||
<Slider value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} marks={marks} />
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<TintShadeTool key="tintShadeTool" />, mountNode);
|
||||
`````
|
||||
|
||||
Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的色彩标注。
|
||||
|
||||
less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和 `shade(#2db7f5, 80%)` 的语法。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user