it-swarm.com.de

Welche Farbe soll ich als "Gefahr" wählen, wenn die Hauptfarbe meiner App rot ist?

Ich habe diese Frage schon seit einiger Zeit um meinen Kopf gewickelt. Die Sache ist, dass meine Hauptanwendung ein rotes Farbthema hat. Und zum Abbrechen von Schaltflächen habe ich früher nur graue Farben verwendet, aber jetzt, wo ich eine "Gefahren" -Farbe benötige ... Was soll ich verwenden? Lila? Orange? Das Rot wieder zu benutzen ist umständlich, vielleicht ein dunkleres Rot?

PD: Ich kann kein Blau verwenden, weil es die Farbe unserer Konkurrenten ist.

(enter image description here

56
caravana_942

Ich denke, du musst herumspielen. Wenn Ihre Bildschirme rot sind und Sie eine Warnung oder Gefahr verwenden möchten. Ich habe folgende Vorschläge:

1- Sie können weiterhin Rot verwenden, jedoch in unterschiedlichem Maße , um zwischen der App-Farbe und Ihrer Gefahrenaktion zu unterscheiden.

2- Sie können ein reinweißes Popup verwenden und rote Symbole , Ausrufezeichen oder Zeichen in diesem Popup anwenden.

3- Ein weiterer Vorschlag ist, schwarze Farbe und weiße Zeichen über dem schwarzen Popup zu verwenden. Dies kann eine Änderung sein.

Wenn Sie uns einen Bildschirm Ihres roten Systems zur Verfügung stellen können, kann ich Ihnen eine einfache Lösung geben.

(enter image description here

101
Khalil Hanna

Anstatt sich nur auf die Farbe der Schaltfläche zu konzentrieren, ist es besser, sich auf das gesamte Erlebnis für diese bestimmte Aufgabe zu konzentrieren. Sie benötigen nicht unbedingt eine separate Gefahrenfarbe für eine Löschtaste. Sie können Ihren roten Standardknopf verwenden, ihn jedoch mit anderen Gefahrenmeldungen unterstützen. So was:

(enter image description here

Wenn Ihr Benutzer etwas Gefährliches tun möchte, ist es besser, eine Warnung und eine Nachricht zu verwenden, um die Gefahr hervorzuheben, als sich nur auf die Tastenfarbe zu verlassen.

Es ist auch erwähnenswert, dass eine rote App nichts Gefährliches oder Unheimliches an sich hat. Ich habe eine Weile für Coca-Cola entworfen und ihre Hauptfarbe ist rot. Sie sind ein sehr gutes Beispiel dafür, wie Sie Websites und Apps mit rotem Branding versehen können, wenn Sie nach einem suchen. Sie verwenden hauptsächlich Schwarz, Grau und Weiß als Akzentfarben.

52
Michael

Eine absolut wichtige Sache, die Sie hier beachten sollten:

Verlassen Sie sich nicht nur auf Farbe, um Bedeutung zu vermitteln.

Farben sind praktisch, um eine visuelle Nachricht zu übermitteln. Bei solchen UX-Entscheidungen müssen Sie jedoch die Barrierefreiheit berücksichtigen. Wenn Ihr Benutzer irgendeine Form von Farbenblindheit oder anderer Sehbehinderung hat, benötigen Sie eine andere Art von Indikator (Symbole oder Formulierungen), um die Bedeutung zu vermitteln. Die Tatsache, dass die Schaltfläche den Titel Delete trägt, ist großartig. Wenn Sie jedoch befürchten, dass es sich um "systemkritische" Informationen handelt, muss dies weit über die bloße Verwendung von Farbe als Indikator hinaus vermittelt werden.

Dieser Artikel behandelt die Verwendung von Farbe im Hinblick auf die Zugänglichkeit und enthält einen speziellen Absatz dazu:

"... stellen Sie die Zugänglichkeit sicher, indem Sie sicherstellen, dass Sie sich nicht auf Farben verlassen, um wichtige Systeminformationen weiterzuleiten. Verwenden Sie daher beispielsweise Fehlerzustände, Erfolgszustände oder Systemwarnungen, um Nachrichten oder Symbole zu integrieren, die deutlich machen, was los ist auf."

Berücksichtigen Sie außerdem, dass Rot die Schlüsselfarbe Ihrer App ist: Stellen Sie sicher, dass Sie einen Kontrast von mindestens 4.5:1 Verwenden, um mindestens WCAG 2 Level AA einzuhalten. Dies ist ein sehr nützliches Tool, um Folgendes zu überprüfen: https://webaim.org/resources/contrastchecker/

35
indextwo

Mit zunehmender Anzahl realisierbarer Optionen kann es schwieriger werden, eine endgültige Entscheidung zu treffen. Sobald Sie es auf einige eingegrenzt haben, können Sie in Betracht ziehen, Benutzern die Auswahl des von ihnen bevorzugten Schemas zu ermöglichen .

Einige zu berücksichtigende Farbschemata:

  • Rot = Gefahr = Ihre App ist gefährlich. Ändere die Hauptfarbe deiner App.

  • Blau = Farbe des Mitbewerbers. Konkurrent = gefährlich. Verwenden Sie Blau als Gefahr. Während ein helleres Blau möglicherweise für eine positive Warnung (z. B. Erfolg) gehalten wird, kann ein dunkles Blau dies nicht tun.

  • Verwenden Sie Schwarzweiß. Die Beispiele in Khalil Hannas Antwort sind auffällig. Das Problem ist, dass Schwarz/Weiß möglicherweise mit normalem Text verwechselt wird. Schwarz + Orange/Gelb haben möglicherweise nicht das gleiche Problem.

  • Verwenden Sie Standardfarben , unabhängig von der Hauptfarbe Ihres Themas. Grün = Erfolg. Gelb/Orange = Vorsicht. Rot = Gefahr/Warnung. Usw.

    Wie Aline weist darauf hin , rät der Google Material Design Color Usage jedoch: "Da Rot eine Markenfarbe ist, auch nicht Verwenden Sie diese Option, um einen Fehlerstatus anzuzeigen. Wählen Sie alternative Warnfarben aus, die keine Markenfarbe verwenden. " Ihr Beispiel verwendet Orange. Aber auch Lila scheint eine praktikable Option zu sein.

    (Material Design Example

10
習約塔

Die "Gefahrenfarbe" sollte sich vom Farbschema Ihrer App abheben. Es ist auch gut, über die Bedeutung nachzudenken. Rot/Orange/Gelb zeigt in den meisten Kulturen Gefahr, Alarm und Aufmerksamkeit an. Wenn ich eine blaue oder grüne Nachricht sehe, denke ich normalerweise automatisch, dass es sich um ein Erfolgsfeedback handelt. Ich denke, Sie sollten Orange oder Gelb verwenden, um sich von den Hauptfarben abzuheben.

In Google Material Design verwenden sie Orange mit roten Themen: https://material.io/design/color/color-usage.html#meaning

5
Aline

Das erste Farbschema, das in den Sinn kommt, um auf eine Gefahr hinzuweisen, ist eine Kombination aus Gelb und Schwarz, insbesondere wenn das Schwarz diagonale Streifen aufweist. Ich würde vermuten, dass der Zusammenhang mit der Gefahr von Bienen in der Natur herrührt.

Wenn Sie einfach yellow black sign In Google eingeben, werden viele Anzeichen angezeigt, die auf eine Gefahr hinweisen. Singt über Gift, über die Gefahr des Herunterfallens, das Band, das an Tatorten verwendet wird usw.

Ich habe persönlich Nachrichtenboxen mit einem dicken, gelb und schwarz diagonal gestreiften Rand gesehen, und sie lassen mich immer denken, dass etwas potenziell Gefährliches, wahrscheinlich eine möglicherweise gefährliche Entscheidung getroffen werden muss. Wenn ich einen Knopf mit einem abgerundeten Dreieck mit demselben Muster sehe, würde ich sagen, dass ich sehr vorsichtig sein sollte, wenn ich diesen Knopf drücke.

Für mich ist schlichtes Rot nicht so stark und würde Weiß und Schwarz benötigen, um die gleiche Gefahr vollständig zu überwinden.

5
trlkly

Wenn Sie bereits die Farbe Rot verwenden, verwenden Sie Gelb und Schwarz. Es ist ein natürliches Warnzeichen der Natur und wird definitiv die Aufmerksamkeit auf sich ziehen. Es wird auch auf vielen Warnschildern für Baustellen eingesetzt.

(enter image description here

In westlichen Ländern gibt es kulturell nichts Gefährlicheres als Schwarz auf Rot:

(enter image description here

2
Danielillo

AUFMERKSAMKEIT BEKOMMEN

FARBLECKEN BEDEUTUNG

Farbe allein vermittelt keine Bedeutung, und als solche sollte sie für keinen Ausdruck von "Gefahr" oder "Warnung" herangezogen werden. Darüber hinaus machen Sehbehinderungen wie Deuteranomalie (6% der betroffenen Männer) bestimmte Farbkontraste unsichtbar, ganz zu schweigen von kulturellen Unterschieden, wie mehrere erwähnt haben.

KONTRAST, SYMBOLE und TEXT

Farben wie Rot, Gelb, Orange wurden nicht ausgewählt, weil die Farbe eine bestimmte Bedeutung hat, sondern weil die Farbe einen bestimmten Farbkontrast, Luminanzkontrast und "Blickfang" bietet und sich somit vom Hintergrund abhebt.

Es ist wichtiger, einen angemessenen Luminanzkontrast zu haben und aufmerksamkeits-/anziehungsorientierte Symbole zu verwenden, deren Absicht klar ist.

Der Luminanzkontrast beruht nicht auf einem Farbkontrast, der aufgrund von Beeinträchtigungen oder kulturellen Unterschieden falsch wahrgenommen werden kann, und hilft, das Symbol hervorzuheben. Die Verwendung eines höheren Luminanzkontrasts als der umgebenden Stimuli (Text, Schaltflächen usw.) trägt dazu bei, Aufmerksamkeit und Benutzerfokus zu gewinnen.

Der Farbkontrast kann dazu beitragen, das Bewusstsein für die kognitive Erkennung einer Warnung zu stärken, muss jedoch eine sekundäre Designüberlegung sein. Wenn der Markt beispielsweise Nordamerika ist, ist Grün möglicherweise eine schlechte Wahl für eine Warnung - Aber Grün in Kombination mit der gegnerischen Farbe Rot (einschließlich Purpur) ) erzeugt eine sehr starke Kantenerkennung in der normalen menschlichen visuellen Wahrnehmung.

Verständliche Symbole können sehr nützlich sein, um Bedeutung auf eine Weise zu vermitteln, die (im Idealfall) keine Übersetzung erfordert. Auch hier können kulturelle Unterschiede einen starken Einfluss haben.

In Las Vegas wurde das MGM Grand Hotel ursprünglich so entworfen, dass der Haupteingang durch ein riesiges smaragdfarbenes Löwenmaul führte. Kurz nach dem Öffnen des Gedankens rissen sie ihn ab und bauten den Eingang wieder auf, um das Maul des Löwen zu entfernen, weil sie entdeckten, dass das Maul eines Löwen in einigen asiatischen Kulturen eine besonders negative Symbolik hatte.

Im Bereich der Computer gibt es jedoch häufig verwendete Symbole, die eine internationale Akzeptanz bestimmter Bedeutungen erreicht haben - das gut Verstandene ist in der Regel die bessere Wahl, insbesondere für die Übermittlung einer Warnung.

Text ist König, trotz Sprachunterschieden. Klarer und einfacher Text ist der beste Weg, um eine bestimmte Bedeutung zu vermitteln. Ein einzelnes Wort mit einem Popup-Tooltip mit zusätzlichen Informationen ist meine persönliche Präferenz für Benutzerfreundlichkeit.

Animation und Bewegung beeinflussen die Aufmerksamkeit, wenn dies das Ziel ist. Eine einzelne blinkende rote LED an einer Wand mit 1000 roten LEDs wird zum Beispiel Ihre Aufmerksamkeit auf sich ziehen.

TL; DR

Kurz gesagt, es ist wichtiger, einen guten/hohen Luminanzkontrast sowie beschreibenden Text und Symbole zu haben, als eine bestimmte Farbkombination.

Hier ist ein Beispiel für die Verwendung des Luminanzkontrasts, eine Modifikation Ihrer Beispiel-Löschtaste gegenüber der Speichertaste:

(SAVE DELETE MODIFIED

1
Myndex

Beim Erstellen von Benutzeroberflächen ist Folgendes zu beachten: Farbe sollte niemals Bedeutung vermitteln. Sie können jedoch destruktive Schaltflächen hervorheben, indem Sie sie von anderen Schaltflächen oder dem Rest Ihrer Benutzeroberfläche unterscheiden. Anstatt über Farben nachzudenken, die Sie verwenden könnten, sollten Sie überlegen, wie Sie die Schaltfläche anders aussehen lassen .

Ändern Sie das Design

  • Rahmen - Wenn Ihr aktuelles Design Schaltflächen ohne Rand enthält, fügen Sie einen sehr deutlichen (dicken?) Schwarzen oder weißen Rand hinzu. Dadurch wird die Schaltfläche vom Rest der Benutzeroberfläche "eingeblendet".
  • Größe - Versuchen Sie, mit der Höhe oder Breite der Schaltfläche herumzuspielen. Die Größe kann dabei helfen, zerstörerische Tasten von normalen Tasten zu unterscheiden. Aber es muss nicht immer um die Größe der Schaltfläche gehen, vielleicht können Sie die Schriftgröße des Etiketts ändern?
  • Schriftstil - Wenn Sie über Schriftarten sprechen, wie wäre es, wenn Sie dem Etikett eine Unterstreichung, Kursivschrift oder Fettdruck hinzufügen, um es hervorzuheben?
  • Stil - Fügen Sie möglicherweise einen Schatten hinzu oder haben Sie nur Ränder und keine Füllfarbe. Spielen Sie mit dem Design und lassen Sie es anders aussehen .

Farben

Die kreative Seite jedes Einzelnen ist unterschiedlich. Wenn Sie also Ihren aktuellen Stil beibehalten, aber die Farben ändern möchten, würde ich empfehlen, in einem Farbkreis nach Farben zu suchen, die Ihren Rottönen gegenüberliegen. Dadurch wird die Schaltfläche hervorgehoben. Sie können die Schaltfläche auch hervorheben, indem Sie destruktive Farben wie Gelb, Rot (offensichtlich dunkler oder heller), Schwarz oder Weiß (falls dies zu Ihrem Design passt) wählen.

Design ist ein sehr herausfordernder Teil des Entwicklungsprozesses, daher wird das Herumspielen definitiv helfen. Holen Sie sich die Meinung der Leute - lassen Sie sie ein Design auswählen. Machen Sie einige Modellentwürfe. Ich hoffe das hat geholfen.

0
Aaron