按钮设计的7条基本规则

来源:设酷网     作者:日期:2020-08-28     浏览:106    评论:0    
  
核心提示:按钮是一种交互式元素,可导致对其进行描述的操作。你可以知道,如果按钮上显示“保存”,单击它很可能会“保存”某些内容。它也是任何数字产品中最重要的交互元素之一。 它可能导致购买,下载,发送和许多其他重要操作。数字按钮也是现实世界中按钮的后代,例如电视遥

按钮是一种交互式元素,可导致对其进行描述的操作。你可以知道,如果按钮上显示“保存”,单击它很可能会“保存”某些内容。它也是任何数字产品中最重要的交互元素之一。

它可能导致购买,下载,发送和许多其他重要操作。数字按钮也是现实世界中按钮的后代,例如电视遥控器,电唱机或游戏控制器中的按钮

1.使按钮看起来像按钮

用户界面进行交互时,用户需要立即知道什么是“可点击的”和什么是“不可点击的”。设计中的每个项目都需要用户得到用户的理解。一般情况下,用户学习成本过高的UI,他们的可用性就越差。

但是用户如何理解某个元素是否是可操作的?用户会根据使以往的经验和视觉符号来进行判断。这就是为什么使用适当的视觉符号(例如大小,形状,颜色,阴影等)使我们设计的按钮看起来像一个按钮如此重要的原因。视觉能传达有必要的信息价值,他们也帮助我们创造可用性较高的界面作为参考。

但是,在许多接口中,操作性的指示性很弱并且需要交互作用。结果,它们有效地降低了可发现性。

如果缺少清晰的交互功能,并且用户在“可点击”和“不可点击”之间挣扎,那么设计的出色程度将无关紧要。如果他们发现它很难使用,他们会发现它令人沮丧并且最终不是很有用。

对于移动用户而言,指示符不足是一个更为严重的问题。为了了解单个元素是否是交互式的,桌面用户可以在元素上移动光标并检查光标是否更改了其状态。移动用户没有这样的机会。要了解某个元素是否是交互式的,用户是否必须点击它-没有其他方法可以检查交互性。

不要以为用户界面中的东西对您的用户是显而易见的


在许多情况下,设计人员有意不将按钮标识为交互元素,因为他们认为交互元素对用户是显而易见的。在设计接口时,应始终牢记以下规则:


您解释可点击性指示符的能力与用户的理解力不同,因为您知道自己设计中的每个元素打算做什么。



使用熟悉的按钮设计

我们习惯了通常与动作相关的某些形状和形式。我们的按钮看起来越类似于与按钮相关联的按钮-越好。这就是为什么矩形(或圆角矩形)始终是按钮最安全的选择的原因。


以下是大多数用户熟悉的一些按钮示例:


在这些示例中,“带阴影的填充按钮”在视觉上看来是对于用户来说最清晰的。当用户看到按钮的阴影时,就可以判断可以按下物体。


用户一般不易识别其他形状和形式(三角形,圆形,其他不规则形状等)。所以我们要谨慎行事,考虑清楚什么时候才可以应用这种样式按钮,例如在产品的总体风格要求偏离规范时才使用它们。


可能需要更长的时间才能被识别为可操作的元素




重要按钮也可以与图标配合使用。结帐可以通过购物篮或购物车图标快速识别,但前提是还必须显示“结帐”一词。

在按钮标签之后放置向右箭头或V形符号,可以使所得消息更强。用户更被迫单击并“继续”。如果您想加强点击率,则效果很好。

扁平化按钮相比,带有阴影的按钮也更“可点击”,并且注意到得更快。在按钮中添加一个微妙的阴影,使它从背景中脱颖而出。

不要忘记留白和位置

不仅按钮本身的视觉属性很重要。按钮附近的空白量使用户更容易(或更难)理解它是否是交互式元素。在此示例中,下面的某些用户可能会将按钮与信息框混淆。

作为用户,无法分辨它是插图还是按钮


2.将按钮放在用户期望找到它们的位置

按钮应位于用户可以轻松找到或期望看到的位置。不要让用户搜寻按钮。如果用户找不到按钮,他们可能会不知道该按钮存在,不耐烦的用户甚至会直接切出你的产品哦。

