【小沐学Android】Material Design设计规范之颜色篇

1、简介

1.1 Android

谷歌在2007年发布了第一个测试版本的 Android 软件开发工具包（SDK），第一个商业版本的 Android 1.0，则发布于2008年9月。

2012年6月27日，在谷歌I/O大会上，谷歌宣布发布了 Android 版本4.1 Jelly Bean。 Jelly Bean 是一个在功能和性能方面的渐进的更新，主要目的是改进用户界面，

Android 源代码是根据自由和开放源码软件许可证。谷歌发布的大部分代码遵循 Apache 许可证2.0版，Linux 内核的变化遵循 GNU 通用公共许可证版本2。

1.2 材料概念

自Android 2.x时代的拟物设计，Android 3~4的Holo风格以来，Android Design正式更名为Material Design。在Google I/O 2014大会召开，谷歌正式宣布了一种全新的设计风格：Material Design。该设计透露出了大量的扁平（Flat）、层次（Layers）、长阴影（Long Shadow）等元素。

Material Design，中文名：质感设计，是由Google推出了全新的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Material design 是谷歌为旗下全线产品提供的一套完整的设计规范，从2014年发布到现在，Material design 不仅仅是安卓设备阵营的设计规范，这种设计风格甚至被应用在苹果设备和windows设备中。

在扁平风格的基础上加入了Material design 的设计理念 Material Design 在扁平风格的基础上加入了许多物理现实中的隐喻元素，像质感、投影、速度等等，这些设计都让 Material Design 的可用性增加，并且降低了学习成本。

• 材料设计
  Material 是一个适应性强的指南、组件和工具系统，支持用户界面设计的最佳实践。Material 以开源代码为后盾，简化了设计人员和开发人员之间的协作，并帮助团队快速构建精美的产品。Material 于 2014 年推出，多年来不断发展。

  • Material Design 1 （M1）：第一代Material Design于2014年推出，存档并可在以下网址访问：material.io/archive/guidelines。

  • Material Design 2 （M2）：2018 年推出的第二代 Material Design，引入了材料主题和材料组件代码。

  • Material Design 3 （M3）：第三代材质，于 2021 年推出，包括动态颜色等材质。Material You：新的Material 视觉风格和一组功能，满足个人用户的个人和表达需求，是Material Design 3的一部分
    

• 材料组件
  创建开源 UI 元素，帮助开发人员在 Android、Flutter 和 Web 上实现 Material Design。
  

• 材质主题
  系统地定制材料设计以更好地反映您产品品牌的能力。方案表示选择或单个样式组的子集，而主题则描述一组组合的多个样式和属性。主题调整全局样式以针对给定的用户上下文或首选项（如低光或高对比度）进行调整。例如，深色主题描述了颜色以外的设计决策，因为对高程和状态的调整也是有效表达深色 UI 不可或缺的一部分。
  

1.3 颜色概念

• 颜色：基线方案（Baseline scheme）
  基线方案是指构成用于浅色和深色主题的默认颜色值的一组选定色调。
• 颜色：动态颜色（Dynamic color）
  一种自定义功能，其中用户生成的配色方案映射到应用的配色方案。动态颜色不仅仅是材质主题生成器的输出或算法配色方案，而是存在一个可更改的颜色角色，该角色根据用户输入动态呈现应用的外观。
• 颜色：扩展颜色（Extended color ）
  指定的颜色（除关键颜色外），用于填充自定义方案的颜色角色。扩展颜色是特殊颜色角色和应用的类别，例如品牌表达或常规（语义）含义。
• 颜色：关键色（Key color）
  关键颜色不是提取的颜色，而是源颜色的派生。关键颜色是一个有助于理解动态颜色的概念，但不在代码中使用。该术语描述经过源颜色的色相和色度转换的任何颜色。关键颜色是色调调色板的基础。
• 颜色：方案（Scheme）
  颜色角色到色调调色板中特定色调的任何映射。方案由多个颜色角色组成。深色方案非正式地使用一组调色板中的色调来描述一组颜色，这些调色板是为深色主题映射的。
• 颜色：源颜色（Source color）
  为定义所有五种关键颜色而提取的单一颜色称为源颜色。
