APP设计教程——顶部状态栏设计总结

版权申明：本文出自“王M争”原创，感谢“王M争”的原创文章分享！

顶部栏样式

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

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

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

去标题化

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

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

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

可点击

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

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

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

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

背景色

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

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