三个按钮的颜色组合

平面设计 界面设计 颜色
2021-12-28 20:36:24

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

在此处输入图像描述

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

这些是我的选择:

在此处输入图像描述

整个页面的图像

在此处输入图像描述

4个回答

Go按钮应该 更大 并且具有最高的对比度,因为它是主要按钮。

Clear按钮没问题,因为它是次要操作应该是中性的。

对我来说,Switch按钮在尺寸和对比度上都有太多的存在感。我将它放置在 Origin-Destination 下拉列表之间,“单独”更有意义。

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

在此处输入图像描述

去除杂乱

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

在此处输入图像描述

一种解决方案是按优先级在视觉上分离您的按钮。

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

对于主要和次要,我通常建议您在两个对比度级别中首选品牌颜色(纯粹是主观的)。主要对比度高,次要对比度略低。

我通常会尽量避免使用第三按钮,而是使用完全不同的视觉效果,例如链接。

因此,鉴于您的示例,并尽我所能解释上下文,我建议如下:

在此处输入图像描述

这只是一个非常简单的示例,您需要确认对比度符合可访问性指南并且看起来没有被禁用(我的有点这样做,所以它需要调整),但希望它能够理解这一点。

更新:我刚刚在发布此内容时注意到这是 StackExchange 在创建新帖子时使用的模式。SAVE 按钮是主要的,CANCEL 是第三个并且显示为链接而不是按钮。

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

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

我想说改变类似颜色的对比度以显示重点为什么?每12名男性中就有1名色盲,每200名女性中也有1名色盲

您还希望通过系统引导用户朝着预期的路径前进,所以我会让 Go 按钮变暗。他们可以扫描所有按钮并对其进行处理,或者他们可以使用更深的颜色或更大的尺寸来吸引他们选择预期的或 80% 最常见的选择,这样他们首先会看到那里并说是的,这样可以节省他们的时间。

这篇文章说应该让最重要的按钮看起来像这样

请参阅下面的示例

在此处输入图像描述

看起来不如下图好(在我看来)

在此处输入图像描述

那篇文章还提到要按合理的顺序放置按钮所以在我看来,我会把开始按钮放在右边,因为说英语的用户从左到右(所以他们自然会向右看结束标志)。对于阿拉伯语用户,我会将其放在左侧。这就是我为英国市场安排的方式。

在此处输入图像描述

那篇文章中的最后一个主题是让破坏性按钮更难找到 在您的场景中,如果您单击“开始”并且您不小心错过了左侧,您可能会更改运输位置而不是破坏操作,那么我会以这种方式切换您的订单。如果您认为有必要,您也可以确认破坏性任务(即您确定吗?)。