• 颜色：色调调色板（Tonal palette）
  色调调色板包括一个 13 音范围，作为将音调映射到特定角色的基础。色调调色板提供色调变化，以便配色方案自动在任何颜色组（如原色）中提供对比度和视觉差异。
• 颜色：色调（Tone）
  一组色调是具有相同色调和色度的颜色。非正式地说，音调意味着轻盈的程度。
  In code: Tone.of(hex code).get(tone) or Tone.of(hue, chroma).get(tone)
• 颜色：用户生成的方案（User-generated schemes）
  动态颜色的一个方面，用于描述从单个用户的墙纸选择或 Android 预设颜色派生和应用的颜色。

2、Material Design 1

https://m1.material.io/

2.1 材料设计

• 目标
  • 创造一种视觉语言，将优秀设计的经典原则与技术和科学的创新和可能性相结合。
  • 开发单个底层系统，实现跨平台和设备大小的统一体验。移动规则是基本规则，但触摸、语音、鼠标和键盘都是一流的输入法。
• 原则
  • 材料是隐喻。物质隐喻是合理化空间和运动系统的统一理论。该材料以触觉现实为基础，灵感来自对纸张和墨水的研究，但技术先进，对想象力和魔力持开放态度。
  • 粗体、图形化、有意。基于印刷的设计的基本元素 - 排版，网格，空间，比例，颜色和图像的使用 - 指导视觉处理。这些元素的作用远不止取悦眼睛。
  • 运动提供意义。运动尊重并强化了用户作为原动机的地位。主要用户操作是启动运动的拐点，改变了整个设计。
• 环境
  • 材质设计是包含光线、材质和投射阴影的三维环境。所有材质对象都具有 x、y 和 z 维度。所有材质对象都有一个 z 轴位置。主光创建定向阴影，环境光创建柔和的阴影。
    

2.2 颜色

https://m1.material.io/style/color.html#color-color-palette
材质设计中的色彩灵感来自大胆的色调与柔和的环境、深阴影和明亮的高光并列。

• 颜色工具
  颜色工具可帮助您创建、共享调色板并将其应用于 UI，以及测量任何颜色组合的辅助功能级别。
• 调色板
  此调色板包括可用于插图或开发品牌颜色的主要颜色和强调色。它们旨在和谐地相互协作。调色板从原色开始，填充光谱，为Android，Web和iOS创建完整且可用的调色板。Google 建议使用 500 种颜色作为应用中的原色，其他颜色作为强调色。
• 色彩系统
  在材质设计中，原色（primary color ）是指应用中出现频率最高的颜色。辅助颜色（secondary color）是指用于突出 UI 关键部分的颜色。
  
• 原色（primary color ）
  原色是应用屏幕和组件上最常显示的颜色。如果您没有辅助颜色，它也可用于强调元素。要在元素之间创建对比，您可以使用较浅或较深的原色色调。较亮和较深色调之间的对比度有助于显示图面之间的划分，例如状态栏和工具栏之间的划分。
  
• 辅助颜色（secondary color）
  辅助颜色用于强调 UI 的选定部分。它可以与您的原色互补或相似，但它不应该只是原色的浅色或深色变化。它应该与周围的元素形成对比，并谨慎地用作重音。使用辅助颜色是可选的。如果您使用原色的变化来强调元素，则没有必要。
  辅助颜色最适合用于：
  • 按钮、浮动操作按钮和按钮文本
  • 文本字段、光标和文本选择
  • 进度条
  • 选择控件、按钮和滑块
  • 链接
  • 标题

• 在应用中使用颜色
  大型 UI 区域和元素应使用原色着色。辅助颜色可用于强调较小的区域。如果没有辅助颜色，则可以改用原色来表示这些区域。
  

3、Material Design 2

https://m2.material.io/
Material 是 Google 创建的设计系统，旨在帮助团队为 Android、iOS、Flutter 和网络构建高质量的数字体验。

3.1 材料系统

• 材料是隐喻
  Material Design的灵感来自物理世界及其纹理，包括它们如何反射光线和投射阴影。材料表面重新构想了纸张和墨水的媒介。
