design-para-iphone-duo

Projetando para iPhone Duo

Visão Geral

Fonte: Apple Human Interface Guidelines, "Designing for iPhone Duo" (nova página, 9 de setembro de 2026). https://developer.apple.com/design/human-interface-guidelines/designing-for-iphone-duo

Princípio central: um único aplicativo que redimensiona fluidamente em duas telas e muitas poses. Não projete um layout por pose; use classes de tamanho (largura compacta = tela externa, largura regular = tela interna) e deixe os componentes padrão do sistema fazerem a adaptação. Todas as diretrizes normais do iOS HIG ainda se aplicam.

Busque a página acima quando precisar da redação exata ou da API do desenvolvedor para uma regra.

O hardware em um parágrafo

Tela externa (usada fechada): mais larga e mais baixa que outros iPhones, câmera fixa em um canto e sempre visível. Tela interna (usada aberta): câmera escondida atrás da tela até ser ativada. Uma dobradiça central permite poses de livro, plana e apoiada na borda. Barras de ferramentas, barras de guias, barra de status e a Ilha Dinâmica ficam na lateral (eixo vertical) em todos os lugares, exceto na tela interna em retrato.

Lista de verificação rápida

Layout

• Construa para redimensionar: classes de tamanho, margens de layout, insets de área segura. Sem larguras fixas, nada vinculado a uma única tela.
• Mesma funcionalidade e estado em ambas as telas e em todas as poses. A tela interna pode adicionar um nível extra de hierarquia (Mail: lista ou mensagem quando fechado, ambos lado a lado quando aberto).
• Respeite as regiões reservadas: câmera externa (sempre, cresce na Ilha Dinâmica), câmera interna (apenas quando ativa), região de dobra (apenas quando parcialmente aberto). Use ReservedRegion (SwiftUI) / UIView.ReservedRegion (UIKit) para componentes personalizados.
• Ao dobrar: prefira contêineres auto-adaptáveis (split views equalizam larguras dos painéis), use um número par de colunas de grade, faça pequenos ajustes, nunca uma reorganização dramática.
• Split views: expandem na tela interna, colapsam para um painel na tela externa, automaticamente.
• Visualizações de arranjo (ArrangementView / UIArrangementViewController): duas visualizações, primária + secundária. Split (lado a lado ou empilhado, a partir de layouts tipo HStack/VStack) ou overlay (em camadas, a partir de layouts tipo ZStack). Mantenha os contêineres de navegação fora deles.

Controles verticais

• Mantenha o posicionamento lateral do sistema; em geral, não o substitua.
• A área de conteúdo é assimétrica: use áreas seguras para que os controles laterais (incluindo os de outro aplicativo no Split View) nunca cubram o conteúdo. Os controles permanecem no mesmo lado em idiomas RTL.
• Ordem da barra de ferramentas, de cima para baixo: navegação primária (Voltar, Fechar), depois ações proeminentes (Concluído), depois os grupos restantes como estão.
• O overflow vai de baixo para cima por padrão; defina a prioridade de visibilidade (ToolbarItemVisibilityPriority / UIBarButtonItemVisibilityPriority) para que ações frequentes (Compor, Nova Nota) e itens com emblemas permaneçam visíveis.
• Agrupe itens com ToolbarItemGroup / UIBarButtonItemGroup; nunca adicione espaçamento fixo manual.
• Cada item de barra de ferramentas não textual recebe um título e um símbolo. Minimize botões apenas com texto (eles permanecem em uma barra horizontal).
• Espaço apertado: visualizações focadas em navegação comprimem a barra de ferramentas no overflow (padrão); visualizações focadas em tarefas minimizam a barra de guias (ToolbarVerticalCompressionBehavior / UIVerticalBarCompressionBehavior).
• Use o menu de overflow do sistema; reticências são apenas para overflow.
• Controles que pertencem a um painel não final permanecem próximos a esse painel (os controles da lista do Mail ficam acima da lista).
• UIs imersivas e sem rolagem podem ocupar a largura total se nada colidir com a Ilha Dinâmica ou a barra de status (Calculadora vai de 5 colunas x 4 linhas).

Jogos

• Jogável em todas as poses. Bloqueio de orientação é aceitável, mas preencha a tela. Mantenha o texto e os tamanhos de controle consistentes. Prefira mudar a proporção de aspecto em vez de letterbox/pillarbox; se inevitável, preencha o preenchimento com arte.

Das palestras técnicas da Apple

Detalhes das três palestras técnicas sobre Duo que a página HIG não explicita (111466 Design for iPhone Duo, 111462 Raise the bar with iPhone Duo, 111463 Strike a pose with adaptive layouts).

