Material Design Imagery 图像

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

图像以视觉的方式传达并区分产品。

4swarcbykqr.png插图

目录

原则

用法

主图

缩略图

信息图

原则

图像不仅可以提升用户体验,还能传达品牌的视觉语言。图像有助于讲述故事,澄清难以用文字表达的复杂信息,并向用户展示如何执行操作。

kwvtw2p53we.png插图(1)

用法

应该根据图片能传递的信息和产品反映的风格来选择图像。无论你是使用用户生成的照片,还是专业摄影图,亦或是不同风格的插图,它们都应该能够反映您产品的外观和感觉。通过共享相同的功能、风格和意图,图像之间应该彼此相关。

使用多种媒介

插图和照片可以同时存在于同一个产品中。

e5341eibc1w.png插图(2)

拥有焦点

在你的图像中要有一个标志性的焦点,使其不影响不同尺寸的裁剪方式。焦点可以是从单个实体到整体构成的任何事物。能以一种令人难忘的方式清晰地向用户传达概念。

pp51fkr2gim.png插图(3)

awijheashcd.png插图(4)

尺寸恰当

为了以最佳方式展现不同尺寸和类型的图片,请根据不同显示器和平台适当调整大小。分辨率是图像加载速度的最重要因素。为了保证加载速度,请尽可能降低分辨率。

测试特定的比例和设备合适的分辨率大小,确保图片不会像素化。

01h23352jhk.png插图(5)

可访问

替代文本

为确保可访问性,图像应该附加替代文本(或标题)以便于被屏幕阅读器读出,从而服务于具有视觉障碍的用户。如果没有替代文本,那么使用屏幕阅读器的用户只能听到“图像”这个词,而得不到任何详细的视觉信息。

tdc2rp5xwrd.png插图(6)

使用图像的方法

使用视觉效果在应用中创造身临其境的故事和背景感。

0jjyscdrdta.png插图(7)

缩小至62.5%。

指导用户

在给予用户提示时,步骤图允许用户按照自己的进度滑动浏览一系列图片。

wap22mcnjye.png插图(8)

这个烹饪应用通过步骤图向用户展示如何烹饪。

当用户第一次与某个应用进行交互时,图像能够帮助他们识别内容是什么。

scyskuiofn3.png插图(9)

图像可帮助用户选择感兴趣的类别或主题,以更好地个性化他们在应用中体验的内容。

允许用户比较相似的项目

风格统一的图像可以帮助用户快速浏览和做出决定。

2pj2k2tecqr.png插图(10)

在应用程序中使用时,静物摄影表现出统一的风格,让用户可以轻松地比较产品。

取悦用户

当用户在用户体验过程中遇到令人困惑或令人沮丧的点时,可以使用图像来取悦用户,例如当出现错误状态时。

04c5g3nvwxz.png插图(11)

这个应用通过插图来帮助用户开始使用。

提供情景

图像可以帮助用户理解相关文字的意图和情景。

12tt4mm5fwf.png插图(12)

这个应用通过图像来传达文章的情景。图片缩小至62.5%。

主图

用法

主图有助于吸引用户注意力、提供与内容相关的情景、或强化品牌形象。

v5cgckwcllb.png插图(13)

位置

主图固定在最突出的位置,例如屏幕顶部。

c03apk1xixb.png插图(14)

缩略图

用法

缩略图是一种在有限空间内展示信息的小图片。它们通常充当点击目标,引导主要内容,出现在卡片或列表等组件中。

缩略图被用于:

提供更多信息提供其他界面内容的预览协助导航

5mmnu2yfnqj.png插图(15)

缩略图可以裁剪成不同的形状。

v2zzpll32mt.png插图(16)

这些圆形缩略图代表该应用中的分类。

位置

诸如文本或动作等元素,可以置于卡片类别的组件中的缩略图之上。

4xkrzdqwp3p.png插图(17)

列表中的一行缩略图

以多种比例显示缩略图可表达不同程度的视觉重要性。

gih0m3ng03z.png插图(18)

卡片中具有不同比例的多个缩略图。

信息图

用法

信息图像有助于用户理解内容,而不是成为用户界面中的焦点。信息图可以采用图标、图标和头像的方式,从字面上或概念上代表实体或内容。信息图占据的空间很小。

头像

头像应使用简单的背景以专注于主题。头像可以用(logo或品牌图形)来代表用户或品牌。

aqfmbzxth2z.png插图(19)

fe2drwsmbq5.png插图(20)

头像可以以任何形式用于多种组件内。

w4w3in51e0q.png插图(21)

方形头像

图表

图表可以展示数值。

r2r2r2tcs1h.png插图(22)

饼图说明了单个数值和总数值之间的关系。

图标

图标可以帮助用户理解内容。

tfcte2b51lc.png插图(23)

绿色复选圆圈图标告知用户这一操作已经成功完成。

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

UI、UE都应该掌握的6条专业知识点

2020-10-11 22:04:46

UI设计

Material Design Data Visualization 数据可视化

2020-10-12 0:04:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索