Imagery

Imagery is more than decoration. It’s a powerful tool to help you communicate and differentiate your product.

图像占的比重远超与其他的修饰，它是一个强有力的工具帮助你表达意图和区分你的产品

Bold, graphic, and intentional imagery helps to engage the user.

大胆鲜明并且有趣的图像能够帮助你吸引用户的注意。

Whether the mood is subdued and muted or bright and colorful, the following principles and best practices can help you successfully incorporate imagery and bring your apps to life, no matter what the visual brand.

不论心情是低落和静谧，开朗和充满色彩；根据下面的实例和原则，不管什么样的视觉品牌，都可以帮助你选择合适的图像来给予你应用程序生命。

Principles / 原则

Relevant / 符合场景
Informative / 包含信息
Delightful / 令人愉快

Integrating with UI / 与 UI 结合

Use appropriate resolution / 使用适合的解决方案
Use scrims to protect text / 使用磨砂保护文字

Use cases / 用例

Avatars and thumbnails / 头像和缩略图
Hero images / 主视觉
Galleries / 画廊

Principles / 原则

When using illustration and photography to enhance the user experience, choose images that express personal relevance, information, and delight.

当使用插图和照片来提升用户体验，挑选的图像要表达与个人相关，或者令人愉悦。

Personal relevance / 个人相关性

Imagery can reflect the context and the world the user inhabits.

图像可以反映出用户平时的生活环境

Information / 信息

Images can convey specific information that makes comprehension easy and immediate.

图像也能表达信息，使用户更容易和直接了解具体信息。

Delight / 令人愉快

Portraying context with aesthetic beauty will make your product unique and add to user delight.

美好的设计会让你的产品变得独一无二，提升用户体验

Appreciate context / 联系环境

Ensure images are dynamic and context-relevant. Use predictive visuals to substantially improve the user experience.

确保你的图像要与上下文息息相关，并且是动态的。利用大脑的联想，让图像作为环境作为铺垫可以大大的提高用户体验。

Use imagery that is context-relevant.

使用的图像要与上下文有联系

Be immersive / 身临其境

When necessary, it’s acceptable to obscure or allude to integrated heros and thumbnails through color and content overlays.

必要时，可以接受使用掩盖和内容堆叠来突出主视觉和缩略图。

Background imagery can be obscured when engaging with foreground content.

当背景图与前台的内容进行互动时，可以被遮盖。

Best practices / 最佳实例

Use multiple mediums / 使用多种媒介

Both illustration and photography can live within the same product. Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. Illustration is effective for representing concepts and metaphors where specific photography might be alienating.

可以在同一个产品中使用插画和摄影。摄影可以自然而然表现出特征程度，应该用户表现特定实体或故事。插图可以更有效的表达概念和隐喻，而摄影择不容易表达。

Do.

For specific entities, look first to photographic representation.

对于特定的实体，使用摄影进行表达

Do.

When total specificity is not available or applicable, illustration conveys approximation of content to aid comprehension.

当整个的特征没有比较符合或接近的表示，插画可以传达出近似的概念，帮助理解

Stay away from stock / 远离死板

Use imagery to express a distinctive voice and exemplify creative excellence.

使用图像传递独特的意见，证明创作的卓越。

For specific entities or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.

对于具体的实体或品牌内容，使用特定的图像。对于更多的抽象内容，要进行诠释。死板的图像和剪切画既不具体也没办法诠释这些内容。

Do.

Strive for images that represent genuine stories.

力求那些能够表达真正故事的图片

Don't.

Stock images can feel inauthentic.

死板的照片可以感受到不够真实。

Do.

For specific representations, use specific imagery.

对于特定的陈数，使用特定的图像。

Don't.

Don't default to literal stock photography.

不要使用默认的图像

Have a point of focus / 要有焦点

Have an iconic point of focus in your imagery. Focus ranges from a single entity to an overarching composition. Ensure that a clear concept is conveyed to the user in a memorable way.

要在你的图像中有一个标志性的焦点。焦点范围可以由一个具体的实物或者一组实物共同构成。确保用户能够从你这里明确的接收到你想要传递的想法。

