Цветовая комбинация для трех кнопок

Какая цветовая комбинация лучше всего подойдет для этих трех кнопок:

Должны ли они все оставаться одного цвета?

Это мои варианты:

Изображение всей страницы

Кнопка « Перейти» должна быть больше и иметь самый высокий контраст из всех, поскольку она является основной.

Кнопка Очистить в порядке, потому что это вторичное действие и оно должно быть нейтральным .

Для меня кнопка переключения имеет слишком большое присутствие как по размеру, так и по размеру. Я бы поместил его между выпадающими меню «Место-назначение», где это имеет больше смысла «само по себе».

Вот два похожих решения, которые для меня намного чище и лучше подходят для этой конкретной цели (я бы лично выбрал первое ):

Просто для справки: я использовал иконки Font-Awesom e, на первом изображении (в зависимости от вашей версии) - иконка-обмен / фа-обмен, а стрелки - иконка- стрелка влево / вправо и фа-стрелка влево / право

РЕДАКТИРОВАТЬ - Удаление беспорядка ( на основе комментария DA01 ):

Если кнопка « Очистить» очистит только эти два поля (от / до), в этом нет необходимости, поскольку в любом случае пользователям придется нажимать на каждый раскрывающийся список и делать выбор, и это не изменится, если вы добавите кнопку «Очистить» .
Если это так, я рекомендую удалить его, чтобы вы получили более понятный интерфейс и запретили пользователям выполнять действия, которые не добавляют им никакой ценности (и, кроме того, непреднамеренно удаляют то, что они выбрали).

Одним из решений является визуальное разделение кнопки по приоритету.

Обычно у вас есть первичная кнопка (кнопки), вторичная кнопка (кнопки) и иногда третичная кнопка (кнопки) и / или неактивные кнопки действий.

Для Первичного и Вторичного я обычно предлагаю ваш предпочтительный цвет брендинга (чисто субъективный) на двух уровнях контраста. Высокая контрастность для первичной, немного меньше контрастности для вторичной.

Третичные кнопки, которые я обычно стараюсь избегать, вместо этого используют совершенно другое изображение, например ссылку.

Итак, учитывая ваш пример и интерпретируя контекст как пари, я могу предложить что-то вроде этого:

Это просто очень быстрый пример, и вам нужно будет подтвердить, что контраст соответствует рекомендациям по доступности и не выглядит отключенным (что, как мне нравится, так что его нужно настроить), но, надеюсь, это поможет.

ОБНОВЛЕНИЕ: Я только заметил, что, когда я публиковал это, это шаблон, который StackExchange использует при создании нового сообщения. Кнопка СОХРАНИТЬ является первичной, ОТМЕНА является третичной и отображается как ссылка, а не кнопка.

Высококонтрастные (например, черно-белые) цвета всегда являются лучшими, что исключает оранжевый вариант. И затем, добавив немного маркетинга в смесь, какая цветовая схема используется для остальной части вашей страницы с точки зрения кнопок, приложения? Но если бы мне пришлось выбирать: Go: зеленый; Переключатель ...: морской синий; Ясно: черно-белый. Имейте в виду, что цвет также связан с предпочтениями.

(Не по теме: вы можете исключить длинную метку для переключения с помощью кнопки с меткой между двумя полями)

Я бы сказал, измените контраст похожего оттенка, чтобы показать акцент . Почему? ( 1 из 12 мужчин дальтоник и 1 из 200 женщин также дальтоник

Вы также хотите направить пользователей к намеченному пути через систему, чтобы я сделал кнопку Go более темной. Они могут сканировать все кнопки и обрабатывать их, или они могут иметь что-то вроде более темного цвета или большего размера, чтобы привлечь их к предполагаемому или на 80% наиболее распространенному выбору так, как они сначала смотрят туда, и сказать «да», что это экономит их время.

В этой статье говорится, что самая важная кнопка должна выглядеть так

Смотрите их пример ниже

Не выглядит так хорошо, как изображение ниже (по моему мнению)

Эта статья также упоминает, чтобы поместить кнопки в разумном порядке . Так что, на мой взгляд, я бы поставил кнопку «идти» справа, потому что англоязычные пользователи слева направо (поэтому они, естественно, смотрят направо на конечные знаки). Я бы поставил его слева для арабских пользователей. Вот как бы я устроил это для английского рынка.

Последняя тема в этой статье - усложнить поиск деструктивных кнопок. В вашем сценарии я бы поменял ваш заказ таким образом, если вы нажмете на кнопку «идти» и случайно не попадете влево, вы, возможно, измените место доставки, а не уничтожите действие. Также вы можете подтвердить деструктивное задание, если считаете, что оно необходимо (то есть вы уверены?).