Neue Header-Dropdown- / Benachrichtigungsmenü-Stile

Dies ist zusammengeführt -\u003e UX: Notification panel update by jordanvidrine · Pull Request #33795 · discourse/discourse · GitHub


UPDATE:

Dies ist jetzt auf Meta für alle Benutzer aktiv

Zusammenfassung

Experiment für ein neues Aussehen und Stil für Header-Dropdown-Menüs zusammen mit Benachrichtigungsartikelstilen.

Wir entfernen die „aktive“ Randgestaltung von Dropdowns im Header. Dieser Rand erschwert die Gestaltung bei der Erstellung von Themes.

Wir fügen Abstände hinzu und ändern die „aktive“ Icon-Gestaltung im Benachrichtigungsmenü.

Screenshots

16 „Gefällt mir“

Cool, dieses Experiment ist spannend! Mir gefällt das neue Aussehen hier, Jordan :smiley:

Ein erstes Feedback: Der Abstand fühlt sich etwas knapp an, könnten wir mit etwas mehr Abstand experimentieren? Ich glaube, das liegt daran, dass der Innenabstand der ✓ Dismiss-Buttons ziemlich groß ist. Ich denke, es wäre schön, wenn wir sie mit dem gleichen Innenabstand ausrichten würden (vielleicht 0,75rem?).

So etwas wie hier?

9 „Gefällt mir“

Ich vermisse definitiv die Titel der Themen. Wenn es ein oder zwei Likes von Benutzern mit kurzen Namen gibt, reichen die Informationen aus. Aber ein oder zwei Wörter des Titels reichen mir nicht aus.

10 „Gefällt mir“

Danke für das Feedback an euch beide. Beide sind wirklich genau richtig :+1: Ich werde mehr Feedback sammeln lassen, bevor ich mich damit befasse, aber seid versichert, ich werde diese auf die Liste setzen.

7 „Gefällt mir“

Einige erste Eindrücke:

Für Default und Horizon:

  • Wie bei Keegan empfinde ich den Abstand als etwas eng.
  • Das Fehlen von Schattierungen im negativen Raum zwischen den Elementen lässt es für mich geschäftiger wirken, verglichen damit, als das alles ineinander überging.

Horizon-spezifisch:

  • Bei Horizon haben die Hintergründe der Elemente eine Farbe – sollte das so sein? (Bei Default ist es jetzt grau).
  • Bei Horizon sehen die abgerundeten Ecken oben links für mich komisch aus… der Container wirkt schärfer als die Elemente darin – bei Default fühlt es sich an, als ob sie besser zusammenpassen.
5 „Gefällt mir“

Ich habe den Kompromiss, mehr Platz für alte Benachrichtigungen zu schaffen (mit denen ich mich möglicherweise bereits befasst habe), im Austausch für den Verlust des Kontexts der neueren Benachrichtigungen (mit denen ich mich noch befassen muss), als unerwartet empfunden.

Geht in dieselbe Richtung, die @moin oben erwähnte, und das dichtere Design, wie von @keegan aufgezeigt, steht im Widerspruch zu der Bewegung hin zu weniger Dichte, die wir mit Komponenten wie der Seitenleiste angestrebt haben.

6 „Gefällt mir“

Das liegt am größeren Radius, der von Horizon gesetzt wird, und der Kern-Einstellung, die diesen Radius als „groß“ definiert. Ich habe diesen Rand im Kern jetzt so geändert, dass er den regulär gesetzten Radius erbt.

Guter Hinweis. Ich glaube, das liegt an einer falschen Einstellung.

3 „Gefällt mir“

wrt Abstände… was hältst du davon?

Hier beschränke ich den Titel auf eine Zeile, erlaube aber auch, dass der Signifikator seine eigene Zeile hat. Ich habe auch links und rechts einen Abstand von der gleichen Größe hinzugefügt, um den darunter liegenden Schaltflächen zu entsprechen.

7 „Gefällt mir“

Dies weicht möglicherweise ein wenig zu sehr vom Zweck des Experiments ab, aber ich denke, ein größeres Problem, das unser Design einschränkt, ist die Menge der Benachrichtigungen, die wir anzeigen. Ich glaube nicht, dass wir eine ganze Seite voller Benachrichtigungen anzeigen müssen, nur weil die Browserhöhe dies zulässt. Benutzer können auf “Mehr anzeigen” klicken und werden zu /my/notifications weitergeleitet, wenn sie alles sehen müssen.

:100: Ich denke, das ist ein Schritt in die richtige Richtung, und wir könnten möglicherweise:

  • die Anzahl der angezeigten Benachrichtigungen reduzieren
  • mehr Informationen pro Benachrichtigung anzeigen

Dieses Design, das ich auf Dribbble gefunden habe hat zum Beispiel ein gutes Verhältnis von Benachrichtigungsmenge / Informationen pro Benachrichtigung / Dichte.

