移动端顶部栏设计看似简单，其实在做界面时还是有许多细节值得我们注意的。本篇文章针对移动端顶部栏设计做一个总结，在这里分享给大家，希望能更好地帮助大家理解这个组件。

一、移动端顶部栏样式及设计要点

这里将移动端顶部栏分为三种样式，下面我们来一一分析：

1. 常规顶部栏    

2. Tab/分段控件导航栏  

3. 大标题顶部栏

1常规顶部栏

常规顶部栏固定在状态栏下， 主要由操作图标、标题、搜索框等组成，大致分成两种：

1.简单标题顶部栏   2.搜索框顶部栏 

简单标题顶部栏

简单标题顶部栏主要由操作图标与标题组成，如下图：

该类型的顶部栏标题大小一般是36px，操作图标的设计尺寸一般是40px左右，切图尺寸一般是48px，背景色多采用白色或APP主题色。

a.去标题化

一些产品中的一级界面删除了顶部栏中的标题。 为什么删除呢，因为标题的功能就是告诉用户当前界面的名称，而用户从底部栏的选中状态也能知道自己当前在哪个界面。 这个功能跟底部栏菜单有些重叠，我们必须在有限的空间中展示足够多的功能和内容，所以删除标题就是一个不错的方法。

b.可点击

闲鱼和百度翻译界面中顶部栏可点击操作， 一款产品随着不断迭代功能会越来越多，空间越来越紧张。在这个前提下，装饰性元素转变成功能性元素是一个不错的方法。 

搜索框顶部栏

搜索框顶部栏是在简单标题顶部栏的基础上，去除标题文字增加一个搜索框。如下图：

搜索框的宽度随顶部栏中操作图标的多少决定，搜索框高度多采用56~60px，搜索框里的图标设计尺寸多采用40px左右(为了减少切图尺寸，同样可采用48px的切图尺寸)。

 

在摆放图标时，距离搜索框的间距与边距相等看起来会更舒适。如下图所示：

2.Tab/分段控件导航栏

Tab顶部导航栏与分段控件顶部导航栏，都是有多个标题可切换的导航栏样式，分为选中与未选中2中状态。Tab顶部导航栏的可选项可以左右滑动切换，选中样式也比较丰富，常见的有底部加上小短线、字体颜色变化、字号放大等(组合使用效果更突出)，分段控件顶部导航栏一般有2~5个可选项，不能左右滑动。如下图：

3大标题导航栏

自ios11发布后，大标题风格的导航栏便开始流行起来，尤其是飞机稿总能看见大标题顶部栏的影子。普通的顶部栏在二倍图下高度只有88px，标题字号一般为36px，而大标题顶部栏在二倍图下高度足足有192px,标题字号为68px。如下图：

 

使用大标题顶部栏，你需要考虑以下两点：

1.是否需要帮助用户快速确认所处位置(多为产品页面重复性多，或是功能单一的APP，以浏览页面信息为主)；

2.APP整体风格是否偏向简约大气。

 

适合使用大标题顶部栏的产品

1.艺术相关或阅读类APP，这类产品本身自带艺术感或文艺气息，当大标题结合特殊字体，或杂志风版式，就能瞬间提高产品调性。

2.现代简约型APP，通过大标题+留白表现现代感。

二、背景色

1白色

使用白色顶部栏让用户的注意力聚焦于内容本身，帮助用户更快的挑选出自己感兴趣的内容。 

2品牌色

用品牌色做背景的一大好处就是对顶部栏进行了品牌化处理，用户一看到就知道这是什么产品。

3透明

透明背景常用在电商、旅游等需要烘托氛围的界面中，有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感， 在视觉上看起来更为统一。如下图：

三、总结

顶部栏样式主要分为

1.常规顶部栏 （简单标题顶部栏、搜索框顶部栏） 2.Tab/分段控件导航栏    3·大标题顶部栏

 顶部栏背景处理：白色、品牌色、透明