三、图像（Imagery）

图像不仅是一种装饰，它还是一种能够帮助用户理解以及区分你产品的强大工具。

大胆、形象、有意义的图像能够帮助你吸引用户。

无论气氛是压抑、柔和还是明亮、多彩，以下的设计准则以及实践案例能够帮助你使用图像把应用和生活结合起来。

准则
有关联的
有意义的
令人感到愉快的

结合UI界面
使用合适的分辨率
使用遮罩来凸显文本

使用案例
头像和缩略图
焦点图像
Galleries

准则

当你想使用插画或摄影作品来增强用户体验时，要选择与人有关联的，包含信息的，而且令人愉悦的图像。

场景赏析
确保图像是有动态的，且与背景相关联。带有预示的视觉效果能够大大改善用户体验。

身临其境
当必要的时候，可以通过色彩和内容叠加的方式来模糊或加强对画面主角或一张缩略图的感知。

最佳案例

使用多种表现方式
插画和摄影都可以运用在同一个产品中。摄影本身已经有一定的含义，所以应该用来展示特定的物体或故事。插画则能够表现出概念和隐喻，而这一点是摄影所不具备的。

可行

可行

远离图片库
利用图像可以表达一种独特的声音，还可以展现出绝佳的创意。

对于特定的事物或品牌内容，要用特定的图像。而较为抽象的内容，则需要给它一个解释。然而图片库里的摄影作品和剪贴画既不能具体表现特定事物，又不能给予解释。

可行

不可行

可行

不可行

有焦点
你的图像应当有一个焦点。焦点的范围可以小到单一物体，大到整体布局。此外，你还需要确保概念（清晰的）能够以一种令人难忘的方式传达给用户。

可行

不可行

可行

不可行

可行

不可行

构建故事
创建一个基于叙事背景且能让人身临其境的故事。通过视觉叙事的方式来渲染气氛。这种气氛是让人渴望的？还是忧郁的？或是快乐的？

可行

不可行

可行

不可行

UI集合

分辨率
确保你的图像大小能够适应不同的屏幕。Material design着重大尺寸图像。理想情况下，素材应该不会模糊出现像素。

可行

不可行

利用大小
利用不同大小的图像来创造视觉层次。

文字保护
为了确保图像上的文字显示清晰易读，可以使用scrims的方式保护文字。Scrims是轻量且半透明的material层。

1.渐变的深色端：不透明度的值取决于背景
2.渐变的中心点：在3/10的位置（接近深色结尾）
3.渐变的结束点：不透明度为0

为了避免banding （鲜明的条纹形状），渐变需要足够的长度，3x于标准应用栏的高度，距离中心大约3/10的位置（朝向深色端）。这样做会让渐变自然衰减并且避免锋利的边缘。

渐变的不透明度设定应基于所处的环境。有些图像可以用较深的渐变，例如下面图像渐变（不透明度是60%）。

在某些情况下，渐变透明度可能低至10 - 20%。

可行

深色scrims理想的不透明度应当在20%-40%之间，浅色scrims理想的不透明度应当在 40%-60%之间。当然，这些都要视具体内容来定。

不可行

可行

不可行

可行

可行

头像和缩略图
头像和缩略图代表实体或内容，可以是摄影也可以是概念性的插画。 一般来说，它们就是点击目标（tap targets）。

头像可以用来表示个人。对于个人头像，要提供个性化的选项。出于有些用户不会自定义自己头像的考虑，我们需要把默认的头像效果做得讨喜。当头像与一个特定的logo一起使用时，头像也可以用来表示品牌。

缩略图暗示用户更多的信息-让用户快速了解内容，并协助导航。缩略图把图像放在狭小的空间里面。

焦点图像
焦点图像通常被固定在很明显的位置，比如屏幕顶部的banner。焦点图像能够吸引用户注意，并提供内容相关的信息，或强化品牌传播。

相关
Extract prominent colors from an image

Gallery
Gallery图像是在同类布局下由多个视觉焦点图像组合而成，比如宫格式布局或作为单一图像。