• 粗体、图形化、有意
  材料设计以印刷设计方法（排版、网格、空间、比例、颜色和图像）为指导，以创建层次、意义和焦点，让观众沉浸在体验中。
• 运动提供意义
  运动通过微妙的反馈和连贯的过渡来集中注意力并保持连续性。当元素出现在屏幕上时，它们会通过交互来转换和重组环境，从而产生新的转换。
• 组件
  材质组件是用于创建用户界面的交互式构建基块，包括一个内置状态系统，用于传达焦点、选择、激活、错误、悬停、按下、拖动和禁用状态。组件库可用于Android，iOS，Flutter和Web。

3.2 颜色

材质的颜色系统是一种将颜色应用于 UI 的有组织的方法。全局颜色样式在组件中具有语义名称和定义的用法 - 主要（primary）、次要（secondary，品牌颜色）、表面、背景和错误。

每种颜色还具有互补色，用于放置在其“顶部”的元素，以促进一致性和可访问的对比度。

• 动态颜色简介
  动态色彩是Material Design色彩系统的最新发展，让个人设备感觉个性化。Material Design 3 支持 Android S 的算法颜色提取，从而生成自定义色调调色板，可轻松应用于浅色、深色和高对比度界面。

• 基线材质颜色主题
  Material Design 采用内置的基线主题设计，可以按原样使用，直接开箱即用。
  这包括以下各项的默认颜色：

  • 原色和副色
  • 原色和副色的变体
  • 其他 UI 颜色，例如背景、表面、错误、版式和图标的颜色。
    

• 原色（Primary color）
  原色是应用屏幕和组件上最常显示的颜色。
  若要在 UI 元素（如系统栏中的顶部应用栏）之间创建对比，可以使用原色的浅色或深色变体。您还可以使用它们来区分组件中的元素，例如浮动操作按钮的图标与其圆形容器。

• 辅助颜色（Secondary color）
  次要颜色提供了更多方法来强调和区分您的产品。具有辅助颜色是可选的，应谨慎应用以突出 UI 的选定部分。

• 表面、背景和错误颜色
  表面、背景和错误颜色通常不代表品牌：

  • 表面颜色会影响组件（如卡片、图纸和菜单）的表面。
  • 背景色显示在可滚动内容后面。基线背景和表面颜色#FFFFFF。
  • 错误颜色指示组件中的错误，例如文本字段中的无效文本。基线错误颜色为#B00020。

• 材质调色板生成器
  材质调色板生成器可用于为您输入的任何颜色生成调色板。色调、色度和亮度通过一种算法进行调整，该算法创建可用且美观的调色板。

• 2014 材料设计调色板
  这些调色板最初由Material Design于2014年创建，由旨在和谐协同工作的颜色组成，可用于开发您的品牌调色板。要生成您自己的和谐调色板，请使用调色板生成工具。
  

4、Material Design 3

https://m3.material.io/
Material 3是Google开源设计系统的最新版本。使用 Material 3 设计和构建美观、可用的产品。

4.1 材料设计

• 什么是材料？

  • Material Design 是由 Google 设计师和开发者构建和支持的设计系统。 Material.io 包括针对 Android、- Flutter 和 Web 的深入 UX 指南和 UI 组件实现。
  • 最新版本 Material 3 支持高效、自适应和富有表现力的体验——动态色彩和增强的可访问性，为大屏幕布局和设计令牌奠定基础。
    

• 使用材料

  • 在 Material.io 上，设计系统分为三个主要部分：基础、样式和组件。每个部分都包含设计指南和工具，可帮助您使用 Material 进行自定义和构建。基础为任何出色的用户界面提供了基础，从可访问性标准到布局和交互的基本模式。
    

• 设计

  • 设计指南、规格和工具，以简化从 Figma 到成品的工作。
    

• 发展

  • 最新的材料组件、教程、案例研究和文档。使用适用于 MDC-Android、Flutter、Jetpack Compose 和 Web 的代码和开发人员文档实现 Material Design。
    

4.1 颜色样式

颜色系统处理随着用户输入的变化而出现的动态变化的配色方案的可变性。色调关系的逻辑以及色调和色度的变化为灵活的色彩应用提供了基础。配色方案可以被视为一组有凝聚力的相对色调，而不是一组固定的常量值。

