Screenshot in modalità scura

Uno screenshot in modalità scura viene acquisito mentre sistema operativo, browser o applicazione usa il tema scuro e ne mostra quindi la relativa interfaccia.

Related workflow terms: Screenshot responsive, Confronto tra screenshot.

Perché gli screenshot in modalità scura sono importanti

La modalità scura non è più una preferenza di nicchia. I principali sistemi operativi, browser e applicazioni la offrono e molti utenti la mantengono attiva. Documentazione, materiali promozionali o schede degli app store che mostrano soltanto immagini chiare non rappresentano ciò che vedono queste persone.

Per i team di prodotto, acquisire entrambe le modalità mantiene la documentazione vicina all'esperienza reale di ogni gruppo di utenti. Nel marketing, la variante scura mostra a chi la cerca che il prodotto la supporta. Nel QA, il confronto tra i due temi fa emergere problemi di contrasto, token mancanti ed elementi che non si adattano correttamente.

La modalità scura riguarda anche l'accessibilità. Alcune persone la usano per ridurre l'affaticamento, gestire la sensibilità alla luce o lavorare in ambienti poco illuminati. Mostrare soltanto la versione chiara può non riflettere l'esperienza su cui fanno affidamento.

Acquisire entrambe le modalità

Farlo manualmente significa cambiare tema nel sistema o nell'app, attendere il ridisegno dell'interfaccia e acquisire di nuovo. Per una pagina è gestibile; per decine di schermate raddoppia il lavoro.

I flussi automatici possono impostare la media feature prefers-color-scheme su light o dark prima del rendering. Le due varianti vengono così prodotte dallo stesso URL in un'unica esecuzione, senza cambi manuali né pagine dimenticate. Le immagini coincidono per viewport e posizione di scorrimento e differiscono soltanto nello schema cromatico.

Nella documentazione si acquisisce spesso prima la modalità chiara, quindi si esegue di nuovo lo stesso modello in modalità scura. Viewport, ritaglio e schema dei nomi identici rendono le coppie semplici da revisionare e aggiornare dopo una modifica all'interfaccia.

Mantieni coerenti questi aspetti:

• Dimensioni della viewport — usa la stessa larghezza e altezza, così il layout non cambia tra le modalità.
• Stato dei contenuti — conserva gli stessi dati, la stessa posizione di scorrimento e le stesse sezioni aperte o chiuse.
• Rendering dei caratteri — alcuni temi modificano il peso del font sugli sfondi scuri. Verifica che il testo resti leggibile in entrambi.

Modalità scura e leggibilità

Il tema scuro introduce aspetti assenti in quello chiaro. Il testo bianco o chiaro su sfondo scuro può apparire più sottile a causa del rendering subpixel. Bordi fini, ombre leggere ed elementi disattivati possono essere meno visibili.

Se inserisci uno screenshot scuro in un documento o una pagina bianca, il contrasto tra immagine e contesto può essere troppo netto. Lo sguardo si concentra sul bordo anziché sui contenuti. Un contorno discreto, angoli arrotondati o una leggera ombra separano l'immagine e danno intenzionalità alla composizione.

Lo stesso vale al contrario per uno screenshot chiaro su una presentazione scura. Abbinare il tema dell'immagine a quello del contesto produce un risultato più pulito.

Errori comuni

• Mostrare una sola modalità nella documentazione. Se il prodotto supporta il tema scuro, le sole immagini chiare sono incomplete e gli utenti potrebbero non riconoscere l'interfaccia abituale.
• Non controllare il contrasto. Nel tema scuro, testo secondario ed elementi disattivati possono avere poco contrasto. Verifica la leggibilità alla risoluzione effettiva di visualizzazione.
• Usare impostazioni diverse. Viewport o stato dei contenuti non coerenti rendono inutilizzabile il confronto affiancato. Blocca entrambe le condizioni prima di cambiare tema.
• Inserire immagini scure senza separazione visiva. Su una pagina bianca, uno screenshot senza bordo o ombra sembra sospeso. Aggiungi una cornice discreta che lo ancori al layout.