图像

Material Design 中图像作为表达工具，吸引用户，增强视觉品牌

图像不仅是装饰，更是帮助你传达信息、打造产品差异化的强大工具。

大胆、图形化且有明确意图的图像有助于吸引用户。

无论氛围是克制低调还是明亮多彩，以下原则和最佳实践都能帮助你将图像成功融入应用，为产品注入生命力，无论采用何种视觉品牌。

原则

相关
信息性
令人愉悦

融入 UI

使用适当的分辨率
使用遮罩层来保护文本

用例

头像和缩略图
主图
图库

Material Design 中图像作为表达工具，吸引用户，增强视觉品牌

原则

当使用插画和照片来提升用户体验时，选择能够传达“与用户相关”“信息清晰”“令人愉悦”的图像。

与人物相关的图像，展示 Material Design 中的用户情境 — 与用户相关
图像可以反映用户所处的情境与世界。

Material Design 图像传达信息，使用户易于理解 — 信息
图像可以传达特定信息，让理解变得轻松直接。

使用优美插画提升 Material Design 体验和用户愉悦感 — 令人愉悦
以审美化的方式呈现情境，会让你的产品更独特，也更能增添用户的愉悦感。

重视情境

确保图像具有动感且贴合情境。使用能够预示内容的视觉呈现，显著提升用户体验。

Material Design 强调图片与场景相关，并动态变化提升用户体验 — 使用和场景相关的图片。

营造沉浸感

必要时，可以通过颜色和内容的遮罩层来暗示主图和缩略图是一体的。

Material Design 中，通过颜色和内容遮罩提升沉浸感 — 当与前景内容交互时，背景图片可以加上一层遮罩层。

最佳实践

使用多种介质

插画和照片可以同时存在于同一个产品中。照片天然具有具体性，适合用来展示具体实体与故事；当具体照片可能让人产生距离感时，插画更适合表达概念与隐喻。

使用照片展示特定实体，符合 Material Design 风格 — 推荐做法
对于特定实体，应该首先通过照片来表达。

使用插画辅助理解，体现 Material Design 风格 — 推荐做法
当无法做到完全具体时，插画则可更具阐释性来帮助理解内容。

避免使用素材库图片

使用图像来表达鲜明的风格，并体现高水准的创意。

对于具体实体或品牌内容，使用专属图像；对于更抽象的内容，则可更具阐释性。素材库照片和剪贴画既不够具体，也缺乏阐释性。

真实故事呈现的 Material Design 风格图片 — 推荐做法
争取让图片能反映出真实的故事。

Material Design 中真实可信的图片 — 不推荐做法
素材库图片可能让人感觉不够真实。

使用 Material Design 图像表示内容 — 推荐做法
使用特定的图像表示特定的内容。

避免使用老旧照片，遵循 Material Design 原则 — 不推荐做法
不要默认使用字面直译式的素材库照片。

明确焦点

在你的图像中有一个标志性的焦点。焦点可以是单一实体，也可以是整个场景。确保能以一种难忘的方式向用户传达一个清晰的概念。

使用 Material Design 的颜色和构图明确图像焦点 — 推荐做法
使用颜色和构图来给图像一个清晰的焦点。

避免让用户主动寻找 Material Design 图片含义 — 不推荐做法
避免让用户主动去寻找图片的含义。

Material Design 通过简约元素提升用户专注度 — 推荐做法
最有影响力的标志性图像往往只由少数几个有意义的元素组成，并能最大限度减少用户分心。

Material Design 强调图像焦点的关键特性 — 不推荐做法
当焦点被湮没时，图像标志性的特性就会丧失。

Material Design 中，使用清晰的焦点传达概念 — 推荐做法
清晰的焦点可以一目了然地传达概念。

Material Design 的视觉焦点缺失错误示例 — 不推荐做法
缺少视觉焦点的图片没有意义。

构建叙事

创建一个沉浸式的故事与情境，让你的应用更具人情味。通过视觉叙事来定义情绪：令人向往的？克制的？还是庆祝的？

Material Design 中，讲述故事的图片既吸引人又信息丰富 — 推荐做法
一个讲述故事的图片是非常有吸引力，且信息量很大的。

Material Design 图像需传达情绪、品牌和语境 — 不推荐做法
缺乏故事的图片失去了传达情绪、品牌和语境的机会。

Material Design 中，适当的情境能更有效地传达信息和品牌 — 推荐做法
将概念放入恰当的情境中，可以更有效地传达信息与品牌。

