Aprimore o design do seu app para iPad

Olá! Meu nome é Rene Lee. Sou designer na equipe Apple Design. Hoje, vou compartilhar como as novas atualizações no iPad podem melhorar o design de seu app. Simplicidade define o iPad. O iPadOS 26 foi criado sobre essa base sólida. A multitarefa ficou fácil com um gesto que redimensiona janelas com fluidez.

Na barra de ferramentas, novos controles aumentam de tamanho para mostrar as funcionalidades.

O novo ponteiro é mais preciso e responsivo. E há a nova barra de menus, que você pode preencher com ícones para tornar seu app mais eficiente.

Com esses novos recursos, você tem tudo de que precisa para finalmente elevar seu app para iPad. Nesta sessão, vou guiar você nessa jornada, começando pela navegação do app. E mostrarei como as janelas funcionam com a multitarefa no iPad. Apresentarei o novo ponteiro do iPad e as melhorias no efeito de foco.

Por fim, encerraremos com a nova barra de menus no iPad. Vamos começar com a navegação. Para melhorar o app para iPad, escolha o padrão de navegação. A primeira opção é uma barra lateral. Ela é ideal para apps com várias subvisualizações ou conteúdo muito aninhado, como o Mail.

Vamos conferir a barra lateral no Mail. O Mail usa a barra lateral para listar caixas de correio e contas, revelando a hierarquia do conteúdo. O Mail no iPad é mais rápido: a barra lateral simplifica a navegação. Aqui está outro exemplo: o Música. Em vez de caixas de correio, o app Música tem abas, biblioteca e playlists. E esses destinos são colocados dentro da barra lateral, agilizando a navegação.

A barra lateral no Música tem um botão que lembra uma barra de abas. Ao tocar nele, a barra lateral se transforma em uma barra de abas.

A barra de abas é um padrão de navegação compacto e flexível. Ela é menor que uma barra lateral. O app pode mostrar mais conteúdo do que antes, tornando-o mais imersivo. Transformar uma barra de abas em barra lateral é fácil. A barra de abas é fluida e permite escolher a navegação.

Se você não souber qual é a melhor navegação, comece com a barra de abas.

Ela pode ser adaptada na barra lateral para posteriormente evoluir o app. Vamos saber como as navegações se adaptam a tamanhos menores. Na vertical, uma barra lateral do iPad pode se transformar em uma barra de abas. Do ponto de vista do layout, a mudança de orientação significa apenas que seu app precisa se ajustar à largura. Na navegação é adaptável, o app pode se ajustar a qualquer largura.

Essa adaptabilidade pode ser aplicada a janelas flutuantes, que diminuem a largura disponível. Com uma barra de abas, seu app se ajusta a qualquer dimensão.

Apps sem a barra de abas também podem adaptar a navegação reduzindo suas colunas.

Ao ajustar o tamanho, garanta que as mudanças no layout não sejam destrutivas. Redimensionar um app não deve mudar permanentemente seu layout. Volte para o estado inicial sempre que possível.

Expanda o conteúdo para melhorar a navegação.

As pessoas acessam o app pelo seu conteúdo. Portanto, use o máximo de tela possível para criar uma experiência mais imersiva. Comece desenhando o conteúdo abaixo da barra de ferramentas com o efeito de borda de rolagem. Expandir o conteúdo é útil para as janelas flutuantes que são menores do que um app em tela cheia. Ou expanda o conteúdo abaixo da barra lateral. Quando o conteúdo ultrapassa seus limites, é possível identificar o quanto cada linha foi rolada. Para resumir a navegação: Escolha a navegação que melhor se adapta ao conteúdo.

Comece por uma barra de abas. Adapte a navegação a tamanhos menores.

Expanda o conteúdo para melhorar a navegação.

Agora, as janelas. No iPadOS 26, há um novo sistema de janelas que é bem mais simples e eficiente. Cada app com suporte a multitarefa agora mostra uma alça no canto inferior direito.

