网页设计可用性的 7 个有用元素，小细节也至关重要

让我们考虑一下网页用户体验的细节，这些细节可能看起来不是主要的，但对网站可用性有很大影响。

小细节至关重要。在设计中，它的工作方式与项目的主题和类型无关：那些注重细节的人创建用户界面，帮助用户解决他们的问题并帮助企业实现他们的目标。我们今天的文章继续设计用户友好界面的主题：让我们讨论看似不重要但极大影响网站可用性的细节。

下面，我们将介绍以下网页设计元素：

• 视觉分隔线
• 方向提示
• 面包屑
• 内部搜索
• 图标
• 用户界面动画
• 上下文工具提示

1、视觉分隔线

视觉分隔线是一个布局元素，有助于将内容片段分成清晰的组、部分、选项或部分。视觉分隔符有助于根据典型的视觉感知模式组织页面，并使布局对用户来说更加简单易懂。

与页面上的其他元素一起，分隔线有助于建立坚实的视觉层次结构：使用它们，用户可以更轻松地定义内容的关系，例如内容片段是否相同、相似或相关；分隔线对于可用性至关重要：在许多情况下，它们创建看起来可点击或可点击的视觉容器。

说到隔断，我们可以从两个方面来分析：外观和功能。至于视觉部分，有五种基本的广泛使用的用户界面内容划分方法：

• 线
• 颜色
• 负空间
• 阴影/体积
• 图片

视觉分隔线的功能类型取决于它们所处的层次结构级别：

• 全出血分隔线是分隔各部分并跨越屏幕布局整个长度的分隔线
• 插入分隔符分隔相关内容的项目，由与应用栏标题对齐或调整为页面上特定类型文本内容的元素锚定
• 中间分隔线通常放置在布局中间的某个位置，例如，用于分隔相关内容，例如收据上的价格。

2、面包屑

面包屑呈现主要用于网页设计并支持用户浏览网站的导航元素。面包屑让用户知道他们在网站上的位置，并更容易习惯网站结构，因此面包屑是一种更好的寻路工具。然而，它们并没有取代主导航菜单；而是取代了主导航菜单。它们提供二级导航，并在网站包含许多页面时提高网站的可用性。

面包屑作为导航元素的好处如下：

• 增加可查找性：网站架构越复杂，内容越多，组织得越好，就越容易被快速找到。面包屑为用户提供了内容的另一个接触点，有助于更轻松地理解网站的结构
• 所需的点击次数更少：使用面包屑，网站访问者可以毫不费力地从层次结构的一个级别跳转到任何先前的步骤，也无需一路返回，这意味着只需更少的点击和转换即可到达他们想要的页面
• 有效利用屏幕空间：精心设计，面包屑采用一条狭窄的水平线，其中包含不需要太多空间的普通文本元素，因此用户可以进行导航，但设计人员无需超载页面
• 没有误解：面包屑呈现了一个几乎不会被用户误解的元素：多年来，他们的行为模式已经固化，人们很少会将此元素误认为是其他元素
• 较低的跳出率：面包屑对于首次访问者或没有日常处理复杂网站经验的人来说是一个很大的支持，因此他们感觉越自信，他们跳出页面的机会就越小。

3、方向提示

方向提示是用户界面中提供特定交互或内容的视觉提示以使用户更快、更轻松地看到的任何元素。与现实世界中的路标和路标一样，它们还可以引导网站访问者找到关键元素、文本行和号召性用语元素，从而加快转化速度并更快地解决用户的问题。

在大多数情况下，您只有几秒钟的时间来说服用户与您的产品进行交互，清楚地表明核心内容和交互区域立即可见可能对决策至关重要。

方向提示：

• 增强页面或屏幕可扫描性
• 强化视觉层次
• 改善导航
• 提高转化率。

流行的方向提示类型包括：

• 箭头
• 指针
• 凝视方向
• 视觉提示
• 以下内容的部分内容

4、内部搜索

