Stato Vuoto vs. Scheletro
Uno stato vuoto significa che non c'è contenuto. Uno scheletro indica che il contenuto si sta ancora caricando e se ne conosce la forma.
Usa uno stato vuoto per spiegare perché non c'è nulla e cosa fare dopo. Usa uno scheletro per un caricamento breve quando conosci il layout.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Stato Vuoto, Errore e Successo — Pacchetto di Apprendimento
Questo pacchetto di apprendimento copre tre diversi stati di un'app. Vuoto significa che non ci sono ancora contenuti. Errore significa che qualcosa è fallito. Successo conferma il completamento. Ognuno richiede il proprio messaggio e il passo successivo. Il pacchetto non è un termine standard unico di stato.
Save a guide to keep the patterns your team uses most within reach.
Un nuovo elenco di progetti spiega come creare il primo elemento. Se la rete non funziona, appare Retry e i filtri restano salvati.
- Usalo quando
- Usa questa guida come checklist. Progetta ogni stato per ogni vista che dipende dai dati.
- Non usarlo quando
- Non lasciare mai uno schermo vuoto o un vicolo cieco. Spiega i fallimenti e conferma il successo.
- Nome usato nel codice
status state machine
Scheletro
Uno scheletro è un segnaposto semplice a forma del contenuto che si sta ancora caricando.
Una pagina del profilo lascia spazio per la sua foto e il suo testo. Il layout resta fermo quando arrivano i dati.
- Usalo quando
- Usalo quando il layout è noto e l'attesa è facile da notare.
- Non usarlo quando
- Non inventare mai dettagli falsi, non scintillare per sempre e non usare uno scheletro quando il contenuto appare quasi subito.
- Nome usato nel codice
aria-busy="true"
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Stato Vuoto, Errore e Successo — Pacchetto di ApprendimentoEmpty, Error & Success State — Learning Bundle | Usa questa guida come checklist. Progetta ogni stato per ogni vista che dipende dai dati. | Non lasciare mai uno schermo vuoto o un vicolo cieco. Spiega i fallimenti e conferma il successo. | status state machine |
| ScheletroSkeleton | Usalo quando il layout è noto e l'attesa è facile da notare. | Non inventare mai dettagli falsi, non scintillare per sempre e non usare uno scheletro quando il contenuto appare quasi subito. | aria-busy="true" |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Stato Vuoto, Errore e Successo — Pacchetto di Apprendimento (Empty, Error & Success State — Learning Bundle), Scheletro (Skeleton) per il nostro reale flusso utente. Usa questa regola: Uno stato vuoto significa che non c'è contenuto. Uno scheletro indica che il contenuto si sta ancora caricando e se ne conosce la forma. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.