导航是良好用户体验(UX)的关键。用户依靠直观的数字导航来查找有用的信息,探索品牌故事并做出购买决策。
令人困惑的导航足以让用户退回或退出。随着UX专家更多地了解消费者如何与数字内容互动,设计师混合搭配导航元素的方式越来越多。为移动和桌面站点选择正确的导航设置可以改变您的用户体验并促进业务发展。
您的Web Designer工具箱
无限下载:500,000多个Web模板,图标集,主题和设计资产
现在下载
一致性是王
如果所有导航专家都同意一件事,那就是一致性的重要性。导航需要在整个站点中保持一致,并且每页都可用。
导航菜单不一致会导致混淆。用户不必搜索隐藏的导航菜单或尝试太难找到所需的页面。无论您选择何种类型的导航设置,都必须优先考虑一致性。通过关注几个主要方面来做到这一点:
菜单应该出现在每个页面上。不要让用户搁浅在没有出路的页面上。该菜单应该在您网站的每个页面上都可用。如果菜单选项有多个级别,请保留面包屑以便访问者可以看到他们在网站上的位置的层次结构。当用户通过外部源查找页面时,面包屑尤为重要。
使每个菜单项以相同的方式作出反应。如果“关于”选项卡下拉到不同选项的列表中,则其他选项卡也应如此。如果其中一个是指向着陆页的链接,请同时创建其他链接。导航菜单中的每个项目应以与用户触摸(或单击)相同的方式作出反应。
元素应该是直观的。用户已经将某些网站设计元素与意义联系起来。例如,通过菜单项放置箭头通常意味着存在与项目一起的下拉列表。创建帮助用户了解导航期望的元素,并在整个网站中保持相同。
尼尔森诺曼集团表示,在记忆方面,识别比召回更容易。大脑依靠提示激活内存并检索信息。
通过允许站点访问者依赖识别而不是回想起来,使站点访问者轻松导航。您越一致,越好的访问者就会认识到您网站上每个元素背后的含义。这将导致更快的全方位网站浏览 - 以及更快乐的用户。
清晰,简洁的标签
导航菜单不是让您的内容变得聪明的地方。用户依靠菜单来绕过您的网站。菜单的目的是提供方向。它不需要招待或震惊网站访问者。
保持菜单标签简洁,清晰,简洁。出于某种原因,大多数网站使用相同的单字标签。用户熟悉Home,Products,About,Blog和Contact等选项。他们知道标签的含义以及选择选项时会发生什么。
汉堡菜单的替代品
还记得2014年针对移动网站设计的精彩汉堡菜单辩论吗?它正在进行中,现代网站设计师在问题的任何一方都会遇到问题。
许多移动网站仍然使用可信赖的汉堡包,因为这是大多数移动用户所寻求的。“汉堡包”是由三条堆叠的水平线组成的菜单图标。设计师最初使用它是因为它可以在较小的移动屏幕上节省空间。今天许多设计师正在尝试汉堡包的替代品,例如:
标签
可滚动导航
底部导航
“显示更多”选项
带标题的内联列表
分段控制
汉堡包菜单的替代品在许多网站上取得了巨大成功,特别是那些选项少的网站。许多设计师的共识是,如果你可以显示导航,显示它。
可滚动导航菜单示例
有时这是不可能的,因为较小的移动屏幕或几个菜单选项。在这些情况下,逐步披露是可以接受的。您的菜单选择取决于您需要挤入的内容量和网站的目标。例如,较年长的观众可能会欣赏永久可见的菜单,而不是汉堡包。尝试不同的风格,看看是否增加收入。
显示更多选项示例
易于查找的搜索栏
设计功能菜单不仅仅涉及清晰度和一致性 - 它还涉及最大化网站的可用性。
YouTube搜索栏
可以提高可用性的一个功能是搜索图标(通常是放大镜)。如果用户查找搜索栏,则他们已经丢失到足以需要直接搜索功能。隐藏搜索选项 - 或者完全不考虑搜索选项,不要让事情变得更糟。
纽约时报搜索栏
用户可以在搜索栏丢失时找到出路,也可以为具有特定任务的用户提供更直接的信息路径。拿走搜索栏会导致沮丧的访问者决定寻找其他地方,而不是搜索他们想要的网站。
将搜索栏放在每个页面清晰可见的位置。大多数用户都会在搜索选项的右上角查看,或者至少在菜单附近的某个位置查找。
旋转木马菜单
轮播菜单在博客类网站和发布定期更新和新闻报道的网站上越来越受欢迎。
“轮播”指的是页面顶部的菜单,其中显示了网站发布的最新文章。许多新闻网站和博客在旋转木马中使用缩略图来吸引眼球并使其更容易选择文章。
Vogue Carousel菜单
旋转木马选项卡还具有文章的标题,和/或内部内容的简要说明。它基本上用作带有可点击链接的幻灯片,供用户轻松浏览。轮播菜单非常适合展示最新内容,并且可以让用户在您的网站上保留一些他们可能想要在普通网站上阅读的其他有趣文章。
巨型菜单
另一个席卷导航设计的趋势是大型菜单。顾名思义,这个菜单是加号,垂直和水平占据页面。这些菜单在杂志式博客中很受欢迎,但更多品牌正在使用它们来制作菜单。
超级菜单非常适合具有多级导航的网站。如果需要,可以使用图像和缩略图,而不是将用户与十几个下拉菜单混淆,将菜单展开到页面的一半,并清楚地排列选项。
大型菜单也非常适合频繁发布文章的网站,因为设计师可以使用不同的列来显示最近的故事和相关链接。
超级菜单示例
固定导航栏
由于社交媒体和移动网站,无限滚动风格的网站开始流行。Facebook等先锋使用这种格式允许读者无限滚动,每次用户到达页面底部时不断上传新信息。
使用拇指轻松滚动,使其成为移动用户的理想选择。有了这个网站风格出现了导航问题 - 它应该保持在页面顶部还是以某种方式保持可见?答案来自固定的导航菜单。
固定导航示例
当用户向下滚动页面时,固定的导航菜单保持不变。这种类型的菜单也称为粘性导航,并且最常见的是作为顶部导航栏。
菜单始终存在,供用户更改页面。Facebook使用这种格式允许用户在滚动浏览新闻源时查看他们的个人资料或查看通知。如果您的网站具有社交感觉,或者该网站处理大量数据,则带有固定导航栏的无限滚动可能是合适的。
毫无疑问,网站的导航会影响用户体验。用户会有积极的体验,还是消极的体验?使用移动和桌面设计的最新趋势优化您的导航设置可以带来更好的全方位用户体验 - 以及更好的业务成功。请考虑更新您的网站,以包含一些最新的网站导航最佳做法。