设计原则 / Alignment
Alignment
让元素沿共同的边缘、中心线、基线或网格建立可感知的视觉关系。
关键字段
What · 是什么
- 定义
- 让元素沿共同的边缘、中心线、基线或网格建立可感知的视觉关系。
Why · 为什么
- 核心问题
- 元素是否通过共同的边缘、中心线、基线或网格建立清楚的视觉关系？
- 作用机制
- 共同轴线使分散元素看起来属于同一结构，并降低视线在页面中寻找关系的成本。无意的错位会制造漂移感，让用户难以区分层级和归属。
How · 怎么做
- 主要用途
- 增强秩序、可扫描性和元素之间的关联。
- 设计指导
- 建立稳定网格和基线；同类内容使用一致对齐方式；有意打破对齐时必须服务于强调。
Evidence · 证据
- 局限与边界
- 对齐不等于所有内容居中。几何对齐可能需要光学微调，响应式布局和不同语言长度也需要重新验证。
- 最后验证时间
- 2026-08-21
- 常见错误
- 对齐不等于全部居中；几何对齐可能需要光学微调；响应式布局需要重新验证。
Lifecycle · 生命周期
- 状态
- 待复核
相关要素与机制
这条内容目前没有关联内容。
暂时没有可展示的关系内容。