三个按钮的颜色组合


13

哪种颜色组合最适合以下三个按钮:

在此处输入图片说明

它们都应该保持相同的颜色吗?

这些是我的选择:

在此处输入图片说明

整个页面的图像

在此处输入图片说明


主要与默认以及成功与默认似乎分散了人们的注意力。
Danny Varod

在更大的页面上,我想问一下“清除”按钮的作用。这真的是必要的选择吗?
2015年

Answers:


52

转到按钮应该 更大 ,并拥有所有的对比度最高,因为它是主之一。

清除按钮是可以的,因为它是一个辅助作用,它应该是中立的

对我而言,“ 切换”按钮在大小和结构上都太多了。我将其放置在Origin-Destination下拉菜单之间,在该下拉菜单中“单独”更有意义。

这里有两个对我来说更干净的相似解决方案,并且为特定目的提供了更好的可用性(我个人选择了第一个):

在此处输入图片说明

仅供参考:我使用了Font-Awesom e图标,第一张图片中的图标是(取决于您的版本)icon-exchange / fa-exchange,而箭头是icon- arrow-left / rightfa-arrow-left /对

编辑- 消除混乱基于DA01的注释):

如果“ 清除”按钮仅清除(从/到)这两个字段,则似乎没有必要,因为无论如何,用户都必须单击每个下拉列表并进行选择,并且如果添加“清除”按钮,则该设置不会改变
如果是这种情况,我建议您将其删除,这样您就可以得到一个更干净的界面,并防止用户执行不会为其添加任何值的操作(并且无意中删除了他们选择的内容)。

在此处输入图片说明


↔︎箭头也是我的第一个想法。请参见translate.google.com的工作方式:带有工具提示的↔︎按钮。
200_success 2015年

如果明确确实是次要的,我同意。另一方面,如果它是破坏性的(删除输入的工作),那么我认为确实应该以不同的方式进行处理。
2015年

@ DA01您能否进一步解释您的最后评论?如果它具有破坏性,哪种选择会更好,为什么呢?我真的对您的POV感兴趣。
亚历杭德罗·韦尔特里

@rewobs我通常建议根本不要使用破坏性选项,尽管它们仍然存在于许多系统中。由于它具有破坏性,因此它不应该看起来像按钮,恕我直言,因为按钮可能会被习惯性地单击。人们通常会填写一张表格,然后在假定已提交的情况下点击底部的“最明显”按钮。因此,至少在表单设计中,我通常建议唯一的按钮是“提交”。如果还有其他任务,请使其与主按钮相比在视觉上有所不同且柔和。
2015年

1
@ DA01我的意思是,谢谢您的澄清。另外,我已经阅读了您在问题中的评论,询问是否确实需要清除按钮,而我认为没有必要,因为无论如何,用户将通过从下拉列表中重新选择来替换值,因此添加清除按钮将添加不必要的内容动作“在中间”。
亚历杭德罗·韦尔特里

12

一种解决方案是按优先顺序在视觉上分隔您的按钮。

通常,您会拥有主按钮,辅助按钮,有时还有第三按钮和/或非首选操作按钮。

对于“主要”和“次要”,我通常会在两个对比级别上建议您首选的品牌颜色(纯主观)。初级对比度高,次级对比度低。

我通常会尽量避免使用三级按钮,而是采用完全不同的外观,例如链接。

因此,考虑到您的示例,并尽我所能解释上下文,我建议采取以下措施:

在此处输入图片说明

这只是一个非常简单的示例,您需要确认对比是否符合可访问性准则,并且看上去没有被禁用(我的想法确实如此,因此需要进行调整),但希望它能使您理解这一点。

更新:我刚发布时注意到,这就是StackExchange在创建新帖子时使用的模式。“保存”按钮是主要按钮,“取消”按钮是主要按钮,显示为链接而不是按钮。


1

高对比度(例如黑白)的颜色始终是最好的,这消除了橙色选项。然后,在组合中添加一些营销,就按钮,应用程序而言,页面其余部分使用的颜色方案是什么?但是,如果我必须选择:Go:绿色;开关...:海军蓝;清除:黑色白色。记住颜色也与喜好有关。

(离题:您可以通过在两个字段之间使用图标标记的按钮来消除长标签的切换)


1
欢迎使用UX.stackexchange。您有什么证据表明高对比度始终是最好的?
Mayo 2015年

1
嗯,这可能不是针对任何上下文的最佳解决方案,但是高对比度可提高可读性,因为它可以区分文本和背景。否则会变得模糊。考虑色盲(最常见:绿红色):绿色背景上的红色文本,反之亦然,这是您检测这种色盲形式的方式。

1
以下文章列出了颜色的不同参数:usertesting.com/blog/2014/12/02/color-ux-conversion-rates

有时对比度不够大,清晰度下降。我想我在第一句话中过分关注黑白例子。有时会达到“易读性”,然后“更多”不会提高用户性能。再次。欢迎来到UX
Mayo

1

我要说的是,改变类似颜色阴影的对比度以显示重点。为什么?(每12位男性中有1位是色盲,每200位女性中有1位也是色盲

您还希望引导用户使用系统中的预期路径,因此我将使“转到”按钮变暗。他们可以扫描所有按钮并进行处理,或者它们可以具有较深的颜色或更大的尺寸,将它们吸引到预期的或80%的最常见选择中,这样他们可以首先看到它们,然后说是的,这样可以节省时间。

本文说,应该使最重要的按钮看起来像这样

请参阅下面的示例

在此处输入图片说明

看起来不像下面的图片一样好(我认为)

在此处输入图片说明

那篇文章还提到要合理地安排按钮。因此,我认为我会在右侧放置“开始”按钮,因为会说英语的用户从左到右(所以他们自然会在右边寻找结束标志)。我会把它放在阿拉伯用户的左边。那就是我为英国市场安排的方式。

在此处输入图片说明

该文章中的最后一个主题是“更难找到破坏性的按钮”。 在您的情况下,如果您单击“开始”,而您不小心错过了左侧,那么您可能会更改订单顺序,而有可能更改送货地点而不是破坏行动。如果您觉得破坏性任务必要,也可以确认它(即确定吗?)。


“因为说英语的用户从右到左阅读” -是吗?我们在说相同的英语吗?
BlueRaja-Danny Pflughoeft 2015年

编辑...哎呀
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.