标题栏

标题栏是布局在界面顶部的导航类控件，用于呈现界面名称和操作入口。开发相关描述请参考 Navigation/Title 文档。

标题栏一般由标题和右侧功能图标组成，在一级标题栏下左侧不可以出现返回标题，若在 Mini 样式下默认带上返回图标，需要通过 hideBackButton 隐藏其显示。标题栏的使用通常与系统信号栏的布局相邻，在默认情况下标题栏的背景色会延伸至信号栏区域，通过 expandSafeArea 接口可以实现安全区的避让。

强调型标题栏

主要用于一级界面突出标题区域，在没有特殊要求的情况下，模块的一级界面应该使用强调型标题栏。

支持显示单行标题、双行标题、强调型标题样式。

普通型标题栏

用于不需要突出标题的场景。当界面上方主要区域为图形化展示时，应该使用普通标题栏。

支持单行标题和双行标题两种样式。

抽屉型标题栏

用于展示不同的分类，可以快捷地进行切换、查找。抽屉型在不同尺寸设备上呈现的效果略有差异，手机端为侧边遮罩层，平板端等大屏设备为分栏界面布局。通常效率型、办公类及内容型应用较为常用。抽屉标题栏需要配合 SideBarContainer 结合使用。

除一级界面、编辑界面和选择界面外，所有其他界面都展示二级页标题。二级标题栏通常使用 NavDestination 控件组合使用，NavDestination 是子页面的根容器控件，用于显示 Navigation 的内容区。

编辑界面

当需要对界面内容进行编辑时，使用编辑界面标题栏。详情能力可参考 EditableTitleBar 控件相关能力。

编辑界面标题栏一般使用左侧关闭右侧确认的布局形式，在一些需要大量编辑文本的场景下可以使用返回按钮。

组件已提供沉浸光感样式，为标题栏组件提供更沉浸的用户界面体验。

标题栏中的沉浸光感材质主要应用在可操作的按钮以及与标题栏产生耦合关系组件。可操作按钮：如标题左侧返回按钮，标题右侧更多按钮、搜索按钮、文本按钮等；产生耦合关系组件：指在标题栏内存在的其他组件类型，如标题栏下方搜索框、分段按钮。

适配沉浸光感效果通常需要结合渐变模糊增加可读性。渐变模糊视效通过柔和的渐变曲线实现内容层与标题区的分离，该处理方式既保障了标题栏在复杂背景中的可读性，也维持了界面各层级之间的空间连续性。用户首眼所见的不再是相互独立的控件与内容区块，而是一个具有纵深关系、层级分明的整体空间。渐变模糊视效中包含了颜色属性，可通过配置颜色实现不同页面背景色下的协调一致。

渐变模糊层较标题栏最底边高 32 vp（跟手隐藏情况下相同），渐变颜色需与页面背景色保持一致。

为了进一步保障标题内容可读性，建议在内容复杂、色彩丰富的页面使用动态反色能力。通常标题栏中的颜色属性由浅色模式和深色模式两种色彩配置方案，动态反色是指在标题栏下方内容与标题栏重叠情况下出现可读性问题时，标题栏中的容器材质、图标、文本等内容颜色在深浅色模式两种色彩方案中进行动态切换，以提高复杂场景中标题栏内容的可读性。

光感交互

光感交互是手指触控位置与视觉效果相结合，模拟真实物理界面中触摸可发光事物的视觉反馈。当用户与标题栏中的按钮产生交互时，指尖位置被定义为动态光源，向周围材质表面投射光晕，同时照亮容器边缘，光照强度随距离衰减。这一交互反馈使操作行为本身成为界面光学环境的变化源，用户通过视觉即可感知交互的进程与状态。

标题栏可以通过模糊材质实现更高级的视觉效果，HDS 标题栏控件默认背板带有模糊材质。同时，该控件提供了两种模糊类型。通用模糊：组件对标题栏的背景进行均匀的模糊处理，模糊强度一致，边界清晰，用于强调控件与内容的层级分隔；渐变模糊：模糊效果在空间维度上呈现渐强/渐弱的变化，模糊边界柔和，用于增强页面沉浸感。HDS 标题栏控件开发相关描述请参阅 HDS Navigation 文档。

