Quando você deve usar a UI do esqueleto em vez de um botão giratório?
Use UI esqueleto (espaços reservados fantasmas) quando a tela mostrar muitos registros - listas, tabelas, linhas CRM, cartões kanban ou widgets de painel. Os esqueletos mantêm o layout estável enquanto os dados são carregados para que os usuários possam verificar a estrutura imediatamente. Spinners são melhores para ações curtas e atômicas (salvar, enviar, upload de um arquivo) onde não há formato de conteúdo denso para visualizar.
Esqueletos vs spinners em telas densas.
| Opção | Melhor para | Estabilidade de layout | Custo para produzir | Troca honesta |
|---|---|---|---|---|
| UI esqueleto/fantasma | Listas, tabelas, feeds, painéis | Alto – os espaços reservados correspondem ao cromo final | Precisa de um modelo de layout (ou gerador) | Formas de esqueleto erradas parecem falsas; mantenha as funções simples |
| Girador centrado | Ações curtas, envios modais | Baixo – a página geralmente salta quando o conteúdo chega | Trivial CSS | Tudo bem abaixo de ~1s; frustrante em cargas de listas longas |
| Ghost Wireframe Generator | Pouso cromado + esqueletos de carregamento para HTML | As exportações correspondem aos layouts de desktop/móveis | Gratuito, local no navegador | Modo de biblioteca apenas na v1 - ainda não há conversão de SVG de Figma |
Por que listas e tabelas preferem fantasmas.
UIs densas comunicam hierarquia por meio de linhas, colunas e cartões. Um controle giratório apaga essa hierarquia até que a solicitação seja concluída. Barras e blocos fantasmas permitem que os usuários se orientem – “esta é uma tabela com filtros”, “este é um quadro kanban” – antes que os dados reais cheguem. É por isso que as equipes de produto enviam esqueletos de carregamento para CRM e visualizações analíticas, não apenas para modelos de marketing.
Exporte um esqueleto de carregamento em menos de um minuto.
- Abra Ghost Wireframe Generator.
- Escolha uma tabela CRM, análises ou layout de painel - use Combo se precisar de desktop + celular.
- Ajuste as funções de cores para combinar com a superfície do seu produto e, em seguida, Copy HTML (inclui variáveis
--ghost-*). - Opcional: obtenha o Ghost Wireframe Skill do mesmo contrato em seu editor.
Leia o passo a passo completo no guia Ghost Wireframe Generator.