Comportamento do sistema para projetar em torno

• Tela externa: os controles ficam no lado direito para alcance do polegar direito. A Ilha Dinâmica se expande verticalmente conforme as Atividades ao Vivo chegam e compartilha a faixa lateral com as barras do aplicativo. Quando não há espaço, os itens do aplicativo são recolhidos automaticamente no overflow.
• Parcialmente dobrado (livro): texto, imagens e elementos interativos se afastam da curva. Na dobra em retrato, os elementos interativos se movem para a metade inferior.
• Multitarefa com Split View: arraste um aplicativo para o lado usando o gesto de início, resultando em uma divisão uniforme de 50/50. Os controles de cada aplicativo ficam em sua borda externa.
• Picture in Picture pode ser fixado no topo; o aplicativo abaixo redimensiona verticalmente e o vídeo preenche metade da tela quando dobrado.
• Planilhas: na tela externa, as barras de ferramentas da planilha ficam verticais. Na tela interna, as planilhas são centralizadas com barras horizontais. Quando dobradas, as planilhas deslizam para fora da dobra. Com preferredPlacement, uma planilha colocada à esquerda não tem barra vertical e uma à direita ganha uma.
• Evitação de dobra integrada (planilhas, alertas, menus, botões de barra de ferramentas e mais) empurra os elementos interativos para fora da dobra. Conteúdo rolável não precisa evitar a dobra.

Optando por barras verticais

1. Recompile com o SDK mais recente.
2. Use as barras pertencentes a contêineres de navegação: SwiftUI .toolbar em NavigationStack, NavigationSplitView ou TabView; itens UIKit definidos em um controlador de visão dentro de UINavigationController/UITabBarController. Conteúdo personalizado de UIToolbar/UINavigationBar/UITabBar não é movido.

• Apenas contêineres na borda da tela ficam verticais. Em uma split view, apenas a coluna de detalhes o faz; inspetores não têm sua própria barra vertical.
• Mapeamento: itens da barra de ferramentas superior vão para o topo da faixa, itens inferiores para a base, e a barra de guias permanece alinhada na base. Espaçadores flexíveis têm altura zero; espaçadores fixos mantêm seu tamanho.
• Voltar/Fechar: automático com um controlador de navegação. Personalizados usam .cancellationAction (SwiftUI) ou um item principal com leftItemSupplementsBackButton = false (UIKit). Ações proeminentes usam topBarPinnedTrailing (SwiftUI) ou pinnedTrailingGroup (UIKit).

O que vai vertical, o que fica horizontal

• Barras verticais têm largura fixa e altura flexível, portanto são adequadas para itens apenas com símbolo. Itens com um ícone vão verticais; itens apenas com texto (Editar, controles segmentados, botões de texto largos) permanecem na barra de navegação horizontal.
• Substitua com a nova API AxisBehavior: use horizontal-only para um item que se transforma entre símbolo e texto (um Select personalizado; o botão Editar do sistema lida com isso sozinho), e vertical-preferred para uma visualização personalizada que tem uma forma vertical (por exemplo, uma bússola).
• Transforme itens de texto e símbolo em apenas símbolo com um emblema (API de emblemas do iOS 26), por exemplo, uma contagem de caixa de entrada. Mantenha o texto se ele carrega informações reais (um total de carrinho).
• Barras de acessório do teclado permanecem anexadas ao teclado.
• Visualizações personalizadas: ajuste a largura fixa ou forneça um layout vertical. Leia toolbarVerticalEdge (valor de ambiente ou trait), que é nil quando as barras não podem ser verticais.
• Barras verticais não têm efeito de borda de rolagem por padrão. Elas recebem um fundo apenas quando Reduzir Transparência está ativado, portanto o conteúdo personalizado deve permanecer legível de qualquer forma.
• Para optar por não participar (um aplicativo de página única e pesado na base, como Calculadora, ou uma planilha com apenas um botão Fechar), use toolbarVerticalBehavior / preferredVerticalBarBehavior. Uma planilha sem barra vertical para um pouco antes da câmera.
• Compressão por visualização: toolbarCompressionBehavior. A prioridade de visibilidade pode ser alta, baixa ou personalizada; defina-a primeiro por grupo, depois por item.

Padrões de layout

