标题栏是个很常见的模块，但是在实际设计中，似乎因为太常见，所以很多设计师直接应用控件库的控件而缺少更精细的处理。

其实标题栏也有一些细节设计可以演绎，尤其是各大主页的标题栏。

一、常见元素

标题栏上的元素一般是标题、功能入口（Icon或文字）、搜索展开栏、tab及其他（根据产品而定）。

二、设计细节

1、功能入口Icon的底部是否增加文字

一般是不需要文字的，因为标题栏出现的大多是常用功能和通用图标。

淘宝首页-“扫一扫”和“会员码”

但是淘宝首页的“扫一扫”和“会员码”就有文字，原因可能有二：

1）明确业务内容，突出该业务。淘宝的“扫一扫”并不是像支付宝和微信的扫码支付功能，它还包含“AR BUY+”、“拍立淘”等其他功能，是一个连接线上与线下、扩展应用场景的全局入口，因此增加文字提示有助于增强入口；而“会员码”的Icon很容易被理解为我的二维码，实际上它是一个链接商家、享受品牌权益的功能，增加文字也是消除歧义。

2）考虑泛用户人群的使用体验，提示Icon的含义。

支付宝首页-ICON提示文字

对于支付宝而言，标题栏的功能没有文字，而下方“扫一扫”那排就有。这应当与业务优先级和使用频次相关，毕竟“通讯录”和“更多”肯定没有下面的常用。

2、向下滑动后标题栏的变化

向下滑动后，由于原标题栏会消失，所以置顶的标题栏所承载的信息，需考虑到重要功能的使用便捷性，和对当前页面的辅助提示作用。

1）搜索框展开

猫眼、淘票票首页-搜索框展开

猫眼电影的搜索框始终展开，而其竞品淘票票的搜索在第一屏收起、向下滑动后展开。

这可能是首页策略不同，展开搜索框由于在视觉上做了强化，可能在第一屏就引导用户去搜索电影或影院（我如果知道某电影上映了，确实会直接去搜电影院而忽视下面的热门电影），而未展开的搜索会让人优先聚焦于热门电影，引导从电影入口进入、再选择影院等信息。

其次考虑到交互模式，展开的搜索框旁边放3个功能入口确实容易杂乱、易产生选择障碍，所以从视觉角度讲，当功能较多时使用Icon入口也比较合适。

2）部分重要功能悬浮置顶

支付宝首页-置顶标题栏

支付宝的首页是在标题栏滑动消失的功能中，选取重要功能置顶，以保证重要操作的连贯性。

3）标题栏增加提示信息

得到我的页面-昵称置顶

如上图，在很多我的页面中，昵称都会置顶展示，便于感知当前所在页面。而显示昵称而不是“我的”，一方面便于感知当前账号，另一方面塑造专属、亲近的感觉。

当然这种情况适合有昵称的，毕竟系统匹配的用户号缺少识别性，置顶也就缺少意义。

淘宝消息页-显示消息数量

当页面内容与数量有关，可以在置顶标题栏中显示数量，增强全局掌控感。

三、其他彩蛋

除此之外，标题栏也可以承载一些其他功能。

1）增强品牌感知与营销性

每日优鲜、优酷、盒马-增强品牌感知和营销性

每日优鲜在“分类”顶部显示“一小时达”的属性，在“发现”顶部显示LOGO；

优酷在顶部TAB增加热门标签；

盒马首页显示云超优势，都是在不同场景下，强化品牌特点、品牌感知以及增强营销性。

2、增加操作反馈入口（如已收藏功能）

每日优鲜、B站-增加操作反馈入口

虽然这种入口可以归属于“我的”模块，但因为这是经过用户筛选的信息，会更加感兴趣，如B站频道页右上角有“已订阅的频道”入口，所以它们在用户浏览当前页面的场景下也是有查看需求的，因此增加该入口可以缩短操作路径。

但遗憾的是，我看到的几个产品的入口设计都比较有歧义，可以尝试更换图标或者使用图标+文字的方式，以告知功能含义。

3、特殊设计

微博首页-筛选项

微博的设计比较有意思。

首页里，由于筛选项有多个层级，做成了TAB+筛选入口的二合一模式，而非传统的在顶部右侧出现“筛选”按钮。这种设计比传统设计更满足“所见即所得”的原理，即在操作处显示正在查看的关注组，同时也节约了标题栏空间。

微博发现页-下滑进入新状态

在“发现”页，首页下滑后，TAB置顶进入新状态，以提供沉浸式的浏览。我在操作中唯一不适应的是返回需要点击“<”而非下拉返回。不过下拉作为通用的刷新操作，在沉浸式状态中频率应当高于返回，同时也是推广信息的重要操作，所以将下拉让给刷新也是有原因的。

4、UI突破

虾米音乐-TAB UI设计

除了传统TAB中选中态那种，文字+底部横线的UI，也可以尝试一些新设计，比如虾米音乐的选中态就很亮眼。

【End】