2017 Material design 第三章第三节《图像》

927 阅读7分钟

三、图像(Imagery)


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

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

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

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

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

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

准则

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

与人有关联的:图像与页面下面的相关信息(如用户居住信息)相关联
与人有关联的:图像与页面下面的相关信息(如用户居住信息)相关联

包含信息的:图像使信息传达得更加直接且易懂。
包含信息的:图像使信息传达得更加直接且易懂。

令人愉悦的:在界面上使用漂亮的设计会使你的产品显得独特,同时会增加用户对产品的喜爱度。
令人愉悦的:在界面上使用漂亮的设计会使你的产品显得独特,同时会增加用户对产品的喜爱度。

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

使用与背景有关联的图
使用与背景有关联的图

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

模糊的效果能够让背景图片与前景结合得更加融洽
模糊的效果能够让背景图片与前景结合得更加融洽

最佳案例

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

对于特定的实物,首先考虑用摄影来表现。
对于特定的实物,首先考虑用摄影来表现。

可行

当所表达的内容并非具体实物(或者不能被具体实物所概括)时,则可以通过插画以相近的方式来表现。
当所表达的内容并非具体实物(或者不能被具体实物所概括)时,则可以通过插画以相近的方式来表现。

可行

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

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

尽可能的让图片感觉到真实
尽可能的让图片感觉到真实

可行

图片能感觉到不真实的
图片能感觉到不真实的

不可行

对于特定的物件,使用特定的图像
对于特定的物件,使用特定的图像

可行

不要使用系统自带的图片库里面的图片
不要使用系统自带的图片库里面的图片

不可行

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

构图、颜色的使用要能够让图像有个清晰的焦点
构图、颜色的使用要能够让图像有个清晰的焦点

可行

避免让用户自己寻找图像的意义
避免让用户自己寻找图像的意义

不可行

包含有非常明显元素的图像能够最小程度的避免用户误解
包含有非常明显元素的图像能够最小程度的避免用户误解

可行

当关注焦点不明时,会丢失图像自身的意义。
当关注焦点不明时,会丢失图像自身的意义。

不可行

只需要一眼就能清晰的理解图像的含义
只需要一眼就能清晰的理解图像的含义

可行

没有焦点让图像变得没有意义
没有焦点让图像变得没有意义

不可行

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

图像能让你讲述的故事更有趣和有意义。
图像能让你讲述的故事更有趣和有意义。

可行

图像因为缺乏故事所以无法向用户传达情感。
图像因为缺乏故事所以无法向用户传达情感。

不可行

适当的语境能更有效的传达你的品牌信息。
适当的语境能更有效的传达你的品牌信息。

可行

单纯一个实体存在且与周围环境脱节会让图片失去意义。
单纯一个实体存在且与周围环境脱节会让图片失去意义。

不可行

UI集合

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

适当大小的图像
适当大小的图像

可行

图像模糊出现像素
图像模糊出现像素

不可行

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

在一个gellery中引入各种尺寸的缩略图来表示内容的层次结构。
在一个gellery中引入各种尺寸的缩略图来表示内容的层次结构。

支持一个列表里面存在多个功能
支持一个列表里面存在多个功能

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


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

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

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

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

在这幅图像中,渐变是60%透明度的黑色。
在这幅图像中,渐变是60%透明度的黑色。

这是被应用到上面图像里的渐变。
这是被应用到上面图像里的渐变。

可行

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


使用的scrim不能让图像看不清。
使用的scrim不能让图像看不清。

不可行

对于大一些的风景图,应该在特定的区域内加入文字保护scrim,但不要覆盖住整个图像。
对于大一些的风景图,应该在特定的区域内加入文字保护scrim,但不要覆盖住整个图像。

可行

图像不要被过度遮盖了。
图像不要被过度遮盖了。

不可行

颜色遮罩与文字保护scrims不同,前者可以被当做一个设计元素来使用。当你想要创建一个互补色遮罩时,可以基于内容并调用调色板API去创建你想要的颜色。
颜色遮罩与文字保护scrims不同,前者可以被当做一个设计元素来使用。当你想要创建一个互补色遮罩时,可以基于内容并调用调色板API去创建你想要的颜色。

可行

你可以用你的品牌色来优化图像。
你可以用你的品牌色来优化图像。

可行

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

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

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

头像使应用更具个性化,且占用的空间更小。
头像使应用更具个性化,且占用的空间更小。

一个品牌头像能够让人看一眼就能完成信息的传达,缩略图也是如此。
一个品牌头像能够让人看一眼就能完成信息的传达,缩略图也是如此。

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

相关
Extract prominent colors from an image

特征图像:特征图像是风格鲜明的图像,它一般会出现在非常规的布局中。
特征图像:特征图像是风格鲜明的图像,它一般会出现在非常规的布局中。

整合型焦点图像:整合型焦点图像是一个混杂了各种各样内容的布局方式。 整合型焦点图像并没有一个主要的视觉焦点。
整合型焦点图像:整合型焦点图像是一个混杂了各种各样内容的布局方式。 整合型焦点图像并没有一个主要的视觉焦点。

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

图片宫格
图片宫格

Gallery图片
Gallery图片