O que Esqueumorfismo faz?
Um controle de tela é mais fácil de aprender quando se parece e se comporta como um objeto físico que o usuário já conhece.
Interfaces que copiam objetos reais: couro, linho, madeira, feltro, vidro e metal escovado, iluminados de cima com gradientes e sombras em camadas. Tem raízes nos ícones de desktop dos anos 1980 e atingiu o pico no iOS 1 a 6, até que o iOS 7 o substituiu em 2013.
Período: 2007–2013 · Era: Touchscreen · Domínio: Design Gráfico & UI · Também chamado: UI Esqueumórfica, estilo iOS 6, Interface de objeto real
Quando carregar este skill
Carregue-o quando o usuário pedir: "esqueumórfico", "esqueumorfismo", "ios 6", "texturas realistas", "textura de couro", "interface tátil", "botões realistas", "botões brilhantes", "madeira e linho", "ios retrô", "curva de página", "couro costurado".
Ideal para: aplicativos de música e áudio, aplicativos de notas e diários, jogos com mesa ou tabuleiro, sites de novidade e nostalgia, integração para usuários iniciantes de smartphones.
Não use quando:
- O produto é denso em dados e cada pixel de enfeite custa espaço de leitura.
- A marca precisa parecer abstrata, minimalista ou nativa de software.
- O design precisa escalar em muitas densidades e rodar em dispositivos de baixo consumo, onde 5 camadas de sombra custam taxa de quadros.
Diretrizes do sistema
Ao gerar layouts de UI ou gráficos em Esqueumorfismo, você DEVE:
- Modelar cada controle em um objeto real com um uso conhecido, como um interruptor de alternância, um bloco de notas, uma estante de livros ou um dial, e manter suas proporções dentro de 10% do original.
- Iluminar cada superfície de cima com uma fonte de luz a 90 graus, de modo que os realces fiquem na borda superior e as sombras caiam para baixo.
- Construir profundidade com 3 a 5 camadas empilhadas: um realce superior claro de 1px, um corpo gradiente de 2 a 4 px, uma borda inferior escura de 1px, uma sombra interna e uma sombra externa.
- Texturizar superfícies grandes com um bitmap repetitivo de 128 a 256px com opacidade de 4 a 12%: linho, couro, papel, grão de madeira ou feltro.
- Dar a cada botão um gradiente com diferença de luminosidade de 8 a 15% do topo para a base e inverter esse gradiente enquanto o botão estiver pressionado.
- Adicionar um detalhe costurado, em relevo ou em baixo-relevo em cada painel de material, com um realce interno de 1px e uma sombra externa de 1px.
- Refletir o mundo real no movimento: curvas de página, transições de virar e interruptores com mola seguem a física do objeto que imitam.
Barreiras de proteção
Cada linha abaixo quebra o estilo. Verifique sua saída contra a lista antes de retorná-la.
- NUNCA: Preenchimentos sólidos planos sem gradiente ou sombra em controles.
- NUNCA: Uma fonte de luz que muda de direção entre componentes.
- NUNCA: Texturas que se repetem com uma costura visível ou período de repetição menor que 64px.
- NUNCA: Metáforas de material que não correspondem à função, como uma calculadora de madeira.
- NUNCA: Ícones de contorno de 1px sem preenchimento.
- NUNCA: Sombras com raio de desfoque de 0px e sem propagação.
- NUNCA: Fundos brancos puros sem textura de superfície.
Perfil vetorial
| Eixo | Pontuação | 1 significa | 5 significa |
|---|---|---|---|
| Ornamentação | ■■■■□ 4/5 | puro minimalismo | maximalista |
| Dimensionalidade | ■■■■□ 4/5 | estritamente 2D | 3D total / espacial |
| Rigidez da grade | ■■■□□ 3/5 | caótico / orgânico | grade matemática estrita |
| Realismo esqueumórfico | ■■■■■ 5/5 | digital abstrato | material fotorrealista |
| Expressividade tipográfica | ■■■□□ 3/5 | neutro / invisível | experimental / ilustrativo |
Mantenha essas pontuações. Se uma solicitação mover um eixo em 2 pontos ou mais, você saiu do estilo: vá para "Fallbacks de linhagem".
Lógica espacial e de grade
- Mecânicas de grade: Uma tela de 320 por 480pt no iPhone, depois 320 por 568pt, com um alvo de toque mínimo de 44pt; o conteúdo fica em linhas agrupadas de largura total ou em prateleiras com margem de 10 a 20pt.
- Proporção de espaços em branco: 20–35% da superfície permanece vazia porque texturas e molduras preenchem o resto; a escala de espaçamento é 4, 10, 20, 44pt.
- Regras de alinhamento: Os controles ficam dentro da moldura de sua metáfora de objeto, como linhas em uma tabela, livros em uma estante ou páginas em um caderno; o texto é centralizado nos botões e alinhado à esquerda nas linhas.
- Geometria do container: Retângulos arredondados com raio de 5 a 10px, células de tabela agrupadas com raio de 10px nos cantos externos e barras de 44px de altura com um bisel de 1px.
Tipografia
- Classificações: sem serifa humanista · serifa slab · script
- Espaçamento: Tamanhos de exibição ficam em 0em a 0.01em; corpo fica em 0; rótulos de botão recebem +0.02em.
- Entrelinha: Exibição 1.1; corpo 1.3 a 1.4; linhas de tabela mantêm uma altura de 44px com uma única linha de 17px.
- Regras de hierarquia:
- Use negrito (700) para rótulos de botões e títulos e regular (400) para texto do corpo.
- Defina 17px para títulos e linhas, 14px para rótulos secundários e 12px para legendas.
- Adicione uma sombra de texto de 1px, branca com 60% de opacidade abaixo de texto escuro ou preta com 60% de opacidade acima de texto claro, para que o texto pareça estampado na superfície.
- Defina o texto do título em uma face diferente em telas vinculadas a objetos, como uma slab em uma estante de livros ou um script em um bloco de notas.
Pares de fontes
| Exibição | Corpo | Nota |
|---|---|---|
| Roboto Slab | Open Sans | Uma slab para rótulos de objetos com uma face de texto humanista, próxima à mistura de Marker Felt e Helvetica das notas do iOS 6. |
| Arvo | Lato | Uma slab para painéis de couro e madeira com uma sem serifa arredondada para controles legíveis. |
| Caveat | Source Sans 3 | Uma face de caligrafia para metáforas de bloco de notas e diário, com uma sem serifa neutra para texto de UI. |
Cor e iluminação
- Estrutura da paleta: Três a cinco cores de material com 60% da superfície no material dominante, mais um acento azul brilhante para controles primários em 10 a 15% da superfície.
- Regras de contraste: O texto em superfícies de material mantém pelo menos 4.5:1; texto claro sobre couro marrom e feltro verde atinge cerca de 8:1, e texto sobre azul brilhante atinge 4.5:1.
- Tratamento de superfície: Texturas fotográficas, gradientes lineares com divisão dura de 50% para brilho, e ruído com opacidade de 3 a 6%; o vidro usa um realce branco de 30% sobre a metade superior.
- Luz e sombra: Uma fonte de luz do topo; realces são brancos com opacidade de 40 a 70% nas bordas superiores, sombras são pretas com opacidade de 25 a 50% apontando para baixo com deslocamento de 1 a 3px.
Paleta
| Nome | Hex | Função |
|---|---|---|
| Linho | #D8D4CC | base de textura de fundo |
| Couro Marrom | #6B4A2F | superfície do painel |
| Vidro Azul | #2F7BE0 | gradiente de controle primário |
| Cromo | #C9CDD3 | barra de metal e moldura |
| Feltro Verde | #1E5B3A | superfície da mesa |
| Tinta de Carimbo | #2B2118 | texto sobre material claro |
Materialidade e textura
- Simulação de superfície: Materiais reais: couro com costura, linho, papel, madeira, feltro, alumínio escovado, vidro e cromo.
- Regras de borda: Uma borda externa escura de 1px com 40 a 60% de preto, um realce interno branco de 1px com opacidade de 40 a 60%, e costura tracejada de 1px recuada 4px da borda no couro.
- Desfoque e elevação: Sombras projetadas com 0 1px 2px a 40% de preto para botões e 0 4px 10px a 50% de preto para painéis; sombras internas de inset 0 1px 3px a 50% de preto para reentrâncias; elevação usa 3 níveis.
Ornamentação e iconografia
- Iconografia: Ícones preenchidos brilhantes de 57 por 57px com raio de 12px, um realce de brilho superior sobre 50% da altura, um bisel de 1px e uma sombra refletida abaixo.
- Ilustração: Ilustrações de objetos renderizadas com iluminação, como estantes de livros, microfones, carretéis de filme e gravadores, desenhados em uma vista 3/4 de cima.
- Elementos decorativos: costura · curva de página · prateleira de madeira · borda de papel rasgado · realce de brilho · moldura de cromo · reflexo abaixo do ícone
Movimento e interatividade
- Nascido na tela: sim
- Física de transição: Física de objetos: páginas curvam e viram em 400 a 600ms, interruptores deslizam com um ajuste de mola de 20ms e prateleiras rolam com inércia e 8px de rebote de borda.
- Easing: cubic-bezier(0.42, 0, 0.58, 1)
- Duração (ms): 350
- Hover e ativo: O estado pressionado inverte o gradiente do botão e remove a sombra externa, para que o botão pareça pressionado 1 a 2px na superfície; dispositivos de toque não têm hover.
Primer de código e token
Defina data-style="skeuomorphism" no elemento raiz e cole os tokens. O arquivo tokens.css tem os mesmos tokens e um conjunto de regras de referência.
[data-style="skeuomorphism"] {
--color-bg: #D8D4CC;
--color-surface: #6B4A2F;
--color-text: #2B2118;
--color-muted: #6E6659;
--color-primary: #2F7BE0;
--color-accent: #C9A24B;
--color-border: rgba(0, 0, 0, 0.5);
--font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
--border-radius: 8px;
--border-width: 1px;
--shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
--backdrop-filter: none;
--space-unit: 4px;
--ease: cubic-bezier(0.42, 0, 0.58, 1);
--duration: 350ms;
--gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
--gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
--text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
--touch-target: 44px;
--color-on-bg: #2B2118;
--color-on-surface: #D8D4CC;
--color-on-primary: #000000;
--color-on-accent: #2B2118;
--color-muted-on-bg: #5F574E;
--color-muted-on-surface: #CDC6BC;
--color-link: #2B2118;
--color-link-on-surface: #D8D4CC;
--display-weight: 700;
--subhead-weight: 700;
--body-weight: 400;
--strong-weight: 700;
--label-weight: 700;
--display-tracking: 0em;
--display-leading: 1.1;
--display-case: none;
--body-leading: 1.55;
--body-size: 16px;
--icon-stroke: 2;
}
Padrões Tailwind:
| Elemento | Classes |
|---|---|
| página | min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)] |
| título | font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)] |
| painel | rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)] |
| botão | h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)] |
| entrada | h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)] |
Pacote visual
As imagens e ícones deste estilo são arquivos. Use-os como estão, ou leia-os como uma especificação e desenhe os seus próprios na mesma linguagem.
| Arquivo | Conteúdo |
|---|---|
pack/hero.svg | Placa hero, 800 por 600. Uma imagem abstrata na linguagem visual do estilo. |
pack/pattern.svg | Ladrilho de padrão, 80 por 80. Repete-se em ambas as direções. |
pack/icons.svg | Sprite de ícones: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders. |
- Ícones: sólidos, traço 2 em um campo de 24px, pontas redondas, junções redondas, container: arredondado. Use:
<svg class="icon"><use href="pack/icons.svg#home"/></svg>. Um ícone recebecurrentColor. - Família de ícones: o sprite é recortado do Phosphor (Fill) por Phosphor Icons, licença MIT. Motivo: Silhuetas sólidas completas de objetos reais. O container fornece o material e a luz. É um substituto de código aberto para uma demonstração. Para um produto, use a biblioteca de ícones da marca e escolha a família pelas regras abaixo.
- Tipo de exibição: peso 700, espaçamento 0em, entrelinha 1.1, caixa: nenhuma.
- Pesos: exibição 700, subtítulo 700, corpo 400, negrito no texto 700, rótulos e botões 700. O estilo usa 2 pesos (400, 700) e nenhum outro. A exibição é 300 mais pesada que o corpo. O acento é peso: uma palavra mais pesada é o acento, então os passos entre os pesos são claros.
- Tipo do corpo: 16px, entrelinha 1.55.
- Página: hero dividido, alinhado à esquerda, densidade regular, inclinação do acento 0°.
- Cor do texto:
--color-texté para o campo de leitura principal apenas. Em cada campo, use seu token:--color-on-bg,--color-on-surface,--color-on-primary,--color-on-accent.
Como escolher um pacote de ícones
Um pacote de ícones é uma tipografia para imagens. Escolha-o com o mesmo cuidado que a face do texto. Essas regras valem para um conjunto de código aberto e para uma biblioteca licenciada.
- O traço corresponde à haste. Coloque um ícone ao lado do texto do corpo no tamanho do texto. A linha do ícone e a haste de uma letra têm o mesmo peso.
- Terminais e cantos seguem o token de raio. Pontas retas e junções de mitra vão com um raio de zero. Pontas redondas e junções redondas vão com um raio suave.
- O modo de preenchimento segue a tecnologia da época. Eras de impressão cortam formas sólidas. Eras de tela com profundidade preenchem e sombreiam a forma. As interfaces de produto atuais desenham um contorno.
- As metáforas não são mais jovens que o estilo. Cada imagem é um objeto que a época conhecia. Um ícone com uma metáfora posterior quebra o período.
- Uma família, uma grade. Todos os ícones vêm de uma família e uma variante, desenhados em um campo. Não misture famílias em uma superfície.
- A família cobre o produto. Liste cada conceito que o produto precisa antes de se comprometer. Uma família que não tem ícone para um deles é a família errada.
- A cor é um token. Um ícone recebe currentColor. Um segundo tom vem de um token, não do arquivo.
- A licença permite o uso. Leia a licença do conjunto. Dê crédito onde a licença pedir. Um produto com uma marca usa sua biblioteca licenciada e aplica as mesmas regras para escolher a família.
Fallbacks de linhagem
Quando o usuário pedir uma variação, não improvise. Misture em direção ao vizinho nomeado aqui e carregue seu skill.
- Se o usuário pedir mais plano: mova-se em direção a
flat-design(Flat Design). Remova todos os gradientes, texturas e sombras, defina preenchimentos sólidos e mantenha as cores e 5
…