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

卡片与面板的密度和可供性

卡片应表示对象,面板应表示工具或上下文;两者需要不同密度和交互提示。

cardspanelsaffordance

设计原则

可点击对象必须可识别,纯信息容器不应伪装成按钮。

原则 可点击对象必须可识别,纯信息容器不应伪装成按钮。

设计动作 可点击卡片提供 hover/focus 和明确主链接;工具面板保持稳定标题、控件和状态区,不嵌套装饰卡。

正反例 正向示例:资源库、知识列表、管理审核、详情侧栏。 反向示例:整张卡可点但没有 hover/focus。

适用场景 资源库、知识列表、管理审核、详情侧栏。 卡片内有多个子操作。

来源提示 来源提示:综合 Apple HIG、Material Design、GOV.UK/Polaris/Atlassian 组件实践和交互可访问性原则整理。

Agent 指令

可点击卡片提供 hover/focus 和明确主链接;工具面板保持稳定标题、控件和状态区,不嵌套装饰卡。

适用场景

  • 资源库、知识列表、管理审核、详情侧栏。
  • 卡片内有多个子操作。

避免做法

  • 整张卡可点但没有 hover/focus。
  • 面板套面板导致层级混乱。

知识元数据

分类
Interaction Responsive Motion
质量分
82%
版本
v1
发布
2026/6/6