UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Design Systems Page Patterns

响应式布局稳定性

固定格式 UI 元素需要稳定尺寸和响应式约束,避免内容变化引起跳动或重叠。

responsivestabilitylayout

设计原则

看板、棋盘、工具栏、计数器和按钮组都应预先定义尺寸规则。

原则 看板、棋盘、工具栏、计数器和按钮组都应预先定义尺寸规则。

设计动作 为工具栏、卡片、列表行和控件设置 min/max、aspect-ratio、grid tracks 和文本换行/截断规则。

正反例 正向示例:仪表盘、创作工具、游戏、管理列表。 反向示例:hover 后卡片高度变化。

适用场景 仪表盘、创作工具、游戏、管理列表。 动态文本、hover 状态或 loading 会改变内容。

来源提示 来源提示:综合 GOV.UK、Carbon、Polaris、Atlassian、Design.Systems、Design Systems Repo 与产品案例库的模式实践整理。

Agent 指令

为工具栏、卡片、列表行和控件设置 min/max、aspect-ratio、grid tracks 和文本换行/截断规则。

适用场景

  • 仪表盘、创作工具、游戏、管理列表。
  • 动态文本、hover 状态或 loading 会改变内容。

避免做法

  • hover 后卡片高度变化。
  • 长单词撑破按钮。

知识元数据

分类
Design Systems Page Patterns
质量分
82%
版本
v1
发布
2026/6/6