Olá, pessoas, tudo bem com vocês? Espero sinceramente que sim!
Quando a Apple apresentou o iPhone Duo, o primeiro iPhone que dobra, a primeira pergunta que me veio à cabeça foi bem prática: “e agora, vou ter que desenhar quantas versões de cada tela?”. Um aparelho que fecha, abre, fica de pé na mesa e ainda dobra pela metade parece pedir um layout para cada situação.
A boa notícia é que não. O design para iPhone Duo pede menos telas novas e mais uma mudança na forma de pensar o layout. Neste artigo eu explico, de um jeito simples, o que muda nesse aparelho e como adaptar uma interface para ele. O texto serve tanto pra quem trabalha com design quanto pra quem só está curioso com a novidade.
Primeiro, entenda o aparelho
O iPhone Duo tem duas telas. Fechado, você usa a tela externa, que é mais larga e mais baixa do que a de um iPhone tradicional e cabe confortavelmente na mão. Aberto, ele revela a maior tela interna que um iPhone já teve, ideal pra ler, assistir e trabalhar, e ainda cabe no bolso. No meio fica uma dobradiça, e cada tela tem a sua própria câmera frontal.
O mais interessante são as posições, que a Apple chama de poses. Dá pra segurar o aparelho parcialmente dobrado, como um livro; apoiar na mesa como um mini notebook, com a tela interna virada pra você; ou deixar de pé, apoiado nas bordas. Ou seja, o mesmo app pode aparecer em tamanhos e formatos muito diferentes ao longo do dia.
A regra de ouro: não desenhe por pose, desenhe para redimensionar
Aqui está o ponto mais importante do design para iPhone Duo, e ele é contraintuitivo. Você não deve criar um layout específico para cada pose. A própria Apple desaconselha larguras fixas, breakpoints ligados a uma tela específica ou qualquer medida amarrada a um aparelho.
Em vez disso, a recomendação é pensar em apenas duas classes de tamanho: largura compacta para a tela externa e largura regular para a tela interna. A partir daí, o layout se organiza com margens de layout e safe areas (as áreas seguras da tela) e se ajusta ao espaço disponível.
Eu gosto de pensar nisso como água num copo: a interface toma a forma do recipiente, em vez de ser recortada para cada um. Se o seu app já usa componentes nativos e foi pensado para ser redimensionável, ele já sai na frente. Grande parte da adaptação acontece automaticamente.
A grande novidade: os controles foram para a lateral
Essa é a mudança que mais salta aos olhos. Como a tela externa é larga e baixa, colocar barras no topo e na base roubaria espaço vertical precioso. A solução foi mover os controles para a lateral direita, onde o polegar alcança com facilidade.
Nessa coluna lateral ficam a Dynamic Island, a nova status bar, a toolbar (incluindo o botão de voltar) e a tab bar. O resultado é uma área contínua para o conteúdo à esquerda, com proporções parecidas às de um iPhone tradicional.
A única pose que mantém as barras horizontais é a tela interna na vertical (retrato), porque ali sobra espaço na altura. Em todas as outras situações, os controles vivem na lateral.
Como os seus controles se reorganizam
Se você já tem um app de iPhone, a lógica é bem previsível:
- Itens da toolbar superior vão para o topo da coluna lateral, começando pela navegação principal (Voltar, Fechar) e depois pelas ações de destaque (como Concluído).
- Itens da toolbar inferior vão para a base da coluna.
- A tab bar continua alinhada embaixo.
- Itens largos demais, como botões só com texto ou um segmented control, ficam na barra de navegação horizontal, porque não cabem na coluna.
Isso tem uma consequência direta no seu trabalho: prefira ícones a botões só com texto e dê sempre um título e um símbolo a cada item. O sistema escolhe a melhor representação conforme o contexto e usa o título quando o item vai para o menu de overflow.
E sim, existe overflow. Essa coluna é compartilhada com elementos do sistema, como as Live Activities. Quando falta espaço, os controles recolhem para o menu de reticências. Por isso vale definir prioridades: ações frequentes, como “Escrever” no Mail ou “Nova nota” no Notas, e itens com badges devem ser os últimos a sair de cena.
O layout fica assimétrico (e tudo bem)
Com os controles numa só borda, centralizar o conteúdo na tela inteira deixa de fazer sentido: parte dele ficaria escondida atrás da coluna. A maior parte do conteúdo precisa de um deslocamento, e quem usa as safe areas horizontais ganha isso de graça.
Ainda há espaço para a largura total, em interfaces visuais e imersivas que não fazem scroll, como a Calculadora. Também dá pra combinar as duas abordagens: uma imagem de fundo ou um cabeçalho de ponta a ponta, com o conteúdo rolável recuado. A regra é simples: nenhum elemento interativo pode ficar coberto pelos controles.
A dobra também é design
Quando o iPhone Duo fica parcialmente dobrado, a tela faz uma curva no centro, e tocar num botão exatamente ali é desconfortável. Por isso a Apple define regiões reservadas: áreas que o conteúdo evita ou às quais os componentes se adaptam. São elas a câmera externa (sempre presente, que se expande na Dynamic Island), a câmera interna (só quando está ativa) e a região da dobra.
Na prática, a curva vira um divisor natural do layout. Textos e imagens se afastam do centro para ficarem legíveis, e botões vão para as laterais. Componentes nativos como sheets, alertas e menus já fazem esse desvio sozinhos. Mais um motivo pra usar o que o sistema oferece antes de inventar componentes próprios.
Alguns cuidados que fazem diferença:
- Elementos interativos ficam fora da dobra, mas conteúdo rolável pode passar por ela sem problema.
- Em grids, prefira um número par de colunas, para o conteúdo se dividir de forma limpa.
- Evite mudanças radicais. Mova só o necessário: um controle que pula de lugar quando a pessoa dobra o aparelho é difícil de reencontrar.
A tela interna não é um iPhone esticado
Esse é o erro mais tentador: pegar o layout do iPhone e simplesmente esticá-lo. A tela interna merece mais do que isso, e a Apple aponta três caminhos:
- Split view: mostrar dois níveis da hierarquia ao mesmo tempo. No Mail, a tela externa mostra a lista ou o e-mail; aberto, mostra os dois lado a lado.
- Reorganizar o conteúdo: uma lista empilhada que vira duas colunas quando ganha largura, como faz o app Música.
- Tab bar como sidebar: funciona para apps densos em informação, como o Saúde.
Seja qual for a escolha, há uma regra que não se negocia: a hierarquia e as funções têm de ser as mesmas por dentro e por fora. As pessoas abrem e fecham o aparelho o tempo todo, às vezes no meio de uma tarefa. Se uma função só existe numa pose, o app deixa de ser previsível.
O mesmo vale para o único layout “especial” que a Apple sugere considerar: com o aparelho apoiado na mesa, a mídia fica em cima e os controles numa base estável embaixo, ótimo pra usar sem as mãos. Se você fizer esse layout, ele precisa ter os mesmos controles e a mesma hierarquia das outras poses.
Dois apps lado a lado
O iPhone Duo também traz um jeito novo de multitarefa: basta arrastar um app para o lado e a tela se divide 50/50, com cada metade funcionando de forma independente. Aqui os controles ficam sempre na borda externa de cada app. Quem está à esquerda tem os controles na esquerda, longe do centro e perto do polegar.
Para quem desenha, isso confirma tudo o que vimos até aqui. O seu app pode aparecer na metade esquerda, com os controles do lado oposto ao habitual. Só um layout baseado em safe areas, e não em posições fixas, sobrevive bem a esse cenário.
O que levar para o seu próximo projeto
Se eu tivesse que resumir o design para iPhone Duo numa lista curta, seria esta:
- Pense em duas classes de tamanho, compacta e regular, e não em telas específicas.
- Use margens e safe areas; esqueça larguras fixas.
- Dê título e símbolo a cada ação e defina prioridades para o overflow.
- Mantenha elementos interativos fora da dobra.
- Use a tela interna para mostrar mais, não para esticar.
- Garanta as mesmas funções em todas as poses.
Um aparelho novo que premia o básico bem feito
O que mais me chama a atenção no iPhone Duo é que ele não premia quem faz a interface mais mirabolante. Premia quem faz o básico bem: layouts flexíveis, componentes nativos, hierarquia clara e consistência. Quem já projetava pensando em redimensionamento vai sentir que o trabalho está quase pronto. Quem ainda desenha cada tela em tamanho fixo vai sentir o aparelho dobrar mais do que o layout.
No fim das contas, a lição vale para muito além de um iPhone que dobra: uma boa interface não depende do formato da tela, se adapta a ele. E esse talvez seja o melhor exercício que um aparelho novo pode nos dar.
Até o próximo artigo!
