--- title: "iPhone Duo: para onde vão as barras do seu app GoodBarber" description: "No iPhone Duo, as barras do seu app GoodBarber passam para um rail ao longo da câmera, com as suas cores: basta recompilar seu app." canonical_url: "https://pt.goodbarber.com/blog/iphone-duo-para-onde-vao-as-barras-do-seu-app-a1402/" lang: pt date: 2026-11-12 last_updated: 2026-11-12 --- # iPhone Duo: para onde vão as barras do seu app No iPhone Duo, a Apple reúne os controles em uma coluna ao longo da câmera. O sistema só monta esse rail para as próprias barras: para as de um app GoodBarber, foi preciso desenhá-lo. Uma única largura, só ícones, cápsulas com as cores do seu app: seus usuários mantêm as referências, e basta você recompilar. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) [Lesia PIETRI](https://pt.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design [Escolha a **GoodBarber** como suaFonte de notícias preferidaEscolha a **GoodBarber** como sua](https://www.google.com/preferences/source?q=pt.goodbarber.com) 12 de nov. de 2026 · 5 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98656943-68861181.jpg?v=1794301569.0733774) A tela externa do iPhone Duo é mais larga e mais baixa que a de um iPhone. A Apple tirou daí uma regra simples: a barra de navegação, a TabBar e os botões saem do alto e da parte de baixo da tela e formam uma coluna na lateral, junto com a barra de status e a câmera. A altura volta para o conteúdo, e os controles ficam ao alcance da mão. A Apple chama essa coluna de “vertical controls”. Só que o sistema só move as próprias barras. As de um app GoodBarber vêm do design system dele, e o sistema as deixa onde o app as colocou. A pergunta era, antes de tudo, de design: o que vira uma TabBar quando passa de uma linha para uma coluna, e como um app continua reconhecível numa faixa tão estreita? O rail tinha que continuar sendo o app, e não virar uma barra da Apple. ## iPhone Duo fechado: um rail ao longo da câmera ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98656943-68861182.jpg?v=1794302171.2330704) Primeira escolha de design para os apps GoodBarber: uma única largura para tudo o que entra no rail do iPhone Duo, a de um atalho, com o ícone no centro. O botão Voltar, a busca, os favoritos e cada aba da TabBar cabem no mesmo espaço, e a coluna se lê de uma vez. O rail só tem ícones; nem por isso os nomes somem, o VoiceOver lê cada um. No Eastside, o app de demonstração de uma escola de música, a coluna fica discreta e deixa as cores dos avisos em primeiro plano. Segunda escolha, a da Apple: o que estava em cima fica em cima, o que estava embaixo fica embaixo. O botão Voltar e os atalhos abrem a coluna, a TabBar a fecha. Quem conhece o app no celular não precisa reaprender nada: o mapa do app é o mesmo, só girou. ## Gire o celular, e o rail muda de lado [O iPhone Duo fechado gira para um lado e depois para o outro: o rail acompanha a câmera, os ícones ficam em pé.](https://player.vimeo.com/video/1245376868?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) Na horizontal, o iPhone Duo fechado leva o rail junto com a câmera: à direita num sentido, à esquerda no outro. Os ícones ficam em pé, e é o conteúdo que se reorganiza em volta. Esse lado pertence ao aparelho: um app em árabe ou em hebraico mantém o rail junto à câmera. De perto, é um detalhe; no uso, é o que torna o gesto natural. Numa interface, a gente nota o que resiste ao gesto. Um rail que acompanha o aparelho passa despercebido, e é exatamente isso que pedimos a ele. ## iPhone Duo aberto: o rail na horizontal, as barras na vertical [O iPhone Duo aberto passa da horizontal para a vertical: as barras deixam o rail e voltam para cima e para baixo.](https://player.vimeo.com/video/1245376869?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) Aberta na horizontal, a tela interna do iPhone Duo mantém o rail; virada na vertical, é a única posição em que as barras voltam para cima e para baixo. No Tweed & Cheviot, o app de demonstração de uma sociedade de história natural, a busca e os favoritos sobem para a barra de navegação, e a TabBar volta para baixo. A mudança poderia desorientar, e é a ordem que impede isso: o que abria o rail abre a barra, e as abas mantêm a sequência. Um controle se encontra pelo lugar que ocupa entre os outros muito mais do que pela borda em que está preso. Na vertical, a barra de navegação também fica no lugar quando você rola a tela. Se ela se escondesse, o texto passaria por baixo da hora, no canto da tela. Enquanto as referências se mantêm, a tela pode mudar de forma quanto quiser. ## Num artigo, o rail só guarda as ferramentas do texto ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98656943-68861185.jpg?v=1794301965.1678395) Num artigo, um app GoodBarber no iPhone Duo só guarda o que serve ao texto. A TabBar sai de cena, como no celular sempre que uma tela tem um botão Voltar; esse botão sobe sozinho para o topo do rail, e uma cápsula embaixo reúne as ferramentas do leitor: comentar, compartilhar, aumentar a letra, guardar para depois. Ações que andam juntas dividem a mesma cápsula. Quando o artigo abre, as cápsulas do rail mudam com um esmaecimento, no ritmo da página que chega: o rail acompanha a navegação num só movimento. Já a foto de cabeçalho sobe até o topo da tela e passa por baixo do rail. Os ícones de uma barra transparente costumam ser claros, feitos para ficar sobre uma imagem; sem fundo, acabariam brancos sobre uma página branca. Por isso cada cápsula mantém um fundo, nem branco puro nem preto puro, mas um tom suavizado, tingido da cor dos ícones, com o contraste que a acessibilidade pede. O contraste certo, e não o mais forte: um fundo matizado é mais caprichado. ## As barras do seu app, com as suas cores ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98656943-68861186.jpg?v=1794301574.289411) Num app GoodBarber, cada barra é desenhada pelo app: ela tem as próprias cores e a própria forma, e o rail as mantém. Cada cápsula pega o fundo da barra de onde veio. A forma acompanha a da sua [TabBar](https://pt.goodbarber.com/blog/tabbar-chega-uma-nova-geracao-a1247/), dos cantos retos à pílula, em todas as telas do app, inclusive naquelas em que a TabBar não aparece. Lado a lado, os rails do Eastside, do Tweed & Cheviot e do The Current não falam a mesma língua visual, e é de propósito. O motor da GoodBarber faz o resto. Ele pede ao sistema o espaço de uma barra daquele lado, que já desvia da câmera, e coloca ali as cápsulas na ordem da tela. O rail segue o design que você já tem, sem nenhuma configuração a mais. ## O que falta fazer: recompilar seu app iOS ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98656943-68861187.jpg?v=1794301575.4654186) Pelo back office, recompile seu app iOS para que ele ganhe o rail; a atualização chega aos seus usuários depois de publicada, após a revisão da App Store. Nada para redesenhar, nada para configurar. Seu app Android, sua PWA e seu app para iPad continuam como estão. Para ver o rail se mexer, abra e feche o iPhone Duo na [nossa página do iPhone Duo](https://pt.goodbarber.com/iphone-duo/?utm_campaign=iphone-duo). O que muda para o seu app, de uma tela para a outra, está no [nosso artigo de lançamento](https://pt.goodbarber.com/blog/iphone-duo-o-iphone-dobravel-o-que-muda-para-o-seu-app/). As regras da Apple e as fontes delas estão reunidas, em inglês, nas fichas [Where the bars go](https://duoapps.com/patterns/where-the-bars-go/) e [Custom bars](https://duoapps.com/patterns/custom-bars/) do DuoApps. E se você ainda não tem um app, [crie o seu](https://pt.goodbarber.com/create/?utm_campaign=iphone-duo). Siga a GoodBarber no Google [![Adicione como fonte preferencial no Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-pt.7226f5ccc026.png)](https://www.google.com/preferences/source?q=pt.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Sobre o autor Lesia PIETRI Head of Product Design Sou Head of Product Design da GoodBarber. Conduzo o design do produto: o design system sobre o qual todas as apps são construídas, os layouts que servem de ponto de partida e o percurso que leva de uma ideia a uma app publicada. O meu trabalho é que alguém que nunca abriu uma ferramenta de design publique na mesma uma app cuidada, ecrã após ecrã. Designer de alma, passo os dias nos detalhes que ninguém nomeia: os espaçamentos, os contrastes, o peso de um título. Escrevo aqui sobre o design da GoodBarber e sobre as novidades do produto: as funcionalidades, os layouts e os temas. [Mais de Lesia](https://pt.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)