Do.

Use color and composition to give images a clear focus.

使用颜色和构图来给图像一个明确的焦点

Don't.

Avoid making the user hunt for the meaning in the image.

避免使用户在图像中刻意的寻找你的意思

Do.

The most powerful iconic images consist of a few meaningful elements, with minimal distractions.

那些最好的标志性图像往往是由标志性的元素组成，并且没有多余的元素让你分心

Don't.

When the point of focus is obscured, the iconic quality of the image is lost.

当图像的焦点模糊不清时，那么这个图像的质量就会丢失。

Do.

A clear focus communicates the concept at a glance.

一个明确的焦点能够让人一眼就能感受到你想要表达的概念

Don't.

A lack of focus makes the image meaningless.

缺乏焦点，让图片变得没有意义

Build narratives / 构建场景

Create an immersive story and a sense of context to humanize your app. Define the mood through visual storytelling. Is the mood aspirational? Somber? Celebratory?

创建一个身临其境的故事和场景让使你的应用变的更加人性化。通过视觉塑造一个叙事的气氛。那么这个场景氛围是积极向上的？悲伤的还是开心的？

Do.

An image that tells a story is infinitely more interesting and informative.

一个能够表达故事的图像会包含丰富的信息，并且有着丰富的情趣。

Don't.

An image that lacks a story loses an opportunity to convey mood, brand, and context.

一个缺乏故事的图片是无法传递出你的目的、场景氛围、品牌和内容。

Do.

Properly contextualized concepts convey your message and brand more effectively.

塑造适当的场景能够更有效的传递出你的信息和品牌

Don't.

A representation of an entity that is dissociated from context is uninteresting.

一个脱离场景的事物表现是非常无趣的。

UI integration / 整合 UI

Resolution / 解析度

Make sure your images are appropriately sized for displays and across platforms. Material design emphasizes large images. Ideally, the assets should not appear pixelated. Test appropriate resolution sizes for specific ratios and devices.

确保你的图像能够与你的设备平台的显示尺寸能够很好的匹配。Material Design 强调使用高质量的图像。理想情况下，图像不应该能看到明显的像素点。要测试特定的比例和设备来更好的适配不同尺寸的显示情况。

Do.

Appropriately sized imagery

大小合适的图像

Don't.

Degraded imagery

质量较差的图像

Introduce scale / 引入多尺寸

Introduce alternative scales to create levels of visual importance.

引进不同的尺寸来营造不同的视觉等级。

Within a gallery context, introduce thumbnails of various sizes to convey content hierarchy.

在这个相册的展示也中，推出各种尺寸的缩略图来展现不同的内容层次。

Encourage multiple containers living in the same ecosystem.

鼓励使用多种容器共同在一个环境中。

Text protection / 文字保护

To make typography legible on top of imagery, apply text protection in the form of scrims. Scrims are lightweight, translucent material layers.

如果要对图像顶部的文字排版保持清晰，一般会在使用文字的部位添加蒙板进行保护。蒙板一般使用轻淡、半透明的材质。

Dark end of gradient: Opacity values depend on context / 渐变的灰度：透明度的数值取决于上下文
Center point of gradient: 3/10ths closer the the darker end / 渐变的中点：中心点在离深色结束还有十分之三的距离。
End point of gradient: Opacity of 0 / 结束灰度：透明度为 0％

To avoid banding (the formation of distinct stripe shapes), the gradient should be long, 3x standard app bar height, with the centerpoint about 3/10 towards the darker side of the gradient. This gives the gradient a natural falloff and avoids a sharp edge.

为了避免分块（不同的成都的深色产生的条纹），渐变的梯度应该是长期的，3倍于标准的应用栏高度，并且中点位于从深色开始大约十分之三的位置。这样可以使灰色的梯度自然递减，避免产生锋利的边缘。

The gradient’s opacity should be chosen based on its environment. Some imagery can use darker gradients, such as the image displayed here with a 60% gradient.

