超全面的移动端顶部栏设计分析

王M争：我最近在做改版设计，所以很长时没有更文了。期遇到了很多问题，其个是顶部栏，来我索就针对移动端顶部栏设计做一个总结，在里分享给大家。

顶部栏样
下图我们常见的顶部栏样式。面状态栏status bar，中间界面标题，左右可能会icon，表返回，消息提示，设置操作。

超面的移动端顶部栏设计分析

是我看了下手上应用，并不是款品都采用了这样。我挑选了几个「异类」，逐个进分析。

标题
一产品中的一级界面删除顶部栏中的标题。要道为什么被删除，首先要道为什么而存在。很简单，标题的功能就是告诉用户当前界面的名称。但是个功能跟底部栏菜单有重叠，因为用户从底部栏的选中状态也能道自己当前在哪个界面。么我刚才也强，是一级界面，果进二级界面，一旦没有底部栏菜单，标题还是要拿回来的。

全移动端顶部栏设计分析

上面阐述的是一级界面删标题的条件，接来我们来说说删标题的机。一个产的一级界面一般最多只有5个，我们必须在有限的空间中展示足够多的功和容，而删标题就是一个错的方法。图就是我对支付宝首页做的一个修改，如果了标题，我们会发现首页展示的容就会减一些。

超全面的移动端顶部栏计析

一级界面也优先级之分，「首页」的用户点击率高，所以我们可以看到很多产品的首页标题都删除了，但其余一级界面的标题依旧保留。就以面提到的两款产品例，b站「首页」「我的」删除了标题，支付宝只「首页」删除了标题。

点击
在日常印象中，顶部栏除了icon其余都是不可点击的。但是最近遇一些例，以登录/注册界面为多，这的顶部栏可以成是登录/注册按钮。

超全面的移动端顶部栏设分析

One界面中顶部栏做成下拉框样式，用户以点击筛选。

全移动端顶部栏设计分析

另一个较见的例子就是iPhone点击状态栏会快速返界面顶。

这种转变觉得以后会越来越多的，因为一款产品随着不断迭代，功能会越来越多，空间越来越紧张。在这个前提下，装饰性素转变成功能性素是一个必然的趋势。极简化计一个重要理念就是删减用户任无关的非功能性素或者把装饰性素转变成功能性素。

背景色
于顶栏的另一个趋势是透明背景。透明背景的使跟第一个除标题的目的是一样的，都是为了节省界面空间。

超全面的移动端顶部栏计析

既然提到背景，我们一下顶部栏的背景配色。常见的顶部栏背景色四种：企业色，白色，深灰色透明。

企业背的一大处就是对顶部栏进行品牌化处理，用户一看到就道是什么产品。虎扑的顶部栏直接企业背加logo，我不能评判种设计坏与否，但是我一看到顶部栏就道是虎扑，从品牌化处理个角度来说是很成功的。

全移动端顶部栏设计分析

说到牌处，前时间有个友问我，支付宝里的icon在配色上为么统一使蓝色，这样多和谐统一。他还给我发了一张他产的例子，我觉得脱离产定位谈设计都是耍流氓。支付宝是一个体量非大的产，每个模单拎来就是一个app，都有特有的标志色，例如商行的青绿色。盲目进行牌处，图我们发现icon配色换成蓝色之后，界面全丧失了层次感。

超全面的移动端顶部栏计析

除了节省界面空间品牌化处理，影响背景色的另一因素用户目标。并不每一用户使用的产品都明确的目的性，例如我打京东，可能我并不知道自己买什么，只单纯的看一下。或者我打喜马拉fm或者蜻蜓fm，我自己都不知道自己听什么节目。这种用户目标不明确的况下，我们让用户的注意力聚焦于内本身，帮用户尽挑选出自己感趣的内。所以设我们对顶部栏行弱化，使用白色或者直接透明背景，避免对用户造扰。

超面的移动端顶部栏设计分析

顶部导航栏
我还发了一些产品使用底部导航栏，转把顶部栏一级导航栏。常见的产品QQ音乐、酷狗音乐酷我音乐。这三款产品的界面布局非常相似，都舍弃了底部栏单。

超面的移动端顶部栏设计分析

这样好处在于用户可以看到播放条样，可以接进暂、播放、切歌等操作。而在网易云音乐，用户如想进类似操作则需要击右上icon进入播放界，多了个步骤。

超全面的移端顶栏设计分析

并且QQ音其顶部栏计包含了搜索框这个重要功能，同用户可以随随地去搜索歌曲。而网易云音则需要点击回「发现音」，也是多了一步。这，可能会有人说，既然顶部栏导航有这多好，那干嘛还用底部栏导航，网易计怎那傻。

超全面的移动端顶部栏设分析

网易大佬们没么傻，从导航系来分析，网易云音乐的一级导航是通底部栏菜单来完成的，其优势在用户操方便。其余三款产品一级导航是顶部栏，果是大屏手机的，用户拇指很难触摸得到，是网易云音乐比其他三家做得更的地方。

隐藏
当我打one里的一篇文章时，发顶部栏隐藏起的，我继续往下阅读，一旦我往滑动那么顶部栏就会出。

超面的移动端顶部栏设计分析

我们不妨去分析其背后原，用户下代表了用户正在阅读，那么为了增加阅读区域，我们选择隐藏顶部栏。而用户上滑这个手势说明他止了前阅读流程。出现这情况有两个原：

写的太次了，感兴趣，我要返到上一级。
写的太，我要道文章标题或者者信息。
这种「下拉隐藏，上滑出现」的置发现在简书和知乎都存在，不过简书展示的是作者专栏，而知乎展示的是文章标题。

超全面的移动端顶部栏设分析

另一款同类产品「人人是产品经理」就比特立独行，程隐藏顶部栏，也能理，因为其返回按钮是放在底部栏的。

全移动端顶部栏设计分析

总结
以上就是我对移动端顶部栏设计做的一个简单的分析和总结，希望以帮到大家。

欢迎关注作者微信公众号：「王M争」

超全面的移端顶栏设计分析