Arrastar a alça redimensiona o app para uma janela flutuante sobre a imagem de fundo.

No canto superior esquerdo da janela, estão os controles de janela. Toque para aumentar e revelar as funcionalidades. Pressione-os para expandir ainda mais, mostrando um conjunto de atalhos que criam vários layouts de janela. Esses controles têm muitos recursos e são essenciais para a multitarefa no iPad. Vamos aprender como eles aparecem em cada janela. Os controles de janela estão à esquerda na barra de ferramentas. Os outros controles irão para a direita, abrindo espaço e evitando obstrução.

Para os apps não atualizados para o iPadOS 26, o sistema aumenta a área segura acima da barra de ferramentas e coloca os controles de janela à esquerda. Esse posicionamento só é feito para fins de compatibilidade.

Por criar uma área segura permanente acima da barra de ferramentas, esse posicionamento não é ideal para maximizar o conteúdo no app. Posicione os controles de janela na barra de ferramentas para ficarem na mesma linha. Ao posicionar os controles de janela na barra de ferramentas, você não precisa reservar uma área segura.

Você pode usar o espaço extra para mostrar mais conteúdo sem aumentar o tamanho da janela.

Temos uma novidade na forma como o app lida com a abertura de novos documentos. Ao abrir um novo documento, ele aparece na janela do app padrão em primeiro plano. O estado atual do app permanece válido até que ele seja ocultado ou fechado intencionalmente. E se você quisesse abrir um segundo documento?

Antes dos fluxos de trabalho orientados para multitarefa, se um app precisasse abrir outro documento, ele o abriria em uma única janela, eliminando qualquer contexto anterior no processo. Esse tipo de comportamento "Abrir no local" não é mais recomendado para apps multitarefa. Agora, o app deve criar uma janela para cada documento. Com a multitarefa ativada, o app deverá criar uma janela para cada documento. Esse comportamento é mais útil, pois as janelas persistem até serem fechadas. Mas isso não faria com que muitas janelas se acumulassem, tornando difícil encontrar a minha? O novo comportamento de adição de janelas permite acumular muitas janelas ao longo do tempo.

Para ajudar a encontrar sua janela, há uma nova seção no menu do app com uma lista das janelas abertas. Mas essa lista não será útil se os nomes das janelas não forem descritivos. Portanto, é importante que você dê nomes descritivos para as janelas do app.

Dê um nome exclusivo a cada uma, como o título do documento. Se cada janela tiver um nome descritivo, será muito mais fácil encontrar uma janela específica.

Para concluir esta seção: Posicione os controles de janela na barra de ferramentas.

Crie uma janela para cada documento. E forneça nomes descritivos para as janelas do app. Agora, vamos conhecer novidades no ponteiro do iPad.

Tudo no iPad foi pensado para o toque. Por isso, o ponteiro original era circular, para se ajustar melhor ao tamanho e à precisão do dedo. No entanto, o ponteiro pode ser muito mais preciso que seu dedo. No iPadOS 26, o ponteiro tem uma nova forma, liberando todo o seu potencial. O novo ponteiro é mais preciso e responsivo porque sempre rastreia sua entrada, de 1 para 1. Além do novo formato, também há novidades em como o ponteiro se comporta ao passar o dedo sobre os botões e os controles. O novo efeito de realce cria uma camada Liquid Glass que aparece diretamente sobre os botões em que você toca.

Flutuando acima dos controles Liquid Glass, o realce vira e reflete os elementos em volta para indicar qual botão está selecionado. Quando você passa o dedo sobre um controle Liquid Glass com mais de um botão, o efeito de realce aparece para indicar qual botão você está prestes a pressionar.

À medida que você se move pelo cluster, o destaque encontra rapidamente o ponteiro, assim que o destino muda. O novo efeito de destaque substitui o efeito de foco original, em que o ponteiro se transforma no destaque.

O novo ponteiro não terá magnetismo nem efeito elástico, acompanhando o movimento do usuário.