尽可能使用传统布局和标准UI模式

常规的按钮放置可提高用户的发现性。使用标准布局,用户可以轻松理解每个按钮的用途,即使它是没有强符号的按钮。将标准的布局、干净的视觉设计和充足的空白相结合,可使布局更易于理解。

所以不要和用户玩捉迷藏游戏哦~

小TIPs:测试设计的可发现性。当用户首次导航到包含您希望他们执行的某些操作的页面时,应该很容易为用户找到合适的按钮。


3.在按钮上标注其功能

具有通用标签或误导性标签的按钮可能会使用户感到沮丧。写下按钮标签,清楚地说明每个按钮的功能。理想情况下,按钮的标签应清楚地描述其动作。

用户应该清楚地了解单击按钮时会发生什么。

让我来举一个简单的例子。想象一下,如果你不小心触发了删除操作,现在你看到以下错误消息。


目前尚不清楚“确定”和“取消”在此对话框中代表什么。大多数用户会问自己“当我单击“取消”时会发生什么?”

永远不要设计仅由“确定”和“取消”两个按钮组成的对话框或表单。

与其使用“确定”标签,不如使用“删除”。这将使该按钮对用户的作用变得清晰。另外,如果“删除”操作有潜在危险,您可以使用调整对比调整颜色来说明这件事情。


“删除”可清楚说明按钮对用户的作用。


4.适宜的大小

按钮大小应反映此元素在屏幕上的优先级。大按钮表示更重要的动作。

优先按钮

使最重要的按钮看起来像是最重要的按钮。始终尝试使主要操作按钮更加突出。增大其大小(通过增大按钮的大小,使其对用户而言显得更为重要),并使用对比色吸引用户的注意力


图片来源于dropbox官网


使按钮对移动用户友好

在许多移动应用中,按钮太小。这通常会导致用户输入错误的情况。

左:适当大小的按钮       右:按钮太小



麻省理工学院触摸实验室的研究发现,指垫的平均值在10-14mm之间,指尖的平均值在8-10mm之间。这使得10mm x 10mm成为最小的触摸目标尺寸。

网页和移动按钮都应具有正确的最小尺寸。如果您的按钮太小,将很难点击或单击它们。这会导致沮丧,并可能导致用户卸载您的应用程序。最好的方法是从移动设备上所有交互元素的44 x 44点开始。




5.注意顺序

按钮的顺序应反映用户与系统之间对话的性质。问问自己,用户期望在此屏幕上拥有什么顺序并进行相应的设计。

用户界面是与用户的对话

例如,如何在分页中对“上一个/下一个”按钮进行排序?逻辑上,使您向前移动的按钮应位于右侧,而使您向后移动的按钮应位于左侧。

6.避免使用太多按钮

这是许多应用程序和网站的常见问题。当您提供太多选项时,您的用户最终无能为力。在您的应用或网站中设计页面时,请考虑您要用户采取的最重要的操作。

7.提供互动的视觉或听觉反馈

当用户单击或点击按钮时,他们期望用户界面将响应并提供适当的反馈。根据操作类型,这可能是视觉或音频反馈。当用户没有任何反馈时,他们可能会认为系统未收到其命令,因此将重复执行该操作。这种行为通常会导致多个不必要的操作。

为什么会这样呢?作为人类,我们在与物体互动后会期望得到一些反馈。它可能是视觉,听觉或触觉反馈,任何承认交互已被注册的事实。

用户界面提供印刷机已注册的视觉反馈。


对于某些操作,例如下载,不仅值得确认用户输入,而且还需要显示进程的当前状态。

此按钮转换为进度指示器,以演示操作的当前状态


最后

当你开始构建主按钮,辅助按钮和三级按钮时,请记住每次都要针对几个因素进行检查。即使是很小的不一致或对齐不良也会导致转换率降低。有了按钮转换率和点击率就很重要。按钮的UX设计也应始终围绕识别性和辨识度。希望这几条小tips能给你带来新的思考哦~


本文来源:按钮设计的7条基本规则    http://www.sjschina.com/archives/20915.html
相关评论