底部导航BottomBar的设计思路

时间：2023-09-02 02:06:01 | 来源：网站运营

时间：2023-09-02 02:06:01 来源：网站运营

底部导航BottomBar的设计思路：


随着我们的手机越来越大，我们需要重新调整构建和设计网站的方式。从应用程序设计和点击栏中有什么可以学习的吗?我们能否修正网站的移动导航，以降低交互成本?在本文中，我们将找出答案。

​

每当你听到“移动导航”时，首先想到的是什么？我猜是汉堡滑出菜单。这种设计模式从最初的响应式设计开始就一直在使用，尽管从那时起已经发生了很多变化，但是这种特殊的模式并没有改变，这是为什么呢?




首先，我们如何开始使用汉堡包菜单的顶部导航?还有更好的选择吗?在本文中，我将尝试探讨这些问题。

顶级导航和汉堡包的历史

第一个汉堡菜单图标开始出现在80年代，它由Norm Cox为Xerox Star设计，这是世界上第一个图形用户界面，他还为同一界面设计了文档图标。这段历史是由Geof Allday（他实际上给Norm Cox发了邮件）发现的。你可以点击这里阅读整个电子邮件回复。后来，它出现在了Windows 1和DOS上。




目前的移动导航，正如我们所知，在2011年由Ethan Marcotte的“响应式网页设计”一书推广开来的。从那时起，顶级导航和汉堡就成为了行业的标准。

手机屏幕尺寸在10年内翻了一番

从最初的iPhone以来，手机销量一直在逐年增加。2019年是市场达到饱和点的第一年，销售额开始下降，但这并不意味着人们不使用手机。据Quartz和Ciodive 报道，到2020年，我们将把80％的时间花在手机上。相比2010年，只有四分之一的互联网用户是基于手机的。




随着手机销量的增加，屏幕尺寸也增加了一倍多。智能手机的平均屏幕尺寸从3.2英寸一直增加到了5.5英寸。2017年，设备制造商开始采用更高的18：9纵横比，配备5.7英寸和6英寸18：9显示器。现在，我们开始看到6英寸18：9显示器成为旗舰和中档价格领域的新标准，因为它们拥有比5.5英寸16：9显示器更多的屏幕区域，XDA-Developers报告。







基本上，手机屏幕的尺寸越来越大，但我们要如何调整我们的设计模式以反映这些变化呢？

拇指驱动设计

我第一次听说“拇指驱动设计”一词是来自维塔利弗里德曼。它基于Steven Hoober和Josh Clark关于人们如何拿手机的研究。




它的要点是，几乎在所有情况下，最常见的是三个基本握法。49％的人用单手握住手机，36％用一只手握住手机，用另一只手的手指或拇指戳手机，剩下的15％采用双手两个手来操作手机，用两个拇指不停地敲击。Steven Hoober发现75％的用户只用一只拇指触摸屏幕。因此，就有了术语拇指驱动设计。







2016年，Samantha Ingram写了一篇名为“ 拇指区：为移动用户设计 ”的文章，进一步探讨了这些想法。她定义了易于触及，难以触及和中间区域。







但是，我认为，随着手机尺寸的增加，图像已经发生了一些变化：







当手机很小时，大多数区域都很容易到达。但随着我们的屏幕越来越大，如果不调整手机，顶部几乎无法触摸。从上面的例子中，我们可以看到最有效的屏幕空间在哪里。然而，它经常在网页上被忽略。我们该如何解决这个问题？

底部导航模式

网络上会不时出现底部导航模式，这个想法本身很简单：向下移动导航栏。







将导航栏定位在底部使用户可以更轻松地单击菜单图标，而辅助项目可以移动到顶部。基本上，你只需要改变顺序。移动应用程序一直使用这种逻辑与条形图案。这本身并不是一个新想法，但它在网页设计中仍然不像在应用程序设计中那么流行。




这不是一个万无一失的解决方案，因为它提出了一些关键问题，但它是一个有价值的替代方案。让我们探讨一些可能出现的问题吧。

主要和次要项目

由于屏幕顶端变得难以触及，所以，将主菜单项放置在底部附近是更好的选择，但其他同样重要的事情呢？

我提出两个想法来解决这个问题：

• 将搜索栏或任何非主要项目置于顶部;
• CTA按钮应保留在菜单项旁边的底部，因为它是导航的重要部分。

这会如何影响滚动大菜单？

有些网站有广泛的菜单，子菜单以及介于两者之间的所有内容。当然，会涉及滚动。如何在这种情况下翻转主要/辅助项目？







使主要和辅助项目（菜单链接，徽标，搜索输入）固定，同时保持菜单列表可滚动。这样，你的用户就能够获得他们需要的关键内容。

你把标志放置在哪里？

你可能会担心标识的位置。这里有两种方法可以解决它：

