在前端开发中，使用合适的颜色方案可以极大地提高用户界面的可用性和用户体验。Google 的 Material Design 在过去几年中受到了越来越多的关注和喜爱，其所规定的颜色方案也被广泛地应用于各种应用程序和网站中。
本文将详细解读 Material Design 的颜色规范，为您提供深入学习和实际应用的指导意义。
颜色的重要性
在界面设计中，颜色的作用不仅在于美观，更在于帮助用户快速地识别和理解信息。正确使用颜色可以帮助用户更快速地执行任务和做决策，加强用户对界面的信任感和满意度，进而增加应用的活跃度和留存率。
Material Design 的颜色方案是经过深度研究和实验得出的，在设计原则、可用性和可访问性等多个方面都充分考虑到了用户的需要。因此，深入理解并正确应用这些颜色规范对于提高软件质量和用户体验是非常重要的。
颜色的分类
Material Design 中的颜色分为两类：主色和强调色。
主色
主色是应用中最重要的颜色。它应该在大多数地方出现，如 toolbar、tab bar、按钮等。Material Design 规定了 11 种主色，分别是：
- 红色（Red）
- 粉红色（Pink）
- 紫色（Purple）
- 深紫色（Deep Purple）
- 靛蓝色（Indigo）
- 蓝色（Blue）
- 浅蓝色（Light Blue）
- 青色（Cyan）
- 绿色（Green）
- 酸橙色（Lime）
- 黄色（Yellow）
这些颜色都有一个对应的主色调色板（Primary Color Palette），包含多个等间隔的渐变色值。例如，红色主色调色板包含以下所有颜色：
#FFEBEE#FFCDD2#EF9A9A#E57373#EF5350#F44336#E53935#D32F2F#C62828#B71C1C
这些颜色中的第一种和最后一种分别被称为主色浅色和主色深色，它们通常用于背景和文本颜色。我们通常在值得注意的元素中使用主色深色，并在剩余部分使用主色浅色。
下面是一个使用了红色主色调色板的样例网站：
可以看到，在该网站中，背景和文本的颜色都使用了红色主色调色板中的颜色，而链接和按钮等装饰元素则使用了该调色板中的其他颜色。
值得注意的是，在 Material Design 中，文本颜色不是硬编码的，而是通过主色深色进行计算，以确保与背景颜色的对比度最小达到 4.5：1 的要求。这进一步保证了可读性和可访问性。
强调色
强调色是用于突出和强调界面上特定元素的颜色。它们用于按钮、交互元素和突出显示的文本等地方。Material Design 规定了 9 种强调色：
- 红色（Red）
- 粉红色（Pink）
- 紫色（Purple）
- 深紫色（Deep Purple）
- 靛蓝色（Indigo）
- 蓝色（Blue）
- 绿色（Green）
- 酸橙色（Lime）
- 黄色（Yellow）
每种强调色也有对应的调色板（Accent Color Palette），包含了多个等间隔的渐变色值。例如，蓝色强调色的调色板包含以下颜色：
#E1F5FE#B3E5FC#81D4FA#4FC3F7#29B6F6#03A9F4#039BE5#0288D1#0277BD#01579B
我们可以在需要强调和突出元素的位置使用这些颜色来吸引用户的注意力，同时保持整个界面的协调性。
下面是一个使用了蓝色强调色调色板的示例网站：
在该网站中，所有链接和图标都使用蓝色强调色的调色板中的颜色，以突出显示对用户的重要性。
颜色的设计原则
Material Design 的颜色规范不仅仅是一个颜色的清单，它还包含了一些设计原则和指导方针，以帮助设计师和开发者正确地应用这些颜色。
平衡和比例
Material Design 强调使用平衡和比例来创造和谐的设计。因此，颜色应该在整个应用中平衡地运用，而不应该过度使用某个颜色，以避免视觉的不平衡感和不和谐感。
分层次结构
Material Design 还提倡使用分层次结构来组织颜色，使其某种程度上类似于 Z 轴的层次结构。这种结构能够产生分层和深度感，使得用户可以更好地理解和导航内容。
透明度
透明度（Opacity）可以帮助创造一种深度和变化的感觉。在 Material Design 中，建议根据需要使用透明度来实现颜色的混合和淡化。然而，过度使用透明度也不利于可用性和可访问性，因为它可能会削弱文字和其他内容的可读性。
色彩和饱和度
色彩和饱和度是创造和谐和平衡的关键。Material Design 建议通过选择正确的颜色、调整色调、改变亮度和饱和度等方式来调节色彩。值得注意的是，过于高饱和度的颜色可能对用户产生不良影响，因为它们可能会引起不必要的视觉疲劳。
基于 Material Design 的颜色应用案例
使用主色调色板
在这个示例中，我们使用了 Material Design 的蓝色主色调色板来创建一个简单的导航菜单。我们通过添加一些阴影和圆角来创建视觉深度和轮廓感，并使用主色深色来颜色填充该导航菜单。
<nav class="nav-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
-- -------------------- ---- ------- --------- - ----------------- -------- ------ ----- -------- ----- ----------- - --- --- ------- -- -- ------ -------------- ---- - --------- -- - ---------------- ----- ------- -- -------- -- -------- ----- --------------- ---- ---------------- ------------- - --------- - - ------ -------- ---------------- ----- ------------ ----- -展开代码
结果如下所示：
使用强调色调色板
在这个示例中，我们使用 Material Design 的橙色强调色调色板来创建一个动态和突出的按钮。我们使用强调色深色和浅色相结合，以创建更多的联系和深度感。
<button class="button primary-button">Learn More</button>
-- -------------------- ---- ------- ------- - -------- ---- ----- ---------- ------ --------------- ---------- -------------- ---- - --------------- - ----------------- -------- ------ ----- ----------------- ------------------------ --------- ----------- - --- --- ------- -- -- ------ ------- ----- ----------- --- ---- ------------ - --------------------- - ----------------- -------- -展开代码
结果如下所示：
总结
Material Design 的颜色方案提供了一系列应用广泛和经过实践证明的颜色，可以帮助开发人员和设计师创造出协调、模块化和可访问的用户界面。理解 Material Design 的颜色规范和设计原则对于创建高质量的应用程序至关重要，并能够为用户提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475831a968c7c53b028d3ce