内部搜索是浏览网站或应用程序内的内容并根据用户的搜索查询将其显示给用户的功能。如果调整正确，它会显示相关内容并提供满足用户需求的快捷方式。因此，内部搜索节省了用户的时间和精力，增强了数字产品的可用性和需求性，支持用户保留，并提高了转化率。这互动元素在用户界面中负责内部搜索的是 搜索字段。搜索字段也称为搜索框或搜索栏，它提供界面元素，使用户能够键入搜索查询，从而找到所需的内容。

无论您认为界面导航有多好，如果您的网站或应用程序由 50 多个页面组成，那么您就该考虑应用内部搜索了。精心设计且易于找到的搜索字段使用户无需浏览众多页面和菜单即可跳转到必要的点。这种做法是一种典型的用户行为模式，尤其是在电子商务平台，因为它尊重用户的时间和精力。

但是，在设计搜索可用性时，请不要犯错误：不要将用户界面中的搜索优先于导航。认为搜索是最好的、唯一值得设计师关注的交互元素是行不通的。尽管许多用户尝试通过搜索来接近他们的目标，但其他用户可能会遇到搜索交互问题。例如，他们对语言的了解不足以形成正确的查询，他们不方便输入某些内容，或者他们只是讨厌思考文本问题，因此他们更愿意遵循现有的导航和提示而不是通过搜索与系统进行通信的认知负荷。想一想并努力在导航和搜索之间取得良好的平衡。

使搜索交互清晰直观有不同的细微差别，但以下三个功能是内部搜索功能需要考虑的核心点：

• 它应该立即可见
• 作为搜索功能应该很清楚
• 它应该显示相关内容

5、图标

图标是具有高象征价值的简单图像，可以增强沟通。图标呈现信息性符号，并支持告密者和收件人之间以及单词和句子之间的数据交换：虽然副本包含字母或字符，但图标通过显示与物理世界对象的图形相似性的图像进行交流。在计算和数字设计中，图标是网络或移动界面中使用的象形图或表意文字，以支持其可用性并提供成功的人机交互流程。

不同类型的图标可以为用户提供帮助并提高网络可用性，例如：

• favicon：也称为 URL 图标或书签图标，favicon 是一种特殊类型的符号，在浏览器的 URL 行以及书签选项卡中代表产品或品牌。它允许用户在浏览时获得快速的视觉联系。事实证明，该界面元素对于富有成效的网站推广非常有效，并且其视觉识别具有良好的可识别性。
• 交互图标：此类图标直接参与交互过程，是导航的核心支持者。它们是可点击或可点击的，并通过执行它们所代表的操作来响应用户的请求。他们的主要目标是告知用户按钮、控件和其他交互元素背后的功能或特性。
• 解释性或澄清性图标：这些是解释特定功能和优点或标记不同内容类别的视觉标记。在某些情况下，它们不是直接交互的布局元素；此外，您经常可以找到它们与它们所支持的含义的文本片段的组合。

6、用户界面动画

网页界面动画呈现出交互过程中涉及的不同类型的运动，并支持网页的导航和可用性。其中，可能对使网站变得更加可用和清晰产生重大影响的有：

• 加载动画：它让用户立即了解该过程正在进行，有时甚至显示该过程处于哪个阶段
• 悬停动画：默认情况下预期的网页动画基本类型之一。当网站访问者将鼠标悬停在网页布局元素上（将光标移动到特定元素上但不单击它）时，就会使用它，并且它会通过动作进行响应，让用户知道它是可单击的。因此，这种网页动画类型是支持轻松导航并快速告知网站访问者特定元素的交互性的方法之一。
• 强调动画：这种运动满足吸引访问者注意特定布局细节的目标，例如关键字或短语、信息块、方向提示、品牌标志或交互元素，例如纽扣、菜单、卡片等
• 交互动画：交互动画可以为用户提供对其动作的即时反馈；它可以通过可视化不同的选项、增强网络产品的信息量等来支持搜索或选择过程。

7、上下文工具提示

上下文工具提示是上下文消息，可提供有关特定功能、操作或选项的附加信息，并改善整体用户体验。它们是在尝试界面功能的过程中支持用户的一种好方法：工具提示出现在网页探索过程中，一个又一个功能，在一次性可关闭的模式窗口中，解释如何使用一个功能。特定功能或突出特定优势。上下文工具提示是有效的流行步骤之一用户引导。