图像和图形

虽然您的应用可能仅包含文本和颜色,但您可能希望添加更多视觉元素,例如徽标或插图。Android 有一些关于向您的应用添加图形的特定最佳实践,以及各种库来创建图形效果或添加运动。

Android 资产称为 可绘制对象,这是一种在屏幕上绘制的资源类型。这包括但不限于位图、形状和矢量。

创建图像和图形时,请记住以下几点

  • 避免在资产中包含不可变的文本。
  • 尽可能优先使用矢量格式。
  • 为分辨率桶提供资产。
  • 在背景图像和文本之间提供足够的遮罩。
  • 虽然 Android 能够实现不同的图像效果,如渐变、着色和模糊,但有些效果的性能成本更高。
  • 动画矢量可绘制对象为小型 UI 动画提供了一种可扩展的格式。

如何为 Android 导出资产

  • 以小写格式设置资产名称。
  • 将简单资产设置为以 SVG 格式导出。
  • 将复杂图像(如照片)设置为以 WebP、PNG、JPG 格式导出。
  • 设置正确的分辨率缩放,如下表所示。
屏幕尺寸 比例

mdpi

x1

hdpi

x1.5

xhdpi

x2

xxhdpi

x3

xxxhdpi

x4

您可以选择使用 Android Studio 将 SVG 转换为矢量可绘制对象 (VD)。将资产整理到与分辨率相对应的目录中,以便进行交接,如下面的图像所示。例如,在文件夹名称中包含屏幕尺寸。

organized res directory
图 2. 已组织的 res 目录。

资产类型

Android 支持以下资产类型。

矢量

矢量图形是一种无损格式,这意味着它在缩放时不会丢失视觉信息。矢量由填充以创建图像的数学点组成。

图 3. 左图显示了一个由矢量图形贝塞尔点组成的图像,与右侧的放大栅格图像形成对比。

矢量格式

Android 支持以下矢量图像格式:SVG 和矢量可绘制对象。

矢量可绘制对象看起来类似于 SVG,但它是基于 XML 的。它们还支持各种属性,如渐变。有关支持内容的更多信息,请参阅 VectorDrawable。您可以通过 矢量资产工作室 将 SVG 转换为矢量可绘制对象。

用例

由于其体积小,因此最好使用矢量格式创建图标。动画矢量可绘制对象 可用于向图标添加运动。

  • 插图是有助于引导用户、解释概念或表达想法的图形。它们通常表达品牌风格。
  • 英雄插图在其余内容中具有很高的强调性,用于设置整体外观和风格并解释主要信息。
  • 点状插图较小,通常位于内联,并支持周围的内容。
图 4. 英雄插图和内联点状插图。

栅格

有损图形或在通过压缩或缩放进行处理时会丢失细节的图形,由像素组成以构成图像。栅格图形通常用于详细图像,例如照片或复杂的渐变。由于它们在缩放时会丢失细节,因此请导出这些图像的多个分辨率。

栅格格式

Android 支持以下栅格图像格式:PNG、GIF、JPG、WebP。

用例

用例包括具有各种纹理导致宽色域和渐变的图像,或具有过度复杂的贝塞尔点集的图像。用例还可以包括高度详细的照片资产,例如产品照片、位置详细信息等。

大小调整

创建资产时,请牢记以下事项。

分辨率桶

您的应用应根据屏幕密度范围或桶提供位图图形。操作系统使用这些桶自动将正确的图形显示到相应的设备。通过为每个桶提供资产,确保在每台设备上显示高保真图形。

Example of image resolution sizes and bucket labels.
图 5. 它们各自的密度和导出比例下的派对甜瓜。

填充

图标和类似的小型资产应包含内在(内置)填充,以使资产具有足够的触摸目标空间并确保一致的大小。

图 6. 资产中内置填充的 24 dp 图标。

文件名

Android 资产为小写,不包含分辨率后缀。

保持一致的命名约定和结构,以保持文件和项目的组织性。例如,使用前缀“ic_…”命名图标可以帮助组织项目中的所有图标,并在开发过程中快速识别图标。

其他应用资产

图 7. 单色启动器图标和启动画面。

应用图标

启动器图标位于主屏幕上。在系统 UI 中查找单色图标,包括单色通知、状态栏和小部件。

格式化应用图标为自适应图标的矢量可绘制对象,以及传统图标的 PNG。要了解有关创建和预览应用图标的更多信息,请查看设计和预览您的应用图标

启动画面

从 Android 12 开始,您的应用可以在打开时显示一个动画启动画面,其中包含应用图标。

放置

请注意图像应如何在屏幕上缩放和定位。适应、裁剪、填充高度、填充宽度、填充边界、内部可用于设置图像上的缩放比例

图 8. 裁剪示例。

您还可以将图像剪切成形状以创建其他效果。

响应式裁剪

要以响应方式显示图像,请定义图像在不同断点范围内将如何裁剪。在不同的断点范围内,裁剪可以

  • 保持一个固定比例。
  • 适应不同的比例。
  • 保持固定的图像高度。

保持一个比例

图像大小可以在断点范围内保持一个固定比例。

图 9. 在不同纵横比下显示的图像。

适应不同的比例

图像比例可以通过适应不同的断点范围来改变。例如,在图 9 中,图像比例在断点之间从 1:1 更改为 16:9。

固定图像高度

图像大小可以在断点范围之间以及断点范围内保持固定高度和灵活宽度。图像保持固定高度,而断点之间的宽度是灵活的。

效果

Android 包含各种内置图像效果。以下是一些常见的效果

渐变

在 Compose 中,使用画刷在屏幕上绘制内容。不同的画刷可用于绘制不同颜色或渐变的形状。使用内置的渐变画刷以实现不同的渐变效果。这些画刷允许您指定要从中创建渐变的颜色列表。

只要您提供颜色列表和停止发生的百分比,渐变画刷就能通过添加颜色停止和平铺来实现更高级的渐变。使用容器或形状来裁剪渐变、纯色填充或图像。

图 10. 使用 Compose 修饰符从 Figma 转换渐变。

模糊

通过使用Modifier.blur()方法并提供模糊比率来对图像应用模糊效果。谨慎使用模糊,因为它们会影响性能,并且仅在运行 Android 12 及更高版本的设备上可用。有关更多信息,请参阅模糊图像可组合项

混合模式

Android 能够通过类似于您可能在设计软件(如联合或乘积)中找到的布尔运算和混合模式来修改图像。有关更多信息,请参阅BlendMode

着色

使用混合模式和填充来着色资源。这使您可以拥有单个资源并对其应用不同的颜色,从而可以减少生成的资源数量。

图 11. 使用不同色调的资源来补充内容颜色或指示不同的状态。

运动

图形可以通过编程方式进行动画处理以创建运动图形,而不是上传运动文件。这可以提供更大的灵活性和小尺寸的资源。

动画矢量可绘制对象允许您创建小的 UI 动画。否则,请了解有关在Compose中使用关键帧创建动画的更多信息。有关图像效果的更多信息,请阅读自定义图像