• Tela externa: a maior parte do conteúdo precisa de um deslocamento para não ficar escondido atrás dos controles, o que o alinhamento aos insets de área segura horizontal faz para você. Centralize na tela inteira apenas para UI imersiva e sem rolagem onde nada interativo fica sob as barras. Uma abordagem mista é um fundo de largura total com conteúdo de rolagem com inset, mantendo todos os elementos interativos dentro da área com inset.
• Tela interna, para não ser apenas um aplicativo de iPhone esticado: use uma split view, um layout empilhado que se torna 2 colunas quando largo (Música), ou, para aplicativos com muitos dados, a barra de guias mostrada como uma barra lateral (Saúde).
• Layout opcional para pose de mesa (laptop): mídia no topo, controles na metade inferior estável. Deve manter todos os controles e a mesma hierarquia.
• Deslocamento: mova um elemento para fora de uma região reservada para a região que se adequa ao seu propósito. Escolha o escopo: mova um elemento sozinho se ele fica sozinho, mova elementos relacionados juntos e não mova coisas para longe de sua origem. Na pose de livro, os alertas vão para o lado final, perto de onde reaparecerão quando fechados. Na pose de mesa, o conteúdo de relance vai para o topo e os controles tocáveis vão para a base. A pesquisa permanece sobre a visão que pesquisa. Para uma grade, mantenha as margens externas e alargue a calha na dobradiça (Fitness).
• Split views do sistema equalizam para 50/50 quando dobradas (Lembretes).

API de região reservada

• SwiftUI: reservedRegion em GeometryProxy (de GeometryReader ou onGeometryChange). UIKit: reservedRegion em UIView. Use .frame para layout.
• Existem dois tipos. Uma região de divisão (a dobra) está ativa apenas quando dobrada e tem largura zero quando plana. Uma região de oclusão (a câmera FaceTime interna) está ativa apenas quando a câmera está ligada.
• Regiões ativas são retornadas por padrão; use includeInactive para planejar com antecedência (por exemplo, escolha uma contagem par de colunas sempre que uma região de divisão existir).
• Para aplicativos centrados na câmera, mantenha o conteúdo e os controles principais longe da câmera interna.
• O estado da dobra como entrada de interação é abordado na palestra Leverage multiple displays and scenes on iPhone Duo, que não está nesta skill.

Visualizações de arranjo (iOS 27.1)

• SwiftUI: ArrangementView(primary, secondary) dentro de um NavigationStack, estilizado com .arrangementViewStyle(.split) (o padrão) ou .overlay. Use .split.axes(...) para limitar a direção da divisão; se não puder dividir ao longo do eixo principal, mostra apenas a visualização primária.
• UIKit: UIArrangementViewController como raiz do controlador de navegação, updateArrangement com UISplitArrangement.
• Overlay: empilhado quando plano, lado a lado quando dobrado. Leia overlayArrangementZIndex (SwiftUI) ou state(for:) então .zIndex (UIKit), para alternar entre visualizações secundárias recolhidas e expandidas.
• Escolhendo: siga os padrões existentes (HStack/VStack torna-se split, ZStack torna-se overlay). Caso contrário, use overlay para uma relação de primeiro plano/fundo onde obscurar parcialmente o conteúdo rolável é aceitável (Leitor de Acessibilidade), e split para principal/detalhe onde nenhuma visualização pode ser obscurecida (Transcrições do Podcasts).
• Não coloque contêineres de navegação dentro de um ArrangementView e não coloque um ArrangementView dentro de List/ScrollView.

Auditoria de prontidão (das palestras)

1. Recompile com o SDK mais recente.
2. Audite barras: contêineres do sistema, ordem dos itens, símbolos com títulos.
3. Torne itens personalizados prontos para vertical.
4. Defina prioridades de overflow.
5. Audite layouts centralizados: cada um deve se tornar 2 colunas, ser deslocado ou usar um ArrangementView?
6. Adote a API de região reservada para controles de alta prioridade e layout manual.

Camada de design Duo (da skill apple-design)

A HIG diz o que se adapta. Esta seção aplica as diretrizes de interface fluida e princípios de design da Apple (WWDC Designing Fluid Interfaces, Principles of Great Design) a como deve parecer no Duo. Estes são princípios aplicados, não regras HIG. Para o kit de ferramentas de movimento completo (projeção, rubber-banding, handoff de velocidade), carregue também a skill apple-design de Emil Kowalski (de emilkowalski/skills) e traduza seus exemplos da web para SwiftUI/UIKit.

Movimento de dobra e redimensionamento

• Dobrar é um gesto contínuo e conduzido pelo usuário. As alterações de layout que o seguem (larguras de painel se equalizando, refluxo de grade, conteúdo saindo da região de dobra) devem rastrear a dobradiça suavemente e ser interrompíveis: uma pessoa pode parar ou reverter no meio da dobra, então anime sempre a partir do valor atual na tela, nunca