发布时间：2023-5-14 分类： 行业资讯
我最近一直在进行修订设计，所以我很长时间没有改变它。期间遇到很多问题，其中一个是顶栏的颜色，然后我简单地做了一个移动顶栏设计的总结，在这里与大家分享。
顶部栏样式
下图是我们最常见的顶级酒吧风格。上面是状态栏状态栏，中间是界面标题，左侧和右侧可能有一个图标，表示返回，消息提示，设置等操作。
但我查看了手机上的应用程序，而不是每个产品。我挑选了一些“异构”，并逐一分析它们。
去标题化
某些产品中的第一级界面会删除顶部栏中的标题。要知道它被删除的原因，你必须先知道它为什么存在。很简单，标题的功能就是告诉用户当前界面的名称。但是，此功能与底栏菜单重叠，因为用户可以从底栏的选定状态知道他当前所处的界面。然后我只强调它是一个第一级界面。如果您进入辅助界面，一旦没有底栏菜单，仍然需要返回标题。
以上是删除标题的第一级界面的条件。接下来，我们将讨论删除标题的动机。产品的第一级界面通常最多只有五个，我们必须在有限的空间内显示足够的功能和内容，删除标题是一个很好的方法。下图是我在支付宝主页上做的修改。如果您添加标题，我们会发现主页上显示的内容将会减少。
第一级界面也具有优先权。用户的点击率最高，因此我们可以看到许多产品的标题被删除，但其他第一级界面的标题仍然保留。以上面提到的两种产品为例：b station“回家“和“ldquo;我的&#dd;删除了标题，而支付宝只有“Home””删除了标题。
可点击
在我们的每日展示中，除了图标外，顶部栏不可点击。但是，我最近遇到了一些特殊情况，有很多登录/注册接口。这里的顶栏可以看作登录/注册按钮。
One界面的顶栏设置为下拉框样式，用户可以单击进行过滤。
另一个常见的例子是iPhone点击状态栏并快速返回界面顶部。
我认为这种变化将来会越来越多，因为产品将越来越多地迭代，空间将变得越来越紧张。在这个前提下，装饰元素向功能元素的转变是必然趋势。极简化设计的一个重要概念是删减与用户任务无关的非功能性元素或者把装饰性元素转变成功能性元素。
背景色
顶部栏的另一个趋势是透明背景。使用透明背景与删除标题的第一个目的相同，以节省界面上的空间。
由于提到了背景，让我们来谈谈顶栏的背景颜色。有四种常见的顶栏背景颜色：企业色，白色，深灰色和透明。
公司颜色背景的一大好处是顶栏的品牌，用户在看到它时就知道了。老虎猛击的顶栏直接将徽标添加到公司颜色背景中。我无法判断设计是好还是坏，但当我看到顶部栏时，我知道这是一个老虎打击，从品牌推广的角度来看非常成功。
说到品牌推广，朋友前一段时间问我，为什么支付宝的图标不使用蓝色，这么多和谐统一。他还给我发了一个其他产品的例子。我觉得设计是产品定位的流氓。支付宝是一个非常大的产品。每个模块都是一个具有自己独特徽标颜色的应用程序，例如在线商家银行的蓝绿色。我们不能盲目地进行品牌推广。在下图中，我们发现在图标颜色变为蓝色后，界面完全失去了分层。
除了保存界面空间和品牌外，影响背景颜色的另一个因素是用户的目标。并非每个用户都有明确的目的使用您的产品。例如，如果我打开京东，我可能不知道我想买什么。看看吧。或者我打开喜马拉雅山脉或蜻蜓fm，我不知道我想听什么。在这种用户目标不明确的情况下，我们要让用户的注意力聚焦于内容本身，帮助用户尽快的挑选出自己感兴趣的内容。因此我们设计使用白色或直接透明背景来削弱顶部条，以避免干扰用户。
顶部导航栏
我还发现有些产品没有使用底部导航栏，而是将顶部栏变成了一级导航栏。常见的产品有QQ音乐，酷狗音乐和酷炫音乐。这三种产品的界面布局非常相似，底部栏菜单被丢弃。
这样做的好处是用户总能看到播放栏的风格，并且可以直接暂停，播放，剪辑歌曲等。在网易云音乐中，如果用户想要执行类似的操作，他们需要点击右上角的图标进入播放界面，再多一步。
QQ音乐的顶栏设计包含搜索框的重要功能，用户可以随时随地搜索歌曲。网易云音乐需要点击回到“ldquo;找到音乐”，是一个额外的步骤。看到这一点，有些人可能会说，由于顶栏导航有很多好处，为什么我们仍然使用底栏导航，网易设计师如何愚蠢。
网易并不是那么愚蠢，从导航系统来分析，网易云音乐的一级导航是通过底栏菜单完成的，其优点是用户操作简便。其他三个产品是第一级导航的顶级栏。如果使用大屏幕手机，则用户的拇指很难触摸。对于网易云音乐来说，这是一个比其他三个更好的地方。
隐藏
当我在一个文章中打开文章时，我发现顶部栏被隐藏了。我继续读它。一旦我向上翻，顶部栏就会出现。
我们不妨分析其背后的原因。用户下拉表示用户正在阅读，因此为了增加阅读区域，我们选择隐藏顶部栏。并且用户向上滑动的手势表示他已暂停当前的阅读过程。这有两个原因：1，写得太多，不感兴趣，我想回到下一个级别。 2，写作非常好，我必须知道文章的标题或作者信息。这个设置为“下拉隐藏，上滑出现”我发现短篇小说和知识者都存在，但是短篇小说显示了作者专栏，并且知道所显示文章的标题。
另一个类似的产品“ldquo;每个人都是产品经理“rdquo;更独立，整个部分隐藏顶部栏，也可以理解，因为它的返回按钮放在底栏。
总结
以上是我的手机顶吧设计的简单分析和总结，希望对大家有所帮助。