• 将徽标放在底部可能有点尴尬，但拇指很可能不会阻碍它。但是，它可能会被遗漏，因为我们倾向于从上到下扫描。
• 更合理的选择是将徽标保留在页面顶部，但不要将其固定。将其作为内容的一部分，以便在滚动时消失。这样，人们仍然可以完美地看到它。

如您所见，我在线框中使用了菜单标签。凯文罗宾逊发现，在图标旁边放置一个标签使参与率增加了75％：

这如何与把手一起使用？

某些操作系统和浏览器倾向于将屏幕的底部区域用于其自身目的。iOS手柄可能会妨碍底部导航。确保导航足够宽敞以容纳iOS安全区域。







如果将徽标放置在中心位置，则链接可能会与手柄功能发生冲突。稍微填充一下就可以了。

用户会适应这种模式吗？

在我写这篇文章的时候，我一直在想，对于浏览你网站的用户来说，这是否会变成一个重大的重新设计或简单的可用性改进。毕竟，根据雅各布定律，用户把大部分时间都花在了其他网站上。这意味着用户更喜欢你的网站以与他们已经熟悉的所有其他网站相同的方式工作。




作为雅各布定律的反驳，我想提出菲茨法律。它认为获得目标的时间是目标的距离和大小的函数。基本上，目标越小越远，交互成本越高。NN / g有一个精彩的视频，更详细地解释了这一点：

https://www.zhihu.com/video/1152530106055430144“与顶级菜单图标相比，底部汉堡菜单图标的交互成本要低得多，因为它更接近。通过将菜单CTA放在拇指附近，我们允许用户更快地达到它的最终目标。如果降低交互成本，用户是否会发现该功能会迷失方向？可能不是。”

如何与Tap Bar模式集成？

点击栏模式列出了三到五个最常见的第一级操作，可以单击一行。你可能已经在流行的应用程序和一些网站上看到它：







Nielsen认为，隐藏式导航（汉堡菜单）会显著降低移动和桌面用户体验。在移动设备上，人们在57％的情况下使用隐藏导航，而在86％的情况下使用组合导航，即1.5倍以上！尼尔森所指的组合导航是一个标签栏模式与汉堡菜单相结合 - 这里有一个例子：







它看起来似乎是一个完美的解决方案，但它也有它的问题。Fabian Sebastian提出了一个很好的观点，它只适用于顶级视图，不适用于辅助导航项。为了解决这个问题，诞生了一种汉堡和tap bar的混合产品。如果你关注一下三星的应用程序，你会发现菜单上的最后一项是“*More*”按钮，它会调出汉堡包菜单。




从本质上讲，如果你想要将两者结合起来，则底部导航模式可以很好地集成到条形图案中。寻找好例子的最好地方是在移动应用程序领域。

一些受欢迎的网站重新构想

打开Photoshop，对一些热门网站进行快速模拟，以便解释改变导航栏自下而上并不困难。




我们先来看看 Bloomberg：







接下来，我们来看看Invision：







最后是Reddit：







这个想法虽然引发了一些问题，但它很简单，足以适应网络。它确实会产生可用性差异，因为交互成本要低得多。

如何说服我的客户呢？

作为设计师，你可能会看到这种模式的潜力，但如果你的客户或您的老板不这样做呢？我会用几个论点回答这个问题：

• 多年来，移动应用程序一直将有价值的菜单项放在最下面，我们可以把以下两本书发送给初学者。
  1.“ 底部导航设计的黄金法则 ”，由Nick Babich撰写
  2.“ 移动导航的基本模式：入门 ”，由Raluca Budiu撰写
• 我注意到流行的移动应用程序开始将重要位置转移到底部的情况，优步就是一个很好的例子。对于他们来说，搜索栏是屏幕上最重要的项目之一。在旧的设计中，它的位置在顶部，现在，他们已经把它转移到了底部。我们可以在这里做些什么吗？

在移动应用程序里，将重要导航项目移至底部不是什么新鲜事儿。只是，出于某种原因，网络行业尚未赶上这一点。

总结

事实很清楚：手机越来越大，屏幕的某些部分比其他部分更容易互动。将汉堡包菜单放在顶部会产生过大的交互成本，而且我们拥有大量使用屏幕底部的移动应用程序设计，这些设计利用了屏幕的底部。也许是时候网页设计界也开始在网站上使用这些想法了？




我知道所有这些都不是所有用例的万无一失的解决方案，但它值得一试。它有助于使体验更好一点。如果你有更好的想法，欢迎和我们在留言区分享哦！




如果您有更好的观点欢迎关注我们的公众号，并在留言区和我们分享哦！当然，如果您想了解更多的前瞻信息和权威专家普修的专业性建议，就留言联系我们吧！

参考：Arthur：Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?