图像

在material design中，图像——无论是插画还是照片——都应该精心构造，充满魔力，而不应该让用户感到不自然、过度做作。 样式风格应该是可读、令人愉悦、城市。要强调出实体感、材质感、深度感、令人惊喜的用色，以及上下文。通过图像的设计、合理利用，打造出美丽、体贴的用户界面

1.设计原则

在使用插画或图像提高使用者体验时，选择和人物相关、充满信息、令人愉悦的图像

和人物相关的图像

使用人物图像可以建立情感化联系

充满信息的图像

呈递特定的信息，促进用户理解信息，打造充满智能感的界面。

令人愉悦

用惊艳的并且和信息相关的图像来愉悦用户，让体验充满魔力。

场景化价值

图像使用要符合逻辑，确保图像是动态的、和上下文场景相关。在用户需要之前提供视觉信息，进而提高用户体验。

沉浸体验

大胆的将色彩、内容和图像整合。

无处不在

创意性的为信息添加视觉图形，提高信息的表现力

2.最佳案例

使用多媒体

应该：

某些特定的内容，在表现时，首先可以考虑用照片表达

不应该

应该：

如果使用照片来传达概念，需要精选照片，考虑到照片的隐喻性。

不应该：

不要使用图库里面的一些泛泛的照片

少用图库

图像的使用要与众不同，富有创意

特定的内容要使用特定的照片。不要使用图库中那些照片，过于泛泛且代表性不强。图库中的照片往往很普通，且图像的解释力不够。

应该：

不应该：

使用的图片要有视觉焦点

所选的图像要有明晰的视觉焦点。可以是图像中的某个元素，也可以是整体协调的构图。确保理念能够清晰传达，让用户难忘。

应该：

不应该：

应该：

不应该：

应该：

不应该：

构建故事性

图像要能讲述出富有沉浸性的故事，同时能够提示上下文

应该：

不应该：

应该：

不应该：

不要过度处理

尽量位置图像的完整性。不要用滤镜和高斯模糊

应该：

不应该：

应该：

不应该：

图像和界面的整合

分辨率

确保图像尺寸合适，能够满足不同平台、不同设备的显示需求。推荐使用大图，图像不能出现像素感。在不同的设备和不同的分辨率下要进行测试。

应该：

尺寸合理的图像

不应该：

使用质量糟糕的图像

图像比例

展现图像时，可使用多种比例，用来展示视觉层级

例如，在图库场景中，缩略图尺寸要不尽相同，从而提高内容的层级感。

在同一生态系统下，允许有多种内容容器。

文本保护

为了确保图像上文本的可读性，建议添加text protection scrims（编者：可能是对图像某些区域进行适当柔化，提高文本可读性）

应该

深色的保护区域，根据内容，理想状况下不透明度是20%-40%。浅色保护区域40%-60%

不应该

覆盖在图像之上的保护区域不宜太过明显

应该:

在空间充足的情况下，给特定区域添加文本保护，而不是保护区域覆盖整个图像。

不应该：

保护区域不能扩张为整个图像

应该：

色彩叠加是另外一种保护文本的方式，可被当做设计元素来运用。创建互补色叠加，可以让整体配色鲜明，或者取样自图像颜色的文本叠加，可以提高用户对内容的重视。

不应该：

头像和缩略图

头像和缩略图能够表现真实感和具体内容。既不像照片那样具体的表现，也不像插画那样抽象的表现。大体上，头像和缩略图主要为了引导用户点击，进而进入子内容的主界面

头像可以用来代表人。在用户头像设置上，可以添加一些个性化选项，愉悦用户。当用户使用特定的Logo时，头像可以表示品牌。

缩略图可以暗指更多、更细腻的信息——这里仅仅提供内容的一部分，吸引用户进一步深入内容。

真人头像让应用更具人性化，而且占用的空间很少

品牌头像能够在用户一瞥的瞬间传递品牌信息，即便是缩略图的形式。

Hero图像

Hero图像指的是在界面中具有支配地位的图像，例如屏幕顶部的Banner。主要用来吸引用户，提供和上下文相关的内容， 加强品牌效应。

特征图像（Feature image）

特征图像主要指的是不同布局中，最显著、最能吸引注意力的图像。

Integrated hero image（集成的Hero图像）

Integrated hero images 往往能够起到协调作用，将布局中不同内容协调一致。但是此类图像不是主要的视觉焦点

图库

图库图像具有极强的视觉吸引力，布局一般不规则，或是网格，或是单个图像。

照片网格

图库图像