直接模糊

在标题栏中，通用模糊作为独立视觉层级存在，与内容层形成悬浮空间关系，适用于页面内容与标题栏产生交叠的场景。

标题栏的通用模糊默认带有提亮压暗属性，能够激发色彩活力，提高背板通透度。同时标题栏支持添加自定义组件，如添加自定义内容，模糊背板会随着标题栏高度变化而变化，分割线始终位于模糊背板下边缘。

为提高内容边界可识别性，避免视觉认知障碍问题，默认情况下，模糊背板下边缘带有一条 1 px 的分割线。

半模态标题栏在满足内容与标题区产生重叠关系时，采用通用模糊类型，提升半模态页面质感。

渐变模糊

渐变模糊与页面内容的融合度更高，通过弱化视觉边界，以延展页面空间感。

渐变的颜色蒙层支持自定义修改颜色，在不同场景下，可通过匹配背景颜色增强页面沉浸感。

直接模糊和渐变模糊类型都具备两种模糊跟手生效的方式：直接生效和过渡生效。

直接生效

滑动内容进入/离开标题栏区域过程中，模糊背板和分割线透明渐变出现/消失。此方式适用于非沉浸式场景。

当页面内容进入/离开标题栏区域时，默认触发模糊 & 分割线渐变显示/隐藏，增强触顶操作的心理暗示。

过渡生效

滑动前后标题栏内容发生颜色/状态变化，滑动过程中，线性跟手变化。此方式仅适用于沉浸式到非沉浸式相互切换的场景。

堆叠与模糊材质

使用ark UI的标题栏组件，除了通用的布局规格以外，也提供了可堆叠样式，开发者可以通过 BarStyle 配置其属性为 STACK 来改变标题栏的布局层级。使用了堆叠样式后，界面中的内容便可以穿透到组件下方。在 NavigationTitleOptions 中将标题栏背景色设置为透明度，同时使用 backgroundBlurStyle 属性配置其模糊样式的枚举，结合堆叠样式和模糊属性实现标题栏的整体模糊效果。

在电脑场景下，标题栏使用更小的字体提高界面信息密度，同时去掉了圆形底板。

强调型标题栏

主要用于一级界面突出标题区域

支持显示单行标题、双行标题

普通型标题栏

用于不需要突出标题的场景。当界面上方主要区域为图形化展示时，应该使用普通标题栏。

支持单行标题和双行标题两种样式。

普通标题栏：左侧元素

普通标题栏：右侧元素

最多同时支持 3 个图标 (含菜单)。

普通标题栏：中间元素

支持放置工具栏、分段按钮等控件

强调型标题栏

标题栏用于指示当前页面的位置。在方表上，标题栏存在如一/二级标题栏的区分。

圆形表

单行标题：文字19vp，可换2行（特殊场景可不换行或换更多行），放不下则缩小字号至 18vp、15vp，还放不下则用“...”截断。

双行标题：文字19vp，不支持换行，文本超长则先缩小字号至18vp、15vp，最后考虑最大区域内跑马灯显示。

方形表

通用型标题：

一级标题栏： 适用于界面内容宽松的界面，左右侧可增加快捷入口/按钮。文字19vp，可换3行（特殊场景可不换行或换更多行），放不下则缩小字号至 16vp、15vp，还放不下则用跑马灯。

二级标题栏：除一级界面外，所有其他界面都展示二级页标题，右侧可增加快捷入口/按钮。文字19vp，可换3行（有辅助文本可换3行），放不下则缩小字号至 15vp还放不下则用跑马灯。

紧凑型标题：

紧凑型时效标题栏：适用于具有时效性的界面，如当前生理数据情况。文字15vp，不可换行，放不下则缩小字号至 13vp，还放不下跑马灯显示。

紧凑无时效标题栏：适用于界面内容紧凑且左右侧无元素的界面。文字19vp，不可换行，放不下则缩小字号至 15vp，还放不下跑马灯显示。