Material You 界面和基于您背景的动态颜色

  • Material You 引入了一种动态颜色系统,该系统可以从背景、应用程序或品牌中提取的源颜色生成完整的调色板。
  • 该算法创建了 5 个色调调色板,总共有 65 种颜色,这些调色板被分配给不同的界面角色,以确保在浅色和深色模式下的可访问性和一致性。
  • 设计师和品牌通过自定义主题、设计令牌和 Material Theme Builder 等工具来保持控制权,从而将品牌标识和个性化结合起来。
  • 支持范围已扩大到多个制造商和 Android 系统界面,同时改进了动态效果、小部件和动态图标,以实现统一的用户体验。

Material You 界面和基于您背景的动态颜色

Android 多年来一直致力于 Material Design,但 Material Design 的出现标志着它向 Material Design 迈出了重要一步。 根据您的壁纸进行深度定制这不再仅仅是更改几个图标或切换到深色主题,而是整个系统能够智能地适应您选择的颜色,同时保持可访问性和一致的设计。

这种新的设计理念,自 安卓12 并在 Android 13 中得到扩展,它结合了 动态色彩、流畅的动画和改进的小部件最终呈现出的视觉体验更加人性化、更具情感冲击力,同时也尊重了设计师、开发人员和品牌的工作,他们需要控制自己的视觉形象。

什么是 Material You 或 Material Design 3?

Material You,又名 材料设计 3这是谷歌面向用户体验/用户界面设计系统的最新演进版本。它不仅仅是一种视觉风格,而是一套…… 指南、组件和算法 允许在手机、平板电脑、手表和其他安卓设备上构建一致的界面。

与之前的 Material Design 版本不同,Material You 专注于…… 个人表达和对用户的适应其理念是,两个使用同一款手机的人可以拥有截然不同的界面,但两者都保持可用性、可访问性,并与 Android 生态系统保持一致。

从美学角度来看,这一版本选择了一种方法 更简约柔和更少的生硬阴影、更少的字体样式、更多圆润的形状和更简洁的视觉效果。所有这些都与更加精密的色彩系统相结合,该系统能够从单一源颜色生成完整的调色板。

有趣的是,物质上的你并不局限于…… 谷歌像素动态色彩逻辑和设计准则已扩展到多个定制层面,例如 一个 UI、OxygenOS、ColorOS、OriginOS 或 MIUI并得到谷歌的特别支持,以确保在大多数运行 Android 12 及更高版本的设备上获得一致的体验。

如何在安卓设备上使用AI创建壁纸
相关文章:
如何为安卓系统生成自己的AI壁纸

情感、个性与范式转变

Material You 也源于对我们如何理解数字设计的反思。谷歌认为,界面不仅应该响应功能,还应该响应…… 用户感受,他们的情绪因此,“Material You”这个名字玩了个文字游戏:设备应该像你一样独一无二,而不是千篇一律的千篇一律的克隆体。

多年来,iOS 和 Android 在以下方面都相对比较僵化: 真实用户界面定制除了更换背景、添加小部件或安装启动器之外,其他选项十分有限。而随着 Android 12 和 Material You 的推出,谷歌在一定程度上重拾了其旧口号“携手共进,而非千篇一律”的精神,专注于构建一个通用的生态系统,同时为每位用户量身定制界面。

这种理念与苹果公司的战略形成鲜明对比,苹果公司的战略更侧重于…… 封闭且高度受控的生态系统 在其他平台上,用户的视觉体验差异很小。而谷歌则允许用户进行更精细的外观定制,同时又不影响应用在不同品牌和型号设备上的良好运行。

Material You 的主要新功能

Material You引入了多项创新技术,这些技术相互交织,共同构建了完整的用户体验: 深度定制、动态色彩、适应性和意义深远的动态效果所有这些都由一个强大的技术系统提供支持,制造商、设计师和开发人员都可以使用该系统。

深度界面定制

