网站设计元素常用术语：导航,按钮,菜单,开关

产品可用性的基本特征之一是精心设计的导航。如果用户不知道他们在哪里以及他们如何通过网站或应用程序实现他们的目标，那么视觉表现是否具有创造性，时尚，原创，吸引力等等并不重要。无论将用户带入您的数字产品的原因是什么，尊重他们的高度意味着让他们知道发生了什么以及他们在与之交互的每一步中所处的位置。早些时候，我们已经发布了词汇表帖子，其中包含可用性  和网页设计  以及业务术语和缩写主题的关键术语。。这次透视将集中在导航方面：让我们看看界面的哪些部分和元素是造成这个重要问题的原因。

导航

在其基本含义中，导航一词命名了人类活动领域，负责使车辆从一个地方到另一个地方，控制和支持这一过程。根据词源词典，这个词有很深的根源，来自拉丁语navigare“航行，航行，海上航行，驾驶船舶”，而这又取决于两个词：  navis “ship”and  agere “启动，开车，前进“。因此，导航是为了使某人或某事能够覆盖计划的路线。这是这个词的众多含义在许多其他领域开始和调整的基础。

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

在创建用户界面的早期阶段，应该考虑UI中有用和无缝导航的方面。用户通过界面导航，具有许多交互式元素，例如按钮，开关，链接，标签，条，菜单，字段等，下面将更详细地描述其中的一些。

在Tubik，我们支持工作流程，其中所有基本导航问题，例如布局，过渡，元素放置和功能，都在UX线框架的早期阶段设置，然后使用简单原型进行检查，以确保所有重要的操作和选项很清楚用户。忽视这一重要方面设置了很高的风险，即设计上的所有其他工作都可能被浪费掉，因此从基础开始，它更加用户和客户友好。

菜单

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

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

以下是移动博客应用界面的示例，其中包含显示内容类别的左侧菜单。描述菜单中位置的副本由图标支持，该图标呈现该类别的可识别视觉标记。

所呈现的应用UI概念显示了应用有效的颜色标记技术的类型菜单：当用户移动到特定类别时，特定的背景颜色用于其中的所有内容，这形成了强烈的关联和对自然和主题的快速感知。用户看到的数据。

CTA

在广泛使用的缩写CTA背后，设计师和内容创作者意味着号召性用语。这实际上是一个短语，它促使用户以某种方式与产品进行交互，并达到其设计目标。CTA元素是交互式控件，使用户可以执行所调用的操作。布局中此类交互元素的典型类型是按钮，选项卡或链接。

在各种界面中，CTA元素是与产品有效交互的核心因素，在可用性和可导航性中起着至关重要的作用。当所有交互和转换的路径都为用户清晰地构建，但CTA元素没有经过深思熟虑，放置或设计好时，用户可能会感到困惑，并且需要花费额外的努力来实现他们的目标。这设置了转换率低和一般用户体验的高风险。这就是为什么这个导航元素应该吸引特别深刻的设计师注意力。在任何界面中，它应该是最突出和快速引人注目的部分之一，告知用户产品如何对他们有用或有用。

正如我们在文章中提到的关于 UI中的复制内容的提示，一些号召性用语元素可以用不需要使用广泛和即时识别的图像进行复制的图标来表示，例如用于打电话的电话接收器或者打开收到邮件的信封。上面显示的应用程序界面显示了这种情况：带有接收器的按钮是屏幕上最突出的交互元素，导航用户快速实现app的目标，并且不需要副本让用户了解可以执行的操作用它。

但是，当图标的图像不那么明显或可能会产生误导时，使用双重方案更有效，当副本支持图标，按钮或链接时。

上面的示例包含专门用于烹饪海鲜的网络平台的登录页面。页面标题呈现号召性用语，并通过口头和视觉手段立即设置主题。尽管如此，这种行动呼吁并不是互动的。活动的CTA元素是可点击的按钮，通知用户点击后可以看到有关特定主题或配方的更多信息。鲜艳的色彩增强了页面上的视觉层次结构，并吸引用户注意关键的交互区域。

酒吧