梯度的透明度应该根据环境来选择，一些图像可以使用较深色的梯度，比如使用60%的梯度显示这个图像

Gradients could be as low as 10-20% in some contexts.

梯度在某些情况下可以低到 10％－ 20%。

In this image, the gradient is 60% black.

这个图像，使用的梯度为 60% 的黑

This is the gradient which has been applied to the image at the left.

这是上图使用的梯度图片（背景为白色）展现。

Do.

Dark scrims should ideally be between 20%-40% opacity depending on the content. Light scrims should ideally range from 40%-60% opacity depending on the content.

深色的蒙板使用的梯度一般在 20%－40% 之间，浅色的蒙板的梯度范围一般在 40%－60%之间。不管是深色还是浅色都取决于环境。

Don't.

Don't obscure imagery when you use a scrim.

当使用蒙板的时候不要将图片进行模糊处理

Do.

For larger real estate, target specific areas for text protection instead of blanketing the entire image.

对于特定的区域，可以给予文字特定的区域来保护文字，而不是使用蒙板来突出文字。

Don't.

Don’t ‘over-scrim’ large images.

不要使用过度的蒙板突出文字

Do.

Color overlays are different than text-protection scrims and can be used as a design element. When creating complementary color overlays, use the Palette API to define your color scheme based on content.

色彩的布局与文字的保护蒙板不太一样，并且这快也可以列入设计的元素中去。当创建了一块补色作为覆盖快，请使用调色板 API 的作为配色方案的基础。

Do.

You can use your brand’s color palette decoratively to enhance imagery.

你可以使用你的品牌调色板来装饰你的图像。

Avatars and thumbnails / 头像和缩略图

Avatars and thumbnails represent entities or content, either literally through photography or conceptually through illustration. Generally, they are tap targets that lead to a primary view of the entity or content.

头像和缩略图都是表现具体的实物或者内容，形式通常是根据内容通过摄像或插图进展现。通常来讲，他们一般是作为实物或内容的主要展示，是引导点击的入口。

Avatars can be used to represent people. For personal avatars, offer personalization options. As users may choose not to personalize an avatar, provide delightful defaults. When used with a specific logo, avatars can also be used to represent brand.

头像可以用于代表用户。对于个人的头像，提供更人性化的选择。由于用户可以不对头像进行修改，所以最好使用比较愉快的头像进行默认值设定。当使用了一个特定的 logo ，头像也可以使用品牌来展现。

Thumbnails allude to more information – letting the user peek into content – and assist navigation. Thumbnails let you include imagery in tight spaces.

缩略图通常含有更多的呃信息，让用户直接看到内容，通常作为导航的辅助部分。缩略图让你在狭小的空间展现更多的图像。

Avatars make an app feel more personal – and occupy minimal space.

头像可以让你的应用显得更加私人化，并且不需要使用多少空间。

A brand avatar information at a glance.

一个品牌的头像可以很轻松的表现品牌信息。

Hero images / 主视觉

Hero images are images that are usually anchored in a prominent position, above the fold, such as a banner at the top of the screen. They serve to draw in a user, provide context about the content, or reinforce the brand.

主视觉的图像通常是定位于最明显的位置，一般在首屏，如在屏幕顶部的横幅位置。他们通常提供的场景是根据用户提供的内容决定的，或者是为了用来加强品牌。

Related

Feature / 特点

A feature image is a bold, primary point of focus within a heterogeneous layout.

图像的特点色应该是鲜明的，并且一般位于主要的焦点中，通常在布局有着重要的位置。

Integrated hero image / 和谐的主视觉

Integrated hero images create a setting for heterogeneous pieces of content within a layout. They are not the primary points of focus.

和谐的主视觉一般是通过布局创造一个特殊的环境。这样的主视觉不会分散用户在主要功能上的注意力。

Gallery / 画廊

Gallery images are bold visual hero images within homogenous layouts in either a grid or as a single image.

画廊图像通常栅格式的布局或均匀的排版将鲜明的主视觉图像进行统一或单独的展现。

Photo Grid / 照片栅格

Gallery image / 图像画廊