与直接搜索相比，用户更喜欢使用导航，因为导航允许用户提出多项选择题，而搜索则是一个空白填充的问题。那篇文章主要讲的是导航设计，什么样的导航设计可以让用户喜欢它。
McGovern（Customer Carewords的创始人兼首席执行官）表示，用户更喜欢使用导航而不是直接搜索，因为导航是为了让用户提出多项选择问题，搜索是一个空白填空的问题（导航副本已经存在）信息，不需要通过用户的大脑进行额外的搜索处理）。他解释说：如果链接的副本与用户正在寻找的内容相匹配，他们更有可能直接点击链接。
虽然导航设计一直是一个有争议的话题，但仍然有一些很好的应用规则。作为一名用户体验设计师，在进行网站导航设计时值得注意：
保持（协调结构）连贯性和一致性;设计清晰易懂的互动;设计平面导航结构;考虑响应设备的兼容性。首先，维护（导航结构）一致性和一致性1-1子页面和登陆页面
Coherence还需要通过内容进行过滤。并非所有导航项目都需要显示其子页面链接，或者不显示任何导航项目;相反，他们表明那些用户会错误地认为他们没有显示他们的子页面链接。多内容导航项目。
如果子页面链接没有显示在第一级导航结构中，那么请确保它们在每个部分的辅助导航结构中的使用始终是一致的（在本节中不显示是一级导航结构，而是另一部分）它显示在辅助导航结构中）。
同样，所有1级导航项都是指向着陆页的链接，或者是辅助导航链接的标题。如果一部分要跳转到目标网页而另一部分是辅助导航链接的标题，那么用户在点击时会感到困惑。
在视觉设计中，应给出相同的明显指示。第一级导航项目是否是指向目标网页的链接？或者是辅助导航机制的标题，字体的颜色和样式以及鼠标指针的变化？
此外，如果主要导航项目是链接，则应通过文案或视觉设计明确指出相关操作。
在费尔法克斯县公立学校的官方网站的完整菜单下，用户可以点击“职业”链接到“职业”页面，或单击右箭头展开辅助导航项目的标题。
这与上面提到的导航机制的一致性是一致的：主导航项目要么转移到二级登陆页面;或两者都是辅助导航项目的标题条目。如果两者都可用，则区分样式。
如果新添加的内容与当前站点的各个部分不匹配，则需要重新考虑站点的层次结构，或者重新访问——由于本节的内容与网站的其他部分不符，那么为什么还要存在呢？可以将其删除或合并到与内容相关的页面中吗？
如果需要更轻松地触摸某些页面，请考虑使用响应主页或模块的登录页面（浮动层？）而出现的功能模块。用户实际上更愿意关注这些模块，并且对用户重要且具有重要功能的模块不会干扰整个网站的导航结构。
1-2面包屑导航结构
面包屑导航是引导用户的好方法，这种指导对于从外部链接跳转到深层页面的用户尤其重要。
但是面包屑导航需要非常精确的结果才能工作，并且您不能丢失导致错误级别的任何级别或页面。对于只有两级结构的小型网站，没有必要使用痕迹导航。如果必须使用它，则必须保持级别的一致性和一致性。您可以访问UI-Patterns网站以了解有关面包屑导航的更多信息。实际用例。
二，设计清晰易懂的交互模式2-1功能可视化
视觉元素的变化可以帮助用户找出网站上可能的交互形式。例如，将关闭的按钮滑动到打开意味着设置已更改并知道如何将其反转。当图标未改变时，用户可能无法预测操作的结果。
在上面显示的网页中，请注意根据导航菜单的展开或折叠切换箭头的方向。
IOS功能开关也是一个很好的案例
2-2使用带图标的标签
有时候图标可以替换文本链，包括使用icon标签来降低理解成本。例如，如果您使用有争议的汉堡包式图标（单独），则放置一个“菜单”图标。旁边的标签将解决这个潜在的可用性问题。
此方法也适用于其他常用图标，例如：“联系人”，“登录”等。
2-3根据功能区分图标
区分图标并区分具有链接的那些图标和仅作为纯信息或用作类别的图标。
根据NNG研究：当使用用户检索网页上的信息时，通过颜色和图标对差异化设计的视觉指导可以使用户比唯一的副本快37％。区分图标的颜色，而不仅仅是将其设计成不同的样式，使用户更容易感知这些图标具有不同的效果。
例如：Twitter上那些无法交互的图标被设计为匹配灰色方块中的白色（笔划）图标。例如：“喜欢” （并且喜欢赞美按钮）并且“跟着你”。 （已经遵循的焦点按钮）。
用户可以与之交互的图标被设计为灰显和颜色切换，并且当用户悬停时显示解释性消息。
第三，设计平面导航结构
为了设计出良好的导航结构，良好的网站信息架构和层次结构是关键。当网站的信息层次图出现时，有必要尝试设计平面导航结构。这种扁平结构允许用户只需一次或两次点击即可转到最低级别的页面。
虽然平面导航结构是理想的，但仅仅因为短期记忆的限制而设计菜单也是错误的。
正如尼尔森诺曼集团所说：
菜单的含义是让用户识别导航栏项而不是让用户调用它（导航栏项）。
因此，菜单必须设计为用户浏览的简短，但必须明确说明信息。 （菜单栏必须设计得简洁明了，表达式准确）
3-1限制导航级别
导航结构的层次结构最终由网站的信息层次决定。理想情况下，用户点击的导航级别越少，用户访问目标页面的速度就越快。
我们再次引用尼尔森诺曼集团的话：
信息层越深，用户就越容易被误导。
平面导航层次结构
深层导航结构
通常，大多数网站都是三到四个信息级别，因此网站的页面更容易到达，但这需要确保网站的导航结构不是太宽泛。
要弄清楚哪些级别的信息是合适的，请尝试将现有的信息层次划分为单独的，不相关的部分。然后查看每个子页面的分组，看看它们是否可以升级到更高级别。
这时，你需要注意：
更新当前信息部分下的标签;创建一个全新的信息部分，以容纳最初属于横截面的子页面;重新调整各个信息部分之间的关系，也许应该根据操作行为而不是主题进行分组。
合并内容或删除内容同样可行。平面导航设计是终极的，并且目前正在成为整页导航设计的趋势，即没有子页面和只有一个信息级别。
3-2为每个级别设计独特的视觉（或区分每个层次和视觉感知）
用户应该能够快速浏览导航信息并知道这些链接的导航项目级别，并且这些链接的放置和分组应基于此级别。
字体样式，字体大小，字体粗细或颜色等视觉设计都应该在导航级别上构建，并且应始终保持一致。如果使用辅助导航，则还应区分其父/子或兄弟导航链接的设计并与主导航一致。
Antro网站导航菜单的第一级导航副本和第二级导航副本的字体，字体大小和颜色级别悬停状态不同
3-3使用位置指南
就像痕迹导航结构一样，导航栏上的当前位置定义可以帮助用户找到他们当前的位置，特别是如果他们在更深的页面上，这个清晰的视觉指南可以帮助用户了解他们所在的页面。 。
Audubon将突出显示当前位置的导航菜单
第四，考虑响应设备的兼容性
良好的导航结构可以很好地适应手机和平板电脑。在设计导航结构时，您应该考虑多端通用，或者考虑使用两个类似的导航结构。这种结构不允许用户将他们的思维模式转移到移动端。它与PC不同。
4-1移动端没有悬停状态
当用户在PC侧悬停主导航项时，状态显示辅助导航的内容链接。然而，移动终端没有悬停状态，这使得移动终端和PC端不一致。当用户使用移动设备时，他们不会本能地将菜单悬停在PC上以找到他们想要的内容。
如果您必须在内容链接上使用两种形式的互动，请考虑设计两个不同的点击位置（导致不同的点击效果），就像Fairfax County Public Schools案例——导航标题副本本身可以跳转到某个页面，然后单击标题副本旁边的加号以展开主导航这一部分的内容。
4-2为移动终端设计与PC不同的导航表格
例如，日本时代杂志在PC端的导航结构设计使用宽屏和水平排列的导航栏。移动端的相同导航内容使用汉堡式导航设计，并在部署时使用手机带的垂直空间。
单击第一级导航标题时，辅助导航标题会在其下方展开，而不是将导航区域分为两列，一级和两级。
这种设计不是将PC的导航形式机械地复制到移动端。可以注意到，移动端的蓝线与主导航更符合辅助导航标题，实际上更符合移动端的设计。
无可否认，在不同端优化导航设计时仍需要保持一致。
说明：我喜欢翻译国外互动设计体验设计网站优秀文章案例，仅供相互学习和讨论，翻译有版权，如有任何错误，请指正！〜/p>
原作者：Stephanie Lin
原始地址链接：现代导航规则| UX Booth
本文由@vanhelsinglhj出版。未经许可，禁止复制
该地图来自Unsplash，基于CC0协议