其中最大的变化之一是用户可以对系统外观进行更精细的调整。Android 具备这种能力。 重新排列颜色、表面、按钮和控件 以便它们与壁纸生成的调色板或手动选择的颜色相匹配。

这种自定义功能涵盖状态栏、通知、菜单、快捷面板、设置、谷歌自家应用,以及逐步扩展到集成 Material Design 3 的第三方应用。其理念是让用户感受到…… 端到端一致的视觉体验系统和应用程序之间不会出现突兀的颜色跳跃。

对屏幕和外形尺寸的适应性

材料 你也加强了 界面对不同屏幕格式的适应性这包括传统手机、平板电脑、智能手表和折叠屏设备。颜色、字体和间距的逻辑都经过调整,以确保界面在任何情况下都能舒适易用。

针对可折叠手机,谷歌已针对以下几个方面制定了具体准则: 元素的可达性、中心枢纽以及最复杂的布局例如,打开屏幕的顶部 25% 被认为难以触及,因此建议不要将主要操作放在那里,关键信息也不应该放在铰链的正上方。

运动和触觉反馈

Material You 中的动态效果并非只是为了好看。Android 12 引入了一种效果…… 基于弹性拉伸的过度位移当用户尝试滚动到列表末尾时,表面会平滑地拉伸,而不是显示典型的老式回弹亮度。

此外,点击按钮上的涟漪动画也经过重新设计,以提供一种 更微妙、更流畅的触觉反馈Google 鼓励制造商尽可能保持这些行为接近标准,以便应用程序无论进行何种自定义,都能以可预测的方式运行。

动态色彩:Material You 的核心

Material You 界面和基于您背景的动态颜色

这一新阶段的关键要素是 动态色彩系统,内部称为莫奈从 Android 12 开始,系统可以从你的图像中提取主色。 壁纸 或者指定一个基础颜色,并自动生成一个完整的调色板,该调色板可应用于系统和兼容的应用程序。

该系统依赖于一种相当复杂的技术方法,该方法结合了色彩空间。 CAM16、色调调色板和色彩角色目标是在浅色和深色模式下保持良好的可读性、足够的对比度和精致的美感,即使用户选择较为复杂的壁纸。

Material Design 中调色板生成的工作原理

El 创作过程 动态色彩的使用可以概括为几个明确的步骤,尽管其背后涉及大量的色彩数学知识:

  • 提取种子颜色 基于壁纸、应用程序内容或用户或品牌选择的固定颜色。
  • CAM16空间中的转换和分析 获取色调、色度和其他感知参数。
  • 生成五种主要色调调色板 (accent1、accent2、accent3、neutral1 和 neutral2)源自源颜色,并对色度和色调进行调整。
  • 每个调色盘包含13种颜色。亮度级别各不相同(0、10、50、100、200、300……直至 1000),总共可呈现 65 种动态颜色。
  • 将这些色调映射到 UI 颜色角色例如主要、次要、表面、背景、文本、容器等。
如何抢先测试 Android 16
相关文章:
Android 16 和 Material 3 Expressive:重新定义移动体验的视觉重生

五个调色板各有其特定功能:例如, 强调色1通常是品牌的主色或用户主题色。,accent2 和 accent3 用作互补强调色,neutral1/neutral2 保留用于背景、表面和不太显眼的元素。

Android 13 中的主题样式

Android 13 系统更进一步,允许您在以下两者之间进行选择: 六种不同的主题风格这会改变对原始颜色的解读方式,从而生成最终的调色板:

  • 色调斑点是 Material You 的默认主题,具有中等振动感和平衡的重音处理。
  • 充满活力选择更浓烈的色调,但颜色之间过渡平滑,非常适合打造更引人注目的界面。
  • 富有表现力:产生更多意想不到的独特强调色组合,具有高色彩强度。
  • 斯普利茨:将饱和度降低到最低限度,追求近乎单色和非常柔和的效果。
  • 彩虹:将色彩鲜艳的点缀与中性表面混合,以提供更低调的效果,建议用于静态方案,而不是从背景中提取。
  • 水果沙拉:结合了双色调,使其更具表现力,也更适合固定调色板而不是动态背景。

