Kritik: Welche UI-Farben sollten in einem bildbasierten Design verwendet werden?

Ich arbeite an einer App, deren UI hauptsächlich von Bildern gesteuert wird. Das einzige Element der Benutzeroberfläche, das kein Bild ist, ist die Navigationsleiste oben, und ich habe Mühe, eine gute Farbpalette dafür zu finden. Wie Sie im Bild unten sehen können, habe ich mich derzeit für eine helle Lachsfarbe für den Hintergrund der Navigationsleiste entschieden, mit einem kontrastierenden Dunkelblau für die Tasten.

Startbildschirm

Es fühlt sich für mich immer noch etwas fad an. Da der Navbar-Hintergrund die Hauptfarbe sein wird, an der Benutzer die App erkennen, soll sie einprägsam sein, aber natürlich sollte sie nicht vom Inhalt ablenken. Auch der Kontrast zwischen den aktiven und inaktiven Schaltflächen ist etwas vage, ebenso wie der Kontrast zwischen den inaktiven Schaltflächen und dem Hintergrund der Navigationsleiste. Ich habe eine hellgraue Farbe für die inaktiven Tasten ausprobiert, aber das kollidiert sowohl mit der Lachsfarbe als auch mit dem Dunkelblau der aktiven Taste.

Im Allgemeinen denke ich, dass die Farbpalette eine Überarbeitung gebrauchen könnte, aber ich kann anscheinend keine gute Grundfarbe für den Hintergrund der Navigationsleiste finden. Hat jemand irgendwelche Vorschläge dafür? Oder Ratschläge, wie man das am besten angeht?

Danke

Ich nehme an, die Seite im Screenshot ist eine der wichtigsten Seiten der App? Ein paar andere könnten gut sein, um uns eine Referenz zu geben. Können Sie bitte die Farbpalette angeben, die Sie verwenden?
Ja das ist richtig. Dies ist der Startbildschirm, der Haupt-Feed, wenn Sie so wollen. Wenn Sie auf ein Bild klicken, zoomen Sie in die Produktansicht, von dort aus können Sie auf den Shopnamen klicken, um in die Shopansicht zu zoomen. Ich habe die Farbpalette und die beiden anderen Bildschirme hier hochgeladen .
Die Verwendung des Blaus, das Sie auf dem Navi haben, und das Umschalten der Schriftfarbe auf Weiß scheint mich nicht abzulenken.
Danke für diesen Einblick. Ich werde anfangen, damit zu experimentieren und zu testen, was bei potenziellen Benutzern am besten funktioniert :)

Antworten (3)

Versuchen Sie vielleicht, Ihre Farben zu invertieren. Wenn die Navigationsleiste dunkel ist, könnte sie im Auge des Betrachters zurückweichen und die Fotos in den Mittelpunkt rücken.

Ich habe das versucht, aber das Vorhandensein eines großen dunklen Bereichs am oberen Rand des Bildschirms fühlt sich ziemlich ablenkend an. Der Kontrast zum Bild ist jedoch besser, also muss ich vielleicht mit verschiedenen Farbtönen herumspielen.
Farben können eine Herausforderung sein. Ich versuche, alles in Graustufen zu erstellen und am Ende Farbe hinzuzufügen, damit ich die richtigen Werte bekomme, bevor ich mich auf den Farbton / die Sättigung des Stücks konzentriere.

Ich denke, es wird besser funktionieren, wenn Sie die Effekte / Fotos ein wenig anders behandeln. Bis dahin bin ich mir nicht sicher, ob irgendein Menü funktionieren wird. Das Hauptproblem sind die Schatten. Nach oben gerichtete Schatten sind auf der Welt nicht üblich und erzeugen ein sehr verwirrendes Aussehen. Ich meine, wir wollen im Allgemeinen, dass die Spitze des Stapels ganz oben ist, besonders wenn sich dort das Menü befindet. Aber stattdessen muss sich unser Gehirn umstellen und wir schauen uns zuerst den Gouda-Käse an und arbeiten uns die Seite hoch.

Ich glaube nicht, dass Sie mit Ihrer Navigation 100 % zufrieden sein werden, bis das Problem gelöst ist, weil es zu ablenkend ist.

Das ist wirklich aufschlussreich, so habe ich mir das noch nicht vorgestellt.

Bei der Arbeit an der Benutzeroberfläche möchte ich Sie hier auf einige UX-Prinzipien hinweisen. Machen Sie die Navigationsleiste für Ihre Benutzer und nicht zu einem Designproblem, das Sie selbst beheben müssen. Machen Sie es einfach zu sehen/lesen. Überprüfen Sie auf Farbenblindheit usw. Sehen Sie sich die Richtlinien für die menschliche Benutzeroberfläche von iOS an . Sie helfen Ihren Benutzern, selbst wenn Ihr Produkt Android ist.

Danke dafür. Es ist immer gut, sich auf die Human Interface Guidelines zu beziehen. Ich habe jetzt die inaktiven Schaltflächen in einen Umriss geändert, anstatt in eine Version mit geringerer Deckkraft der aktiven Schaltfläche. Dies ermöglicht mir, den Kontrast zu verbessern und hilft auch, mich von der aktiven Schaltfläche in mehr als nur einem Farbunterschied zu unterscheiden.
Kritik: Welche UI-Farben sollten in einem bildbasierten Design verwendet werden?
AntwortenHierDatenschutz-Bestimmungen1y, 0v