Комбінація кольорів для трьох кнопок

Яке поєднання кольорів найкраще підійде для цих трьох кнопок:

Чи всі вони повинні залишатися одного кольору?

Це мої варіанти:

Зображення всієї сторінки

Кнопка " Go" повинна бути більшою і мати найвищий контраст з усіх, оскільки вона є основною.

Кнопка « Очистити » нормально, оскільки це вторинна дія, і вона повинна бути нейтральною .

Для мене кнопка Switch занадто велика присутність як в розмірі, так і в обмеженості. Я розміщую його між спадною адресою Origin-Destination, де це має більше сенсу "само собою".

Ось два подібних рішення, які для мене набагато чистіші та пропонують кращу зручність використання для цієї конкретної мети (я особисто обрав би перше ):

Тільки FYI: я використовував Font-Awesom e іконки, перший на першому зображенні - це (залежно від вашої версії) обмін іконками / обмінями значків, а стрілки - значок- стрілка-вліво / вправо та фа-стрілка-вліво / правильно

EDIT - Видалення безладу ( на основі коментаря DA01 ):

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

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

Зазвичай у вас є основні кнопки, вторинні кнопки, а іноді і третинні кнопки та / або непопулярні кнопки дій.

Для первинного та вторинного, я зазвичай пропоную ваш бажаний колір бренду (суто суб'єктивний) у двох рівнях контрасту. Високий контраст для первинного, трохи менший контраст для вторинного.

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

Отже, враховуючи ваш приклад і інтерпретуючи контекст як я можу зробити ставку, я б запропонував щось подібне:

Це просто дуже швидкий приклад, і вам потрібно буде підтвердити, що контраст відповідає вказівкам щодо доступності і не виглядає вимкненим (що моє своєрідне, тому воно потребує налаштування), але, сподіваємось, він отримає крапку впоперек.

ОНОВЛЕННЯ: Я щойно помічав, коли я публікував це, що це шаблон, який StackExchange використовує при створенні нової публікації. Кнопка Зберегти є первинною, CANCEL - третинною і відображається як посилання, а не як кнопка.

Висококонтрастні (наприклад, чорно-білі) кольори завжди найкращі, що виключає помаранчевий варіант. А потім, додавши трохи маркетингу до суміші, яка кольорова схема використовується для решти вашої сторінки з точки зору кнопок, додатків? Але якби мені довелося вибирати: Go: green; Перемикач ...: морський синій; Ясна: чорно-біла. Майте на увазі, колір також пов'язаний з уподобанням.

(Поза темою: ви можете усунути довгу мітку для перемикання кнопкою, позначеною значком між двома полями)

Я б сказав, змінити контраст подібного відтінку кольору, щоб показати акценти . Чому? ( 1 на 12 чоловіків є кольоровими, а 1 на 200 жінок - також кольоровими

Ви також хочете направляти користувачів на передбачуваний шлях через систему, щоб я зробив кнопку Go (темніше) темнішою. Вони можуть сканувати всі кнопки та обробляти їх, або вони можуть мати щось на кшталт темнішого кольору або більшого розміру, привернути їх до наміченого або на 80% найпоширенішого вибору, як вони виглядають там спочатку, і сказати, так, це економить їх час.

У цій статті сказано, що найважливіша кнопка повинна виглядати так

Дивіться їх приклад нижче

Не виглядає так добре, як на зображенні нижче (на мою думку)

У цій статті також згадується Розмістити кнопки в розумному порядку . Отже, на мою думку, я поставив би кнопку "Go" праворуч, тому що користувачі, які говорять англійською, зліва направо (тому вони, природно, дивляться праворуч на закінчення знаків). Я б поставив це зліва для арабських користувачів. Ось як я би влаштував це для англійського ринку.

Остання тема в цій статті - Складніше знайти руйнівні кнопки У вашому сценарії я переключив би ваше замовлення таким чином, якщо ваш натискання на кнопку "Перехід" і ви випадково пропустите ліворуч, ви могли б змінити місце доставки, а не знищити дію. Також ви можете підтвердити руйнівну задачу, якщо вважаєте її необхідною (тобто ви впевнені?).