系统接收存储在其中的 JSON 数据。 设置.安全.主题定制覆盖包 其中指定了源颜色(例如“746BC1”),还可以选择性地指定主题样式(例如“EXPRESSIVE”)。这样,Android 会自动生成应用程序将使用的 65 种颜色变体。

这些底色来自哪里?

材料 你考虑了获得该材料的三种主要途径 原色 这将作为算法的起点:

  • 来自用户的壁纸这是最常见的情况。系统使用颜色量化分析图像,提取多个候选颜色,并选择满足最低色度标准(例如,CAM16 值 ≥ 5)的颜色,以确保结果不会过于暗淡。
  • 从应用程序或网站的内容中获取信息应用程序本身可以决定界面的主色调来源于其内容,从而保持鲜明的美感,同时又与产品保持一致。
  • 从手动选择的颜色品牌或用户选择特定颜色后,系统会根据该颜色构建整个调色板,而无需依赖背景。

在所有情况下,目标都是使单个输入颜色变为 一套完整、易用且一致的配色方案避免妨碍阅读或破坏视觉统一性的组合。

品牌、设计师和开发人员的控制权

对于任何从事数字产品设计的人来说,一个合乎逻辑的问题是:这种动态系统是否会“覆盖”品牌设计?毕竟,你花费数小时精心调整设计系统,却可能在之后发现它被覆盖了。 Android 会根据用户的壁纸改变颜色。.

答案是,Material You 提供了一种合理的平衡:无论作为设计师还是开发人员 你不会失去控制权,因为你可以决定在多大程度上采用动态色彩。该系统设计灵活,不会掩盖每个产品的独特性。

自定义主题和品牌方案

Material Design 3 融入了以下理念: 定制或品牌方案这些颜色并非源自用户的壁纸,而是源自应用程序自身定义的颜色。使用诸如以下工具: 材料主题生成器 在 Figma 中,您可以输入您的品牌颜色(主色、辅助色、三级色、中性色),让系统生成与 M3 相符的完整方案。

这些自定义主题配置了 所需彩色标记 并允许您的应用执行以下操作:

  • 它应该与 Material You 生态系统的其他部分保持一致。
  • 在浅色和深色模式下均保持良好的可访问性。
  • 如果您愿意,可以方便地将动态系统颜色与未来进行组合。

还有,你可以 将品牌颜色与动态色彩相结合核心方案可以继承用户的一些自定义设置,而扩展的颜色集(例如,用于非常具体的语义状态或品牌强调)则保持静态。

设计代币和颜色角色

您大力推广使用的材料 设计代币也就是说,语义名称取代了十六进制代码等直接值。例如,不再单独使用“#6200EE”,而是使用标记,例如: 颜色原色, 表面, 主容器等等。

这些令牌与 动态色调调色板 (例如 system_accent1_600、system_neutral1_10 等),这样应用程序无需重写所有代码即可更新其外观。设计工具包和 Figma 插件会生成这些标记,并将它们映射到设计文件中的样式,从而大大简化了开发环境的迁移。

视觉层级和可访问性

在为用户界面应用颜色角色时,尊重以下原则仍然至关重要: 重要性层级饱和度最高的颜色应该用于行动号召和重点元素;中性色和柔和的色调则用于背景和次要内容。

Material You 保证,根据您提供的颜色,系统将生成各种变体。 文本和图标应有合适的对比度无论在浅色模式还是深色模式下,都适用。即便如此,仍建议在实际环境中测试这些组合,尤其是在引入可能与主色冲突的非常鲜艳的辅助色或三级色时。

Android生态系统中的动态色彩

最初,动态色彩系统并非 AOSP 的一部分,这让人怀疑它是否会是 Pixel 手机的专属功能。随着时间的推移,谷歌已经…… 在 Android 12 和 13 中集成调色板提取和生成逻辑提供补丁和文档,帮助OEM厂商一致地采用该方案。

