今天完成的事情：了解UI颜色应用
明天计划的事情：做任务5
遇到的问题：无

收获：

一了解ant design 中的色彩理论  设计时取色的好地方

    Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色

    Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。 

    如果上面的色板不能满足需求，在色板生成工具中可以选择一个主色，Ant Design 的色彩生成算法会为你生成完整的色板。

网址https://ant.design/docs/spec/colors-cn

二 UI颜色应用

原则

 · 一致性

   在整个UI中，颜色的使用应保持统一，并且与其所代表的品牌匹配兼容。

· 独特性

   颜色应该让不同元素产生差异，使它们之间有足够的对比。

· 目的性

   颜色应有目的地使用，因为它能通过多种方式传达意义，例如表示元素间的关系和结构中的层次。

即颜色统一的同时有足够的对比，从而传达其意义

应用

• ·顶部和底部应用栏

识别应用栏（非融合应用栏与背景）

   顶部和底部应用栏都使用应用程序的主色。系统栏可使用主色的深浅衍生色来区分系统栏和顶部应用栏中的内容。

 主色（紫色500）用于顶部应用栏，系统栏上使用主色的深衍生色（紫色700）

 融合应用栏与背景

   当应用程序的顶部或底部应用栏的颜色与背景色一致时会融合在一起，从而突出内容而非结构。

    这个应用程序在应用栏、底部导航栏和背景上使用主色（蓝色700）对界面进行了明亮、无缝的布局，所以弱化了独立       元素，突出了内容。激活状态使用了辅助色黄色。它的底部导航包含阴影，可以表示两个面之间具有高度差。

·注 如果底部应用栏和浮动操作按钮颜色相同，最好使用阴影或相关方式给它们创造足够大的区别。

• 文字

颜色可以表示文本间的相对重要程度。当文本出现在各种使其难以阅读的图片或背景之上时，运用颜色可确保它们保持清晰可读

文字层级

颜色可提高文本的可见性和重要等级。

标题

重要文本（如选项卡和标题）可以使用主色和辅助色。

使用主色或辅助色强调较短的文本，例如标题。

可以使用主色或辅助色来突显链接。

·注 当文本置于图像上时，经常会引起可读性问题。在文本和图像间创建一个颜色层可以确保文本清晰可读。

• 按钮

这个应用程序在其已扩展的浮动操作按钮和纸片上使用了主色（粉红100），在滑块上使用了主色深衍生色（粉红900）。