10 „Gefällt mir“

Ah ja, das Display gefällt mir wirklich gut.

3 „Gefällt mir“

Mir ist auch aufgefallen, dass die Avatare auf deinem Screenshot nicht so stark vom Symbol verdeckt werden wie auf meinem. Die Wahl von „kleiner“ für die Textgröße in den Einstellungen scheint das zu verursachen. Vielleicht war es früher auch so, dass ein größerer Teil des Avatars verdeckt war, weil ich die Textgröße geändert habe, aber jetzt sind die Avatare stärker verdeckt als zuvor. (Ich bevorzuge immer noch die alte Version nur mit Symbolen, also macht es mir nichts aus.)

Zum Vergleich: mit dem Experiment und im abgesicherten Modus

Und einige Symbole sind eingerückt

3 „Gefällt mir“

Gedanken?

3 „Gefällt mir“

Ich denke, wir brauchen mehr Platz um die Benachrichtigungen, das würde auch diese Fehlausrichtung beheben:

image

Können diese Radien gleich sein?

image

Ich finde nicht, dass der graue Hintergrund gut geeignet ist, um Neu und Aktiv anzuzeigen. Wir verwenden normalerweise Tertiär für neue und aktive Zustände und Grau für Hover.

image

Die Icons fühlen sich für mich jetzt etwas zu klein an, ich muss blinzeln, um einige erkennen zu können.

image

image

Haben Sie Ideen, wie sich das mit den Änderungen am Suchmenü vereinbaren lässt? Wir haben dort kürzlich die volle Breite für Highlights verwendet, daher fühlt es sich etwas seltsam an, wieder zu Boxen zurückzukehren.

7 „Gefällt mir“

Mir gefällt die Stiländerung am Tab im Allgemeinen.

Eine weitere Stelle, an der etwas mehr Abstand benötigt wird: Das Klickziel für die Tabs auf Mobilgeräten ist sehr klein.

Es ist ziemlich schwer zu tippen.

3 „Gefällt mir“

Ehrlich gesagt, es hat mir nicht gefallen und ich bevorzuge das alte Layout.

  • Wie andere bereits sagten, ist das Layout zu vollgestopft. Der obige Screenshot verbessert das.
  • Der Randradius und der Abstand zwischen allen Elementen lassen die Liste geschäftiger wirken. Es fügt der Information visuelles Rauschen hinzu:

  • Die Hintergrundfarben für die ungelesenen Elemente sehen in anderen Farbpaletten nicht so gut aus. Sie sehen alle gräulich aus und haben den Farb-Akzent verloren.

Alt:

Neu:

  • Da wir keinen Rand mehr haben, der die Benachrichtigungen von den Symbolen trennt, erweckt die Fehlausrichtung zwischen ihnen und den Elementen den Eindruck, dass etwas nicht stimmt, insbesondere beim ersten Symbol.

  • Die Symbole sind zu klein und im mobilen Modus ist der Abstand falsch. Es macht es schwieriger, auf das richtige Symbol zu klicken. Ich habe bereits zweimal versehentlich eine Benachrichtigung anstelle des Symbols angeklickt.

[quote=“keegan, post:9, topic:369574”]
Das weicht vielleicht ein wenig zu sehr vom Zweck des Experiments ab, aber ich denke, ein größeres Problem, das unser Design einschränkt, ist die Menge der Benachrichtigungen, die wir anzeigen. Ich glaube nicht, dass wir eine ganze Seite voller Benachrichtigungen anzeigen müssen, nur weil die Browserhöhe dies zulässt. Benutzer können auf ‘Mehr anzeigen’ klicken und werden zu /my/notifications weitergeleitet, wenn sie alles sehen müssen.
[/quote]Dem stimme ich nicht zu. Es ist schön, dass wir den verfügbaren Ansichtsbereich nutzen.

[quote=“keegan, post:9, topic:369574”]
mehr Informationen pro Benachrichtigung anzeigen
[/quote]Das wäre schön.

7 „Gefällt mir“

Ich führe einige Änderungen zusammen. Hier ist die neueste Iteration.

Wie würde der Avatar oben ausgerichtet aussehen, sodass er immer näher am Benutzernamen ist? Ich frage mich, ob die zentrierten Avatare ein wenig „unverankert“ wirken würden, wenn ich viele doppelte Benachrichtigungen hätte… sehr grober Vergleich

1 „Gefällt mir“

Ich habe das lokal ausprobiert und es fühlte sich “komisch” an, aber ich kann es hier implementieren, um zu sehen, wie es sich für alle anfühlt.

1 „Gefällt mir“

Können Sie versuchen, den Abstand zwischen den Elementen zu vergrößern, um ihn an den äußeren Abstand anzupassen, um zu sehen, wie es sich anfühlt?

1 „Gefällt mir“

1 „Gefällt mir“