VOCABULARY / 词条
主从布局
Master–Detail
保留可选择的项目列表,并呈现当前所选项目的详情。
可操作示例 · 虚构产品 FIELDNOTES
周末散步
沿着旧街,重新认识城市。
识别特征
- 明确的当前选择
- 列表和详情关联
- 窄屏保留返回路径
概念边界
分栏本身不等于主从;关键是列表选择与详情内容之间的联动。
什么时候考虑它
- 反复查阅多个项目的详细内容
- 需要保留列表上下文
什么时候慎用
- 项目之间需要同时并排比较很多字段
- 窄屏仍强塞两个不可读的栏
取舍
查阅连贯,但较窄空间需要改成列表与详情之间的导航。
条件规则 · 编辑建议
当选择列表项目后必须持续标明选中项目,并同步详情。
当空间不足必须提供完整列表到详情的可返回路径。
相关词条
Bento 网格 ↗条件替代 · 决定内容的主浏览结构
主从偏逐项查阅,Bento 偏概览。
行内编辑 ↗可以配合 · 在详情中修改小字段
编辑可以保留当前查阅上下文。
来源与支持范围
定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。
类型扩展与实现说明
能力标签只描述本演示;应用到产品时仍须重新验证。
{
"states": [
"unselected",
"selected"
],
"a11y": [
"列表项目使用有名称的按钮",
"详情更新不强抢焦点"
],
"motion": "不需要动画"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。