# Zonas seguras nas redes sociais: o que a app tapa no teu design

[Canonical HTML page](https://gradiently.design/pt-pt/guide/social-media-safe-zones)

Cada plataforma desenha botões, nomes e legendas por cima do teu design. Aqui tens uma referência única de onde caem, com margens que podes incluir em todos os modelos.

## The short version

- As zonas seguras das redes sociais são as áreas de um design que a interface da própria app nunca tapa, em qualquer telemóvel.
- Num formato vertical de 1080×1920, uma regra de trabalho comum é manter o texto fora dos cerca de 250 píxeis de cima e dos 250 de baixo de um story.
- Os Reels, o TikTok e o YouTube Shorts têm uma legenda ao fundo e botões ao longo do lado direito, por isso precisam de uma margem inferior maior e também de margem à direita.
- Os banners têm as suas próprias zonas tapadas: a foto de perfil sobrepõe-se ao canto inferior esquerdo dos cabeçalhos do LinkedIn e do X, e os telemóveis cortam os lados das capas do Facebook.
- As interfaces mudam com as atualizações e variam entre telemóveis, por isso trata qualquer valor de zona segura como um guia generoso e confirma publicando primeiro em privado.

As **zonas seguras das redes sociais** são as partes de um post que nenhuma interface tapa. Nos formatos verticais, o perigo está no topo, onde ficam nomes e barras de progresso, no fundo, onde ficam legendas e campos de resposta, e, nos Reels, no TikTok e nos Shorts, na margem direita, por onde correm os botões de gostar e partilhar. Deixa o fundo preencher o enquadramento todo e mantém cada palavra, logótipo e rosto dentro da área segura.

## Zonas seguras para vídeo vertical e stories

Todos estes formatos partilham o enquadramento de 1080×1920, mas as sobreposições diferem. Os valores abaixo são margens de trabalho, arredondadas por excesso de propósito, tiradas da forma como cada app organiza a interface e das indicações que as plataformas dão aos anunciantes. Não são medições oficiais, e todas as apps mexem nisto entre versões e formatos de ecrã.

| Formato | Topo | Fundo | Lados |
| --- | --- | --- | --- |
| Story do Instagram | 250 px | 250 px | Cerca de 60 px de cada lado |
| Stories do Facebook e do WhatsApp | 250 px | 250 px | Cerca de 60 px de cada lado |
| Reel do Instagram | 250 px | Cerca de 420 px | Cerca de 120 px à direita |
| TikTok | Cerca de 150 px | Cerca de 480 px | Cerca de 140 px à direita |
| YouTube Shorts | Cerca de 150 px | Cerca de 420 px | Cerca de 140 px à direita |
| Story do Snapchat | Cerca de 250 px | Cerca de 300 px | Cerca de 60 px de cada lado |

Margens de trabalho num enquadramento de 1080×1920. Generosas de propósito: o custo de ser demasiado cuidadoso é um pouco de espaço vazio, o de ser descuidado é um título escondido.

Se só fores lembrar uma regra, que seja esta: em qualquer vídeo vertical, mantém o conteúdo importante dentro de uma caixa central com cerca de 800 píxeis de largura e 1150 de altura, a começar a uns 250 píxeis do topo. Essa caixa respeita todas as margens da tabela. Há mais detalhe por plataforma em [tamanho do story do Instagram](https://gradiently.design/pt-pt/guide/instagram-story-size), [tamanho da capa do TikTok](https://gradiently.design/pt-pt/guide/tiktok-cover-size) e [tamanho da capa do YouTube Shorts](https://gradiently.design/pt-pt/guide/youtube-shorts-cover-size).

- Enquadramento total 1080×1920: 1080 × 1920
- Seguro em todas as apps 800×1150: 800 × 1150
- Corte da grelha 1080×1440: 1080 × 1440

O enquadramento vertical completo, a caixa que é segura em todo o lado e a fatia 3:4 que o Instagram mostra na grelha do perfil. Planeia para os três ao mesmo tempo.

## O que ocupa cada zona

Saber o que tapa cada margem ajuda a decidir o que pode ficar perto dela. Fundos, texturas e a cauda de um gradiente podem ficar por baixo da interface. Palavras, preços, logótipos e rostos não.

### Topo e fundo de um story

- Barra de progresso e foto de perfil
- Nome da conta e hora de publicação
- Botões de fechar e de menu
- Campo de resposta e botão de partilha
- Autocolantes de ligação que acrescentas na app

### Fundo e direita de um Reel ou TikTok

- Legenda, que cresce quando se toca nela
- Nome da conta e botão de seguir
- Etiqueta de áudio ou som
- Botões de gostar, comentar, partilhar e guardar
- A barra de navegação da própria app

A legenda é a traiçoeira. Uma legenda curta ocupa duas linhas, mas quando o espectador toca nela, expande-se para cima, sobre o vídeo. Se o teu texto estiver baixo no enquadramento, uma legenda longa vai tapá-lo.

Um post vertical com o título na parte superior central do enquadramento, bem afastado das margens

Texto dentro da caixa segura, mais ou menos no meio superior. Nada importante junto ao fundo ou à direita.

Um post vertical com uma lista curta mantida à esquerda e ao centro do enquadramento

Um layout de lista mantido à esquerda e ao centro, deixando a margem direita livre para os botões da app.

## Zonas seguras em banners e cabeçalhos

Os banners largos não têm botões por cima, mas têm outros dois problemas: uma foto de perfil que cobre parte da imagem e cortes diferentes em telemóveis e computadores.

| Banner | Tamanho | Manter livre |
| --- | --- | --- |
| Banner de perfil do LinkedIn | 1584×396 | Canto inferior esquerdo, onde fica a foto de perfil |
| Cabeçalho do X | 1500×500 | Canto inferior esquerdo e as margens de cima e de baixo |
| Capa do Facebook | 1640×624 | Lados exteriores nos telemóveis e a faixa inferior |
| Arte de canal do YouTube | 2560×1440 | Tudo fora da faixa central visível em todos os dispositivos |
| Capa de empresa do LinkedIn | 2256×382 | Canto inferior esquerdo, onde fica o logótipo da empresa |

Os banners são sobretudo fundo. Põe o texto ao centro e à direita, longe do avatar.

O YouTube é o caso extremo: a arte de canal é uma imagem enorme de 2560×1440, mas os telemóveis mostram apenas uma faixa estreita do meio. Os nossos guias do [banner do LinkedIn](https://gradiently.design/pt-pt/guide/linkedin-banner-size) e do [banner do YouTube](https://gradiently.design/pt-pt/guide/youtube-banner-size) mapeiam as áreas exatas.

## Os posts do feed e as miniaturas também têm zonas seguras

- **Grelha do perfil do Instagram:** os posts aparecem como mosaicos 3:4 cortados a partir do centro. Um post de 1080×1350 perde uma tira de cada lado; a capa de um Reel perde cerca de 240 píxeis em cima e em baixo. Vê o [corte da grelha do Instagram](https://gradiently.design/pt-pt/guide/instagram-profile-grid-crop).
- **Miniaturas do YouTube:** a duração do vídeo fica no canto inferior direito, por isso mantém rostos e texto longe dela.
- **Carrosséis:** os pontos ficam mesmo por baixo da imagem, mas algumas apps sobrepõem um contador de diapositivos no canto superior direito.
- **Pins do Pinterest:** os botões de guardar e o título do pin aparecem ao passar o rato e por baixo do pin, por isso deixa a margem inferior calma.

## Como incluir as zonas seguras no teu fluxo de trabalho

1. **Cria uma camada de guia uma vez** Em cada modelo, desenha a caixa segura como uma camada de guia bloqueada. Mantém-na visível enquanto desenhas e esconde-a antes de exportar.
2. **Desenha para a plataforma mais exigente** Se um design vertical for para Stories, Reels e TikTok, usa as margens do TikTok. Fica seguro em todo o lado.
3. **Deixa o fundo sangrar** As zonas tapadas continuam a mostrar o teu fundo. Leva cor e textura até todas as margens para o enquadramento nunca parecer encaixotado.
4. **Deixa um espaço para autocolantes** Se fores acrescentar um autocolante de ligação ou de sondagem na app, deixa uma área vazia no meio inferior da caixa segura.
5. **Pré-visualiza com a interface ligada** Publica para um público privado ou para amigos chegados, ou guarda um rascunho e vê-o em ecrã inteiro. É a única verificação verdadeira.

O Gradiently ajuda em duas frentes. Quando redimensionas um design para outros formatos com o Pro, cada cópia é reorganizada para a sua forma em vez de cortada, por isso só tens de empurrar o texto para dentro da caixa segura. O Mark por trás preenche o enquadramento todo, incluindo as zonas da interface, e mantém a sua área mais calma e de melhor contraste atrás do teu texto, para onde quer que o mudes. O [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata do lado da legibilidade em detalhe.

## FAQ

### O que são zonas seguras nas redes sociais?

São as partes de um post que nenhuma interface tapa. O texto, os logótipos e os rostos pertencem lá dentro; os fundos podem ir além.

### Qual é a zona segura dos Reels do Instagram?

Como regra de trabalho num enquadramento de 1080×1920, mantém o texto fora dos 250 píxeis de cima, dos 420 de baixo e dos 120 da direita, onde ficam a legenda e os botões.

### Qual é a zona segura do TikTok?

O TikTok tapa o fundo com a legenda e a etiqueta de som e a direita com os botões. Manter o texto fora dos cerca de 480 píxeis de baixo e 140 da direita de um enquadramento de 1080×1920 é um guia seguro.

### Existe uma zona segura que sirva em todas as plataformas verticais?

Sim, mais ou menos. Uma caixa central com cerca de 800 píxeis de largura e 1150 de altura, a começar a uns 250 píxeis do topo de um enquadramento de 1080×1920, fica livre em Stories, Reels, TikTok e Shorts.

### As zonas seguras mudam?

Sim. As apps redesenham as interfaces e os telemóveis têm formas diferentes, por isso trata os valores como guias generosos e pré-visualiza cada post com a interface visível.