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

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

 

目录

原则

用法

主图

缩略图

信息图

 

原则

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

 

用法

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

 

使用多种媒介

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

 

拥有焦点

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

 

尺寸恰当

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

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

可访问

替代文本

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

 

使用图像的方法

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

缩小至62.5%。

 

指导用户

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

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

 

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

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

 

允许用户比较相似的项目

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

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

 

取悦用户

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

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

 

提供情景

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

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

 

主图

用法

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

 

位置

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

 

缩略图

用法

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

缩略图被用于:

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

 

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

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

 

位置

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

列表中的一行缩略图

 

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

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

 

信息图

用法

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

 

头像

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

 

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

方形头像

 

图表

图表可以展示数值。

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

 

图标

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

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

 

原文地址:Material Design

译者:杜雅黎

 

转载请注明:学UI网 » Material Design Imagery 图像

登录收藏
 
你可能喜欢的:
Material Design Offline States 离线状态Material Design Offline States 离线状态
Material Design Writing 书写Material Design Writing 书写
真正优秀的图标,少不了这7个底层设计原则真正优秀的图标,少不了这7个底层设计原则
全面解析APP「个人中心」设计思路全面解析APP「个人中心」设计思路
花了半年时间,我们做了一套通用型移动设计规范给大家花了半年时间,我们做了一套通用型移动设计规范给大家
Material Design Onboarding 导览Material Design Onboarding 导览
数据可视化设计师如何建立灵感库?数据可视化设计师如何建立灵感库?
从4款主流产品出发,掌握“搜索”交互从4款主流产品出发,掌握“搜索”交互
游戏中「按钮大小以及位置」的思考游戏中「按钮大小以及位置」的思考
Material Design Launch Screen 启动页Material Design Launch Screen 启动页