顶部标题栏，是几乎所有APP、小程序页面设计中的第一个组件，用来展示页面的名称和放置一些层级较高的操作选项。根据程序应用定位的不同，标题栏的设计需求也不一样，下面，蓝橙视觉就给大家分享一些标题栏设计方式，为大家提供一个参考。

一、框架布局

1、标题栏数量

做标题栏的第一步就是确定栏的数量，除去固定的状态栏以外，标题栏还可以另外加入一到两个栏，最多三个。每个栏至少高44pt，它本身的背景是透明的，它们的背景即是标题栏的背景。

2、功能展示类型

标题栏中可能出现的功能元素有很多，根据功能定位的不同，需要采用不同的展示形式。例如页面标题、产品 logo、搜索、分页器、日期、用户昵称、欢迎语这类元素适合以栏的形式存在；搜索、通知、用户中心、产品 logo、返回等适合以图标形式存在；Banner、插画则是以背景形式存在。

二、分页排版

分页器在标题栏中如何排版也是一个比较复杂的问题，因为分页器的样式、位置都有极大的自定义空间。分页器排版的本质就是将分页器拆分为单元格，考虑这些单元格该如何排版，具体方式如下：

1、顶宽

定宽，即固定每个单元格的宽度，将它们肩并肩排布好之后，再在栏中进行做对齐或居中对齐。一般适合少于四个或大于六个标签的情况。

2、等分

等分，即先确定整个分页器的宽度，再根据分页器的数量对这个宽度进行均分的方法。适合五到六个标签的情况。

以上就是本次为大家分享的标题栏设计方式，标题栏会应用在几乎所有页面，但根据页面需求会有不同的呈现方式，大家可以根据自身需求来选择合适的框架布局和分页排版形式，设计出更加贴合的标题栏。