APP导航栏最佳用户体验设计
本文主要是讨论在设计iOS和Android中的标签栏/底部导航时，如何更好的使用单手操作手机。
本文主要是讨论在设计iOS和Android中的标签栏/底部导航时，如何更好的使用单手操作手机，从而满足客户需求。在这里，我们将从5个方面来谈。
汉堡菜单是最佳应用导航讨论的热门话题。菜单位于屏幕的最顶部，因此无法用拇指按在平板大小的显示屏上。
资料来源：Scott Hurff
实际上，我们的拇指与我们的手机进行交互的时间是49％，鉴于不断增长的手机市场，我们最好的选择是在屏幕底部设计可达性。
资料来源：Luke Wroblewski
使用底部导航大大增加了核心应用程序功能的使用，你只需轻轻一点即可。
1.将搜索放在底部导航栏中，以便在应用程序中进行应用程序探索。
当来自用户测试的数据主张显示在搜索功能的应用中起作用时，在底部导航中放置搜索图标是最好的选择。
搜索内容，评级和问题的应用程序示例包括IMDb，Quora，TechCrunch和Medium。
从上述可以看出，IMDb符合拇指可达性的标准最少。底部导航的重新设计将有助于满足用户对应用程序的主要期望，而无需伸展拇指，即可搜索应用。
目前，单击搜索栏虽然足够大，但需要延长时间。鉴于用户每天会多次使用您的应用程序，慢慢地会发现问题，尤其是在开车的情况下。
下图显示了搜索图标/字段当前位于某些主要内容发现应用中的位置。
截图来自：Quora，IMDb，TechCrunch＆Medium
2.双击搜索图标可以调出键盘
在之前的最佳实践的基础上，当应用程序中用户活动的数据显示搜索功能的高度使用时，您可以通过以下方式解决第二个障碍：要求用户伸展到达顶部的搜索字段并按下它以调出键盘，就像在IMDb的应用程序中一样。
目前，用户点击一次即可打开搜索标签。然后，搜索字段显示在表格列表的最顶部，我们必须伸展才能到达它。要解决此问题，某些领先应用程序中的不同交互会自动突出显示文本字段并调出键盘。每个应用的互动如下：
Spotify和Soundcloud，音乐流媒体平台的最新更新允许用户双击搜索图标，立即开始填写搜索条件。
Instagram，Twitter和Tumblr ，用户可以按住搜索图标立即开始搜索字词。
在Shutterstock中，只需单击搜索图标即可显示键盘，您可以立即开始输入。
截图来自：Shutterstock，Spotify，Instagram，Tumblr，Twitter，Soundcloud
3.“更多”选项卡/目标，是可用性和功能可发现性的更好替代方案
首先，根据Google的材料指南，您不能在底部导航中使用超过五个目的地的显示。
此外，不要组合标签和底部导航：
组合底部导航和制表符可能会引起混淆，因为它们与内容的关系可能不清楚。选项卡共享一个共同主题，而底部导航目标（iOS选项卡）是顶级的并且彼此是断开连接的。（谷歌）
资料来源：Google Material Design Guidelines。组合底部导航和选项卡可能会导致混淆。
谷歌允许底部导航和导航drawer的组合。在这一点上，Google相册做的是比较好的。
截图来自：Google相册
我们来看一下这个组合。首先，作为一种古老的传统，汉堡菜单将隐藏其他功能，并且会减少用户探索应用的机会。其次，您向应用程序引入了两种导航模式，而不是一种。那么，有更好的解决方案吗？
尝试添加更多图标标签（Android的目标）。当信息架构师（或具有此技能的设计人员）未能在底部导航中对有限数量的图标（最多5个）后面的所有内容进行分组，或者存在无法在单个目的地中组合的各种功能时，可以考虑更多选项卡。但是，您必须考虑一个因素：是显示带有图标的选项卡还是仅显示带有文本的选项卡。
再次与汉堡菜单相比，詹姆斯福斯特进行的A / B测试显示，与使用三行符号相比，简单地将汉堡菜单标记为“菜单”会带来更多参与度。
资料来源：James Foster 对Caffeineinformer.com的A / B测试
像Wish和Facebook这样的应用程序遵循使用模糊图标作为上面显示的线条图标的不良做法，在这种情况下与汉堡菜单非常相似，下面没有文字作为备份提示。用户将按下图标而不会识别他们将在其后面找到什么（文本提示将解决识别与召回困境），并且会出现包括用户的个人资料和交易的选项列表。
因此，对于Menu and More这样的模糊按钮，根据James Foster的A / b测试的最佳实践是简单地放置没有图标的文本。有两种可能的情况：当您使用文本补充所有底部导航图标时，可以考虑在Shutterstock和Dribbble中使用文本更多的三行图标。
截图来自：Dribbble，Wish，Shutterstock和Facebook
但是，当您的图标都没有如下例所示的伴随文本时，请不要使用“更多”选项卡上的模糊图标，只需使用文本“更多”。
如果您的图标都没有附带文本，请将“更多”设置为文本
最后，您可以自由选择如何在“更多”选项卡中显示内容：是否为可拖动图标（Dribble），还是表格列表（Wish，Shutterstock，Facebook）。表的行可以分为标记的部分（普通）或以组（分组）的形式显示。
目前，还需要进行一些额外的测试，但您已经比竞争对手领先一步了。
4.将通知移动到底部导航栏，以在应用程序核心时增加参与度
如果它是应用程序价值主张的一部分，或者是最常用的功能之一，则可以移动到底部导航的另一个功能是通知。通常位于围绕社区活动构建的应用程序的顶部，例如被跟随并与共享，应用程序的开发人员开始将其移至底部以增加应用程序的参与度和可访问性。
屏幕截图：Behance。通知图标放在顶部，很难用拇指触及。
例如，摄影应用程序500px和社交应用程序（如Behance，Instagram，Facebook和Twitter）都属于此类别，并已将Notifications移至底部，因为它们将其作为核心功能。
截图来自：Twitter，500px，Facebook，Medium。这些应用程序将通知图标放在底部。
5.用“X”按钮替换底部导航/标签栏以关闭弹出窗口并将后退箭头移动到底部以导航回弹出窗口
您可以从Pinterest获得这种练习的灵感。他们的应用程序在弹出框中打开相关文章，可以通过点击“X”按钮而不拉伸拇指来关闭此弹出窗口。
他们通过单击底部的后退箭头，而不是我们将在大多数iOS应用程序中找到它的顶部，允许用户返回到在同一个弹出窗口中打开的上一篇文章，进一步将这种与阅读内容的互动。
你打破了Nielsen Norman将菜单放在熟悉的位置的规则（将UI元素（例如后箭头放在顶部，用户希望通过其他应用程序看到它），但是你要保留由手机设置的新规则：通过拇指实现可访问性，更快的应用程序导航，从而达到易于使用和用户满意度的目的。
如果有更多应用实施将关键顺序交互限制在底部导航的做法，则此拇指交互将更快地为用户所熟悉。
截图来自：Quora
我希望这些能够激发你设计一个底部导航/标签栏来提高可达性！如果您想了解更多的前瞻信息和权威专家普修的专业性建议，就拨打电话或微信留言联系我们吧！
参考：Kiril Karov：One-handed Use of Tab Bar/Bottom Navigation — Best Practicesfor Reachability
