顶部栏UI设计的模式和规则有那些？

哈喽各位小伙伴，本期和各位聊聊「顶部栏」的设计。我们可能认为App顶部栏的组成很简单不需要太多精力，实际上要设计一个精确、美观、和用户目标相匹配的顶部栏并不容易。

为了试图分析App顶部栏设计的某些模式和规则，本文带大家一起了解App顶部栏的组成、变化，以及如何设计顶部栏的交互。

01 顶部栏的常见样式

顶部栏是什么样子，它由什么组成？

常规顶部栏 

通常，顶部栏提供有关此页面总体的信息，以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示：

顶部栏中常见的组件包括：标题、容器、操作项、导航图标等，接下来为大家逐一介绍各个组件的使用。

顶部标题通常与底部导航一起使用，共同解释页面的信息。

如果一个页面中底部导航只有图标没有文字解释，用户有可能不了解图标的意思，那么解释页面信息的重任就落在了顶部栏的标题上。

大多数情况下，标题位于顶部栏的中间，有时也会在左上角有一个很大的标题作为导航（IOS应用中）。除了解释页面的目的，大标题还可以用于品牌推广。

标题也可以解释用户在这个页面上执行的操作。例如，当用户想修改个人资料时，标题会显示“edit profile”，用来解释操作。

有时，在顶部栏主标题的下方会有补充文本，这样方便为用户提供更多的信息。

容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色，有时容器也会使用品牌主题色，起到宣传和推广品牌的作用。

操作项通常以图标和文本按钮的形式出现在顶栏上 ，当需要时可以在顶栏上显示0-4个图标或文本按钮。

在不同的页面中操作项可能代表不同的含义，但一些常见的图标/操作遵循着一定的规则：

1、返回：当用户进入第二/第三层级页面时，“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。

2、关闭或取消的位置不固定，可以在左侧也可以在右侧，具体取决于是否有其他操作。