无趣图片脱离了 Material Design 的情景 — 不推荐做法
脱离情景的图片是无趣的。

UI 整合

分辨率

确保图像尺寸适合不同平台与屏幕。Material Design 强调使用大图像；理想情况下，图像内容不应出现像素化。请针对特定宽高比与设备测试合适的分辨率。

Material Design 风格的合适尺寸图片 — 推荐做法
合适尺寸的图片

低分辨率 Material Design 图片示例（导致像素化） — 不推荐做法
分辨率过低的图片（导致像素化）

使用比例

使用另类的比例创建视觉优先级。

Material Design 中，多尺寸缩略图展示内容层次结构 — 在图库的场景中，使用多种尺寸的缩略图来表达内容的层次结构。

多个容器共存于 Material Design 生态系统中 — 让多个容器共存于同一个生态系统中。

文本保护

为确保图片上叠加的文本清晰可读，应使用遮罩层来提供文本保护。遮罩层是一种轻量、半透明的材质层。

Material Design 中，使用半透明遮罩保护文本 — 1. 渐变的较暗的一端：不透明度视场景而定
2. 渐变的中点：靠近较暗一端的 3/10 处
3. 渐变的结束点：不透明度为 0

为避免产生条带效应，渐变区域应足够长，一般为标准应用栏高度的 3 倍，渐变中点位于深色端的十分之三处。这使得渐变过渡自然，且避免了锐利的边缘。

渐变的不透明度应该根据所处环境进行选择。某些图像可以使用较深的渐变，例如在此显示的图片有 60% 的渐变。

在某些情况下，可以使用最低 10-20% 的渐变。

Material Design 中，文本遮罩渐变为黑色 60% — 此图片中，渐变为 60% 的黑色。

Material Design 中，渐变的文本背景色 — 这是应用于左侧图片的渐变。

Material Design 中，文本遮罩的不透明度根据内容而定 — 推荐做法
暗色遮罩的不透明度根据内容而定，最好在 20%-40% 之间。亮色遮罩的不透明度根据内容而定，最好在 40%-60% 之间。

Material Design 中，当使用文本遮罩时，不要使图像变得模糊 — 不推荐做法
使用遮罩层时，不要遮挡图像本身。

Material Design：遮罩应在文本区域，避免覆盖整张图片 — 推荐做法
对于较大的实景图，遮罩应该针对文本区域，而不是覆盖整张图片。

Material Design 中，大图片应避免过度遮盖 — 不推荐做法
不要“过度遮盖”大图片。

使用 Palette API 创建 Material Design 颜色覆盖层 — 推荐做法
颜色覆盖层和文本保护遮罩不同，颜色覆盖层可以作为设计元素使用。创建颜色覆盖层时，使用 Palette API 根据内容来定义颜色方案。

使用品牌色装饰图像，提升 Material Design 视觉效果 — 推荐做法
可以使用你的品牌色来进行装饰，以增强图像。

头像和缩略图

头像和缩略图可以代表实体或内容，可以是摄影照片或抽象的插图。一般来说，它们是点击目标，点击后可以进入实体或内容的主视图。

头像可以用来代表一个人。对于个人头像，应当提供个性化的选择。由于用户可能选择不使用个性化的头像，因此应提供一个令人愉悦的默认头像。使用特定徽标的头像也可以用来代表品牌。

缩略图可以暗示更多信息 - 让用户了解内容 - 并辅助导航。缩略图可以把图像放在一个较小的空间里。

使用 Material Design 头像提升应用个性化体验 — 头像可以使应用感觉更加私人化 - 且占据最小的空间。

Material Design 中，品牌头像可以一目了然的传达品牌信息 — 品牌头像可以一目了然地传达品牌信息。

主图

主图通常固定在显眼的位置，例如屏幕顶部的横幅。主图用于吸引用户，为内容营造场景，或突显品牌。

从图片中提取主色

Material Design 中，特色图片在多样化布局中突出显示 — 特色
特色图片是一个多样化布局中的非常明显的主焦点。

整合的主图展示了 Material Design 的区域布局 — 整合的主图
整合的主图为不同的内容在布局上设定了区域。整合的主图不是视觉的主焦点。

图库

图库中的图片是视觉鲜明的主图，它们有着相同类型的布局，比如网格或单张图片。

Material Design 中的照片网格 — 照片网格

Material Design 中，图库中的图片 — 图库中的图片