如今，汉堡菜单已经很常见了，我们看到的手机网站设计中就有很大一部分都是采用汉堡菜单，一般的响应式设计的网站也钟情于汉堡菜单，很大程度上促成了简约之美，只是有时候盲目追求简单设计也不是好事，因为良好的用户体验并不是凭“简单”而定。它们的可行性可实际表现显然要视其具体场景而定。此前优网科技小优给大家分享过关于菜单设计的文章《移动端界面设计中菜单设计别一味地追求简单》，那么为了避免过于简单，我们可以怎么做呢？
1、简单选项卡
如果在你的站点/应用程序中独立部分为数不多，又要保证用户能在不同部分间实现快速切换，那么选项卡式导航或许就是合适的解决方案。

虽然这一方案看上去可能是简单的导航模式，但是，在设计过程中你仍然需要考虑到至少以下几个方面：
1）标签数量不超过5个；
2）总有一个标签处于活跃状态并在视觉上凸显出来；
3）个标签应该对应程序中的首页，并且所有的标签项的位置遵从它们的优先级或逻辑性放置；
4）这些标签可以或放置在屏幕顶部或置于底部，这要看具体的设计场景和平台（Android系统中将其放在底部）；
5）如果不使用文本标签，一定要保证那些标签图标是用户所熟知的；
6）>查看更多注意事项。
案例：LinkedIn 、 Google Photos

LinkedIn中仅使用图标，Google Photos则使用图标和标签
2、包含“更多”选项的选项卡
当标签数量超过5个时，不妨考虑把优先的前4个标签显示出来，而多出来的其它标签则统一放置到”更多“选项下。

采用这种设计时要遵循的设计准则基本同”简单的选项卡“，”更多“选项则可以或链接向一个新的导航页面或作为一个下拉菜单项。

你可能会争论说这种使用”更多“标签的方法并不比传统的汉堡包式菜单好，但是，如果你能依照正确的优先级来显示这些标签，那么大部分用户就都会自然而然的将重点放在显示的4个标签上，而于多出来的其他选项又不会明显的打扰到他们。
实例：Facebook

3、适应屏幕宽度的菜单
针对上述【包含“更多”选项的选项卡】方案，一个更精致的做法是使菜单选项适应屏幕宽度来显示，尽可能显示更多的选项，多余的部分则放到一个“更多”选项下。

这意味着在分辨率越低的屏幕上，”更多“菜单下会包含更多的选项。这种做法显然要比上述【包含“更多”选项的选项卡】更加灵活，尤其在屏幕尺寸不大不小的时候。
实例：BBC

4、可滚动导航 
如果程序中有不少导航项，而各项之间的优先级却并没有大的差别，此时使用”更多“选项的做法就不再合适了，一个取代的方法是使用一个可滚动的视图将所有导航项显示出来。

这种方法的缺点是在不滚动的情况下用户依然只能看到前面几项，其他项还处于隐藏状态，然而，在某些场景下，这依然是不失为一种可接受的方法。比如在一个网络商店或资讯目录下，用户会自然地预期看到更多的内容。
需要注意的是，在视觉设计上，你需要确保能提供足够的视觉线索来引导用户横向滚动后还能看到更多的元素。
实例： Medium 、 Google

5、下拉菜单
还有一种不常见但挺有意思的设计，就是在其它选项的可见性和可达性都不那么至关重要时使用下拉菜单。

下拉菜单在这种情况下，实际上有双重的作：其一，它充当了一个页面标题，而向下箭头则提示用户从这里可能快速的切换选项部分。其二，虽然这里的选项被隐藏了起来，但是这种下拉的设计能有效的表明其列表项或指向当前页的同级页或指向当前页的子页面。
实例： Barnes&Noble 、Duolingo

当浏览书籍时，当前的分类总是显示在顶部

虽然对于大多数用户来说不是一个常见的交互，Duolingo允许用户下拉快速切换语言
然而有时，汉堡包式菜单可能依旧是一个不错的选择。
因为汉堡包菜单的主要缺点就是其可见性不足，以往的设计准则往往建议我们在设计主体导航时采用其他替代方案。不过，当设计次级导航项时，或许可以考虑这种方案。 
如果主导航项能够在屏幕上如操作按钮一样设计醒目可见，那么汉堡菜单似乎可以作为所有次级导航的好去处：

当主导航是围绕用户流设计，且相关选项清晰可见时不妨考虑这种模式。Uber就是一个不错的实例：

主屏幕上的所有选项都是为了叫车而设计，而其他的诸如历史行程和设置这样的次级项都统一放置到汉堡包菜单下。
Google Translate 也类似：

主要功能就是切换语言并输入文本进行翻译，而其他的诸如帮助和社区这样的次级项就放到汉堡包菜单中去。

責(zé)任編輯：優(yōu)網(wǎng)科技

版權(quán)所有：http://www.jcoyc.com (優(yōu)網(wǎng)科技) 轉(zhuǎn)載請(qǐng)注明出處