样式 图像

图像

图像不仅仅是一种装饰,它对产品的表达和差异化都有所帮助。

大胆、生动、富有意味的图像可以激励用户。

任何品牌形象,所传达的情绪无论是是沉默克制的,还是热情奔放的,下文的指南和最佳实践都可以帮助你成功的运用图像来为产品增添活力。

原则

相关的
有意义的
令人愉悦的

融入 UI

使用恰当的分辨率
使用遮罩来使文本清晰可见

用例

头像和缩略图
主图
图片库

原则 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当使用插画和照片来提升用户体验时,选择那些能够表达与人物相关的、有意义并且令人愉悦的图像。

与人物相关的

图像应当可以反映出用户所处的情境。

有意义的

图像可以传达出特殊的信息,让用户能够一看便知。

愉悦的

使用生动的插图来描绘场景会使你的应用显得独特,增强用户的愉悦感。

加深场景

确保图片与用户场景相关,并且会随着场景而改变。利用前瞻性的视觉效果来大幅提升用户体验。

使用与场景相关的图片。

沉浸感

必要的时候,可以通过颜色和内容覆层来暗示主图和缩略图是一体的。

需要聚焦于前景内容时,背景图片可以被遮挡。

最佳范例 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

利用多种形式

插画和照片可以同时存在于一个产品中。在一定程度上,照片应当很直观的表达出实体或是故事的特性,并且能够将这些特性展现出来。插画可以表达照片无法表达的概念和隐喻。

用户可以一目了然的识别图像中的特定实体。

如果没有特定实体,可以使用相似内容的插画来表现帮助用户理解。

告别陈旧

图像用来传达特别的声音和优秀的创意。

针对特定的实体和品牌概念,请使用特定的图片。对于特别抽象的内容,图片要能够解释其中的含义。老一套的照片和剪切画既不特殊也不能解释内容。

让图片能够反映出真实的故事。

老一套的图片让人觉得不真实。

对于特定的内容,使用特定的图片。

不要按照字面意思去配图。

有焦点

图像中应当有一个标志性的关注点。将用户的焦点从整体引向某个单一的主体。确保能够将概念以一种难忘的方式传达给用户。

使用色彩和构成来给图片一个清晰的焦点。

避免让用户主动寻找图片的含义。

不要让用户分心,最能突显主体的图片往往只有少数几个有意义的元素。

当视觉焦点变的复杂,就无法突出图片中的主体内容。

清晰的视觉焦点让图片所传达的概念一目了然。

缺乏视觉焦点的图片会显得毫无意义。

讲一个故事

一个身临其境的故事和场景,可以使你的应用更加人性化。通过视觉叙事来定义品牌的情绪,是令人充满期待的,还是忧郁的,再或者是值得庆祝的。

图片所表达的故事充满了乐趣和内涵。

缺乏故事的图片,会错过一次向用户传递情绪、品牌和场景的机会。

融入情景中的概念可以更有效的向用户传递信息和品牌。

与用户场景无关的实体图片会显得毫无趣味。

整合 UI 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

分辨率

确保图片的尺寸可以适应多种平台。Material Design 强调更大的图片。最好不要在素材中出现马赛克。为特殊的比例和设备测试图片的分辨率是否合适。

适当分辨率的图片

低分辨率的图片

使用比例

使用非传统的比例来创建视觉优先级。

在图片库中,使用多种尺寸的缩略图来表达内容的层次结构。

鼓励在同一个生态系统中使用多个容器。

文本保护

使用遮罩来确保图片上文字的可读性。遮罩是一种轻量的、半透明的材料图层。

1. 暗色起点:不透明度视情况而定
2. 中点:靠近于暗色的 3/10 处
3. 结束点:不透明度为 0

为了避免出现灰边(渐变结尾处清晰可见的分界),渐变要尽可能的长,一般是标准的应用栏高度的 3x,渐变的中点应放置在靠近暗部的 3/10 处。这样的渐变显得非常自然,避免了灰边的出现。

渐变的透明度取决于所在的环境。有些图像可以使用更深的渐变,比如这张图片就是用了 60% 的渐变。

某些情况下,也可以使用 10%-20% 的渐变。

这张图片中,渐变是从 60% 的黑色开始。

这就是左图中的渐变。

暗色遮罩的不透明度视情况而定,最好保持在 20%-40%。亮色遮罩的不透明度视情况而定,最好保持在 40%-60% 的范围内。

使用遮罩的时候不要让图片看起来很暗。

对于较大的实景图,遮罩应保持在文本区域,而不要覆盖整张图片。

不要「过度遮盖」图片

颜色覆层是不同于遮罩的设计元素。创建配套的颜色图层时,使用 Palette API 根据内容来制定颜色体系。

你可以使用品牌色来改进图像。

头像和缩略图

头像和缩略图可以代表某个实体或者内容,可以使用照片或者是概念图。通常来说,点击头像或缩略图可以让用户进入实体或内容页面。

头像可以用来代表一个人。对于个人头像,应当提供个性化的选项。如果用户不想自定义头像,则提供一个愉悦的默认头像。使用了个特定 Logo 的头像也可以作为品牌的代表。

缩略图暗示了更多信息 —— 这些信息可以引导用户进入内容详情 —— 并帮助用户导航。缩略图就是把图片放在一个较小的空间内。

头像利用最小的屏幕空间来让应用显得更加私人化。

品牌头像一目了然的向用户传递了品牌信息。

主图

主图通常是放在很明显的位置,通常是在卡片的顶部,比如屏幕顶部的 Banner 位。主图会吸引用户,为内容营造了一个场景,或是突显了品牌。

特色

特色图片非常明显,利用了多样的布局来突出主要的视觉焦点。

整合的主图

整合的主图为不同的内容在布局上设定了区域。整合的主图并不是视觉的主要焦点。

图片库

库中图片是视觉鲜明的主图,它们的布局通常是相同的,比如网格或是单张图片。

照片网格

图片库中的图片