E5.01.1top app bar设计研究

顶栏承载标题、返回与全局动作

别名: 顶部导航栏 · App Bar · navigation bar · 顶栏槽位

概念解释

顶部应用栏(top app bar)是一条贴在视口上沿的常驻条带,用来同时完成三件事:用标题回答「我在哪」,用返回回答「怎么离开这一层」,用右侧动作回答「这一页能对全局做什么」。它不是内容的一部分,而是把定向、回溯和页级操作钉在同一个稳定槽位里。把标题塞进正文第一行、把返回藏进手势、把分享和搜索拆到各处,顶栏作为定向装置就散了。

机制

人进入一页时先扫上沿:标题给出当前实体或视图名,左侧控件给出「还能往哪退」,右侧给出与本页对象相关、但不是内容流本身的操作。这三块被读成固定角色,不是因为视觉好看,而是因为跨页复用同一布局后,眼睛不必重新学习「返回在哪、名字在哪」。标题一旦改成口号或品牌名,定向失败;返回一旦改成关闭整个流程或跳到首页,回溯模型失败;右侧一旦堆进与本页无关的入口,用户会把顶栏当成又一条导航,而不是「这一页的手柄」。

槽位有容量上限。标题过长会挤掉动作,动作过多会挤掉标题的可读宽度。冲突时优先保住返回和短标题:没有离开路径的页面会把人困住,没有名字的页面会让人无法向别人描述位置。

怎么研究

首次注视出声定向:给新用户看去掉正文后的顶栏截图,问「你在哪、怎么离开、这一页能干什么」。自变量是标题类型(实体名 / 品牌 / 空)、返回语义(上一层 / 关闭流程 / 无)和右侧动作数量。因变量是定向正确率、指出返回的时间、以及是否把右侧动作误认为目的地。

跨页一致性实验更有诊断力:连续打开三层详情,只改顶栏槽位分配,记录用户是否还去左上角找返回。槽位一旦在某层被征用,后续层的回溯错误会集中出现。

边界

全屏媒体、游戏和沉浸阅读会暂时收起顶栏,定向改由别的线索承担,前提是手势能可靠唤回同一套槽位。桌面窗口已有系统标题栏和菜单栏时,应用内顶栏若再放一遍窗口控件,角色会打架。只有一页、没有层级的工具(计算器、计时器)可以没有返回,但标题和页级动作仍可能需要。屏幕阅读器用户不靠「上沿」这个空间槽,而靠标题层级和「返回」的名称;视觉槽位正确不等于无障碍名称正确。

怎么落地

  • 为每一层页面标明三个槽:标题写当前对象或视图名,左侧只放离开这一层的控件,右侧只放作用于本页对象的少量动作。
  • 标题不要写产品名、营销句或与正文重复的大段说明;返回不要同时承担「关掉整个任务」和「回到父级」。
  • 右侧动作超过两个就收入溢出菜单,并保证溢出里仍是动作而非新的一级目的地。
  • 验证:打码正文,只留顶栏,找未参与设计的人说出位置、离开方式和页级能力。说错的槽就是角色被占用了。再连走三层,看左上角是否始终还是离开当前层。

延伸

  • 同组E5.01.2 顶栏在大屏手机上处于难触达区 · E5.01.3 滚动隐藏顶栏会影响返回的可达性
  • 相邻E5.02 底部标签栏 · E5.09 回到顶部
  • 站内检索top app bar · navigation bar · wayfinding chrome

同组卡片

快捷操作

分享

分享当前页面

ios_share

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