间距/网格 设计体系

检查进度

重置

01

结构及意义

在使用环境中比较信息和演示。

使用通用距离集选择常规距离级别，而不是任意调整每个点。区分元素内的间距和页面部分之间的间距。示例 标签和输入框接近；两组设置差距较大。根据用途命名使用元素填充、列表间距和页边距变量。将组件内的填充与区域之间的布局间距分开;相同的数值并不代表相同的角色。柱和天沟闩锁指示如何划分列、列之间的空间以及每个宽度级别的外边距。指定每个尺寸的列数、列间距和外边距;实际内容应该适合网格,而不仅仅是色块图案。根据内容更改布局当内容开始变得拥挤时设置一个过渡点并保持共享规则。在内容需要时设置布局更改点,而不仅仅是通过设备名称;检查两个指定点之间的宽度。

02

交互性和可用性

尝试操作，更改状态并继续工作。

具有适合上下文的密度如果合适的话如果支持紧凑模式，文本、触摸区域和焦点仍然可读。紧凑模式仍然必须保留交互区域和可读性;在缩放按钮或文本之前减少装饰量。比较对齐轴检查标题、输入框和操作是否与意图具有相同的指导。尝试长内容并缩放检查长标签、多行，并在最终确定网格之前放大文本。尝试长标签、多列、长翻译和大缩放级别;在这些情况下,网格错误通常出现在样本数据之前。

进度会自动保存在此浏览器中。

指南

检查方法

01

使用通用距离集

区分元素内的间距和页面部分之间的间距。

示例

应用示例

使用通用距离集

标签和输入框接近；两组设置差距较大。