Human Interface Guidelines e Material Design 3: um app, duas plataformas
Usuário de iPhone e usuário de Android esperam comportamentos diferentes. Veja como respeitar as diretrizes de cada plataforma sem manter dois apps.
Por Equipe We Codex3 min de leitura
Um app que parece "estrangeiro" no celular do usuário perde confiança. O botão de voltar no lugar errado, um seletor de data que não se parece com o do sistema, gestos que não funcionam como de costume. A Apple tem as Human Interface Guidelines; o Google, o Material Design 3. Respeitar as duas é parte do acabamento.
O que muda entre as plataformas
- Navegação: no iOS, voltar com gesto da borda esquerda; no Android, gesto ou botão do sistema.
- Componentes: seletores, alertas e menus têm aparência e comportamento próprios.
- Tipografia: San Francisco no iOS, Roboto (ou a fonte da marca) no Android.
- Feedback de toque: destaque sutil no iOS, ondulação (ripple) no Android.
- Hierarquia de ações: posição de botões principais e de menus.
Um código, dois sotaques
No React Native, a base é única, mas detalhes se adaptam com Platform.OS ou componentes nativos de cada sistema. A identidade da marca — cores, tipografia de títulos, ilustrações — permanece; o comportamento conversa com o sistema.
O que é igual nos dois
- Áreas de toque generosas (44pt / 48dp).
- Respeito às áreas seguras (Safe areas no React Native: notch, Dynamic Island e barra de gestos).
- Suporte a tema escuro (Dark mode no app: tema do sistema, contraste e imagens).
- Acessibilidade com leitores de tela (Acessibilidade em apps: VoiceOver e TalkBack sem mistério).
Por que importa para o negócio
Apps alinhados às diretrizes têm menos rejeição nas lojas (Rejeição na App Store: os motivos mais comuns e como evitar) e menos usuários confusos no suporte.
A We Codex desenvolve apps com acabamento nativo nas duas plataformas. Veja aplicativos nativos ou fale com a gente.
- iOS
- Android
- UX/UI
- React Native
Resolver de vez, com quem faz isso todo dia
Tem um app em mente ou um app que precisa ficar mais rápido?
Este artigo mostra o caminho. A implementação sob medida — o detalhe que muda o resultado no seu caso — é o trabalho da We Codex, empresa de engenharia do grupo Wocom.
Continue lendo
Tudo sobre Mobile- Ler artigo
Mobile3 min
Safe areas no React Native: notch, Dynamic Island e barra de gestos
Conteúdo escondido atrás do notch, botões em cima da barra de gestos. Veja como tratar safe areas no React Native em iPhone e Android.
- Ler artigo
Mobile3 min
Dark mode no app: tema do sistema, contraste e imagens
O app ignora o tema escuro do sistema — ou adota, mas com textos ilegíveis e imagens com fundo branco. Veja como fazer dark mode direito em apps.
- Ler artigo
Mobile3 min
Rejeição na App Store: os motivos mais comuns e como evitar
O app ficou pronto e a Apple recusou. Os motivos de rejeição mais comuns na App Store e como se preparar para aprovar de primeira.