Wie macht man ein rotes Symbol auf grauem Hintergrund weniger störend?

Meine App hat eine Schaltfläche zum Aufnehmen oder Abspielen von Videos. Wenn es Probleme mit dieser Funktion gibt, benachrichtigen wir den Benutzer, indem wir ein Ausrufezeichen überlagern. Dieses "Rot!" Die Benutzeroberfläche funktioniert an anderer Stelle in der App einwandfrei, aber auf dieser Schaltfläche sehen die Farben wirklich seltsam und kollidierend aus.

Geben Sie hier die Bildbeschreibung ein

Irgendwelche Vorschläge für eine visuelle Behandlung, die ich auf die Schaltfläche und/oder das Symbol (jeweils unten aufgeteilt) anwenden kann, um das Ergebnis weniger kontrastreich und kollidierend zu machen?

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Antworten (3)

Wenn Farben (Farbton) unterschiedlich sind, aber ihre Helligkeit/Dunkelheit (Wert) gleich sind, erhalten Sie diese „visuelle Dissonanz“, die Sie in Ihrem Beispiel sehen. Im Moment ist das Rot ein etwas dunklerer Wert als das Grau. Sie müssen den Wertunterschied zwischen den beiden Farbtönen erhöhen.

Du könntest:

  • das Grau aufhellen
  • das Rot abdunkeln
  • tue beides

Oder, wahrscheinlich praktischer, schaffen Sie eine Möglichkeit, den Übergang zu "polstern". Ich würde vorschlagen, dem Ausrufezeichen ein helles Leuchten oder einen dunklen Schatten oder vielleicht einen weißen Umriss zu geben.

Oder am einfachsten, einfach die Farbe weglassen. Ein weißes Ausrufezeichen auf diesem Dunkelgrau würde sich gut abheben.

Tolle Vorschläge, und ich mag die technische Erklärung der visuellen Dissonanz. Ich erinnere mich dunkel aus meiner (begrenzten) Designausbildung an der Architekturschule vor langer Zeit ... ich hätte wohl besser aufpassen sollen! ;-)

Ich würde mir verschiedene Behandlungen mit einem Dreieck ansehen. Das Dreieck/Ausrufezeichen ist ein übliches „ALARM“-Icon und ermöglicht eine leichtere Erkennung durch den Benutzer. Erfinde das Rad nicht neu, lass es einfach schön aussehen :)

Warnung 1

Warnung 2

Warnung 3

Der Haken an der Sache ist, dass diese immer noch das gleiche Problem mit unterschiedlichen Farbtönen, aber ähnlichen Werten übereinander haben. Aber die Idee, wenn gültig. Ich denke, wenn das Dreieck viel heller (oder weiß) wäre, würde das ganz gut funktionieren.
Einverstanden. Deshalb habe ich angefangen, im dritten Bild mit Werten zu spielen.

Das Problem ist der Wertekontrast von Rot und Grau: Sie sind viel zu nah dran, obwohl der Farbton unterschiedlich ist. Sehen Sie sich den "B"-Wert in den HSB-Schiebereglern an.

Wenn Sie das Grau heller oder dunkler verschieben, hilft es. Wenn Sie das Kamerasymbol zu einem Umriss machen, ist das Problem gelöst. Das Rot könnte auch etwas heller oder dunkler werden (im Gegensatz zu Grau), um den Kontrast zu verstärken.

Wie macht man ein rotes Symbol auf grauem Hintergrund weniger störend?
AntwortenHierDatenschutz-Bestimmungen1y, 0v