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
interface-design
color
Metuselah
źródło
źródło
Odpowiedzi:
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).
źródło
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.
źródło
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)
źródło
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?).
źródło