Esperimento per un nuovo look & style per i menu a tendina dell’header insieme agli stili degli elementi di notifica.
Rimuoviamo lo stile del bordo “attivo” dai menu a tendina nell’header. Questo bordo aggiunge una complicazione allo styling durante la creazione di temi.
Aggiungiamo spaziatura e cambiamo lo stile dell’icona “attiva” nel menu delle notifiche.
Fantastico, questo esperimento è entusiasmante! Adoro il nuovo look qui Jordan
Alcuni feedback iniziali: lo spazio sembra un po’ stretto, potremmo sperimentare con un po’ più di spazio? Penso che sia perché il padding sui pulsanti ⌄✓ Dismiss è piuttosto grande. Penso che sarebbe bello se li allineassimo con lo stesso padding (0.75rem?)
Grazie per il feedback a entrambi. Entrambi sono molto pertinenti Lascerò che si accumuli altro feedback prima di affrontarlo, ma state certi che li aggiungerò alla lista.
Come per Keegan, la spaziatura mi sembra un po’ stretta
L’assenza di ombreggiatura nello spazio negativo tra gli elementi mi fa sembrare il tutto più affollato, rispetto a quando si fondeva tutto insieme
Specifico per Horizon:
Su Horizon, lo sfondo degli elementi ha un colore: dovrebbe esserci? (Su Default, ora è grigio).
Su Horizon, gli angoli arrotondati in alto a sinistra mi sembrano strani… il contenitore sembra più nitido degli elementi al suo interno; su Default, sembra che corrispondano meglio.
Ho scoperto che il compromesso di fare più spazio per le vecchie notifiche (che potenzialmente ho già gestito) in cambio della perdita di contesto delle notifiche più recenti (che devo ancora gestire) è inaspettato.
Va nella stessa direzione di quanto detto da @moin sopra, e il design più denso, come sottolineato da @keegan, è in contrasto con la tendenza verso una minore densità che stiamo cercando di ottenere con componenti come la barra laterale.
[citazione=“mcwumbly, post:5, topic:369574”]
Su Horizon, gli angoli arrotondati in alto a sinistra mi sembrano strani… il contenitore sembra più nitido degli elementi interni – su Default, mi sembra che corrispondano meglio.
[/citazione]
Ciò è dovuto al raggio del bordo più grande impostato da horizon
[citazione=“mcwumbly, post:5, topic:369574”]
Su Horizon, lo sfondo degli elementi ha un colore – dovrebbe esserci? (Su Default, ora è grigio).
[/citazione]
Ottima osservazione. Questo è dovuto a un’impostazione errata, credo.
Per quanto riguarda lo spaziatura… cosa ne pensi di questo?
Qui limito il titolo a una riga, ma permetto al significante di avere anche la sua riga. Ho anche aggiunto un padding sinistro e destro dello stesso spazio per abbinare i pulsanti sottostanti.
Questa è forse una deviazione un po’ eccessiva dallo scopo dell’esperimento, ma penso che un problema più grande che limita il nostro design sia la quantità di notifiche che mostriamo. Non penso che sia necessario mostrare un’intera pagina di notifiche solo perché l’altezza del browser lo consente. Gli utenti possono fare clic su “mostra altro” ed essere indirizzati a /my/notifications quando hanno bisogno di vedere tutto.
Ho anche notato che gli avatar non sono coperti dall’icona nel tuo screenshot come nel mio. La scelta di “più piccolo” per la dimensione del testo nelle preferenze sembra causare ciò. Forse era così anche prima, che una parte più grande dell’avatar era coperta perché ho cambiato la dimensione del testo, ma ora gli avatar sono più coperti di prima. (Preferisco ancora la vecchia versione solo con icone, quindi non mi dispiace.)
A confronto: con l’esperimento e in modalità provvisoria
Non mi sembra che lo sfondo grigio funzioni bene per indicare nuovo e attivo… di solito usiamo il terziario sia per gli stati nuovo e attivo e il grigio per l’hover
Le icone mi sembrano un po’ troppo piccole ora, mi ritrovo a strizzare gli occhi per distinguerne alcune
Hai qualche idea su come questo funzionerebbe con le modifiche al menu di ricerca? di recente siamo passati a larghezza intera sugli highlight lì, quindi sembra un po’ strano tornare ai box
I colori di sfondo per gli elementi non letti non hanno un bell’aspetto con altre palette di colori. Sembrano tutti grigiastri e hanno perso l’accento del colore.
Poiché non abbiamo più il bordo che separa le notifiche dalle icone, il disallineamento tra queste e gli elementi dà l’impressione che qualcosa non vada, specialmente nella prima icona.
Le icone sono troppo piccole e in modalità mobile lo spazio è errato. Rende più difficile fare clic sull’icona corretta. Ho già fatto accidentalmente clic su una notifica invece che sull’icona, due volte.
come apparirebbe l’avatar allineato in alto in modo che sia sempre più vicino a dove si trova il nome utente? Mi chiedo se gli avatar centrati sembrerebbero un po’ “non ancorati” se avessi molte notifiche su due righe… confronto molto approssimativo
Lascerò che si accumuli altro feedback prima di affrontarlo, ma state certi che li aggiungerò alla lista.
Penso che questo sia un passo nella giusta direzione e potremmo eventualmente:
