本文将介绍多用户在 Web 和移动界面中经常遇到的按钮的几种基本分类,并用 UI 例项来具体说明。
按钮是多用户界面中最流行的互动元素之一。更重要的是,它们对于建立可靠的互动和积极的多用户体验至关重要。本文也是 UX 专业领域的文章,下文收集了我们每天在 WordPress 外贸独立站网站建设和移动 App 设计上广泛使用的不同类型按钮的例项。
什么是按钮?
按钮是一个互动元素,它使您能够按照特定的命令从系统获得预期的互动反馈。基本上,按钮是一种控制元件,允许多用户直接与数字产品沟通,并传送必要的命令来实现特定的行动目标。例如,它可能是传送电子邮件、购买产品、下载一些资料或内容,开启播放器以及大量其他可能的操作。按钮如此受欢迎并有良好多用户体验的原因之一是,它们有效地模拟了在现实世界中与物件的互动行为。
现代 UI 按钮非常多样化,可以满足多种用途。一般高频使用的按钮,它表示一个重要互动区域,通常使用特定的几何形状清晰地标记出来,并配有解释其特定操作功能的文字说明。设计师必须投入大量的时间和精力来建立高效并引人注目的按钮,这些按钮自然地融入了具体风格界面中,按钮和界面背景的对比度足以使其在版面中脱颖而出。
下文将具体介绍在移动和 WordPress 外贸独立站网站建设界面中广泛使用的按钮类型。
行动按钮
行动按钮 (CTA) 是多用户界面的互动元素,旨在鼓励多用户采取特定的操作。此操作为特定页面或屏幕 (例如购买、联络、订阅等) 提供切换。换句话说,它把被动多用户变成主动多用户。因此,从技术上讲,它可以是任何类型的带有文字说明的按钮。它与屏幕上所有其他按钮的不同之处在于其吸引人的特性: 它必须吸引注意力并刺激多用户执行所需的操作。
这是一个出售儿童书籍的 WooCommerce 电子商务网站的主页。在有特色幻灯片中,有一个核心操作作为页面的目标: 让多用户订阅邮件内容。因此,行动按钮被设计成版面中最引人注目的元素之一,这样多用户可以在他们愿意的时候立即看到如何执行订阅操作。
文字按钮
它是一个带有文字内容的按钮,并且没有任何形状外框,填充标签或任何类似的背景。所以,在我们对物理世界中这一现象的标准理解中,它看起来不像普通按钮。文字是它唯一的视觉呈现。不过,它仍然是一个实时控制元件,允许多用户与界面互动。您还可以看到这些用颜色或下划线标记的文字按钮。 Web 的导航文字选单在预设情况下都是具体互动性的,此外,在网站标题中,文字按钮将多用户与网站的核心内容部分连线起来。文字按钮通常用于建立辅助互动区域,而不会分散多用户对主要行动按钮的注意力。
这是一个时尚优雅的网店首页设计。如您所见,布局的互动部分基于文字按钮。只有最主要行动按钮被展现为一个容易识别的行动按钮。香料了解更多关于设计的内容,还可以看看《2022 年适合您使用的 19 种流行免费字型(二)》。
下拉按钮
当您单击下拉按钮时,将显示一个多列内容的下拉选单。您经常会在设置按钮中遇到这种类型。当多用户选择列表中的一个选项时,它通常被标记为启用的,例如填充颜色。
医疗保健应用互动流程 (interaction flow) 中,当单击按钮时,它会开启选项的下拉选单。一旦您选择了一个,大的加号按钮就会消失,只留下选中的选项和小的减号按钮,以防您想再次检查列表。