我们可能会认为App顶部栏的构成非常简单，不需要太多功夫。事实上，要设计出一个精准、美观、面向用户的匹配顶栏并不容易。为了分析应用顶部栏设计的一些模式和规则，我们研究了100多个应用。通过这篇文章，我们将带你了解App顶部栏的组成和变化，以及如何设计顶部栏的交互。顶栏的常见样式顶栏是什么样子的，由什么组成？1.通用顶部栏通常，顶部栏提供有关页面的一般信息，以及用户可能在页面上执行的潜在操作。常用顶栏如下：顶栏中常用的组件包括：标题、容器、操作项、导航图标等，接下来我们将一一介绍各个组件的使用。顶部标题通常与底部导航一起使用来解释页面信息。如果页面底部导航只有图标，没有文字说明，用户可能无法理解图标的含义，那么说明页面信息的重任就落在了顶部栏的标题上。大多数时候，标题位于顶部栏的中间，有时左上角也会有一个大标题作为导航（在iOS应用程序中）。除了解释页面的目的外，标题还可以用于品牌推广。标题还可以解释用户在页面上做什么。例如，当用户要修改个人信息时，标题会显示“修改个人资料”来说明操作。有时，顶部栏的主标题下方会有补充文字，方便为用户提供更多信息。集装箱趋势越来越不明显。容器通常是灰色或不饱和色，有时容器也会使用品牌主题色来宣传和推广品牌。操作项通常以图标和文本按钮的形式出现在顶栏，需要时可以在顶栏显示0-4个图标或文本按钮。操作项在不同的页面可能有不同的含义，但一些常用的图标/操作有一定的规律：返回：当用户进入二级/三级页面时，“返回”通常出现在左上角。单击“后退”图标会将用户带回到原始页面。close或者cancel的位置不固定，可以在左边也可以在右边，看有没有其他操作。这里有一个常见的问题，在什么情况下应该使用顶部栏中的“返回”和“关闭”：没有简短明确的目的。使用“关闭”：表示一次完整的单页操作，有明确的起点和终点，对页面进行特定的操作，达到特定的目的。个人资料或帐户有时会出现在顶部栏上，以允许用户编辑个人信息、设置或切换帐户。添加或搜索帮助用户浏览更多内容或扩大他们感兴趣的领域，通常在右上角以易于触摸的目标形式出现。有时，用户最常使用的动作会固定在顶部栏（尤其是右上角），以便随时可以触及。一个常见的例子是网易云音乐。当前歌曲的图标始终固定在右上角，用户无论在哪个页面都可以随时进入。需要注意的一件事是，为了避免引起不必要的注意，顶部栏上的图标/文本按钮通常是线性图标而不是填充图标，并且颜色不饱和。除非他们真的想抓住用户的注意力，或者提示用户采取行动。2、搜索顶栏在使用app的时候，我们会发现有些页面的顶栏没有标题，而是多了一个搜索框（淘宝首页）。根据具体需要，可以在不同页面的顶部栏上使用搜索，因为它在浏览内容时为用户提供了更多价值。3.什么时候放弃使用topbar？当顶部内容较多时，有些APP会将顶部栏做得很简单甚至完全放弃。最重要的用户信息——每日投资增长显示在Robinhood的顶部，右上角只有一个提示文字按钮，用于邀请好友。放弃顶部栏的常见情况是个人资料页面。这样做的目的是向自己暗示这个页面在掌控之中，个人信息在顶部占据了很多空间。顶部栏的交互方式一个页面中可以有很多交互，有时顶部栏需要通过改变样式或内容来体现交互。1、反映滑动位置，滑动出现顶栏：当顶栏有很多重要信息但占用空间大时，顶栏内容可能会根据滚动位置发生变化。当用户向下滚动页面以获取更多内容时，会出现顶部栏。向下滑动隐藏，上拉显示：另一种形式是在谷歌搜索中，用户向下滑动顶部搜索框，它就会被隐藏（谷歌猜测用户想专心浏览内容），但只要用户向上滑动停止浏览过程，顶栏搜索框会再次出现。无论是何种交互形式，这类顶栏都能在用户需要时快速展示：用户可以进行搜索功能或常用操作；标题/重要信息作为参考，提醒用户他们在哪个页面。向下滑动隐藏顶部栏：对于那些不影响用户需求和操作要求的顶部栏，通常会随着页面的向下滑动而隐藏。星巴克在顶部有一个欢快的问候语，当用户向下滑动并尝试选择要喝的咖啡时，该问候语会随着页面消失；Airbnb在顶部显示一张房子的图片以打动用户，但当用户向下滑动时，顶部图像也会滑动。2.反映当前页面的变化有时候，顶部栏的信息会随着内容的变化而实时变化。最常见的情况是收到消息时的反馈：在微信中，顶部标题会显示用户收到消息数的变化；Instagram会通过顶部小红点的变化显示收到的消息。InteractiveTopBar作为页面不可或缺的一部分，InteractiveTopBar减轻了页面上其他元素的负担。除了常见的图标或文字按钮（添加、取消、返回）变化之外，顶栏还会发生哪些有趣的交互？1.互动标题有些产品和服务非常依赖于用户的喜好和位置，比如常见的外卖或网约车软件。在这种情况下，应用程序通常依赖于用户的初始输入来确定显示的内容，用户也可以直接在顶部栏标题上编辑信息。2.交互式图标/文本按钮交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作而无需离开该页面。在robinhood中，用户可以直接选择购买股票的计算方式，无需切换页面，也可以将页面上的股票加入收藏夹。3、顶部导航有些应用希望在一个页面上显示多个并行的内容，因此在顶部栏设置多个选项以实现更方便的导航。常见的顶部导航包括分段控件和标签导航：分段控件导航选项一般不支持左右滑动，选项较少；选项卡导航选项设计更加多样化，支持左右滑动切换。总结这样一个研究过程可能会花费大量的时间和精力，但它确实可以让我们受益匪浅：从更全面的角度去看待一个简单的UI组件在不同的页面、案例和App中是如何设计和解释的。文章很长，感谢大家看完~希望文章能给大家有所收获！
