Lists 列表

ALO APP设计 1653浏览

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

 

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

 

目录

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

 

用法

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

 

原则

类型


1. 单行列表
单行列表最多包含一行文本
2. 双行列表
两行列表最多包含两行文本
3. 三行列表
三行列表最多包含三行文本

 

剖析

列表
列表针对阅读理解进行了优化。列表由一个连续的细分列组成,称为包含内容项的行。


1. 列表
2. 行
3. 列表项目内容

 

内容类型

内容类型可以采用不同的形式,具体取决于列表的需求。

列表项由三种不同的内容类型组成:
1. 辅助图形
2. 主要文本
3. 元数据

 

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


带控件的列表包含三种内容类型:
1. 支持视觉效果
2. 主要文本
3. 列表控件

 

列表应易于浏览,列表的任何元素都可用于锚定和对齐列表项内容。 当元素(例如辅助图形和主要文本)放置在每行列表项的一致位置时,会更易于浏览。


1. 样本列表
2. 一行中的内容位置
3. 辅助图形对齐以便于浏览
4. 对齐文本以便于浏览

 

视觉,分隔线和间距

列表结构可以使用图形,分隔线和间距来组合。

 

 

 

副标题

副标题用于描述列表的各个部分。它们出现在列表行上。

1.副标题
副标题应与列表中的头像或图标左对齐。
2.副标题内嵌
如果浮动操作按钮与列表头像或图标对齐,则副标题应与文本内容对齐。

 

行为

 

转换

点击列表项会全屏展开它。

要展开列表项,用父子转换。

 

手势

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

要归档某列表项,请将其滑动。

 

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

要重新排序列表项,请将其上下拖动。

 

展开

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


缩小至50% 1.手机上的三行列表 2.桌面上的两行列表

 

转变

在更大的屏幕上,列表可以转变为图像列表。


1.手机上的单行列表
2.桌面上的图像列表

 

类型

单行列表

 


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

 

两行列表

在两行列表中,每一行最多包含两行文本

 


文本数量可以在同一列表中的不同行之间变化。

 


在桌面上按比例缩小到50%,带有头像和元文本的两行列表

 

三行列表

 


文本数量可以在同一列表中的行之间变化。

 


在桌面上,一个带有大缩略图和元文本的行列表

 

列表控件

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

 

复选框
复选框可以是主要操作或辅助操作。


1.辅助操作
此复选框是列表项的辅助操作。

2.主要操作
此复选框既是列表项的主要操作,也是状态指示器。

 

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

 

 

主题化

 

Basil Material主题

这款菜谱应用程序列表已使用材料主题进行化自定义。 自定义范围包括颜色和排版。


Brasil的自定义列表

 

颜色
Basil的列表在四个元素上使用自定义颜色:背景,图标,项目文本和数量文本。

元素

类别

属性

表面

表面

颜色

不透明度

#FFFBE6

100%

列表文本,图标

主要

颜色

不透明度

#356859

100%

数量文本

表面之上

颜色

不透明度

#29302E

100%

 

排版
Basil的列表使用自定义排版的列表项和数量文本。

元素

类别

属性

列表文本

副标题(Subtitle 1)

字体

字型

字号

大小写

Lekton

Bold

16

首字母大写

数量文本

标题(Caption)

字体

字型

字号

大小写

Lekton

Regular

12

句首字母大写

 

Crane material 主题

此旅行应用程序的列表已使用材料主体化进行了自定义。 自定义范围包括颜色和排版。


Crane的自定义列表

 

排版
Crane的列表标题和标题文本使用自定义排版。

元素

类别

属性

短标题文本

副标题(Subtitle 1)

字体

字型

字号

大小写

Raleway

Medium

16

首字母大写

说明文本

说明(Caption)

字体

字型

字号

大小写

Raleway

SemiBold

12

首字母大写

 

规格

 

单行列表

 

双行列表

 

三行列表


在上下的示例中,后面的内边距(图像右边的内边距)都是16dp。

 

折叠和展开

 

原文地址:Material Design

译者:ALO

 

转载请注明:学UI网 » Lists 列表

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