来源：
Perfect Menu for Mobile Apps
The Hamburger Icon. To Kill or Not to Kill?

Menu for Mobile Apps

在所有的应用程序和网站里,用户依赖菜单找到内容和使用功能。

菜单非常重要,你几乎可以在每一个网站或应用程序中遇到它们，但并不是所有的菜单都是有效的，我们常常面临各种菜单问题：有些菜单很混乱，有些菜单很难操作，有些菜单干脆很难找到。

使菜单可见

尽量避免使用汉堡图标

hamburger_menu
这个三行按钮是个魔鬼。并不是说图标本身,而是隐藏图标背后的导航。

眼不见，心不烦，隐藏小屏幕导航是一种显而易见的解决方案—你不必担心有限的屏幕，仅需要把你的整个导航放到一个可滚动的抽屉里,默认是隐藏的。

但汉堡按钮效率较低,因为你要点击两次……

Drawer example

汉堡菜单其实是小屏幕手机刚兴起的一个的解决方案，当时的设计师们并没有深入去了解手机应用的设计，仅仅为了做出一个和桌面网页显示差不多的小屏幕网站。
结果这个可怕的不明意义汉堡标签不断被设计师滥用。甚至有的网站在空间足够放正常菜单时还是用汉堡菜单……

Google Material 的web网站就是一个反例，它分明有足够的空间使用正常的导航

互动理论,A/B测试,以及一些世界顶级的应用程序的演变表明,公开菜单选项可以增加用户的使用和用户满意度。

这就是为什么许多应用程序正从汉堡菜单朝着相关导航选项始终保持可见转移。

标签栏:而不是藏在抽屉里的导航选项

YouTube通过一个tap bar提供主要的核心功能,允许快速切换功能。

重新设计的YouTube Android App

这是一个聪明的方法使标签栏在不使用时消失。如果人们为了获取新的内容滚动屏幕时,标签栏隐藏,而当人们下拉屏幕试图回到顶部时，标签栏出现。

Hidden Tab Bar

最后但并非最不重要,许多设计师误把切换选项放到下拉菜单中。这导致同样的问题——用户只看到所选选项,而其他选项是隐藏的。

低能见度(下拉菜单)和高可见性(开关按钮)。图片来源:uxmovement

iOS切换按钮：

iOS切换按钮

导读:很多应用程序仍然使用汉堡,因为它是一个用来塞大量的链接到一个应用程序里去的简单方法,但它是错误的方向,因为如果你的导航是复杂的,隐藏它不会让你的应用更友好。

当前活动位置

在一个网站和APP中，无法显示当前位置可能是最常见的错误。
“我在哪儿?“是一个成功导航需要回答用户的根本问题之一。

用户依赖菜单视觉线索来回答这个关键问题。但有时他们所看到的并不是他们期望看的。

Icons

有一些普遍的图标,用户知道它们大多代表什么，如搜索、电子邮件、打印等。不幸的是“万能”图标是罕见的。APP设计师经常把功能隐藏在图标后面,实际上这是非常难识别的。

最好在图标的下面加上准确的文字，或者在用户第一次使用APP时给出适当引导。

Bloom.fm以前的Android版本。对于用户来很难知道当前位置

Colors

当前状态可以直接在标签栏使用对比色,请妥善选择标签状态。

按钮颜色应指导用户如何行动。图片来源:uxmovement

颜色选择的很好的例子：

当标签栏被选中颜色填充

导读:正确选择图标和颜色可以帮助用户理解当前位置。如果你使用图标,要做它们的可用性测试。

协调菜单与用户任务

你应该只使用可以理解的链接标签，找出用户正在寻找什么，并且使用那些目标用户熟悉的分类标签。
菜单不是让你讲内部行话的地方，所以请坚持清晰的术语描述你的内容和功能。

用户喜欢可以快速上手的应用，你可以减少用户理解菜单的时间。

Twitter menu for iOS

导读:菜单元素应该易于理解。用户应该能够理解当他们点击某个菜单究竟会发生什么。

易于操作

太小或太接近的元素是用户感到沮丧的巨大原因之一。所以使得菜单链接足够大，可以很容易的打开或点击。

一个麻省理工学院Touch实验室研究发现，大多数成年人的食指平均宽度为1.6 - 2厘米。转换成像素大概是45-57px。

食指的平均宽度像素，图片来源:uxmovement。

触摸目标的宽是45-57像素，正好让用户的手指紧贴在目标内，当他们准确地击中目标，为他们提供精确的的视觉反馈。

结论

几乎每一个站点和应用程序都应该把帮助用户定位予以高度的重视，其背后的目标应该是创建一个能够与用户的心理模型自然对应的交互系统。

简单的用户通道，清晰的画面，和宽容的设计有助于给用户营造无缝体验的错觉。你的交互系统的目标应该是，通过清晰的视觉传达为用户解决问题。

你的产品对用户来说越容易使用，他们就越有可能使用它。

看完这篇文章，大家可以再结合上一篇有关底部导航设计的文章去看自己平时用的应用，比如最美应用和一些阅读APP对MENU的处理。