界面导航属于用户体验设计的核心问题。这并不令人感到意外：如果你看不清眼前的道路，就很难到达目的地。用户每天被越来越多的网站和应用程序所包围，满足于各种不同的产品并希望直观的导航成为必不可少的功能之一。因此，让我们继续通过新一期的导航术语表来讨论该主题，以了解有关此强大的可用性增强功能的更多信息。之前，我们为你介绍了用于导航的UX术语表的前半部分，涵盖了导航、菜单、按钮、CTA，操作栏、拾取器、开关等的定义和示例。今天让我们把新的添加到列表中：查看关于图标、搜索字段和标签的详细信息。

Icons - 图标

可以将图标定义为具有较高的象征意义上的价值并用于沟通目的的图片。图标以信息丰富的符号呈现，通过单词和句子来支持发件人和收件人之间的数据交换：就像文案是通过字母与字符的形式一样，图标是通过与物理世界的物品相类似的图像来传递信息的。在计算和数字设计中，图标是在web或移动界面中使用的图形化文字或表意文字，以支持其可用性，并提供成功的人机交互流程。

图标最有价值的好处之一是能够有效地替换文本。由于大多数用户倾向于比文字更快地感知和解码图像，因此该功能能够提高可用性并加强导航。然而，即使是最轻微的误解或双重含义也可能成为用户体验不佳的原因，因此，对于图标类型的解决方案应该仔细测试，以达到图标和文字的良好平衡，以满足特定的目标受众。一种有效的变体形式是同时使用文案和图标，以便不同类别的用户都对此满意：这种方法在电子商务网站的各种目录中特别流行，在这些目录中，用文字和图片表示不同的位置，从而为用户提供了快速、清晰导航的双重支持。

Home Budget App

根据其功能，图标可分为：

• 交互性图标：直接参与交互过程的图标。它们是可单击的或可点击的，并且响应用户的请求后执行它们所表示的操作。它们告诉用户关于按钮、控件和其他交互元素的功能或特性。在许多情况下，它们是显而易见的，不需要文字支持。
• 说明性图标：用于解释的图标、解释特定功能或标记内容类别的视觉标记。它们可能不是直接参与交互的布局元素；而且它们通常与支持其含义的文字结合在一起使用。
• 娱乐性和装饰性图标：以美观而非功能性为目的的图标，通常用于呈现季节性和特价商品。它们提供了一种吸引用户注意力和增强数字产品整体风格概念的有效方法。
• 应用图标（App）：在不同平台上展示应用程序的交互式品牌标志，支持数字产品的原始标识。
• favicons：这些图标在浏览器的URL和书签选项卡中用来代表产品或品牌。它们允许用户在浏览时快速与之建立视觉连接。

标签栏交互动画

欢迎阅读更多关于图标类型和功能信息

Search Field - 搜索字段

搜索字段（也称为搜索框或搜索栏）提供了一种界面元素，使用户可以键入关键字并并以此方式查找所需的内容。它是具有大量内容的网站或应用程序的核心导航元素之一，特别是博客、电子商务和新闻网站等。精心设计且易于查找的搜索字段使用户无需浏览众多页面和菜单即可跳转至需要的位置：由于这种方法会节省用户的时间和精力，因此在用户友好的界面中对它的要求很高。

在设计方面，该元素可以以不同的方式呈现，从带边框的选项卡到交互式输入行，甚至是极简的可点击图标。在绝大多数情况下，搜索字段都标有带有放大镜的图标。这个符号可以被各种各样的用户识别，因此它被证明是有效且直观的导航。使用这些图标进行的实验会严重影响版式的交互性和可用性，因此，如果应用了其他符号图像，则应仔细测试它们。下拉菜单提供了可能的选项或自动填充功能，也可以支持交互流程。

Ice网站

另一个重要的问题是搜索图形控件在界面中的位置。在网页设计中，搜索字段通常可以在网站的标题中找到，这是一个很好的选择：正如我们在一篇关于网站标题设计实践的文章中所提到的，对于任何一个网站来说，它都是最高可见性的区域，因此，在那里设置一个搜索字段可以让用户快速跳转到他们真正需要的页面，而无需在网站徘徊和向下滚动。例如，大型电子商务网站经常被有特定目标的用户访问，他们正在寻找一个特定的目标，如果不能快速方便地找到它，那么他们离开的风险很高，从而降低资源的盈利能力。此外，习惯的力量也应该被考虑到：由于许多网站的标题中都包含了搜索，用户习惯于在需要时在那里寻找。

谈到移动界面中的搜索领域，由于设计者的可用空间有限，情况有所不同。如果应用程序基于大量内容，并且搜索是交互的主要元素之一，那么可以在标签栏中找到并轻松访问。如果搜索对于用户目标和应用的可用性不是至关重要的，则可以将其隐藏在菜单中或仅在可能需要的屏幕上显示。

Green spy 应用程序交互演示

Tag - 标签

标签是一个通过使用关键字或短语让用户快速移动到用它标记的项目的交互式元素。标签实际上是元数据，可快速访问特定类别的内容，因此它们支持导航以及其他内容分类方式。此外，与用户无法更改的网站固定的分类名称相比，标签通常是用户自己创建的元素。

Design4Users屏幕截图

标签在基于用户生成内容的平台上被广泛使用：当你把照片上传到iStock上，在社交网络上发布或者在博客上写文章时，你可以用特定的关键词来标记你的内容，然后这些关键词将所有标记了标签的内容整合起来。上面的屏幕截图显示了Design4Users博客主页的一部分，它积极使用标签云来增强对博客内容的导航。在交互方面，单击标签会将用户带到收集该标签标记的所有内容的网页上，此外，标签是搜索引擎优化友好的技术，增加了通过搜索引擎找到内容的机会。

Unsplash屏幕截图

再举一个例子，这是著名的免费图片平台Unsplash提供的标签。当用户下载照片时，系统会提示他们键入自己的标签（也称为关键字），以最佳方式描述该照片，以帮助其他用户找到它。正如我们所见，用于添加标签的输入字段也支持向用户提供更好的可用性提示。因此，标签显示了用户生成的导航元素，使界面更接近其目标受众并且更加清晰。

规划导航是一项艰苦的工作，需要从应用程序或网站设计的最早期阶段起就对心理学和交互模式、用户测试以及信息架构方法有深入的了解。但是，它是成为积极的用户体验的坚实基础，可以解决用户的问题并激励他们一次又一次地回到产品中。

---

作者：Tubik Studio
原文：https://uxplanet.org/ux-design-glossary-interface-navigation-elements-set-2-6dad641315dd