it-swarm.com.de

Was ist die häufigste Farbe, um anzuzeigen, dass das Eingabefeld deaktiviert ist?

als ich verschiedene Referenzen zu Eingabefelddesigns durchgesehen habe, wurde mir klar, dass Menschen dazu neigen, mit grauem oder weißem Hintergrund umzudrehen, um anzuzeigen, ob das Eingabefeld aktiviert oder deaktiviert ist.

Weiß jemand, wo ich weitere Informationen dazu finden kann?

22
ec1234

Die korrekte Terminologie lautet Greyout .

Es weist auf eine geringere Bedeutung, Relevanz oder Priorität oder eine Änderung des Status hin, z. B. wenn etwas deaktiviert oder unzugänglich ist.

Definition von Oxford Dictionary :

Nomen

Teilweiser oder beginnender Stromausfall bei einer Person, die starken Beschleunigungskräften ausgesetzt ist, insbesondere während des Fluges; (allgemeiner) vorübergehende Beeinträchtigung des Sehvermögens oder des Bewusstseins oder teilweiser Gedächtnisverlust.

Herkunft

1940er Jahre; früheste Verwendung in The Richmond Times-Dispatch gefunden. Von bis grau nach Stromausfall.

Wir können also ableiten, dass Greyout vor dem Blackout, dem Ende kommt. .

39

Wenn Sie ein Framework verwenden, sollte das Muster standardmäßig definiert sein. Es ist üblich, Grau zu verwenden, wobei häufig sowohl der Hintergrund als auch der Text gedimmt werden.

Auch wenn Sie kein Framework implementieren, können Sie dessen Muster in Ihre Anwendung integrieren.

Bootstrap

Ihr Formularabschnitt zeigt deaktivierte Elemente:

(enter image description here

Material Design

Sie haben ein paar verschiedene Stile von Eingaben , schauen Sie sich also um, was zu Ihrer Anwendung passen könnte. Dies ist der Abschnitt Umrissene Textfelder :

(enter image description here

Und ihre Gefüllte Textfelder:

(enter image description here

26
Mike M

Deaktivierte Eingabefelder sind normalerweise grau (grauer Text und grauer Hintergrund). Sie müssen jedoch mit dem Kontrastverhältnis und anderen Problemen mit der Barrierefreiheit vorsichtig sein, z. B. mit Bildschirmleseprogrammen.

Der Artikel Deaktivierte Schaltflächen müssen nicht saugen! , obwohl es sich um Schaltflächen handelt, enthält einige nette Tipps, die angewendet werden können, um deaktivierte Felder zu verbessern (ich habe sie geändert, um sie auf Felder anzuwenden):

  • Erzielen Sie einen besseren Kontrast, indem Sie größere Schriftarten und/oder dunklere Farben verwenden.
  • Geben Sie unterstützenden Technologien wie Bildschirmleseprogrammen einige Informationen vor Ort, da diese keine Informationen im deaktivierten Feld auslesen (diese werden häufig übersprungen).
  • Geben Sie den Benutzern Informationen, wenn sie auf das deaktivierte Feld tippen, den Mauszeiger bewegen oder darauf klicken. Oder geben Sie ihnen einen anderen Hinweis (z. B. durch einen Tooltip). Sie können ihnen beispielsweise erklären, warum das Feld deaktiviert ist.
8
Aline

Obwohl ich so ziemlich allen anderen zustimmen würde, können Sie einige interessante Dinge nicht nur mit Farbe tun, sondern auch mit Kontrast:

(Enabled

(Disabled

Ein geringerer Kontrast führt dazu, dass Elemente ausgeblendet erscheinen, ähnlich wie dies bei Schwarz auf Weiß der Fall ist. Meiner Meinung nach erscheint das UI-Element dadurch unscharf. Beachten Sie, dass diese Lösung möglicherweise nicht die am besten zugängliche ist, weshalb Sie möglicherweise die Verwendung von Themen in Betracht ziehen müssen.

Darüber hinaus können Sie das Element vollständig ausblenden. Was UX betrifft, kann dies dazu beitragen, die kognitive Belastung Ihrer Benutzer zu verringern und ihnen zu helfen, mit Ihrer App produktiver zu arbeiten. Beachten Sie, dass es bei schlechter Implementierung Nachteile geben kann. Ich habe einige Apps gesehen, bei denen Inhalte zu spät wieder angezeigt werden, und das ist ziemlich beunruhigend.

Weitere Informationen zum zweiten Ansatz finden Sie unter The Motion Guide for Material Design

8
Nicholas Miller

Was ist die häufigste häufigste Farbe?

Ich würde sagen, am häufigsten ist der Standard-Browser-Standard:

Chrome v73

(enter image description here

Firefox v66

(enter image description here

mit dem folgenden HTML:

<!DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" value="normal">
    <input disabled type="text" value="disabled">
  </body>
</html>

Ältere Browser

Dieser Blog-Beitrag zu Styling Disabled Form Fields enthält eine Reihe standardisierter Beispiele für verschiedene ältere Browser.

Barrierefreiheit

Weiß jemand, wo ich weitere Informationen dazu finden kann?

Es lohnt sich jedoch, die Barrierefreiheitsanforderungen der deaktivierten Felder zu berücksichtigen, mit der ersten Frage, ob Sie das Feld überhaupt benötigen.

Dieses Problem mit der Barrierefreiheit von w3c-Githubs enthält eine gute Diskussion über die verschiedenen Aspekte deaktivierter Eingaben und ein gutes Beispiel für das Ersetzen einer deaktivierten Eingabe durch nur Text, sodass Sie den Farbkontrast beibehalten können. Beachten Sie die Tippen Sie auf mindestens 4 weitere, um fortzufahren .

Vor:

(enter image description here

Nach:

(enter image description here

3
icc97

Die Standards sind farb- und randbezogen, nicht hintergrundbezogen. Deaktivierte Elemente werden normalerweise mit ausgegrautem Text gezeichnet. Wenn das Element deaktiviert ist, reagiert es nicht auf Benutzeraktionen und kann nicht fokussiert werden.

Einige Designer/Entwickler verwenden eine geringere Deckkraft für die Hintergründe/den Text, um diesen Status hervorzuheben, da Schaltflächen manchmal Eingaben mit dem Typ = "Senden" sind. Wenn Eingaben im Normalzustand auch einen grauen Hintergrund haben, macht ein grauer Hintergrund im deaktivierten Zustand keinen großen Unterschied, aber eine geringere Deckkraft könnte mehr helfen.

0
Madalina Taina