Quando dovresti utilizzare l'interfaccia utente scheletro anziché uno spinner?
Utilizza l'interfaccia utente ridotta (segnaposto fantasma) quando lo schermo mostrerà molti record: elenchi, tabelle, righe CRM, schede kanban o widget del dashboard. Gli scheletri mantengono stabile il layout durante il caricamento dei dati in modo che gli utenti possano scansionare immediatamente la struttura. Gli spinner sono migliori per azioni brevi e atomiche (salvataggio, invio, caricamento di un file) in cui non è presente una forma di contenuto denso da visualizzare in anteprima.
Scheletri vs spinner su schermi densi.
| Opzione | Meglio per | Stabilità del layout | Costo per produrre | Scambio onesto |
|---|---|---|---|---|
| Interfaccia utente scheletro/fantasma | Elenchi, tabelle, feed, dashboard | Alto: i segnaposto corrispondono al cromo finale | Necessita di un modello di layout (o di un generatore) | Le forme scheletriche sbagliate sembrano false; mantenere i ruoli semplici |
| Spinatore centrato | Azioni brevi, invii modali | Basso: la pagina salta spesso quando arriva il contenuto | CSS banale | Multa sotto ~1s; frustrante per i caricamenti di elenchi lunghi |
| Ghost Wireframe Generator | Cromo di atterraggio + scheletri di caricamento per HTML | Le esportazioni corrispondono ai layout desktop/mobile | Gratuito, locale del browser | Modalità libreria solo nella v1: ancora nessuna conversione SVG-da-Figma |
Perché elenchi e tabelle preferiscono i fantasmi.
Le interfacce utente dense comunicano la gerarchia tramite righe, colonne e schede. Uno spinner cancella quella gerarchia fino al termine della richiesta. Le barre e i blocchi fantasma consentono agli utenti di orientarsi – “questa è una tabella con filtri”, “questa è una bacheca kanban” – prima che arrivino i dati reali. Questo è il motivo per cui i team di prodotto spediscono scheletri di caricamento per CRM e visualizzazioni analitiche, non solo per modelli di marketing.
Esporta uno scheletro di caricamento in meno di un minuto.
- Apri Ghost Wireframe Generator.
- Scegli una tabella CRM, un'analisi o un layout del dashboard: utilizza Combo se hai bisogno di desktop + dispositivi mobili.
- Regola i ruoli dei colori in modo che corrispondano alla superficie del tuo prodotto, quindi Copy HTML (include le variabili
--ghost-*). - Facoltativo: ottieni Ghost Wireframe Skill per lo stesso contratto nel tuo editor.
Leggi la guida completa nella guida Ghost Wireframe Generator.