移动端顶部栏设计分析 / 木子杰软件教程

我最近在做改版设计，所以很长时间没有更文了。期间遇到了很多问题，其中一个就是顶部栏配色，后来我索性就针对移动端顶部栏设计做一个总结，在这里分享给大家。

顶部栏样式

下图是我们最常见的顶部栏样式。上面是状态栏status bar，中间是界面标题，左右可能会有icon，代表着返回，消息提示，设置等操作。

去标题化

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

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

可点击

在我们日常印象中，顶部栏除了icon其余都是不可点击的。但是我最近遇到一些特例，以登录/注册界面为多，这里的顶部栏我们可以看成是登录/注册按钮。

删减与用户任务无关的非功能性元素或者把装饰性元素转变成功能性元素。

背景色

关于顶部栏的另一个趋势是透明背景。透明背景的使用跟第一个去除标题的目的是一样的，都是为了节省界面空间。

企业色，白色，深灰色和透明。企业色背景的一大好处就是对顶部栏进行了品牌化处理，用户一看到就知道这是什么产品。虎扑的顶部栏直接企业色背景加logo，我不能评判这种设计好坏与否，但是我一看到顶部栏就知道这是虎扑，从品牌化处理这个角度来说是很成功的。

用户目标。并不是每一个用户使用你的产品都带有明确的目的性，例如我打开京东，可能我并不知道自己要买什么，只是单纯的进来看一下。或者我打开喜马拉雅fm或者蜻蜓fm，我自己都不知道自己想要听什么节目。 在这种用户目标不明确的情况下，我们要让用户的注意力聚焦于内容本身，帮助用户尽快的挑选出自己感兴趣的内容。所以我们在设计上我们要对顶部栏进行弱化，使用白色或者直接透明背景，避免对用户造成干扰。