ant-design/docs/spec/colors.zh-CN.md

104 lines
5.3 KiB
Markdown
Raw Normal View History

2016-03-31 14:17:09 +08:00
---
docs: v5 site upgrade (#38328) * build: try to use dumi as doc tool * docs: migrate demo structure to dumi way * refactor: use type export & import * docs: migrate demo previewer to dumi * docs: create empty layout & components * docs: apply custom rehype plugin * docs: create empty extra pages * docs: Add Banner component * chore: move theme tsconfig.json * docs: home page init * docs: migrate header (#37896) * docs: header * docs: update * docs: home init * clean up * test: fix site lint * chore: tsc ignore demo * chore: dumi demo migrate script * chore: cards * docs: home layout * docs: Update locale logic * docs: fix getLink logic * chore: fix ci (#37899) * chore: fix ci * ci: remove check-ts-demo * ci: preview build * test: ignore demo.tsx * chore: update script * test: update snapshot * test: update node and image test * chore: add .surgeignore * docs: layout providers (#37908) * docs: add components sidebar (#37923) * docs: sidebar * docs: update docs title * docs: update design doc * chore: code clean * docs: handle changelog page * docs: add title * docs: add subtitle * docs: active header nav * chore: code clean * docs: overview * chore: code clean * docs: update intl (#37918) * docs: update intl * chore: code clean * docs: update favicons * chore: update testPathIgnorePatterns * chore: code clean * chore: code clean * chore: copy 404.html (#37996) * docs: Home page theme picker * chore: Update migrate script * docs: home page update * docs: theme editor style * docs: theme lang * chore: update migrate.js * docs: fix demo (#38094) * chore: update migrate.js * docs: update md * docs: update demo * test: fix snapshot * chore: move debug to code attr in migrate script * chore: update md Co-authored-by: PeachScript <scdzwyxst@gmail.com> * feat: overview page * feat: Migrate `404` page (#38118) * feat: migrate IconSearch component (#37916) * feat<site/IconSearch>: copy IconDisplay from site to .dumi * feat<site/IconSearch>: change docs of icon * feat<site/IconSearch>: tweak * feat<site/IconSearch>: use useIntl instead of injectIntl * feat<site/IconSearch>: fix ts type error * feat<site/IconSearch>: use intl.formatMessage to render text * docs: Adjust home btn sizw * docs: Update doc * feat: v5 site overview page (#38131) * feat: site * fix: fix * feat: v5 site overview page * fix: fix path * fix: fix * fix: fix * docs: fix margin logic * feat: v5 site change-log page (#38137) * feat: v5 site change-log page (#38162) * docs: site redirect to home pag * docs: theme picker * docs: use react-intl from dumi (#38183) * docs: Theme Picker * docs: update dumi config * docs: home back fix * docs: picker colorful * docs: locale of it * docs: update components desc * docs: site of links * docs: update components list * docs: update desc * feat: Migrate `DemoWrapper` component (#38166) * feat: Migrate `DemoWrapper` component * feat: remove invalid comments and add comment for `key` prop * docs: FloatButton pure panel * chore: update demo * chore: update dumi config * Revert "chore: update demo" This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e. * chore: test logic adjust to support cnpm modules * chore: add locale alias * docs: /index to / * docs: add locale redirect head script * chore: adjust compact * docs: fix missing token * feat: compact switch * chore: code clean * docs: update home * docs: fix radius token * docs: hash of it * chore: adjust home page * docs: Add background map * docs: site theme bac logic * docs: avatar * docs: update logo color * docs: home banner * docs: adjust tour size * docs: purepanl update * docs: transfooter * docs: update banner gif * docs: content (#38361) * docs: title & EditButton * docs: content * chore: fix toc * docs: resource page * docs: transform resource data from hast * docs: filename & Resource Card * chore: enable prerender * chore: remove less * docs: toc style * chore: fix lint * docs: fix Layout page * docs: fix CP page * chore: update demos * docs: workaround for export dynamic html * chore: enable demo eslint * docs: table style * fix: header shadow * chore: update snapshot * fix: toc style * docs: add title * docs: Adjust site * feat: helmet * docs: site css * fix: description * feat: toc debug * docs: update config-provider * feat: use colorPanel * fix: colorPanel value * feat: anchor ink ball style * feat: apply theme editor * fix: code block style * chore: update demo * chore: fix lint * chore: code clean * chore: update snapshot * feat: ts2js * chore: description * docs: site ready for ssr includes: - move client render logic to useEffect in site theme - extract antd cssinjs to a single css file like bisheng - workaround to support react@18 pipeableStream for emotion * chore: bump testing lib * docs: font size of title * chore: remove react-sortable-hoc * chore: update snapshot * chore: update script Co-authored-by: PeachScript <scdzwyxst@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: zqran <uuxnet@gmail.com> Co-authored-by: TrickyPi <530257315@qq.com> Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00
group:
title: 全局样式
order: 1
2017-12-22 17:49:38 +08:00
order: 0
title: 色彩
2016-03-31 14:17:09 +08:00
---
2015-08-05 17:35:52 +08:00
2017-12-25 22:15:35 +08:00
Ant Design 将色彩体系解读成两个层面:系统级色彩体系和产品级色彩体系。
2015-08-05 17:35:52 +08:00
2017-12-25 22:15:35 +08:00
系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。
2015-08-05 17:35:52 +08:00
---
2018-08-31 17:03:27 +08:00
## 设计师专属
2018-08-28 17:13:39 +08:00
2019-05-07 14:57:32 +08:00
安装 [💎 Kitchen Sketch 插件 💎](https://kitchen.alipay.com),不但可以使用 Ant Design 官方色板库,还可以管理自己的专属色板。
2018-08-28 17:13:39 +08:00
2017-12-25 22:15:35 +08:00
## 色彩模型
2015-08-05 17:35:52 +08:00
2017-12-25 22:15:35 +08:00
Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期,同时也方便团队间的沟通。
2017-01-12 21:51:40 +08:00
2017-12-25 22:15:35 +08:00
## 系统级色彩体系
2017-01-12 21:51:40 +08:00
Ant Design 系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉,结合蚂蚁的技术基因,形成了特有的 12 色。进一步又通过大量的观察,捕捉不同色彩在自然光下的变化规律,借助美术中素描的思路,对 12 个颜色进行了衍生。在中性色板的定义上,则是平衡了可读性、美感以及可用性得出的。
2017-01-12 21:51:40 +08:00
2017-12-25 22:15:35 +08:00
### 基础色板
2018-01-09 19:05:39 +08:00
Ant Design 的基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。
<ColorPalettes></ColorPalettes>
2017-12-25 22:15:35 +08:00
Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制,结合了色彩自然变化的规律,我们得出了一套色彩生成工具,当有进一步色彩设计需求时,设计者只需按照一定规则定义完毕主色,便可以自动获得一系列完整的衍生色。
2018-07-30 16:21:59 +08:00
> Ant Design 三代色板的历史可以参看社区文章:[Ant Design 色板生成算法演进之路](https://zhuanlan.zhihu.com/p/32422584)。
2017-12-25 22:15:35 +08:00
### 中性色板
2020-01-03 18:09:18 +08:00
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到合理地选择中性色能够令页面信息具备良好的主次关系助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。
2018-01-04 14:10:31 +08:00
<Palette direction="horizontal"></Palette>
2017-12-25 22:15:35 +08:00
2020-01-02 15:04:19 +08:00
### 数据可视化色板
2017-12-25 22:15:35 +08:00
数据可视化色板是在基础色板以及中性色板的基础上,融合 AntV 「有效、清晰、准确、美」的原则产生的。[查看色板](https://antv.vision/zh/docs/specification/language/palette)
2017-03-17 20:14:11 +08:00
### 色板生成工具
如果上面的色板不能满足你的需求你可以选择一个主色Ant Design 的色彩生成算法会为你生成完整的色板。
<ColorPaletteTool></ColorPaletteTool>
2017-03-17 20:14:11 +08:00
### 在代码中使用色板
2022-11-16 23:38:38 +08:00
我们为程序员提供了色板的 JavaScript 的使用方式。
- **JavaScript**
```
npm install @ant-design/colors
```
```js
import { blue } from '@ant-design/colors';
2020-07-17 17:56:59 +08:00
console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
console.log(blue.primary); // '#1890FF'
```
更多使用方式:[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
---
2017-12-25 22:15:35 +08:00
## 产品级色彩体系
### 品牌色的应用
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1c74TKxuEW4AAAAAAAAAAABkARQnAQ">
</ImagePreview>
品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时,需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色,我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色Hex 值为 <ColorChunk color="#1890ff" /></ColorChunk>,应用场景包括:关键行动点,操作状态、重要信息高亮,图形化等场景。
2017-12-25 22:15:35 +08:00
### 功能色
<ImagePreview>
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QY4JRa92gHQAAAAAAAAAAABkARQnAQ">
</ImagePreview>
2017-12-25 22:15:35 +08:00
功能色代表了明确的信息以及状态比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下功能色尽量保持一致不要有过多的自定义干扰用户的认知体验。Ant Design 的功能色板如右图:
2017-12-25 22:15:35 +08:00
### 中性色
<ImagePreview>
<TokenCompare tokenNames="colorTextHeading|colorText|colorTextSecondary|colorTextDisabled|colorBorder|colorSplit|colorBgLayout"></TokenCompare>
</ImagePreview>
Ant Design 的中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线等场景中也非常常见。产品中性色的定义需要考虑深色背景以及浅色背景的差异,同时结合 WCAG 2.0 标准。Ant Design 的中性色在落地的时候是按照透明度的方式实现的,具体色板如右图:
2017-12-25 22:15:35 +08:00
---
2017-12-25 22:15:35 +08:00
## 企业级产品设计中的色彩应用
2017-12-25 22:15:35 +08:00
在蚂蚁中后台的设计中,我们对于色彩的态度是克制的。色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率,影响信息的清晰传达的这些原则之上,理性的选择颜色是关键。当然在配图插画以及展示性页面中可以适当打破这一思路。