【产品】移动导航设计

好的导航引导用户浏览 UI 中的信息流,帮助他们完成任务、提高用户体验,从而提高Web和移动端产品的用户转化率。同样,如果用户无法在网站或app找到方向,那么该网站/app对他们毫无用处 —— 糟糕的导航设计会使用户体验不佳,并导致用户流失。因此,忽视UI导航设计,甚至设计不当的 UI 导航都会对UI设计产生灾难性影响。

用户体验极佳的UI导航关键在于导航菜单。 为了让用户从网站/app的A点到达B点,用户需要一张图来指导他们。 这张图就是——导航菜单。在设计过程中应优先考虑导航菜单的设计。开发前对导航菜单进行原型设计,从一开始就将产品可视化,以便可以实时体验产品的交互方式。

让我们来看看5种常见的 UI 导航设计。(以下原型示例均使用墨刀制作)

下拉菜单


%E5%A2%A8%E5%88%80%E5%8E%9F%E5%9E%8B-%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.jpg


                                                                                                  该原型使用墨刀制作

下拉菜单是一个可扩展的 UI 导航,具有多个值,用户可以选择这些值,并从那里被带到网站的另一个区域。下拉列表是一种网站/移动端的常用导航设计,可让用户跳转到网站中的新位置,并根据用户所选的最后一个选项来执行操作的命令菜单。

什么时候使用下拉菜单?

当你有许多显示选项并希望节省空间时,下拉菜单是一种好的导航方式。

好的下拉菜单对用户来说很熟悉,而且方便浏览,能提高点击率。 不过它有时间和区域的限制,所以要考虑你的用户体验模式。 菜单需要包含足够的导航选项,以便用户知道如何与其交互;但又不能太多选项,避免产生不好的阅读体验。 好好利用下拉菜单,它会为你的UX/UI设计大大加分。

抽屉式汉堡菜单


%E5%A2%A8%E5%88%80%E5%8E%9F%E5%9E%8B-%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-%E6%8A%BD%E5%B1%89%E5%BC%8F%E6%B1%89%E5%A0%A1%E8%8F%9C%E5%8D%95.jpg


                                                                                               该原型使用墨刀制作

抽屉式汉堡菜单,是一个常见的Android和iOS移动菜单,用于显示多个链接。在"隐身"状态的时候,抽屉式汉堡菜单是隐藏在屏幕上。通过触发汉堡图标,用户可以访问呈现出来的导航链接。

什么时候使用抽屉式汉堡菜单?

抽屉式汉堡菜单适用于 响应式网页设计。例如,Android Gmail邮箱,YouTube和Facebook中的Android抽屉导航。

抽屉式汉堡菜单非常适合隐藏导航,在移动端屏幕上整理好大量导航链接。

固定位置菜单


%E5%A2%A8%E5%88%80%E5%8E%9F%E5%9E%8B-%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-%E5%9B%BA%E5%AE%9A%E4%BD%8D%E7%BD%AE%E8%8F%9C%E5%8D%95.jpg

固定位置菜单或粘性菜单是一种Web UI模式,当你向下滚动时,标题区域(菜单,网站标题和徽标)仍然可见,页面内容在其下方流动。粘性标题已成为Web UI模式标准 ——Google +和Dropbox都有粘性菜单。


什么时候固定位置菜单

固定位置菜单应该用于目标意识明确的网站页面,例如零售,电子商务网站。用户可以在几秒钟内跳转至导航选项 - 固定菜单在这方面非常有用。在浏览网站时,速度对用户来说是最重要的。事实上,根据 Akamai 和 Gomez 研究,79% 的在线购物者如果遇到性能问题,就不会返回网站。



大幅网页菜单导航(Mega Menu)


%E5%A2%A8%E5%88%80%E5%8E%9F%E5%9E%8B-%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-mega%20menu.jpg


                                                                                                   该原型使用墨刀制作


大幅网页菜单(mega menu)是一个可扩展的多级菜单。它有二维面板,分为多组导航选项(标签),每个标签下都有各自的跳转链接,因此不需要滚动。用户单击或鼠标悬停在选项上可查看其包含的链接。

与下拉列表一样,大幅网页菜单可使用图标来呈现结构,以及提升子菜单可见性。它们还可以在导航链接旁边添加图像或彩色字体,来吸引用户注意值得注意的内容。

什么时候使用大幅网页菜单

大幅网页菜单能很好地节省空间,隐藏内容,等到用户将鼠标悬停在菜单栏上时才显示所有导航链接。尼尔森·诺曼集团的一项研究显示,网页上需要显示的链接越多,大幅网页菜单就越受欢迎。

此菜单最适合 Web 设计,适用于有视觉障碍的用户或高龄的 Web 用户。它们同样适合需包含许多不同主题的杂志式博客。


卡片网格菜单


%E5%A2%A8%E5%88%80%E5%8E%9F%E5%9E%8B-%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1-%E5%8D%A1%E7%89%87%E7%BD%91%E6%A0%BC%E8%8F%9C%E5%8D%95.jpg


                                                                                            该原型使用墨刀制作

网格是在Web和移动端导航中使用的导航模式。 网格包含一系列可展开可收缩的图像。它是另一种视觉上出彩的结构,让你可以组合相关元素,把主题和用户体验流程可视化。

什么时候使用卡片网格菜单

网格中的图像提供了大面积的可点击对象,使网格成为移动UI导航的理想形式。 它们还用于许多以展示图片为主的网站,例如图像共享网站Pinterest和音乐流服务Spotify。

由于其逻辑,适应强的布局,卡片网格非常适合响应式导航!


——————————————————————————————

本文由墨刀编译自 5 UI Patterns: Navigation That Makes Good UX Sense。