产品可用性的基本功能之一是精心创建的导航。如果用户不知道自己在哪里，以及如何通过网站或App实现目标，那么视觉效果是否具有创造性、时尚性、独创性和吸引力等都无关紧要了。无论是什么原因把用户带入到你的数字产品中，高度尊重他们意味着让他们清楚知道发生了什么，以及他们在与之互动的每一步都要去往哪里。

早些时候我们已经发布了关于术语表的文章，其中包含有关可用性和网页设计以及业务术语和缩写的关键术语。这一次视角将重点放在导航方面：让我们看看界面的哪些部分和元素构成这个重要问题。

Navigation - 导航

导航一词的基本含义指的是人类活动的范围，它负责提供支持和控制使车辆从一个地方到达另一个地方的过程。根据词源词典，该词有很深的渊源，源于拉丁语navigare：航行，海上航行，操作船只，而该词又基于两个词：navis（船）和agere：运动设置，驾驶，驾驶向前。所以，导航就是让某人或某物能够覆盖计划的路线。这是这个词的众多含义开始并在许多其他领域进行调整的基础。

在用户体验设计方面，导航的概念是设置可用性的基本概念之一。在这种情况下，导航通常可以定义为在整个应用程序或网站中指导用户的一组操作和技术，使他们能够实现自己的目标并与产品成功交互。有效导航对设置积极的用户体验有很大的影响：用户开始使用具有特定目标和期望的应用或网站，这是设计师的任务，即为解决用户的问题设置最佳和最简便的途径。

应该从创建用户界面的早期阶段就考虑UI中有用且无缝的导航。用户通过界面与许多交互元素（如按钮、开关、链接、选项卡、操作栏、菜单、字段等）导航，其中一些将在下面详细描述。在Tubik，我们在这里支持工作流，其中所有基本导航问题（例如布局、转场、元素放置和功能）都在UX线框图的早期阶段进行设置，然后使用简单的原型进行检查以确保所有重要的操作和选项对用户来说都是清晰的。忽略这一重要方面会带来很大的风险，所有其他的设计工作都可能被浪费掉，因此从基础开始就应该对用户和客户更友好。

Menu - 菜单

菜单是导航的核心元素之一。 它是一个图形控件，显示与界面交互的选项。基本上，它可以是一组命令列表——在这种情况下，选项将用动词表示可能的操作，例如，保存、删除、购买，发送等。菜单还可以显示在给定的界面中组织内容的类别，这可能是使用名词标记它们的最佳时机。

菜单在界面中可以具有不同的位置（侧栏菜单，顶部菜单，底部菜单等），并且外观和交互的表现也不同（下拉菜单，上拉菜单，侧滑菜单等）。设计师在总体布局中对菜单功能、外观和位置做出的任何解决方案，应以深思熟虑的用户研究为基础，不仅要分析目标受众的潜在愿望和期望，还要分析他们的技术素养和数字产品可能使用的环境。精心设计的菜单可以大大加快实现目标和满足需求的过程，为积极的用户体验奠定坚实的基础。

Blog App

这是移动博客应用程序界面的示例，其左侧菜单显示了内容类别。菜单中描述位置的文案内容由显示类别的可识别视觉标记的图标提供。

Moneywise App

呈现的应用程序UI概念显示了使用有效的颜色标记的分类菜单：当用户移动到某个特定的类别时，该类别中的所有内容都会使用特定的背景颜色，从而形成强烈的联想，以及对用户看到的数据的性质和主题的快速感知。

CTA - 行为召唤

在广泛使用的缩写词CTA的背后，设计师和内容创建者想要表达的意思是呼吁采取行动。这实际上是一个词组，它刺激用户以某种方式和目的与产品进行互动。CTA元素是交互式控件，它允许用户执行被调用的操作。布局中此类交互元素的典型类型是按钮、选项卡或链接。

在各种界面中，CTA元素是与产品有效交互的核心因素，对产品的可用性和可导航性起着至关重要的作用。当所有交互和转场路径都已为用户清晰地创建，但CTA元素却没有被考虑、放置或设计得很好时，用户可能会感到困惑，需要付出额外的努力来实现他们的目标。这带来了不良的转换率和一般用户体验的高风险，这就是为什么导航元素应该引起设计师特别关注的原因。在任何界面中，它都应该是最突出、最引人注意的部分之一，以告知用户该产品如何对他们有帮助。

