4.6 布局-密度

密度

Material Design默认使用“低密度”空间（具有较大的点击区域和边距），但当能提升用户体验时，也支持“高密度”布局。

目录

用法

布局

触控和点击对象

排版密度

用法

密度原则

• 易浏览

   密集型UI布局使大宗内容更易于浏览和交互。

• 优先性

   密集型UI布局通过减小操作间隙使用户更专注。

• 实用性

   密度原则支持单个界面上合理显示尽可能多的内容和操作。

应用场景

是否提高UI的密度取决于用户与组件的交互方式。

高密度排布的组件使用户能够以更易于管理的方式处理大宗信息。列表、表格以及长表单等组件都受益于提高布局密度。

1. 默认密度，48dp行高

2. 高密度，32dp行高

1. 默认密度，56dp文本框高

2. 高密度，44dp文本框高

组件与其所有嵌套项中密度的运用应保持一致。

1. 默认密度，40dp行高，36dp执行栏（ACTION）高

2. 高密度，32dp行高，24dp执行栏（ACTION）高

慎用场景

高密度不宜使用在带有任务和警报性质的组件上。

焦点任务

不要将高密度使用在包含多个焦点任务的组件上，例如与下拉菜单或选择器的交互。提高这些组件的密度将降低它们的可用性。

错误示例

不要在日期选择器上使用高密度，会降低其可用性。

警报和消息

不要在提醒用户做改变的组件上使用高密度，例如snackbars（提示）或对话框。将高密度应用在警报上会降低它们的突出效果。

错误示例

不要在弹框上使用高密度，会降低其易读性和显著性。

布局

栅格和组件密度

要创建易于浏览的内容组，请使用低密度栅格与高密度组件。组件密度越高，栅格的外边距和内间距就应该更大。

高密度行高组件，栅格外边距和内间距较大。

默认行高组件密度，栅格的外边距和内间距较小。

错误示例

不要同时使用高密度栅格布局和高密度组件，这将使内容组难以区分。

触控和点击对象

触控对象规格

触控对象使用在可接收触控和非触控输入的设备上。为平衡信息密度与可用性， 触控对象的大小至少为 48 x 48 dp，每个对象间的距离至少为8dp。

触控对象的最小尺寸为 48 x 48 dp

少数情况下，触控对象尺寸会小于所推荐的最小值48dp。

1. 文本段落超链接中较小的触控对象。

2. 日期选择器中较小的触控对象。

密度应用

列表中的默认密度

正确示例（绿色）

在这个高密度列表中，最小间距(48px)由每个列表项上的点击对象决定。

错误示例（红色）

请勿将低于最小尺寸48dp的触控对象使用在同时支持触控和点击输入的设备上。

点击对象

在非触摸式的UI上，点击对象大小至少24x24dp，对象间距至少8dp。

点击对象最小尺寸为24x24dp

密度应用

使用高密度图标（18dp）时，最小距离（24px）由点击对象决定。

排版密度

行高

行高是指文本行基线之间的距离，可用于高密度排版布局。当减小行高时，一定要确保使用4dp基线网格。

1. 较大的行高

2. 较小的行高

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考