Bar是用户界面的一部分，具有可点击的元素，使用户能够快速采取与产品交互的一些核心步骤，或者它还可以通知用户当前的流程阶段。在基本类型的酒吧中，我们可以提到：

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

加载栏 – 控制通知用户当前操作阶段，当进程处于活动阶段时，用户可以通过正在显示的时间或百分比查看流量。

进度条 – 提供有关当前流程结果的反馈，例如，显示已完成的计划活动的数量。

按键

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

现代UI按钮具有很高的多样性，可以满足各种用途。典型且经常使用的按钮，呈现交互式区域，通常清楚地标出可见性并具有特定的几何形状，并且通常由副本支持，解释通过该按钮将实现什么动作。设计师通常会花费大量的时间和精力来创建有效且引人注目的按钮，这些按钮可以和谐地添加到一般的风格概念中，但对比度足以在布局中脱颖而出。

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

汉堡按钮 – 隐藏菜单的按钮：点击或点击它，用户看到菜单扩展。它被称为它的形式由三条水平线组成，看起来像典型的面包 – 肉 – 面包汉堡包。如今，它是一种典型的互动元素，由于利弊的多少，仍然备受争议。

大多数定期访问和使用网站的用户都知道此按钮隐藏了核心类别的数据，因此这个技巧不需要额外的解释和提示。汉堡菜单释放空间，使界面更简约，充满空气，并为其他重要的布局元素提供大量保存空间。这种设计技术还为响应和自适应设计隐藏导航元素并使界面在不同设备上看起来谐波提供了额外的好处。虽然汉堡包菜单仍然属于现代网络和应用程序设计中备受争议的问题，但它们被广泛使用。反对汉堡包菜单的论据是基于这样一个事实，即这个设计元素可能会让那些不经常使用网站的人感到困惑，并且可能会被那些具有高度抽象性的标志误导。

所呈现的网站概念使用汉堡包按钮来隐藏菜单并支持对布局的视觉性能的一般极简主义方法。

加号按钮 – 点击或点按的按钮可以添加新内容，无论是新的联系人，帖子，记事，列表中的位置 – 用户可以做的任何事情都可以作为数字产品的基本操作。有时，点击此按钮，用户将直接转移到创建内容的模式窗口，在其他情况下，还有一个中等阶段，当他们有额外的选项可供选择，并使添加特定数据更集中。

这是一个概念，显示加号按钮首先允许用户选择添加内容的类别（图像，视频，文本），然后才会指向可以完成的特定屏幕。这种做法需要几秒钟，这使得体验更加用户友好，因为设计师可以向用户呈现为每个特定案例添加内容的修改选项。

“共享”按钮 – 用户可以将内容或成就直接分享到社交网络帐户的按钮。在绝大多数情况下，它呈现的图标呈现出特定社交网络的品牌标志并且易于识别。

开关

Switch是一个控件，使用户可以打开或关闭选项。同样，它在现代界面中应用了高效率和普及性，因为它呈现了人们在现实生活中习惯的开关的直接模仿。这里需要考虑的重点是交换机的状态应该明显清晰和独特，以便用户可以避免努力了解选项是否有效。各种对比度和轻微动画可以通过使体验简单和用户友好来解决问题。

这是在Toonie app中打开和关闭闹钟的开关。动画使交互平滑自然，同时更改选项卡的颜色和转换为旋转太阳的切换，让用户立即了解警报是否处于活动状态。如果您想查看有关如何设计和开发此动画元素的完整案例研究，欢迎在此处查看详细信息。

选择器

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

复选框

复选框是一个图形UI元素，用于标记特定内容，通常为二元选项设置选项。它是设置与现实世界的桥梁的另一个元素，因为它看起来非常类似于填写测试，问卷调查和其他此类东西的过程，当您在框中打勾或颜色以标记选项时。复选框和开关可以在任何类型的用户界面中找到，尤其是在用户，屏幕或页面设置的部分中。此外，复选框在应用程序和网站中呈现导航的公共部分，具有任务管理器，待办事项列表，时间跟踪器等功能。

以下是针对复杂任务的移动待办事项应用程序设计概念的示例。点击复选框，用户将任务标记为已完成并自动淡化，副本的颜色不同，字体变得更大胆，以支持此任务与仍在进行中的任务的对比。