Apps para dobráveis pedem layouts responsivos, não telas esticadas

O momento de virada

Os dobráveis existem no mercado desde 2019 com o Samsung Galaxy Fold, mas foram essencialmente um fenômeno Android - e como a maior parte dos smartphones nos EUA é iOS, poucos times de design priorizaram essa forma fator. O anúncio do iPhone Duo da Apple muda o contexto: o autor cita projeção de que o dispositivo deve capturar 25% do mercado de dobráveis até o fim de 2026, com crescimento a partir daí. Isso cria um argumento comercial para investir em layouts adaptativos, algo difícil de justificar quando poucos usuários usariam o app no formato.

Princípios centrais

O argumento do artigo é que dobráveis não são telas maiores, mas dispositivos que combinam múltiplos tamanhos de tela, proporções, orientações e posturas. As recomendações:

• Projetar para o espaço disponível, não para o aparelho: em vez de perguntar como a tela fica num Galaxy Z Fold ou iPhone Duo, perguntar o que a experiência precisa fazer quando a janela fica mais larga, estreita, alta ou dividida. Os mesmos designs devem servir celulares padrão, flip e book-style, tablets e janelas de multitarefa.
• Preservar hierarquia: o que deve se adaptar são posicionamento de navegação, densidade de conteúdo, número de colunas e tamanho de imagens. O que não deve mudar é a tarefa principal, a hierarquia de conteúdo e o modelo de navegação. No iPhone Duo fechado o conteúdo segue o padrão lista → toque → detalhe; aberto, lista e detalhes aparecem simultaneamente em panes lado a lado.
• Não esticar a UI: preencher a tela grande esticando o layout é explicitamente contraindicado pelo Android. As práticas incluem larguras máximas de conteúdo, calhas maiores entre elementos, múltiplas colunas e grids responsivos. Deve-se evitar linhas de texto muito longas (cerca de 50 caracteres), cards e modais gigantes, botões de largura total em telas de tablet e espaço vazio excessivo.
• Projetar em torno da dobradiça: a dobra pode afetar toque, leitura e espaço de layout. Conteúdo importante - botões, campos de formulário, diálogos, menus e texto crítico - não deve atravessar a dobra. Android e iOS recomendam layouts "hinge-aware", tratando a dobra como divisor natural.
• Pensar em "panes": celular tradicional é um pane principal; dobrável aberto ou tablet são dois ou mais panes relacionados. Padrões comuns: lista → detalhe (busca, mensagens, configurações), navegação → conteúdo, e conteúdo principal → controles de apoio (mídia, mapas, formulários).

Estados do dispositivo

O artigo detalha quatro estados ("poses" no iOS, "postures" no Android):

• Fechado: comporta-se como celular tradicional, usando a tela externa; priorizar informação essencial, navegação compacta e interações com uma mão.
• Aberto (plano): mais espaço nas telas internas; usar para reduzir etapas de navegação, oferecer navegação persistente e revelar um segundo pane.
• Meio-aberto (tabletop): em retrato, cria região superior (conteúdo, vídeo) e inferior (controles), como um player de vídeo da Netflix. É mais uma melhoria do que uma exigência, útil para vídeos e jogos.
• Meio-aberto (livro): em paisagem, divide as telas em esquerda e direita, servindo para leitura, lista → detalhe e até dois apps simultâneos.

Adaptar sem perder contexto

Quando o usuário muda orientação ou postura no meio de uma tarefa, a navegação, os controles e os overlays devem se adaptar preservando o contexto. Em vista compacta, usar padrões mobile (navegação inferior, pilhas, botão voltar); em expandida, navegação persistente ou rails, sem esticar padrões mobile. Sheets e diálogos compactos viram diálogos centrados, sheets de largura parcial ou painéis laterais quando expandidos. Transições de dobrado para aberto devem manter estado e posição de scroll, sem recarregar a tela inteira ou resetar navegação e formulários.

Orientação por plataforma

No iOS, as novas diretrizes da Apple para o iPhone Duo introduzem "size classes" (Compact e Regular) em vez de designs por pose, além de "reserved regions" - áreas físicas como a dobradiça e câmeras internas/externas que limitam o espaço utilizável, análogas às safe areas. No Android, as diretrizes se baseiam na janela do app, não na tela física, com "window size classes" (Compact, Medium, Expanded) e layouts edge-to-edge obrigatórios a partir do Android 15 (API 35), usando window-insets para barras de sistema, recortes de câmera, gestos e teclado.

Checklist e conclusão

O autor propõe testar o app em todas as configurações (dobrado, aberto, meio-aberto, tela dividida, retrato/paisagem) e revisar quatro frentes: layout (larguras máximas, reflow, proporções), dobra (controles fora da dobra e alcançáveis), navegação (adaptação ao espaço, manutenção do lugar do usuário) e conteúdo (legibilidade, proporção de imagens). A conclusão reforça a tese do título: dobráveis não são telas maiores - projetem para o espaço disponível, não estiquem o app para preenchê-lo.