Kombinacja kolorów dla trzech przycisków

Jaka kombinacja kolorów najlepiej pasowałaby do tych trzech przycisków:

Czy wszystkie powinny pozostać tego samego koloru?

Oto moje opcje:

Obraz całej strony

Przycisk Go powinien być większy i mieć najwyższy kontrast ze wszystkich, ponieważ jest to podstawowy.

Przycisk Wyczyść jest w porządku, ponieważ jest to działanie wtórne i powinien być neutralny .

Dla mnie przycisk Switch ma zbyt dużą obecność zarówno pod względem wielkości, jak i kontrastu. Umieściłbym go między listami początkowymi i docelowymi, gdzie ma to większy sens „sam w sobie”.

Oto dwa podobne rozwiązania, które są dla mnie znacznie czystsze i oferują lepszą użyteczność do tego konkretnego celu (osobiście wybrałbym pierwszy ):

Po prostu FYI: Użyłem ikon Font-Awesom e, jedna na pierwszym obrazku to (w zależności od wersji) wymiana ikon / fa-wymiana, a strzałki to ikona- strzałka-lewo / prawo i fa-strzałka-lewo / dobrze

EDYCJA - Usuwanie bałaganu ( na podstawie komentarza DA01 ):

Jeśli przycisk Wyczyść wyczyści tylko te dwa pola (od / do), nie wydaje się to konieczne, ponieważ w każdym razie użytkownicy będą musieli kliknąć każdą listę rozwijaną i dokonać wyboru, a to się nie zmieni, jeśli dodasz przycisk Wyczyść .
W takim przypadku zalecam jego usunięcie, aby uzyskać czystszy interfejs i uniemożliwić użytkownikom wykonanie akcji, która nie doda im żadnej wartości (a ponadto niechcący usunie to, co wybrali).

Jednym z rozwiązań jest wizualne oddzielenie przycisku według priorytetu.

Zazwyczaj masz przyciski główne, przyciski dodatkowe, a czasem przyciski trzeciorzędne i / lub przyciski akcji, które nie są preferowane.

W przypadku Primary i Secondary zwykle sugeruję preferowany kolor brandingu (czysto subiektywny) na dwóch poziomach kontrastu. Wysoki kontrast dla pierwotnego, nieco mniejszy dla wtórnego.

Przyciski trzeciorzędne zwykle staram się unikać, a zamiast tego używam zupełnie innej grafiki, na przykład linku.

Biorąc pod uwagę twój przykład i interpretując kontekst, jak mogę, proponuję coś takiego:

To tylko bardzo szybki przykład i trzeba by potwierdzić, że kontrast spełnia wytyczne dotyczące dostępności i nie wygląda na wyłączony (co jest moje, więc trzeba go ulepszyć), ale mam nadzieję, że osiągnie cel.

AKTUALIZACJA: Właśnie zauważyłem, kiedy to publikowałem, że jest to wzorzec stosowany przez StackExchange podczas tworzenia nowego postu. Przycisk ZAPISZ jest główny, ANULUJ jest trzeciorzędny i wyświetlany jako łącze, a nie przycisk.

Kontrastujące (np. Czarno-białe) kolory są zawsze najlepsze, co eliminuje opcję pomarańczową. A następnie, dodając odrobinę marketingu do miksu, jaki jest schemat kolorów używany na pozostałej stronie pod względem przycisków, aplikacji? Ale gdybym musiał wybrać: Idź: zielony; Switch ...: morski niebieski; Przezroczysty: czarno-biały. Pamiętaj, że kolor jest również związany z preferencjami.

(Poza tematem: można wyeliminować długą etykietę przełączania za pomocą przycisku oznaczonego ikoną między dwoma polami)

Powiedziałbym, że należy zmienić kontrast podobnego odcienia koloru, aby podkreślić . Dlaczego? ( 1 na 12 mężczyzn jest daltonistą, a 1 na 200 kobiet jest daltonistą)

Chcesz również poprowadzić użytkowników w kierunku zamierzonej ścieżki przez system, aby przyciemnić przycisk Go. Mogliby zeskanować wszystkie przyciski i przetworzyć je lub mogliby mieć coś w rodzaju ciemniejszego koloru lub większego rozmiaru, aby przyciągnąć ich do zamierzonego lub 80% najczęstszego wyboru w taki sposób, aby najpierw tam spojrzeć i powiedzieć tak, to oszczędza im czas.

W tym artykule jest napisane, że najważniejszy przycisk powinien wyglądać tak

Zobacz ich przykład poniżej

Nie wygląda tak dobrze, jak obraz poniżej (Moim zdaniem)

W tym artykule wspomniano również o umieszczeniu przycisków w rozsądnej kolejności . Tak więc, moim zdaniem, umieściłbym przycisk Go po prawej stronie, ponieważ anglojęzyczni użytkownicy od lewej do prawej (więc naturalnie patrzą w prawo po znaki kończące). Chciałbym umieścić go po lewej stronie dla użytkowników arabskich. Tak zorganizowałbym to na rynek angielski.

Ostatnim tematem w tym artykule jest utrudnienie znalezienia destrukcyjnych przycisków. W twoim scenariuszu zmieniłbym twoje zamówienie w ten sposób, gdybyś kliknął „go” i przypadkowo spudłował w lewo, prawdopodobnie zmieniłbyś lokalizację wysyłki, zamiast zniszczyć akcję. Możesz także potwierdzić destrukcyjne zadanie, jeśli uważasz, że jest ono konieczne (tzn. Czy jesteś pewien?).