这是一个翻译系列，原文是谷歌18年所出的材料设计指南（文末有链接），强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇，一共百余篇，欢迎关注哦。
图像以视觉的方式传达并区分产品。
目录
原则
用法
主图
缩略图
信息图
原则
图像不仅可以提升用户体验，还能传达品牌的视觉语言。图像有助于讲述故事，澄清难以用文字表达的复杂信息，并向用户展示如何执行操作。
用法
应该根据图片能传递的信息和产品反映的风格来选择图像。无论你是使用用户生成的照片，还是专业摄影图，亦或是不同风格的插图，它们都应该能够反映您产品的外观和感觉。通过共享相同的功能、风格和意图，图像之间应该彼此相关。
使用多种媒介
插图和照片可以同时存在于同一个产品中。
拥有焦点
在你的图像中要有一个标志性的焦点，使其不影响不同尺寸的裁剪方式。焦点可以是从单个实体到整体构成的任何事物。能以一种令人难忘的方式清晰地向用户传达概念。
尺寸恰当
为了以最佳方式展现不同尺寸和类型的图片，请根据不同显示器和平台适当调整大小。分辨率是图像加载速度的最重要因素。为了保证加载速度，请尽可能降低分辨率。
测试特定的比例和设备合适的分辨率大小，确保图片不会像素化。
可访问
替代文本
为确保可访问性，图像应该附加替代文本（或标题）以便于被屏幕阅读器读出，从而服务于具有视觉障碍的用户。如果没有替代文本，那么使用屏幕阅读器的用户只能听到“图像”这个词，而得不到任何详细的视觉信息。
使用图像的方法
使用视觉效果在应用中创造身临其境的故事和背景感。
缩小至62.5％。
指导用户
在给予用户提示时，步骤图允许用户按照自己的进度滑动浏览一系列图片。
这个烹饪应用通过步骤图向用户展示如何烹饪。
当用户第一次与某个应用进行交互时，图像能够帮助他们识别内容是什么。
图像可帮助用户选择感兴趣的类别或主题，以更好地个性化他们在应用中体验的内容。
允许用户比较相似的项目
风格统一的图像可以帮助用户快速浏览和做出决定。
在应用程序中使用时，静物摄影表现出统一的风格，让用户可以轻松地比较产品。
取悦用户
当用户在用户体验过程中遇到令人困惑或令人沮丧的点时，可以使用图像来取悦用户，例如当出现错误状态时。
这个应用通过插图来帮助用户开始使用。
提供情景
图像可以帮助用户理解相关文字的意图和情景。
这个应用通过图像来传达文章的情景。图片缩小至62.5%。
主图
用法
主图有助于吸引用户注意力、提供与内容相关的情景、或强化品牌形象。
位置
主图固定在最突出的位置，例如屏幕顶部。
缩略图
用法
缩略图是一种在有限空间内展示信息的小图片。它们通常充当点击目标，引导主要内容，出现在卡片或列表等组件中。
缩略图被用于：
提供更多信息提供其他界面内容的预览协助导航
缩略图可以裁剪成不同的形状。
这些圆形缩略图代表该应用中的分类。
位置
诸如文本或动作等元素，可以置于卡片类别的组件中的缩略图之上。
列表中的一行缩略图
以多种比例显示缩略图可表达不同程度的视觉重要性。
卡片中具有不同比例的多个缩略图。
信息图
用法
信息图像有助于用户理解内容，而不是成为用户界面中的焦点。信息图可以采用图标、图标和头像的方式，从字面上或概念上代表实体或内容。信息图占据的空间很小。
头像
头像应使用简单的背景以专注于主题。头像可以用（logo或品牌图形）来代表用户或品牌。
头像可以以任何形式用于多种组件内。
方形头像
图表
图表可以展示数值。
饼图说明了单个数值和总数值之间的关系。
图标
图标可以帮助用户理解内容。
绿色复选圆圈图标告知用户这一操作已经成功完成。
原文地址：Material Design
译者：杜雅黎