Material Design—

#我是一个可爱的搬砖工系列# 尝试对照英文翻译学习MD的组件设计，借此加深各种组件的应用~

Material Design链接：Material Design——Lists

列表是连续的、垂直的文本或图像索引。

一、用法

列表是一组连续的文本或图像。它们由包含主操作和补充操作的项组成，这些操作由图标和文本表示。

△ 原则

· 逻辑列表应该以便于扫描的逻辑方式进行排序，例如按字母顺序、数字、时间顺序或用户喜好排序

· 可控的列出当前的内容，这样可以方便地识别集合中的特定项并对其进行操作

· 一致性列表应该以一致的格式显示图标、文本和操作

二、类型

1. Single-line list

单行列表项最多包含一行文本

2. Two-line list

两行列表项最多包含两行文本

3. Three-line list

三行列表项最多包含三行文本

三、分析

列表是为阅读理解而优化的。列表由一个连续的细分列组成，称为包含内容项的行。

1. List

2. Row

3. List item content

△ 内容类型

内容类型可以采取不同的形式，这取决于列表的需要。

列表项由三种不同的内容类型组成：

1. Supporting visuals

2. Primary text

3. Metadata

列表控件可以显示列表项的信息和操作

带有控件的列表包含三种内容类型：

1. Supporting visuals

2. Primary text

3. List control

列表应该易于扫描，列表中的任何元素都可以用于锚定和对齐列表项内容。当元素(如支持可视文本和主文本)放置在列表项之间的一致位置时，可扫描性得到改善。

1.样品列表

2.内容放置在一行中

3.支持视觉效果是对齐的，以便于扫描。

4.主文本对齐，便于扫描

△ 可视化、分隔符和间距

列表结构可以使用可视化、分隔符和间距来组织。

Right：通过在行的边缘锚定支持视觉(如缩略图)来提高扫描能力；Caution：将支持可视化放置在行的中心会使您很难看到主要内容和支持内容之间的关系。

Right：在包含大量内容的行之间放置一个分隔符，例如有三行列表的行；Caution：通过保持列表项之间的足够空间来区分行。

主要行动占据了大部分空间：

1.主要活动区域；

2.次要活动区域。

清晰的层次结构是通过对左边最显著的内容和右边最不明显的内容来创建的：

1.区别比较大的内容；

2.区别比较小的内容。

△ 子标题

子标头描述列表的部分，它们出现在列表行中。

1. Subheader

子标题应该与列表中的头像或图标左对齐。

2. Subheader inset

如果浮动操作按钮与列表化身或图标对齐，则子标题应与文本内容对齐。

四、行为

△ 转换

点击列表项会将其扩展到整个屏幕。

若要展开列表项，请显示父-子转换。

△ 手势

滑动列表项(左或右)可以执行操作。

若要存档列表项，请滑动它。

可以拖动项来重新排序列表。

若要重新排序列表项，请拖动它。

△ 拓展

三行列表转换(在移动上)显示为两行列表(在桌面上)。

Scaled down to 50%1. A three-line list on mobile 2. A two-line list on desktop

△ 改变

在屏幕上，列表可以转换为图像列表。

1. A one-line list on mobile 2. An image list on desktop

五、类型

△ 单行列表

左：单行文本列表；右：单行具有文本跟图标的列表。

缩小到桌面上的50%，一个带有图标和文本的单行列表。

△ 双行列表

在两行列表中，每行最多包含两行文本。

左：一个带有图标和文本的双行列表；右：带有缩略图和元文本的两行列表。

同一列表中不同行之间的文本数量可能有所不同。

缩小到桌面上的50%，一个两行的列表，附带一个化身和元文本。

△ 三行列表

左：带有头像的三行文字；右：包含缩略图和元文本的三行文本列表。

同一列表中的行之间的文本数量可能有所不同。

在桌面上，一个三行的列表，并附有一个大的缩略图和文本。

△ 列表控件

列表控件显示列表项的信息和操作。

· 复选框

复选框可以是主操作，也可以是辅助操作。

1.二次操作

这个复选框是列表项的次要动作。

2. 主要操作

此复选框既是列表项的主要操作，也是状态指示符。

· 拓展和折叠

通过垂直展开和折叠列表内容来显示和隐藏现有列表项的详细信息。

· 开关

点击列表控件可以扩展列表。

· 排序

通常以编辑模式出现，拖动列表项将其移动到列表中的其他位置。此重新排序图标是列表项的辅助操作。

END.THANKS FOR YOUR READING~

如有不当，还请多多指教~

Material Design——Lists