联系人列表概念动画

正如我们在文章中提到的，一些CTA元素可以用不需要文案的图标来表示，例如用于拨打电话的电话听筒或用于打开已收到邮件的信封。上面显示的App界面显示了这种情况：带有接收器的按钮是屏幕上最突出的交互式元素，可引导用户快速通过App实现其目标，并且不需要文案就可以让用户了解可以用它执行哪些操作。

但是，如果图标的图片不太明显或具有误导性时，则使用文案来支持图标、按钮或链接的双重方案会更有效。

海鲜烹饪网站

上面的例子展示了一个专门烹饪海鲜的web平台的登录页面。该页面的标题显示了行为召唤的用语，并通过文字和视觉结合的方式快速设定了主题。不过，这一行为召唤并不是交互式的，活跃的CTA元素是可单击的按钮，通知用户单击后可以查看有关特定主题或配方的更多信息。明亮的颜色增强了页面的视觉层次感，并将用户的注意力吸引到关键的交互区域。

Bar - 操作栏

操作栏是用户界面的一部分，具有可点击的元素，使用户能够快速地执行与产品交互的一些核心步骤，也可以将当前过程告知用户。我们可以看到操作栏有以下基本类型：

标签栏（Tab bar） - 在移动应用程序中，它显示在应用程序屏幕的底部，并提供在应用程序的不同部分之间快速切换的功能。

标签栏交互动画

加载进度条（Loading bar）- 当流程处于活动阶段时，该控件通知用户当前所处的操作阶段，并且用户可以通过显示的进度或百分比查看进程。

Timeline App

进度条（Progress bar） － 提供有关到目前为止当前过程结果的反馈，例如：显示已完成多少计划活动。

Juicy音乐播放器

Button - 按钮

按钮也许是任何界面中最流行的元素之一。按钮是使用户能够在特定指令下从系统获取适当的交互反馈的元素。一般来说，按钮是一种控件，用户可以通过它直接与数字产品进行通信并发送必要的指令以实现特定的目标，例如发送电子邮件，购买产品，下载数据，打开播放器以及 大量其他可能的动作。按钮如此受欢迎和用户友好的原因之一是，它们有效地模仿了与物理世界中对象的交互。

现代的UI按钮显示出高度的多样性，可以满足多种用途。典型且常用的按钮具有交互区域，通常清楚地标记出可见性并具有特定的几何形状，并且通常与文案一起使用，以解释通过此按钮将执行什么操作。设计师通常会花费大量的时间和精力来创造出有效的、引人注目的按钮，这些按钮被和谐地添加到通用的样式概念中，但其对比度足以从布局中脱颖而出。

404页面

此外，我们还可以提及几种具有附加功能的按钮，这些按钮广泛被用于Web和移动界面。

汉堡包按钮（Hamburger button） - 隐藏菜单的按钮：单击或点击它，用户会看到菜单正在扩展。之所以这样称呼它，是因为它的形式由三条水平线组成，看起来像典型的汉堡。如今，这是一个典型的互动元素，但由于利弊众多，仍存在很大争议。

大多数经常访问和使用网站的用户都知道这个按钮隐藏了数据的核心分类，所以这个技巧不需要额外的解释和提示。汉堡包菜单释放了空间，使界面更加简约，充满留白，并允许为其他重要的布局元素节省大量空间。该设计技巧还为隐藏导航元素的响应式和自适应设计提供了更多好处，并使界面在不同设备上看起来和谐一致。尽管汉堡包菜单仍然属于现代网络和应用程序设计中极具争议的问题，但它们被广泛使用。反对汉堡包菜单的争论是基于这样一个事实：即这种设计元素可能会让那些不经常使用网站的人感到困惑，并可能被具有高度抽象性的标志所误导。因此，应该在用户研究并确定目标受众的能力和需求之后，才决定是否应用汉堡包按钮。

Ice 网站

