Princípios básicos da combinação de imagens e texto em dispositivos móveis
Em dispositivos móveis, o tamanho da tela é limitado e o tempo de navegação do usuário é fragmentado. Portanto, a combinação de imagens e texto precisa ser concisa e eficiente. As imagens devem auxiliar na expressão das informações principais, e não apenas servir como decoração; o texto precisa ser claro e conciso, evitando sobrecarregar a imagem com muito texto, o que dificultaria a leitura. Geralmente, a proporção da imagem na tela não deve exceder 50%, e as informações textuais importantes devem ser colocadas abaixo ou ao lado da imagem para garantir a legibilidade.
Formas comuns de combinação e cenários de aplicação
Disposição vertical (imagem em cima, texto em baixo)
É a forma mais comum, com a imagem em cima e o texto em baixo, adequada para exibição de produtos, instruções passo a passo, etc. A imagem atrai a atenção primeiro, e o texto explica os detalhes em seguida. É importante que a altura da imagem não seja excessiva, para evitar que o usuário precise rolar muito para ver o texto.
Disposição horizontal (imagem e texto lado a lado)
Em telas de celular mais largas (como phablets ou no modo paisagem), a disposição horizontal permite exibir imagem e texto simultaneamente. No entanto, é necessário controlar o comprimento do texto, sendo geralmente usado para conteúdos curtos, como ícones com títulos ou fotos com descrições breves.
Texto sobreposto à imagem
Comum em banners ou destaques importantes. É necessário garantir contraste suficiente entre o texto e o fundo da imagem, podendo-se usar sobreposições semitransparentes, sombras no texto ou posicionar o texto no terço inferior da imagem. Evite textos longos, geralmente não mais que 20 palavras.
Detalhes a serem observados
- Velocidade de carregamento da imagem: Em redes móveis instáveis, as imagens devem ser comprimidas para um tamanho razoável (recomendado abaixo de 100 KB), usando formato WebP ou técnica de carregamento preguiçoso (lazy loading) para não afetar a velocidade de abertura da página.
- Tamanho do texto e espaçamento entre linhas: O texto do corpo deve ter no mínimo 16px, com espaçamento entre linhas de pelo menos 1,5 vezes; textos em botões ou etiquetas devem ser maiores. O texto dentro de imagens (como em pôsteres) precisa ser legível em telas pequenas.
- Área de clique: Se a imagem ou o texto forem clicáveis, a área do botão deve ter pelo menos 44x44px para evitar toques acidentais.
- Evitar sobreposição de texto e imagem: A menos que seja um design especial, é melhor separar o texto da imagem para reduzir a poluição visual.
Recomendações práticas de verificação
Antes de lançar o site, é recomendável visualizar a página em diferentes tamanhos de celular (como 4,7 polegadas, 6,1 polegadas, 6,7 polegadas) para verificar se a imagem está distorcida, se o texto é exibido completamente e se o espaçamento entre imagem e texto é adequado. Também é possível usar as ferramentas de desenvolvedor do navegador para simular o efeito em dispositivos móveis. Através da experiência real, é possível garantir que a combinação de imagem e texto atinja o efeito desejado.
Em resumo, a combinação de imagem e texto em dispositivos móveis deve ter como objetivo permitir que o usuário obtenha informações rapidamente, evitando design excessivo. Controlar razoavelmente a proporção, posição e desempenho de carregamento de imagens e texto pode melhorar efetivamente a experiência de leitura do site corporativo.
