Design mobile-safe

1) Princípios Mobile-safe

1. Thumb-first: área de alcance - dentro do polegar (navegação inferior, FAB/primary à direita).
2. Touch-friendly: alvos ≥ 40-48 px com campos; distância ≥ 8-12 px.
3. Safe-área by design: Levemos em conta os cortes/zonas gestuais ('eng (safe-area-inset-)').
4. Velocidade mais importante que «beleza»: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Moderação: mínimo de modalks, mínimo de formulários, máximo de suprimento automático.
6. Rede e bateria: tráfego barato, modo offline, retraias bem ajustadas.

2) Malha, breakpoint e safe-area

Breakpoints: ≤ 480 (mobile), 481-768 (tablet vertical), 769-1024 (tablet horizontal).
Contêineres com max-width, cartões flexíveis 1-2 colunas.
Painéis inferiores ≥ 56 px, reserva para navegação por sinais.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) Texto, botões e interações

Texto: 16-18 px básico, entre linhas 1. 4–1. 6, comprimento da linha 40-70 caracteres.
Botões: altura 44-52 px, foco claro/ativo/disabled; ícone + texto, não só ícone.
Os gestos têm sempre uma alternativa (botão/menu/ponto quente).
As animações estão em 'trans/opacity' e respeitam 'prefers-reduced-motion'.

4) Formulários, teclados e preenchimento automático

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

As máscaras são suaves (o formato é exibido, mas não quebra a entrada).

5) Navegação e arquitetura de telas

Navegação inferior (até 5 pontos) + gesto «para trás».
Até as tapas de destino.
Evite «hambúrguer» para seções críticas; use as abas/segmented.
Os estados UI: 'loading/empty/erro/sucess' são claros, com ações e explicações.

6) Desempenho e economia

Código-split e widgets preguiçosos; gráficos/mapas carregamos «sob demanda».
Os recursos críticos são 'pretoad', o resto é 'defer '/' lazy'.
Imagens AVIF/WebP + 'srcset/sizes', 'loading =' lazy '.
Fontes: 1 variável WOFF2, 'fonte-display: swap', preteload apenas principal.
Em dinheiro e offline através do Service Worker (PWA), 'stale-while-revalidate'.

7) Redes, offline e retraias

Amizade 3G/atraso elevado - limite de solicitação, batching, jittered backoff.
Tela off-line com o armazenamento de dados críticos e a fila de sincronização.
Respeite a economia de dados: Cliente Hants/Save-Data → imagens leves, sem vídeo automático.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) Disponibilidade (A11y) no mobile

Controle total do teclado/botões e foco de leitura.
Contraste ≥ WCAG AA, texto de alternativas ('alt',' aria-label ').
Grandes metas e pausas de animação; os gestos são duplicados por botões.
Para gráficos, resumo de texto e tabela de dados.

9) Tema escuro, brilho e haptics

Tema escuro não é apenas uma inversão; configure o contraste e os acertos de cor.
Respeite o tema do sistema.
Haptics - dosagem (sucesso/erro), a opção de desligar.

10) Privacidade, permissões e segurança

Permissões somente no momento de valor (câmera → scan do documento).
Explicação para «porquê» e fallback sem autorização.
WebAuthn/biometria em vez de senha; gerentes de senhas são suportados.
Esconda os campos sensíveis ao encurtar; Tempo de aviso.

11) Notificações e tarefas de fundo

Cenários de valor claros, sem detalhe; Relógio calmo.
One-tap unsubscribe e centro de preferência.
Sinos de fundo são pequenas porções, com restrições de bateria/rede.

12) Imagens, mídia e adaptabilidade

O Placeholder com tamanho especificado → CLS zero.
Vídeo padrão sem auto, com legendas e controles; bits adaptativos.
Ícones - Vetor (SVG) ou spright; não carregue conjuntos de 1 MB.

13) Snippets e configurações

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) Plano de teste (mínimo)

Dispositivos: 1 iOS + 1 Android (pequeno/médio/grande ecrã), retrato/paisagem.
Redes offline, 3G, 4G (throttle); incluir o Save-Data.
Disponibilidade: VoiceOver/TalkBack de cenário, teclado, contraste.
Perfomance: Web-Vitals (RUM), perfilador; grandes listas, entrada/scroll/gestos.
Sustentabilidade: rotatividade, contração/retorno, homicídio de processo → recuperação.
Permissões, tempo de sessão, ocultação de dados privados, biometria.

15) Métricas Mobile-safe

LCP/INP/CLS (p75, mobile-somente).
Time-to-Action (antes do clique de destino primário).
Tap Accuracy (proporção de tapas falsas de elementos próximos).
Crash-free sessions/ANR rate.
Data per sessão e Battery impact (fundo/frente).
Opt-in/opt-out canhão e engagement.

16) Anti-pattern

Botões 28-32 px, lista apertada, «mapas» sem campo - falhas.
Texto 12-14 px em fundo cinza claro.
Modalks acima dos modais; O encerramento é apenas um gesto.
Vídeo/animações automático em 3G/Save-Data.
As funções são apenas um gesto, sem botão/menu.
Safe-area não contabilizado → sobreposição de conteúdo com «frangos» ou painel swipe.

17) Folha de cheque da tela

• Metas ≥ 48 px, recuos ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Texto ≥ 16 px, contraste AA, foco/ativo visíveis
• Formulários: corretos 'tipo/inputmode/autocomplete', e a substituição automática
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobile)
• Lazy-loading blocos pesados, downsampling listas
• Tela offline, retais com backoff, modo Save-Data
• Pô e permissões - sob demanda, com explicação e recusa
• Tópico escuro e reduced-motion suportados
• Testes: iOS/Android, retrato/paisagem, 3G/offline, passagem SR

18) Plano de implementação (3 iterações)

• Grade e safe-area, tarefas 48 px, tipos de teclado/controle automático, Web-Vitals básico, imagens lazy, tópico escuro.

• Código-split, conteúdo-visibilidade, modo offline + SW, modo Save-Data, retais/filas, recuperação de estado, auditoria A11y.

• RUM-dashboards, análise de tráfego/bateria, haptics, cenários de resolução, melhoria de listas (virtualização), jogos-days regulares de redes móveis.

19) Mini-FAQ

Você precisa de um menu «mobile»?
Sim, mas a prioridade é navegar abaixo com 3-5 pontos; Hambúrguer para secundário.

Como reduzir falhas de botão?
Aumente os alvos para 48 px, adicione campos ao redor, explore verticalmente, use haptic para «sucesso/erro».

O offline é obrigatório?
Para os cenários críticos, sim: dinheiro, fila de ações e dicas honestas para o usuário.

Resultado

O design mobile-safe é uma combinação de ergonomia de toque, contabilidade de safe-area, desempenho, disponibilidade e resistência a redes/bateria. Siga as folhas de cheque, mede a Web-Vitals dos usuários reais, respeite a privacidade e as configurações do sistema - e sua interface será confortável e confiável em qualquer dispositivo móvel.