Interface Lab
返回知识库
Design Systems Page Patterns

响应式布局稳定性

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

设计原则

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

原则

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

设计动作

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

正反例

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

适用场景

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

来源提示

来源提示:综合 GOV.UK、Carbon、Polaris、Atlassian、Design.Systems、Design Systems Repo 与产品案例库的模式实践整理。 GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

Agent 指令

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