it-swarm.com.de

Farbcodes für Hauptregisterkarten und Unterregisterkarten, Best Practice?

Wir entwickeln eine Webanwendung und einige von uns haben sich ein wenig darüber gestritten, wie die Hauptregisterkarten und die entsprechenden Unterregisterkarten angezeigt werden sollen.

Es ist hauptsächlich eine Frage des Wetters, ob die Hauptregisterkarten und die Unterregisterkarten dieselbe Farbcodierung haben sollten oder ob sie sich unterscheiden sollten.

Lassen Sie mich zwei Screenshots mit den beiden Varianten präsentieren (bitte klicken Sie auf "Bild anzeigen", wenn sie schwer zu sehen sind):

enter image description here

enter image description here

Diese Bilder zeigen die beiden Variationen der Farbcodierung der Registerkarten.

  • Die Hauptregisterkarte ist blau, wenn sie inaktiv ist, und weiß/grau, wenn sie aktiv ist. Und Unterregisterkarten haben ebenfalls die gleiche Farbcodierung
  • Die Hauptregisterkarte ist blau, wenn sie inaktiv ist, und weiß/grau, wenn sie aktiv ist. Unterregisterkarten sind grau-schwarz, wenn sie inaktiv sind, und weiß/grau, wenn sie aktiv sind.

Beide Varianten weisen Nachteile und Vorteile auf. Die ersten haben ein saubereres Aussehen mit einem engeren Farbcodierungsbereich, die zweite unterscheidet sich aufgrund der unterschiedlichen Farbcodierung direkter von der Hauptregisterleiste. Andererseits reicht das reine Layout und die Zuordnung der Unterregisterkartenleiste möglicherweise aus, um sie von der Hauptregisterkartenleiste zu unterscheiden.

Ich würde gerne von euch eure eigene Meinung in dieser Angelegenheit hören und wenn ihr Theorien oder Best Practices als Referenz habt, wäre das auch großartig!

4
AndroidHustle

Meine Meinung dazu (für was es wert ist!) Ist, dass es besser wäre, die Registerkarten nach Stil als nach Farbe zu unterscheiden. Sie könnten die untere Registerkarte als Schaltflächenleiste oder etwas Einfaches wie eine Pipe "|" haben. stattdessen abgegrenztes Menü.

Es ist wichtig, zwischen den beiden Menüs zu unterscheiden, da es auf den ersten Blick so aussieht, als könnte es sich um eine Version der gefürchteten Microsoft-Registerkarten handeln.

enter image description here

3
invalid_arg

Mein direktes Gefühl dabei ist, dass Sie nicht zwei Sätze von Registerkarten haben sollten. Dies macht die Oberseite Ihrer Anwendung verwirrend und Sie verlieren viel Platz.

Es gibt viele andere Möglichkeiten, den Platz in diesem Zusammenhang zu optimieren und eine angemessenere Navigation anzubieten. Sie können beispielsweise links vertikale Registerkarten verwenden, um zu vermeiden, dass der Benutzer den Mauszeiger nach oben bewegt, wenn er nur auf derselben Navigationsebene bleiben möchte. Dies macht Ihren Header mit einer offensichtlichen Navigation klarer.

2
Alconis

Ich sehe hier drei primäre Kommunikationsziele: Hierarchie, aktuelle Position innerhalb der Hierarchie und Relevanz für die aktuelle Aufgabe. Ich denke nicht, dass es ratsam ist, Farbe allein zu verwenden, um all diese Dinge gleichzeitig zu kommunizieren.

Ich könnte die Verwendung von Kontrast in mehreren Merkmalen untersuchen - wie Größe, Position, Textbehandlung oder sogar ein anderes UI-Element -, um eine der beiden Hierarchieebenen in Ihrem Beispiel zu unterscheiden. Ich denke, das visuellste Gewicht sollte wahrscheinlich auf die Entscheidungen gelegt werden, die für den Workflow der unmittelbaren Aufgabe am relevantesten sind.

Sie sollten auch überlegen, ob es in einer bestimmten Phase des Workflows des Benutzers wichtiger ist, schnell zu visualisieren, wo sich diese in der Hierarchie befinden oder welche anderen Optionen verfügbar sind. Ich vermute, dass die blaue "heiße" Farbe der nicht aktiven Registerkarten auffälliger ist als das Hellgrau der aktuellen Registerkarte. Stellen Sie also sicher, dass Sie in diesem Moment das Auge des Benutzers auf sich ziehen möchten.

2
TMiller