• 关键色（Key colors）

  • 配色方案的基础是五种关键颜色的集合，这些颜色分别与具有 13 种色调的单独色调调色板相关。每个色调调色板中的特定色调将分配给 UI 中的颜色角色。

  • 关键颜色是创建任何动态配色方案的基础。建立关键颜色后，Material 的算法指定表示交互状态、错误和可访问对比度所需的全光谱颜色。

• 关键色：强调色和中性色（Key colors: accent & neutral ）

  • 强调色（Accent colors）：
    • 主键颜色（primary key color）用于派生整个 UI 中关键组件的角色，例如 FAB、突出按钮、活动状态以及升高表面的色调。
    • 辅助键颜色（secondary key color）用于 UI 中不太突出的组件（如筛选器芯片），同时扩展了颜色表达的机会。
    • 第三键颜色（tertiary key color）用于派生对比口音的作用，可用于平衡主要和次要颜色或提高对元素的关注。第三种颜色角色留给团队自行决定使用，旨在支持产品中更广泛的颜色表达。
      
  • 中性色（Neutral colors）
    中性键颜色用于派生背景的表面颜色角色，以及用于高强调文本和图标的颜色。中性变体键颜色用于为中等强调元素（如文本、图标和组件轮廓）派生颜色角色。
    

• 其他颜色（Additional colors）

  • 错误颜色（Error colors）
    除了强调文字和中性键颜色之外，颜色系统还包括错误的语义颜色角色，同样以错误角色本身的形式，以及错误、错误容器和错误容器角色。
    
  • 特定于产品的自定义颜色（Product-specific custom colors）
    自定义颜色将通常需要的特定色调与 UI 中富有表现力的颜色固定在一起，作为传达传统含义（如错误）的一种方式。
    

• 色调调色板（Tonal palettes）
  100 色调始终为 100% 白色，是该范围内最浅的色调;0 色调为 100% 黑色，是该系列中最暗的色调。
  
  一种关键颜色变成十三种色调：色调调色板由十三种色调组成，包括白色和黑色。色调值 100 相当于光在其最大值时的想法，并产生白色。介于 0 和 100 之间的每个色调值表示颜色中存在的光量。
  
  每种颜色的色调值用与该角色关联的数字表示，例如 primary40 是色调值为 40 的关键色。

• 动态色彩
  动态色彩体验是使用 M3 配色方案构建的。从 Android 12 开始，用户可以通过壁纸选择和其他自定义设置生成个性化方案。以 M3 为基础，用户生成的颜色可以与应用颜色共存，从而将一系列可自定义的视觉体验交到用户手中。
  

4.2 配色方案

Material Design有官方配色网站，只需要登录并随意采取2-3种颜色就能生成一种配色方案，当然你需要根据主题来确定主色，其他的为辅色和点缀色。可以直接截图复制到PPT里面，通过取色器取色使用。

https://www.materialpalette.com/

4.3 Material Theme Builder

https://m3.material.io/theme-builder
Material Theme Builder是一种新工具，可帮助您可视化材质的动态颜色并创建自定义材质设计 3 主题。通过内置代码导出，可以轻松迁移到 Material 的新颜色系统并利用动态颜色。

• 由设计令牌提供支持的主题
  材料设计可以定制，以代表各种风格选择。主题是一组样式选择，用于定义产品的视觉外观。在Material Design 3中，我们引入了设计令牌 - 反映系统视觉风格的小型可重用设计决策。通过使用令牌而不是静态值进行构建，设计和代码共享事实来源。
  
• 可视化动态颜色
  动态颜色在 Material You 中起着关键作用，为您的用户创造个性化和富有表现力的体验。设计令牌及其分配的颜色角色允许应用无缝接受任何动态配色方案来代替预设的颜色值。
  
• 构建自定义主题
  为了利用Material You引入的最新功能，您需要迁移到Material Design 3。材质 3 主题通过引入新的颜色角色和弃用其他颜色角色来扩展材质 2 的色彩空间。
  
• 导出到代码
  Material Theme Builder允许您将主题代码导出为多种格式：Android Views （XML），Jetpack Compose（Kotlin）和Design System Package （DSP）。
  

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！