上图展示的网站概念使用了汉堡包按钮隐藏菜单，并支持通用的极简主义方法来实现布局的视觉效果。

加号按钮（Plus button） - 被点击或敲击的按钮提供了添加新内容的能力，可以是新联系人、帖子、便笺、列表中的位置，用户可以做的任何事情都可以作为数字产品的基本操作。有时，点击此按钮用户将直接跳转到创建内容的模态窗口中；在其他情况下，还有一个中间过渡阶段，即为它们提供其他选项以供选择，并使添加特定数据更加集中。

加号按钮概念动画

这是一个概念动画，表明加号按钮首先使用户能够选择添加内容的类别（图像、视频、文本），然后才定向到可以进行添加的特定屏幕。由于设计人员可以为用户提供针对每种特定情况添加内容的选项，因此这种做法只需几秒钟即可使体验更加人性化。

分享按钮（Share button） - 允许用户直接向社交网络帐户分享内容或成果的按钮。在绝大多数情况下，它都是用图标来表示特定社交网络的品牌标志，而且很容易识别。

Switch - 开关

开关是使用户能够打开或关闭该选项的控件。再次，由于它直接模仿了人们在现实生活中习惯的开关，所以它在现代界面中具有较高的效率和普及度。这里要考虑的重要点是，开关的状态应该清晰可见且与众不同，以便用户可以避免费力去了解该选项是否处于激活状态。各种对比和轻微的动画效果可以解决使体验变得简单且用户友好的问题。

Toonie Alarm的开关

这是在Toonie应用程序中打开和关闭警报的开关。动画使交互变得顺畅自然，而选项卡的颜色更改和切换变成旋转的太阳使用户立即了解警报是否处于激活状态。如果你想看到关于这个动画元素是如何设计和开发的完整案例研究，欢迎查看这里的详细信息。

Picker - 拾取器

从名称中可以清楚地看到，拾取器允许用户从选项行中选择某一个点。它通常包括一个或多个不同值的滚动列表，例如小时、分钟、日期、度量、货币等。滚动列表，然后用户选择并设置所需的值。这种类型的交互元素广泛用于具有设置时间和日期功能的界面。

Toonie Alarm时间拾取器

复选框是图形化的UI元素，用于标记特定的内容，通常设置二进制选项的选择。这是另一个与现实世界建立桥梁的元素，因为它看起来与填写测试、问卷和其他类似的东西的过程非常相似，你可以在方框中打勾或涂上颜色以标记选项。复选框和开关可以在任何类型的用户界面中找到，特别是在用户、屏幕或页面设置部分。此外，复选框还提供了应用程序和网站中导航的一个常见部分，具有任务管理器、待办事项列表、时间跟踪器等功能。

待办列表应用程序

下面是针对复杂任务的移动待办应用程序的设计概念示例。轻击复选框，用户将任务标记为已完成，任务将自动淡出，文字使用不同的颜色，字体变粗体以支持此任务与正在进行的任务的对比。

今天我们的术语表已经为那些需要它的人准备好了，不久我们将继续这一实践。不要错过新的内容——下一个将继续讨论导航问题，深入了解菜单和按钮、标签、面包屑和图标的类型。新的定义即将推出！

建议阅读

下面是一些推荐阅读材料，供那些想深入以及了解更多关于这个主题的人阅读：

iOS人机界面指南

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

完善移动端网页的导航

https://uxplanet.org/ui-ux-design-glossary-navigation-elements-b552130711c8

UX设计术语：如何在用户界面中运用功能可见性

https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4

UI设计：用户界面中按钮的基本类型

https://blog.tubikstudio.com/ui-design-basic-types-of-buttons-in-user-interfaces/

UX设计：如何使Web界面可扫描

https://blog.tubikstudio.com/ux-design-how-to-make-web-interface-scannable/

移动导航的基本模式

https://uxplanet.org/basic-patterns-for-mobile-navigation-d12a87686efe

关于视觉层次结构的9个有效小贴士

https://uxplanet.org/9-effective-tips-on-visual-hierarchy-c3b30a7fd0ef

---

作者：Tubik Studio
原文：https://uxplanet.org/ui-ux-design-glossary-navigation-elements-b552130711c8