Como desenhar para telas dobráveis sem esticar a interface
Com a chegada do iPhone Duo, telas dobráveis deixam de ser nicho Android e o UX Collective propõe um padrão: pensar em espaço disponível e não em modelo de aparelho.
Com a chegada do iPhone Duo, telas dobráveis deixam de ser nicho Android↳Android46 conteúdosAndroid push notifications com Quasar Framework, Firebase e integração com WordPressDev (Back & Front) · mai 2019O X do Xamarin Forms – O guia das funcionalidades nativas - Parte 02: AndroidDev (Back & Front) · abr 2019Modularização de AndroidDev (Back & Front) · ago 2019Ver tudo em Dev (Back & Front) → e o UX↳UX33 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025UX, IA e Front-End: quando experiência, inteligência e código se encontram para criar o futuro digitalProduto & UX · jul 2025Novidades em UX/UI para 2025: O futuro do design de experiências digitaisProduto & UX · abr 2025Ver tudo em Produto & UX → Collective propõe um padrão: pensar em espaço disponível e não em modelo de aparelho.
A decisão que ficou mais difícil de ignorar
Desde 2019, com o Galaxy Fold, telas dobráveis eram um problema de produto fácil de postergar: pouca gente usava, o público era quase todo Android, e o retorno do investimento em design/engenharia para um formato tão específico nunca fechava a conta. A designer Allie Paschal resume isso bem no UX Collective: "é difícil conseguir apoio de design e engenharia quando tão pouca gente vai usar o app nesse formato tão específico".
O que muda essa equação é a entrada da Apple no jogo com o iPhone Duo. Segundo a fonte, que cita projeção da Yahoo Finance, o aparelho deve tomar 25% do mercado de dobráveis até o final de 2026, com tendência de crescer a partir daí. Isso significa que a decisão de produto de tratar foldable como edge case perde sustentação, inclusive fora dos EUA: com a Apple entrando na disputa, a tendência é de a base de usuários de dobráveis crescer também em mercados fora do território americano.
O erro que a fonte batiza de "esticar"
A tentação mais comum, quando o time finalmente decide tratar dobráveis, é simplesmente deixar o layout mobile crescer para ocupar a tela maior quando o aparelho abre. Paschal usa um exemplo direto: as configurações de notificação do app da United ocupam a tela inteira de um Google Pixel Pro Fold aberto, com botões e textos esticados sem necessidade.
O Android é explícito sobre isso nas suas diretrizes de layout adaptativo: a orientação é usar painéis ("panes") e larguras máximas de conteúdo, não deixar o componente crescer até preencher o espaço. Na prática, isso quer dizer:
- Definir larguras máximas de conteúdo e gutters maiores entre elementos
- Usar múltiplas colunas e painéis de apoio
- Evitar linhas de texto longas (a referência é cerca de 50 caracteres por linha)
- Evitar cards, modais, bottom sheets e imagens em tamanho grande demais
- Evitar botões de largura total numa tela de tablet
O ponto central para quem desenha produto: o problema não é a tela ficar maior, é a hierarquia de informação não mudar quando o espaço muda. Um botão que ocupa a largura inteira de um phone faz sentido porque é a única ação possível na tela; o mesmo botão esticado numa tela de tablet não ganha importância, só ganha espaço vazio ao redor.
Pensar em janela disponível, não em modelo de aparelho
A pergunta certa, segundo a fonte, não é "como isso fica no Galaxy Z Fold ou no iPhone Duo", mas "o que essa experiência precisa fazer quando a janela disponível fica mais larga, mais estreita, mais alta ou dividida". É uma mudança de mentalidade: em vez de desenhar para um dispositivo específico, desenha-se para classes de tamanho.
No iOS, a Apple define isso com size classes: Compact (horizontal estreito, vertical curto) e Regular (horizontal largo, vertical alto), documentadas nas novas diretrizes de foldable da Apple. No Android, o conceito equivalente são as window size classes: Compact (phone estreito), Medium (phone maior ou foldable aberto) e Expanded (tablet ou foldable grande), descritas na documentação do Android para janelas adaptativas.
Soma-se a isso o conceito de reserved regions (iOS) e window insets (Android): áreas físicas do aparelho, como a dobradiça (hinge) e as câmeras internas/externas, que reduzem o espaço realmente utilizável. Ignorar essas áreas é o motivo pelo qual botões, campos de formulário, diálogos e menus não devem ficar posicionados sobre a dobradiça: além do vinco físico ser visível em muitos modelos (a fonte cita a dobradiça do Galaxy Z Fold 4 registrada pelo The Verge), colocar controle crítico ali cria fricção de toque.
Painel substitui tela cheia: o modelo de "panes"
O modelo mental que a fonte propõe para organizar tudo isso é pensar em panes (painéis): um phone tradicional tem um painel primário; um foldable aberto ou um tablet comporta dois ou mais painéis relacionados. Os padrões mais comuns:
- Lista → detalhe: resultados de busca, mensagens, configurações. É o caso do Slack no iPhone Duo aberto, mostrado nas imagens da própria Apple: fechado, o app segue o padrão de lista com toque para abrir o detalhe; aberto, lista e detalhe aparecem lado a lado, sem precisar navegar.
- Navegação → conteúdo: quando navegação persistente passa a valer a pena numa tela maior.
- Conteúdo primário → conteúdo/controles de apoio: útil para mídia, mapas ou formulários.
Spotify e Airbnb aparecem na fonte como exemplos de app adaptativo através de formatos: a navegação e o bottom sheet do Spotify mudam de posição e largura entre o Pixel Pro Fold fechado e aberto, sem resetar o estado do usuário. Esse último ponto é o que separa um bom redesign adaptativo de um ruim: a transição de dobrado para aberto precisa preservar contexto, sem reload de tela cheia, sem perder posição de scroll e sem resetar campo de formulário.
Estado do dispositivo, não só tamanho de tela
A parte que costuma escapar de quem só pensa em "telas grandes e pequenas" é que um foldable tem estados de uso diferentes, chamados de poses no iOS e postures no Android, que vão além de aberto/fechado:
- Fechado: comportamento de phone comum, com navegação compacta e interação de uma mão.
- Aberto (plano): uso do formato livro/concha, com dois painéis.
- Meio-aberto em mesa (tabletop): dobrado em portrait, com uma região superior para conteúdo (vídeo, por exemplo) e inferior para controles. A fonte cita o Netflix como caso plausível: vídeo em cima, controles de reprodução embaixo.
- Meio-aberto em livro (book): dobrado em landscape, criando duas regiões lado a lado, boa para leitura ou para rodar duas experiências simultâneas.
O ponto prático aqui é de produto, não só de UI: nem toda experiência precisa suportar todos os estados. A fonte é clara que o modo tabletop é reforço, não obrigação, mais relevante para quem tem vídeo ou jogo como núcleo do produto. Isso poupa o time de tentar cobrir estado que não agrega valor real ao fluxo.
O que isso muda pra quem desenha produto no Brasil
A pergunta que vale levar pro próprio roadmap não é "nosso app funciona num dobrável", mas: quantos dos nossos componentes hoje assumem uma largura de tela fixa, em vez de reagir a uma classe de tamanho? Bottom sheet, navegação inferior e cards de largura total são os primeiros suspeitos, porque são os padrões mobile mais comuns e os que mais sofrem quando simplesmente esticados.
O checklist que a fonte sugere pressionar antes de fechar o design é direto: o conteúdo tem largura máxima definida? Botões e diálogos evitam a dobradiça? A navegação preserva a posição do usuário ao dobrar ou desdobrar? Nenhuma dessas perguntas exige comprar um foldable físico: o próprio Android Studio tem um Virtual Device Manager com Pixel de diferentes formatos para simular isso ainda em prototipagem.
Com a Apple entrando nesse mercado e a projeção de 25% do mercado de dobráveis até 2026 citada pela fonte, o argumento de "poucos usuários usam isso" perde força mais rápido do que a maioria dos roadmaps está preparada para admitir.
Fonte 1: UX Collective (https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac?source=rss----138adf9c44c---4)
Title: Please don’t stretch your app for foldables
URL Source: https://uxdesign.cc/please-dont-stretch-your-app-for-foldables-a62f1f8230ac?source=rss----138adf9c44c---4
Published Time: 2026-09-17T21:34:11Z
Fonte: UX Collective
Este artigo foi escrito por Marina Pires, colunista de produto digital. Conteúdo produzido por agente de IA da redação iMasters, sob revisão editorial humana. Saiba como produzimos no expediente.
Especialista virtual de produto digital. Vive na fronteira entre discovery e delivery: como um produto foi concebido, que decisão de produto está por trás de um lançamento, o que a pesquisa dizia antes de o roadmap decidir. Desmonta produto dos outros como quem abre relógio: por que esse fluxo é assim, o que esse redesign diz da estratégia, o que dá pra levar pro seu produto. Cobre o território de Marty Cagan, Teresa Torres e Lenny Rachitsky para o leitor BR, que quase não tem referência de produto em português.
