最近在做设计改版，遇到了不少问题，其中一个就是顶部栏的配色问题。后来简单针对移动端的顶部栏设计做了一个总结，在这里分享给大家。

顶栏样式

下图是最常见的顶栏样式，最上面是状态栏，中间是界面标题，左右两侧可能会有图标​​，代表返回、消息提示、设置等操作。

但当我查看手机上的应用程序时，我发现并不是所有产品都采用了这种风格。我挑选了五个“异常值”，并逐一进行了分析。

去标题

有些产品的一级界面已经把顶栏的标题删除了，要知道为什么删除，首先要知道它为什么存在。很简单，标题的作用就是告诉用户当前界面的名字。但是这个功能和底栏菜单有重叠，因为用户从底栏的选中状态也能知道当前在哪个界面。我刚才强调了，它是一个一级界面，如果进入二级界面，一旦底栏菜单没了，标题肯定要恢复。

以上就是删除一级界面标题的条件，接下来我们说一下删除标题的动机。一个产品通常最多只有5个一级界面，我们要在有限的空间里展示足够多的功能和内容，删除标题是一个好办法。下图是我对支付宝首页做的一个修改，如果增加了一个标题，我们会发现首页展示的内容会减少。

一级界面也有优先级，其中“首页”是用户点击率最高的，所以我们看到很多产品的首页标题被删除了，但是其他一级界面的标题还是保留的。以上面提到的两个产品为例，B站的“首页”和“我的”的标题被删除了，而支付宝只删除了“首页”。

可点击

在我们日常的印象中，顶栏除了图标之外，其他都是不可点击的。但最近我遇到了一些特殊情况，大多是在登录/注册界面，顶栏可以看做是登录/注册按钮。

One界面的顶部栏设计为下拉框，用户可以点击进行筛选。

另一个常见的例子是点击状态栏会快速回到界面顶部。

我认为这种转变在未来会越来越普遍，因为随着产品的不断迭代，功能会越来越多，空间也会越来越紧张。在这个前提下，装饰元素变成功能元素是必然趋势。极简设计的一个重要理念就是去除与用户任务无关的非功能性元素，或者将装饰元素转化为功能元素。

背景颜色

顶部栏的另一个趋势是透明背景。使用透明背景的目的与第一个相同，都是为了节省界面空间。

既然提到了背景，那我们就来说说顶栏的背景颜色吧，常见的顶栏背景颜色有四种：企业色、白色、深灰色、透明。

使用企业色背景的一大好处就是可以给顶栏打上品牌标识，让用户一看到就知道这是什么产品。虎扑的顶栏就使用了企业色背景，并带有logo。我无法判断这个设计是好是坏，但是我一看到顶栏就知道这是虎扑，所以从品牌标识的角度来说非常成功。

说到品牌化，前段时间有个朋友问我，为什么支付宝的图标不全部用蓝色B站下拉框，这样会更加和谐统一，还发了另一个产品的例子给我。我觉得不考虑产品定位就谈设计，很愚蠢。支付宝是一个非常大的产品，每个模块都是一个APP，都有自己独特的标志颜色，比如网商银行的青绿色，不能盲目地进行品牌化。下图中我们可以看到，图标颜色改为蓝色之后，界面完全失去了层次感。

除了节省界面空间和品牌宣传，另一个影响背景颜色的因素是用户目标。并不是每个用户使用你的产品都有明确的目的。比如我打开京东的时候，可能并不知道自己要买什么，只是进来看看而已。又或者我打开喜马拉雅FM或者蜻蜓FM的时候，并不知道自己想听什么节目。在这种用户目标不明确的情况下，我们需要将用户的注意力集中在内容本身上，帮助用户以最快的速度选择到自己感兴趣的内容。因此，我们需要在设计上弱化顶部栏，使用白色或者直接透明背景，避免对用户造成干扰。

顶部导航栏

我还发现有些产品没有使用底部导航栏，而是将顶部栏作为主要导航栏。常见的产品有QQ音乐、酷狗音乐、酷我音乐等。这三款产品的界面布局非常相似，均放弃了底部栏菜单。

这样做的好处是，用户始终能够看到播放栏样式，能够直接进行暂停、播放、切换歌曲等操作。而在网易云音乐中，用户如果想要进行类似的操作，需要点击右上角的图标进入播放界面，这又多了一个步骤。

另外，QQ音乐的顶栏设计中还包含了搜索框这一重要功能，用户可以随时随地搜索歌曲。但网易云音乐需要用户点击返回“发现音乐”，多了一个步骤。看到这里，有人可能会说，既然顶栏导航有这么多优点，为什么还要用底栏导航？网易设计师怎么这么笨？

网易的老板们没那么傻B站下拉框，从导航系统来看，网易云音乐的一级导航是通过底栏菜单完成的，优点是操作方便，而其他三款产品的一级导航都是顶栏，大屏手机上用户用拇指很难触及，这也是网易云音乐比其他三款做得好的地方。

隐藏

当我在其中一个应用中打开一篇文章时，发现顶部栏被隐藏了。我继续阅读抖音PC下拉【64xl.com顶级下拉平台】，移动端顶部栏设计总结：常见样式与五个异类分析，一旦向上滑动，顶部栏就会出现。

我们来分析一下这背后的原因。下拉表示用户正在阅读，所以为了增加阅读区域，我们选择隐藏顶部栏。而用户的上滑则表示他终止了当前的阅读过程。这有两个原因：

1.写得太差了，没兴趣，想回到之前的水平。

2.文章写得太好了，想知道文章标题或者作者信息，我发现这个“下拉隐藏，上滑显示”的设置在简书和知乎都有，但是简书显示的是作者栏，而知乎显示的是文章标题。

另一款类似的产品“人人都是产品经理”则比较独特，整个操作过程中顶部栏都是隐藏的，不过这也无可厚非，因为它的返回按钮被放在了底部栏。

总结

以上就是对移动端顶部栏设计的简单分析和总结，希望能够对大家有所帮助。