Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

主从布局

Master–Detail

加入比较 +

保留可选择的项目列表,并呈现当前所选项目的详情。

可操作示例 · 虚构产品 FIELDNOTES
当前手记

周末散步

沿着旧街,重新认识城市。

识别特征

  • 明确的当前选择
  • 列表和详情关联
  • 窄屏保留返回路径

概念边界

分栏本身不等于主从;关键是列表选择与详情内容之间的联动。

什么时候考虑它

  • 反复查阅多个项目的详细内容
  • 需要保留列表上下文

什么时候慎用

  • 项目之间需要同时并排比较很多字段
  • 窄屏仍强塞两个不可读的栏

取舍

查阅连贯,但较窄空间需要改成列表与详情之间的导航。

条件规则 · 编辑建议

当选择列表项目后必须持续标明选中项目,并同步详情。
当空间不足必须提供完整列表到详情的可返回路径。

相关词条

Bento 网格 ↗条件替代 · 决定内容的主浏览结构

主从偏逐项查阅,Bento 偏概览。

行内编辑 ↗可以配合 · 在详情中修改小字段

编辑可以保留当前查阅上下文。

来源与支持范围

Apple HIG · Split views ↗

主面板选择可驱动次面板内容;紧凑环境需要适配。

检索日期:2026-09-15

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示;应用到产品时仍须重新验证。

{
  "states": [
    "unselected",
    "selected"
  ],
  "a11y": [
    "列表项目使用有名称的按钮",
    "详情更新不强抢焦点"
  ],
  "motion": "不需要动画"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。