Teste o app com o novo ponteiro para identificar resultados indesejados. Você pode voltar a esta seção para referência e orientação, enquanto ajusta e aprimora a interação com o ponteiro. Por fim, vamos conferir a barra de menus no iPad. A barra de menus sempre foi parte macOS e compartilha vários princípios essenciais com a barra de menus no iPad. Nesta seção, vamos conhecer o diferencial da barra de menus no iPad. No iPad, você exibe a barra de menus movendo o cursor para a borda superior. Ou deslizando a tela para baixo. A barra de menus contém o menu do app, seguido pelos menus padrão do sistema e pelos menus personalizados do app. No futuro, cada app no iPad terá sua própria barra de menus. Vou dar algumas dicas para criar uma boa barra de menus. Primeiro, organize os itens de menu.

Este é o processo de organização de um menu personalizado. Como exemplo, usaremos o menu "Mensagem" do "Mail". Primeiro, você deve preencher o menu com cada ação relacionada ao nome dele. Ordene essas ações por frequência de uso, não por ordem alfabética. Agrupe também as ações relacionadas às próprias seções para criar mais separação. Se o menu estiver muito longo, mova as ações secundárias para um submenu. Atribua a cada item um símbolo que corresponda à forma como eles aparecem no app. Por fim, atribua atalhos de teclado às ações mais executadas. O resultado é um menu personalizado e bem organizado que contém comandos individuais e fornece um mapa mental para as pessoas entenderem melhor o app. Agora, preencha o menu "Visualizar".

"Visualizar" é um menu padrão do sistema. Mas é preciso preenchê-lo com ações úteis. As abas estruturadas do app funcionam bem como itens do menu "Visualizar".

Adicione-as como itens no menu "Visualizar" e atribua atalhos de teclado para acelerar a troca de abas no app.

Agora você tem um menu "Visualizar" funcional. Outro item útil é a alternância de navegação. Botões que mostrem ou ocultem a barra são uma boa adição ao menu "Visualizar". Um botão na barra lateral permite ocultar ou exibir a navegação rapidamente.

Nunca oculte menus ou itens, dependendo do contexto do app. O contexto muda conforme o uso do app. Ao abrir o menu, alguns itens podem estar em cinza, pois não são acionáveis. Isso acontece por padrão. Os itens de menu devem permanecer visíveis, mesmo quando inativos. Eles ficam totalmente opacos quando são acionáveis e cinza quando não são. E por que não ocultar as ações inativas para economizar espaço?

Ocultar itens de menu não é recomendado porque confunde as pessoas. Quando o conteúdo de um menu muda com frequência, as pessoas precisam ler todo o menu sempre que o abrem, pois não podem recorrer à memória espacial. Mantenha o conteúdo do menu inalterado para que a barra de menus seja previsível e facilite a descoberta de recursos cada vez que as pessoas a acessam. Dependendo do contexto, talvez nenhum item do menu seja acionável.

Mesmo nesse caso, evite esconder os menus na sua totalidade. A barra de menus se torna imprevisível quando menus desaparecem de modo intermitente. Mantenha os menus e seu conteúdo inalterados para que as pessoas sempre obtenham a experiência que esperam. Vamos rever o que aprendemos sobre a barra de menus: Organize os itens de menu. Preencha o menu de exibição com abas e barra lateral. Evite ocultar menus e itens de menu. Para os melhores resultados, siga essas orientações ao criar a barra de menus do app. Com isso, concluímos o que eu tinha para você hoje. Mostrei como a navegação fluida e a funcionalidade multitarefa tornam os apps para iPad mais eficientes. E compartilhei como o novo ponteiro é mais preciso e como a barra de menus ajuda a organizar as ações do app, facilitando a descoberta de recursos. Se você quiser saber mais sobre o novo sistema de design, recomendo conferir estas outras sessões.

Quando começar a aplicar esses elementos aos apps, você notará como eles podem agregar muito valor. Tenho certeza de que você usará o que aprendeu hoje para transformar e elevar a experiência de seu app para iPad. Agradeço sua participação.