在我们开始之前，选择颜色时请牢记设计原则：
用户是谁？他们的性质、习惯、偏好是什么？ 这个 UI 传达了什么信息？声音还是语气？UI 指南应该实现什么目标？
1.原色
通常是品牌颜色。原色是用户在产品中最常看到的颜色。最多使用一到两种颜色是理想的。
除了主色之外，设计师还可以根据具体情况，定制辅助色。
2. 强调色
用于强调操作和突出显示的信息：文本、号召性用语、浮动按钮、进度条、选择控件、特殊按钮、滑块、链接……从原色中，可以使用色轮组合提取强调色：类似色、单色、互补色、分裂互补色、三色…
如果所选的强调色相对于背景来说太暗或太亮，则应该有其他替代选项，但不应与原始颜色差别太大。
强调色应该只占整个产品颜色的 10% 左右。本文提到的理想模型是 60-30-10：60% 为原色，30% 为次原色，10% 为强调色。我认为这很合理，因为：参考了很多优秀的设计作品基本都是这个原则。然而，由于实际情况多种多样，我们不必照搬，只需符合这个模型大胆尝试即可。
3.语义色彩
错误、成功、警告、信息。这些颜色基于对信号心理学的深入研究：
- 红色——错误、危险、错误。
- 绿色——成功、安全、正确。
- 黄色——警报、注意、警告。
- 蓝色——表示信息。
4. 中性色
白色、黑色或灰色方案。这些颜色通常用于文本或背景。
为此，Material Design有一个巧妙的技巧。他们没有为黑色或灰色定义特定的代码，而是使用黑色的不透明度来应用排版值。换句话说，无需定义灰色代码，他们将黑色的不透明度调整到 54% 或 81% 左右。很聪明吧？
最重要的是，无论哪种方式，关键在于物体与背景的对比。检查这些颜色的对比度非常重要。这个网站可查看对比↓
colorable.jxnblk
Colorable 是一个测试文本颜色对比度的好工具，你可以尝试各种颜色，并根据对比度标准判断是否通过。
5.图表
为数据可视化创建一组按特定顺序排列的 10 或 20 种颜色。数据工程师可以用它来简化工作。然而，这项工作非常艰巨，请阅读参考资料以获取更多技巧。
- 分类：包含多种颜色，它们彼此对比，并按特定顺序排列。此集合用于呈现不同类型的数据（条形图、折线图等）。将不同的色调并排放置，不是相同的色调，而是不同的饱和度。因为当你查看数据时，你想向观众呈现的是蓝线和绿线之间的对比，而不是蓝线和某种蓝线之间的对比，对吧？特别注意：红色和绿色通常是两种有意义的颜色（绿色向上，红色向下等），请明智地使用它们！
- 顺序：固定的、渐进的变化（热图、树状图等）。从亮到暗，形成强烈的对比，不要停留在中间。
- 极化：一系列两个极端（主要是热图）。提示：切勿使用两种相反颜色的渐变，务必在它们之间设置过渡色。
- 特殊数据状态：无数据、错误/空值/不正确数据。我通常选择灰色表示空值数据，白色表示无数据。当然，这两种颜色彼此之间足够区分。
- 特殊元素（大多使用中性）：工具提示、图表标题、数据点、图表轴、线条、值…
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
