Image lists 图像列表

ALO APP设计 1006浏览

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

图像列表用于显示组合网格中的一系列图像

 

目录

1. 用法
2. 剖析
3. 行为
4. 类型
5. 主题化
6. 规格

 

用法

图像列表表现为重复模式中的一系列项目。 它有助于提高对所显示内容的视觉理解。

 

原则

 

类型

1.标准图像列表最适合使用于同等重要性的项目。他们拥有统一的容器大小,比例,内边距。
2.绗缝图像列表强调某些系列中的某些项目。他们使用不同的容器大小与比例创造层级结构。
3.编织图像列表方便浏览对等的内容。以不同比例的容器显示内容,创造有节奏感的布局。
4.瀑布流图像列表方便浏览未裁剪的对等的内容。容器高度根据图像尺寸大小决定。

 

剖析

图像列表由特定宽高比例的容器组成。图像列表的每一个项目都可以在图像容器的上方或下方显示可选的文本和图标。

 

内边距

图像列表中图像之间的内边距是可变的。建议使用以下内边距值:1,2,4,8,16,20,24,32dp

 

行为

操作
图像列表项目可以点击,拖动,过滤或者排序。

 

点击图像列表某项目会显示关于该项目的更多详细信息。

 

可以按日期,文件大小,字母顺序或其他参数对图像列表内容进行过滤或排序。

 


您可以拖动图像列表项目以对其重新排序,但如果图像已经被排序或过滤时,则应禁用此交互。

 


不允许在单个图像列表项目上使用滑动手势。 图像列表应该被视为一个组。

 

布局网格

定义的布局
图像列表的列结构不需要与布局网格对齐。 只有图像列表的边界需要与布局网格对齐。

一个跨越八列布局网格的图像列表,内边距为16bp

 

与其他组件对齐
图像列表可以放置在布局网格中的其他组件旁边。

一个跨越三列布局网格的图像列表,内边距为8bp

 

响应式
图像列表继承布局网格的响应式行为。

图像列表匹配响应式布局网格。

 

图像列表被固定到布局网格中。

 

滚动
图像列表可以垂直或水平滚动。 图像列表中的所有项目必须作为集合一起滚动。 图像裁剪可用于指示滚动方向。

图像列表内的项目一起滚动

 

图像列表可以水平滚动

 

类型

标准图像列表
标准图像列表最适合使用于同等重要的项目。他们拥有统一的图像容器大小,比例,和内边距。


标准图像列表可以添加或不添加文本标签显示。
1.图像列表仅包含图像
2.带图像和文字标签的图像列表表

 


在紧凑的布局中,标签可以显示在图像容器上层,该图像处理方式在保护文本的同时也确保了可读性。

 

绗缝图像列表
绗缝图像列表强调一个系列中的某些项目。用不同的图像容器大小与比例创造层级结构。


绗缝图像列表不应在图像容器下方显示文本,因为它会破坏布局。

 

编织图像列表
编织图像列表以不同比例的图像容器显示内容,创造有节奏感的布局。
方便浏览对等的内容。

 

瀑布流图像列表
瀑布流图像列表使用动态尺寸的容器高度来反映每个图像的纵横比。最适合用于浏览未裁剪的同级内容。

 

主题化

Crane 材料 主题
此旅行应用程序的图像列表已使用材料 主题化进行自定义。 定义范围包括颜色,排版和形状。


Crane主题的自定义图像列表

 

颜色
Crane主题的图像列表文本使用了自定义颜色。

元素

类别

属性

表面

表面

颜色

不透明度

#FFFFFF

100%

文本

表面之上

颜色

不透明度

#000000

87%

 

排版
Crane主题的图像列表使用自定义排版。

元素

类别

属性

文本

 

副标题1

字体

字型

字号

大小写

Raleway

Medium

16

首字母大写

 

形状
Crane主题的图像列表在图像容器上有自定义的圆角形状。

元素

属性

图像容器

左上角

右上角

右下角

左下角

圆角半径4bp

圆角半径4bp

圆角半径4bp

圆角半径4bp

 

Owl 材料 主题
此教育应用程序的图像列表文本已使用材料主题化进行自定义。


Owl自定义图像列表

 

排版
Owl的图像列表文本使用了自定义排版。

元素

类别

属性

文本

副标题1

(Subtitle 1)

字体

字型

字号

大小写

Rubik

Medium

16

首字母大写

 

形状
Crane主题的图像列表在图像容器上有自定义的角形状。

元素

类型

属性

图像容器 中间组件

左上角

右上角

右下角

左下角

角半径
0;0;0;0dp

 

Shrine Material 主题
此零售应用程序的图像列表已使用材料主题化进行自定义。 定义范围包括颜色和排版。


Shrine的自定义图像列表

 

颜色
Shrine的图像列表文本使用自定义颜色

元素

类别

属性

表面

表面

颜色

不透明度

#FFFBFA

100%

文本

表面之上

颜色

不透明度

#442C2E

100%

 

排版
Shrine的图像列表文本使用了自定义排版。

元素

类别

属性

文本

副标题

字体

字型

字号

大小写

Raleway

Medium

16

Title case首字母大写

 

规格

标准

 

绗缝

 

瀑布流-移动设备

 

桌面

 

瀑布流-平板电脑

 

编织

 

原文地址:Material Design

译者:ALO

 

转载请注明:学UI网 » Image lists 图像列表

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析
干货|交互设计中的「有效反馈」7大准则!干货|交互设计中的「有效反馈」7大准则!