UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Visual Foundations

对齐纪律

对齐让用户少花力气理解页面边界、内容归属和操作对象。

alignmentlayoutpolish

设计原则

多个微小的不对齐会迅速让界面显得不专业,即使颜色和字体都正确。

原则 多个微小的不对齐会迅速让界面显得不专业,即使颜色和字体都正确。

设计动作 为页面、section、卡片内部设定共同对齐线;数字右对齐或等宽,图标与文字基线对齐。

正反例 正向示例:列表、表格、卡片网格、表单行。 反向示例:标题、正文、按钮各自有不同左边界。

适用场景 列表、表格、卡片网格、表单行。 多个指标或操作需要比较。

来源提示 来源提示:综合 Apple HIG、Material Design、NN/g 可用性原则和成熟设计系统中的布局/层级实践整理。

Agent 指令

为页面、section、卡片内部设定共同对齐线;数字右对齐或等宽,图标与文字基线对齐。

适用场景

  • 列表、表格、卡片网格、表单行。
  • 多个指标或操作需要比较。

避免做法

  • 标题、正文、按钮各自有不同左边界。
  • 数字和单位难以纵向比较。

知识元数据

分类
Visual Foundations
质量分
82%
版本
v1
发布
2026/6/6