喜欢的品牌 三星、一加、OPPO、vivo、realme 或小米 他们已经宣布在其基于 Android 12+ 的图层中支持动态颜色,以便像 Gmail 这样的应用程序可以在不同设备上调整其外观,同时保持相同的调色板。

对制造商(OEM)的要求

提供一个 与 Material You 的一致性Android合作伙伴必须:

  • 使用 与 AOSP 相同的颜色提取逻辑 还原壁纸的原始颜色。
  • 放大该颜色 65 种颜色 API 官方(包含 13 种颜色的重点色和中性色调色板)。
  • 在以下两种情况下应用这些调色板: 系统 UI 就像它自己的应用程序一样这样可以确保第三方开发者的行为保持一致。
  • 提供一种体验 主题和壁纸选择器 用户可以根据背景色或基本颜色查看和选择颜色组合。

此外,如果设备不支持背景颜色提取(由于技术限制或设计决定),则可以选择其他方案。 静态调色板,默认材质类型即使失去了动态部分,仍然保持了一定的视觉连贯性。

壁纸、主题选择器和静态调色板

标准动态色彩流程从 壁纸或主题选择器当用户更改背景或选择一组颜色时,系统会:

  1. 计算主要背景颜色(或读取选定的基色)。
  2. 根据色度和其他规则筛选颜色,以选择有效颜色。
  3. 生成五种色调调色板并填充 65 种颜色 API。
  4. 更新系统用户界面,并将这些颜色开放给应用程序使用。

对于固定的基本颜色,制造商可以定义 包含颜色数组和描述性名称的 Stub APK (例如,蓝色、红色、黄色、绿色),这些颜色作为预定义选项出现在选择器中。每个条目都包含主值和辅助值,系统将使用这些值作为色调调色板的起点。

设计师工具:Material主题生成器和设计工具包

为了促进 Material Design 在设计领域的应用,谷歌开发了几款专用工具,主要面向 Figma。其中最重要的是…… Material Theme Builder 插件这样,您就可以生成动态的品牌配色方案,而无需费力研究色彩的数学原理。

连接器 这个工具 你可以:

  • 加载一个 参考主题 或者从头开始创建一个。
  • 定义关键颜色 (主要、次要、第三、中性),并观察它们如何在整个用户界面中分布。
  • 将生成的方案应用于 Material Design 套件组件 包含在 Figma 文件中。
  • 扩展该方案 其他自定义颜色 (Custom0、Custom1…)用于特定的品牌或语义需求。

该插件会自动生成用作颜色标记的 Figma 样式,这些样式是 链接到模型这样一来,更改主题(例如,从中性主题更改为品牌主题)实际上只需按下一个按钮并分配新的样式集即可。

超越移动端:小部件、图标和启动器

Material Design 的影响并不仅限于系统应用。 Android 12 小部件 它们已更新以符合尺寸、圆角和颜色的新 API,我们鼓励开发者更新自己的小部件以利用这些功能。

另一方面,启动器和图标包社区也注意到了这一点。目前已经出现了动态图标包。 它们会根据壁纸或系统主题颜色而改变颜色。它们可以适应浅色和深色模式。要使它们正常工作,您需要使用兼容的启动器(新星发射(例如 Lawnchair、Hyperion、Niagara、Smart Launcher 等)并且在更改背景或主题后,重新应用图标包以重新生成调色板。

什么是 Google Material 3 Expressive?
相关文章:
Material 3 Expressive:Google 体验的视觉和个性化革命

Material Design 将 Android 系统转变为一个能够智能适应每位用户色彩和形态的平台,同时也不会忽略设计师、品牌商或开发者的需求。这要归功于 Material Design 的系统…… 动态色彩、色调调色板和设计元素打造高度个性化、又不失连贯性、易用性和技术可预测性的界面是完全可能的。无论你使用 Pixel、三星还是小米手机,其理念都是让你的手机既能体现你的个性,又能满足 Android 生态系统中数百万用户的使用习惯和外观需求。 分享信息,让更多用户了解该主题。