为了产出一个更好的项目，
值得我们注意的是，顶部栏也具有一定的基本准则。我们可以在基本的iPhone应用程序中轻松查看iOS顶部栏指南。
在29cm的程序界面中，当顶栏与内容之间的标签相遇时，它就会固定在当前界面的顶部。这类主要出现在购物类APP、快递类APP、地图类APP等需要分割中间内容的情况下。
▍隐藏顶部栏 (The hidden top bar)
有时在我们滚动后，界面会隐藏顶部栏，并显示必要的部分内容。
在Facebook中，滚动界面则会隐藏顶部栏，且仅保留状态栏。而在查看提要并向下滚动时，顶部栏又会重新出现；在Instagram中，它也只隐藏了顶栏区域，而对于一些重要的功能（例如芯片或标签），则总是在其搜索框下方暴露出来。当我们在滑动时，搜索栏会消失，标签会处于状态栏下方。
Airbnb
Yelp
▍动态顶部栏 (The dynamic top bar)
在Google Map的同一界面上，顶部栏的结构会发生多次变化。
第一个界面显示了一个浮动搜索栏。如果我们在此之后进行拖动，搜索栏会向上移动并出现带有操作图标的图像顶栏。在这个情况下，如果再次滑动，图像就会变得模糊并变为白色背景，如“重叠顶栏+中间标签”，并且中间标签也会位于顶部栏的下。
下图所示的三个APP，其底部导航都由浅色背景+图标+文字构成。当前所在的标签页图标在导航上以应用程序的主色调表示，其余则为灰色的中性风格。这种设计比带有阴影(Airbnb) 和具有生动主色调的底部导航(Skyscanner&Yelp)，更能凸显出顶部栏。
使用同样的线条和背景颜色，在没有划分顶栏和底部导航的情况下可以进行扁平化表达。在这种情况下，内容比顶部和底部导航更为重要。例如，在Instagram中，浏览提要更有用；而在Door Dash（一款外卖应用软件）中，我们则可以专注于自己想要订购的食物或餐厅。
强调底部导航
与第一条示例相反，此示例更强调底部导航。这是因为此类应用程序具有一个主动寻找菜单的功能。
Medium通过与黑色背景形成对比来进行突出强调；Youtube和Facebook的顶栏有服务名称和操作按钮。在滚动时顶栏会消失，只剩下状态栏。此外，我们还可以通过隐藏顶部栏，将菜单置于底部导航之中。
Medium, Youtube&Facebook
▍底部按钮 (Bottom Button)
在下图所示的Ubereats应用程序中，将商品添加到购物车时会出现按钮。而在点餐的用户体验流程中，按钮比顶栏更重要，因为它具有移动到下一操作的作用。
顶栏和按钮的动态变化
第一种是Airbnb的默认设置，浮动顶部栏和按钮上有一个光影；第二种是一个没有阴影的浮动顶部栏；而最后一种则是带有分割线的底部工作表。此时的按钮会以三种方式显示：按钮和价格、大按钮、按钮和文本按钮。
通过上面一些应用程序的例子，不难看出这些APP在设计过程中都强调了界面的平衡感。因此，大家在设计一款应用软件时可以遵循设计指南，删除不必要的部分，或根据其定位进行迭代更新。
但是我们也应该考虑这款程序的主要目的、信息内容、以用户为中心的设计和交互。此外，也需要考虑界面中的其他元素，一致地应用各种顶部栏。
以上，就是关于顶部栏 (Top Bar)的一些简单介绍，希望可以给正在完善作品集的大家一点启发。
本文来自微信公众号“交互设计小站”（ID：racjiaohu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
