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

　　顶部栏样式

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

　　然则我看了一下手机上的应用，并不是每款产品都采取了这种样式。我遴选了几个“异类”，逐个进行分析。

　　去标题化

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

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

　　上面阐述的是一级界面删标题标前提，接下来我们来说说删标题标念头。一个产品的一级界面一般最多只有5个，我们必须在有限的空间中展示足够多的功能和内容，而删标题就是一个不错的办法。下图就是我对付出宝首页做的一个修改，假如加了标题，我们会发明首页展示的内容就会削减一些。

　　而一级界面也有优先级之分，“首页”的用户点击率最高，所以我们可以看到很多产品的首页标题都删除了，然则其余一级界面的标题依旧保存。就以上面提到的两款产品为例：b站“首页”和“我的”删除了标题，而付出宝只有“首页”删除了标题。

　　可点击

　　当我打开one里的一篇文章时，发明顶部栏是隐蔽起来的，我持续往下浏览，一旦我往上滑动那么顶部栏就会出现。

　　在我们日常印象中，顶部栏除了icon其余都是弗成点击的。然则我比来碰到一些特例，以登录/注册界面为多，这里的顶部栏我们可以算作是登录/注册按钮。

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

　　另一个比较常见的例子就是iPhone点击状况栏会快速返回界面顶部。

　　另一款同类产品“人人都是产品经理”就比较挺拔独行了，全程都隐蔽了顶部栏，也能懂得，因为其返回按钮是放在底部栏的。

　　配风景

　　既然提到背景，我们来说一下顶部栏的背景配色。常见的顶部栏配风景有四种：企业色，白色，深灰色和透明。

　　企业色背景的一大年夜好处就是对顶部栏进行了品牌化处理，用户一看到就知道这是什么产品。虎扑的顶部栏直接企业色背景加logo，我不克不及评判这种设计短长与否，然则我一看到顶部栏就知道这是虎扑，从品牌化处理这个角度来说是很成功的。

　　说到品牌化处理，前段时光有个同伙问我，付出宝里的icon在配色上为什么不同一应用蓝色，如许多调和同一啊。他还给我发了一张其他产品的例子，我认为离开产品定位去谈设计都是耍地痞。付出宝是一个别量异常大年夜的产品，每个模块单拎出来就是一个app，都有其特有的标记色，例如网商银行的青绿色。不克不及盲目进行品牌化处理，下图我们发明icon配色换成蓝色之后，界面的完全损掉了层次感。