E5.11.1in-page tabs设计

页签表达并列的内容分区

别名: 内容页签 · panel tabs · 同一位置的分区

概念解释

页签(in-page tabs)把同一对象上互斥的几块内容铺成并列分区:商品的详情 / 规格 / 评价,设置里的通用 / 通知 / 隐私。人还在同一个地方,只是在看该对象的不同切面。它不是应用级目的地——那些由底部标签栏承担——也不是动作。点页签不应把人送去另一个对象或打开一个流程。

机制

互斥切面需要同时被看见「还有哪几块」,又不能同时铺开以免抢高度。页签用一条短横排把切面名称常驻在对象旁边,选中态表示当前切面,未选中的仍在场,提醒还有规格和评价。因为还在同一对象上,标题、主键、主操作保持不动,变的只是主体区域。这个「对象稳定、切面切换」是页签能被扫懂的原因。

一旦某一项实际上是另一个对象(从商品页签跳到店铺首页)或是一个动作(页签上的「分享」),选中态无法解释:店铺不是这件商品的切面,分享没有可停留的分区。用户会把页签当成迷你站点地图,对象边界被冲掉。切面之间应当是平行的,而不是时间顺序或父子——那是步骤条或手风琴的工作。

边界

只有两个切面且都很短时,直接上下铺开比页签少一次点击。切面之间有强烈依赖(先填 A 才能看 B)时,伪装成并列会让人跳进未就绪的分区。桌面把页签做成浏览器那样可关闭、可拖动的文档槽,那是多文档界面,不是对象切面。移动底栏是应用目的地,不要把「消息」做成某页内部页签又做成底栏项,两套并列模型会打架。

怎么落地

  • 页签只列出当前对象的平行切面,名称用切面本身(评价、规格),不要用去别处的目的地或动词。
  • 切换时保持对象标题和页级动作不变,只替换主体;地址若要反映切面,应是同一对象下的片段而不是新的实体。
  • 切面数量以一排能读完为先;不是平行切面的内容改用列表或独立页。
  • 验证:切几个页签,问「你还在看同一个东西吗」。若答案变成「我去了另一处」或「我刚做了一个动作」,该项就不是切面。再看未选中的页签是否仍在,被藏起来的切面会失去「还有这些」的预告。

延伸

  • 同组E5.11.2 页签数量超出宽度需滚动或折叠 · E5.11.3 页签内的滚动位置需独立保持
  • 相邻E5.02 底部标签栏 · E5.10 步骤条
  • 站内检索in-page tabs · content panels · facet navigation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.11.1