Introdução aos dispositivos com tela dupla

Os dispositivos com tela dupla são dispositivos portáteis com duas telas simétricas que funcionam juntas de maneira exclusiva para oferecer produtividade em um fator forma flexível.

Com dispositivos de tela dupla, como o Surface Duo da Microsoft, as pessoas poderão executar ações em qualquer lugar mais rápido do que nunca: fazer anotações em uma tela e analisar a proposta completa de um projeto em outra tela enquanto estiver em movimento. Sentar-se para escrever um email atencioso usando um teclado de software ou hardware enquanto aguarda o almoço. E depois assistir a um vídeo, navegar na Web ou ler um livro enquanto retoma a própria rotina.

a dual-screen device

Embora dispositivos com tela dupla revelem novas possibilidades para seus aplicativos, seus aplicativos existentes funcionaram conforme o esperado nos dispositivos, e há aprimoramentos que você terá sem fazer nenhum trabalho. Esta documentação os apontará e, ao mesmo tempo, mostrará novas maneiras de aprimorar sua experiência do aplicativo, tornando seu aplicativo ciente da natureza de tela dupla do dispositivo.

Embora existam diferentes dispositivos com tela dupla no mercado e mais a serem lançados, acreditamos que pode haver uma maneira comum de aproximar o design dos aplicativos para esses dispositivos. Esperamos que isso ajude seu aplicativo a chegar a mais dispositivos sem recriar do zero para cada dispositivo.

Neste artigos, falaremos sobre conceitos e padrões de design comuns aplicáveis independentemente do sistema operacional direcionado ou da linguagem de desenvolvimento usada. Para obter informações específicas sobre a plataforma e o desenvolvimento de aplicativos para dispositivos de tela dupla, confira Kotlin e Java, React Native, Xamarin, desenvolvimento de jogos com Unity, tecnologias da Web ou Windows.

A tecnologia ainda evoluirá e nossas diretrizes aqui poderão mudar à medida que avançamos. Seus comentários são bem-vindos.

Visão geral de tela dupla

Dispositivos com tela dupla podem ser fornecidos em diversas variações de design industrial e de hardware. O recém lançado Surface Duo, juntamente com outros dispositivos planejados, têm o objetivo de ajudar a definir a categoria, porém outros dispositivos poderão oferecer telas maiores ou designs variados de dobradiça. Quando você cria aplicativos, tenha em mente que você deve evitar a criação de acordo com as especificações de dispositivos específicos disponíveis atualmente.

Todos os dispositivos com tela dupla podem dobrar, inverter e girar. As duas telas podem ser usadas como exibições ou uma tela pode funcionar como um teclado. Os diferentes fatores forma dão suporte a uma ampla variedade de atividades e permitem que o usuário ajuste o dispositivo à situação deles. Aproveitando os vários modos do aplicativo, você ajuda os usuários a fazer mais coisas.

overview of dual-screen modes

Quando o usuário inicia um aplicativo, a janela principal dele é aberta maximizada e ocupa a largura e a altura completas de uma única tela. Os usuários podem ter vários aplicativos abertos de uma vez dessa maneira, possibilitando uso de aplicativos lado a lado e cenários do tipo “arrastar e soltar” intuitivos.

an app on each screen

Um aplicativo também pode ser exibido em duas telas, o que é conhecido como um layout estendido. Por padrão, o aplicativo funcionará como se ele estivesse sendo exibido em uma tela maior. Você pode modificar seus layouts de aplicativo existentes para acomodar a fenda entre as duas telas ou pode ir além e criar seu aplicativo usando controles de layout criados especificamente para aproveitar ao máximo os dispositivos com tela dupla. Isso será abordado em mais detalhes posteriormente neste artigo.

an app spanned across both screens

Adotar e aprimorar recursos existentes

Há muitos recursos que você já pode aproveitar com seus aplicativos que continuarão funcionando com pouco ou nenhum esforço em dispositivos com tela dupla com suporte da Microsoft; eles também continuarão proporcionando uma boa experiência de aplicativo. Abordaremos isso antes de discutir como criar seu aplicativo especificamente para cenários de tela dupla.

Layouts de aplicativo responsivos

Se você criar seu aplicativo para ele usar layouts responsivos, ele terá uma ótima aparência em todos os dispositivos, independentemente do tamanho da tela e da orientação do dispositivo. Use as técnicas de layout existentes para a plataforma de interface do usuário de sua escolha que são dimensionadas automaticamente para preencher a tela. Se você tiver elementos que dependem do tamanho e da taxa de proporção, use as APIs fornecidas pela sua plataforma de interface do usuário para ajustar seu layout quando houver alterações no tamanho ou na taxa de proporção.

Como seu aplicativo é executado em vários dispositivos diferentes, você provavelmente já o desenvolveu para lidar com vários tamanhos de tela e janela, e ele deve continuar funcionando sem problemas. No entanto, tenha em mente que talvez seja necessário considerar novos tamanhos de tela e taxas de proporção que não são comuns para PCs e dispositivos móveis, como retrato (exibição mais alta), paisagem (exibição mais ampla), retrato duplo (o dobro da largura do retrato) e paisagem dupla ( o dobro da altura da paisagem).

Considerar todas as orientações do dispositivo

Esperamos que os usuários sejam criativos no uso de dispositivos com tela dupla da maneira que funcionar para eles. Isso significa que seu aplicativo nem sempre pode ser usado na orientação comum; retrato para Android ou paisagem para Windows. Considere dar suporte a todas as orientações e configurações de tela. Por exemplo, se seu aplicativo for criado principalmente para a orientação retrato, mas der suporte a muitas entradas de texto, haverá maior probabilidade de os usuários usarem-no em orientação paisagem e um dispositivo com tela dupla, com o teclado na tela inferior.

Layouts com tela dupla podem fornecer um ambiente melhor para multitarefas. Você nunca sabe em qual modo o usuário vai segurar o dispositivo, mas conhecendo os modos possíveis, você pode otimizar o aplicativo para os modos que fazem mais sentido nesse contexto.

Nossos estudos mostram que os usuários estão mais confortáveis digitando ou escrevendo em uma superfície plana. Se seu aplicativo estiver muito orientado para entrada, como um aplicativo de anotações, você poderá otimizá-lo para ser usado em layout de paisagem (se ainda não estiver).

multi-task on two screens

Suporte a várias entradas

Muitos dispositivos, incluindo os novos dispositivos com tela dupla, dão suporte a uma ampla variedade de entradas, incluindo digitação, toque e caneta. A flexibilidade dos dispositivos com tela dupla permite que o usuário mude de modo rapidamente para ajustar as tarefas dele. Para garantir uma excelente experiência do usuário, verifique se seu aplicativo dá suporte a todos os tipos de entrada disponíveis para que o usuário permaneça no controle e possa interagir com seu aplicativo como preferir.

Arrastar e soltar

Verificar se seu aplicativo dá suporte ao recurso de arrastar e soltar é outra maneira de garantir uma ótima experiência do usuário ao usar diferentes tipos de entrada, não apenas para dispositivos com tela dupla, mas também para todos os outros tipos de dispositivo.

Arrastar e soltar é um recurso que você já pode aproveitar. No entanto, um aplicativo com tela dupla que executa aplicativos lado a lado se presta especificamente a interações do tipo “arrastar e soltar” para oferecer uma ótima experiência de aplicativo.

Para habilitar o recurso de arrastar e soltar em seu aplicativo, pense em cenários em que os usuários podem manipular diretamente texto, links, imagens ou objetos avançados dentro e fora da sua experiência do aplicativo, então:

  1. Em qualquer lugar em que você puder recortar, copiar e colar, habilite o recurso de arrastar e soltar.
  2. Em qualquer lugar em que você puder compartilhar conteúdo, considere habilitar o recurso de arrastar e soltar.

Várias instâncias do seu aplicativo

Talvez seja interessante para seus usuários aproveitar a segunda tela para ver um conteúdo diferente do mesmo aplicativo. Para permitir isso, considere dar suporte a várias instâncias, nas quais seu aplicativo é executado lado a lado.

Experiência picture in picture para suas mídias

Se você está criando um aplicativo de mídia que continua reproduzindo vídeo em primeiro plano enquanto outro está em execução, considere dar suporte a experiências picture-in-picture. Com um maior tamanho da tela, isso oferece uma funcionalidade multitarefas ao usuário, assistindo ao vídeo e executando outra tarefa ao mesmo tempo.

Considerações sobre a experiência do usuário de tela dupla

Na seção anterior, falamos sobre recursos aos quais você pode dar suporte em seu aplicativo que não são específicos de dispositivos com tela dupla, mas isso pode aprimorar a experiência do usuário quando seu aplicativo é executado em um dispositivo com tela dupla. Agora examinaremos o que você pode fazer para proporcionar uma experiência única apenas quando seu aplicativo é executado em um dispositivo com tela dupla.

Em um dispositivo com tela dupla, seu aplicativo pode ser executado em uma única tela ou em ambas. Quando um aplicativo único é apresentado em duas telas, dizemos que ele está estendido. A maneira como seu aplicativo responde ao fato de estar em um estado estendido pode ter um grande impacto sobre a experiência do usuário. Os modos exclusivos que um dispositivo com tela dupla oferece podem revelar maneiras sem precedentes de usar o aplicativo. Por exemplo, dispositivos que têm fendas no meio são bons em cenários de produtividade que se beneficiam da compartimentalização do conteúdo.

Veja alguns princípios que você deve considerar antes de decidir quais técnicas de design de tela dupla específicas podem ser adequadas para seu aplicativo:

  • Fornecer valor contínuo
    • O estado estendido deve enriquecer a experiência do usuário como parte do fluxo de ponta a ponta das tarefas que ele executa com seu aplicativo. Ele não deve ser um estado personalizado valioso apenas momentaneamente. Em vez de pensar em telas específicas, pense no panorama geral.
  • Não se trata de estender
    • Os aplicativos não devem ser bons somente quando estendidos. Não esconda a funcionalidade fundamental no estado estendido para que o usuário deva estender nosso aplicativo para poder executar uma tarefa básica.
  • Os usuários estão sempre no controle
    • Para evitar experiências imprevisíveis (ou potencialmente destrutivas) para seus usuários, os aplicativos não devem entrar em um estado estendido sem uma ação intencional iniciada pelo usuário. Deixe o usuário decidir.
  • Tornar a extensão previsível
    • Entenda a intenção do seu usuário de estender e crie com isso em vista. Verifique se o resultado da extensão é previsível e se agrega valor a qualquer momento determinado.

A extensão é a escolha do usuário

Os usuários são capacitados para ter controle completo sobre a maneira como eles usam seu aplicativo, incluindo quando desejam estendê-lo. Alguns aplicativos, como calculadoras, podem não parecer bons nem derivar qualquer benefício dessa configuração, mas ainda é a escolha do usuário. No entanto, você pode decidir que, como a maioria dos usuários não optará por estender seu aplicativo, não haverá problema em não fazer nada para acomodar a ação do usuário.

Embora esse artigo forneça várias ideias diferentes com relação à maneira como você deseja lidar com o layout de várias telas, faça uma escolha que seja certa pra seus usuários e seu aplicativo.

Considerar a intenção do usuário e a orientação do dispositivo

Quando você cria a experiência do seu aplicativo para aproveitar duas telas, é importante conhecer a intenção dos seus usuários por trás da extensão, nas configurações paisagem dupla e retrato duplo. Embora haja mais estudos a serem feitos, estamos começando a observar uma tendência por estas preferências do usuário:

  • Na paisagem dupla, os usuários desejam usar mais o tamanho da tela; portanto, as duas telas são usadas para estender a área do conteúdo.
  • No retrato duplo, os usuários preferem atividades de produtividade ou multitarefas; portanto, as duas telas são usadas para separar e agrupar conteúdo.

Tenha isso em mente ao decidir como aplicar os padrões de design de tela dupla. O usuário se beneficiará se você adaptar totalmente o layout e a experiência do seu aplicativo ou você pode dar suporte à extensão simplesmente organizando os controles e elementos do seu aplicativo para que eles não fiquem obscurecidos pela fenda?

Considerar todos os layouts com suporte

Há quatro cenários de layout a se considerar ao criar sua experiência de aplicativo para um dispositivo com duas telas, dependendo se o aplicativo está em uma tela única ou estendida e se a exibição é padrão ou tela inteira.

supported layouts

  • Único-Padrão

    • Por padrão, os aplicativos são abertos em um estado maximizado e ocupam uma única tela. Nos modos de tela dupla, os usuários podem executar dois aplicativos lado a lado simultaneamente para comparar e consumir o conteúdo ou realizar a referência cruzada dele.
    • Com suporte por padrão. Se seu aplicativo foi criado para manipular diferentes tamanhos de tela e orientações de retrato e paisagem conforme descrito anteriormente, não há mais nada a se fazer.
  • Estendido-Padrão

    • Quando o dispositivo está em dos modos de tela dupla (retrato duplicado ou paisagem duplicada), os usuários podem ampliar um aplicativo nas duas telas, abrindo mais espaço para o conteúdo. O usuário é responsável por estender o aplicativo; não é um estado em que o aplicativo entra automaticamente.
    • O suporte é opcional. O modo estendido é único para dispositivos com tela dupla. Se você não desejar nenhuma modificação em seu aplicativo, ele se comportará como se fosse exibido em uma tela grande. No entanto, você pode implementar uma variedade de otimizações de layout para fazer seu aplicativo aproveitar os recursos exclusivos de dispositivos com tela dupla. Esses tópicos serão abordados em mais detalhes mais adiante neste artigo.
  • Único-Tela Inteira

    • Isso é semelhante ao layout padrão, exceto pela interface do usuário do sistema (Barra de Tarefas, Bandeja do Sistema, Barra de Aplicativos, Nome do Aplicativo) estar oculta para criar uma experiência totalmente imersiva, ideal para jogos e reprodução de vídeo.
    • O suporte é opcional. Você pode usar APIs disponíveis para colocar seu aplicativo em modo de tela inteira.
  • Estendido-Tela Inteira

    • Você pode expandir programaticamente seu aplicativo para usar modo de tela inteira quando estendido. Se um aplicativo exibido em uma tela única em modo de tela inteira for estendido pelo usuário, ele permanecerá em tela inteira.
    • O suporte é opcional. Considere o benefício da tela inteira em um modo estendido assim como tela única.

Como trabalhar com a fenda

Um layout estendido ocorre quando um único aplicativo é apresentado em duas telas. Por padrão, se um aplicativo não for personalizado para esse cenário, o sistema notificará o aplicativo de que ele agora ocupa uma largura e altura de tela maiores e a interface do usuário do aplicativo será redimensionada para se ajustar às novas dimensões da tela.

Quando um aplicativo for estendido entre duas telas, haverá uma fenda – o espaço entre as duas telas. Esse é um subproduto da criação de um dispositivo com tela dupla. Esta seção aborda algumas ideias e técnicas que você pode considerar para fazer seu aplicativo funcionar com a fenda.

Eu sempre acomodo a fenda?

Dependendo do seu aplicativo, pode ser perfeitamente adequado usar algumas interfaces do usuário no estado em que se encontram. Se o usuário puder manipular o conteúdo do aplicativo para evitar obstrução pela fenda, você poderá decidir não fazer nenhum trabalho especial para acomodá-la.

Por exemplo, um aplicativo de mapa pode estender as duas telas para aproveitar o tamanho dela, mas não pode fazer nada para manipular a fenda porque o usuário pode mover o conteúdo do mapa ao redor para evitar a fenda. Isso será abordado em mais detalhes posteriormente na seção Tela estendida.

spanning map

A imagem a seguir mostra uma interface do usuário de grade que o usuário pode rolar facilmente para evitar a fenda. No entanto, se a interface do usuário não rolar, como a barra de ferramentas em cima da grade, você pode considerar ajustar-se ao limite, que é uma das técnicas que abordaremos mais adiante. Sugerimos que você teste diferentes ideias de design com os usuários para decidir sobre a melhor opção do seu aplicativo.

UI that snaps to natural boundaries

Evitar a fenda

Mover coisas para um lado

Como há uma fenda óbvia no meio das duas telas, algumas interfaces do usuário, principalmente elementos centralizados dentro do seu layout do aplicativo, podem ser obscurecidas pela fenda quando o usuário estende seu aplicativo. Isso não causa problemas funcionais e o aplicativo continuará funcionando; contudo, a experiência poderá ser melhor se a interface do usuário fosse deslocada para um lado da tela. Uma boa regra prática é evitar exibir texto ou conteúdo na fenda pois isso pode afetar a legibilidade e a usabilidade do seu aplicativo.

Os diálogos iniciados pelo aplicativo devem ser movidos para uma das telas em vez de serem alongados entre ambas, principalmente quando há botões nos quais os usuários precisam clicar ou ações que eles precisam executar.

Dialog that avoids the seam on a larger device

Um menu inferior deve ser movido para um lado ou para o outro em vez de se alongar entre as duas telas.

Dialog that avoids the seam on the surface duo

Os menus de contexto invocados pelo usuário deverão tratar a fenda como um limite, principalmente se forem invocadas perto da borda da tela.

Menu that avoids the vertical seam

Os menus suspensos no aplicativo ou contêineres expansíveis devem alterar a direção da expansão.

Menu that avoids the horizontal seam

Quando o aplicativo é estendido, mova a interface do usuário para o centro da tela superior ou esquerda, em vez de para o centro de toda a região do aplicativo.

UI that avoids the seam

Ajustar-se à fenda

Alinhar-se à borda da fenda com um número par de colunas

Quando sua interface do usuário tem um layout de grade ou tabular, poderá ser mais fácil para um usuário ver e usar seu aplicativo se as linhas horizontais ou verticais estiverem alinhadas à fenda.

UI that aligns with the seam

Use um número par de colunas em sua grade, principalmente para contêineres, tabelas etc., e contabilize as margens para a fenda.

UI that has an even number of columns

Além disso, muitos aplicativos usam a interface do usuário em tela parcial sobreposta ao conteúdo do aplicativo. Dependendo do tamanho dela, talvez seja interessante fazer a interface do usuário sobreposta ocupar toda a segunda tela. Isso pode tornar seu aplicativo mais utilizável e visualmente mais limpo. Tenha em mente que a interface do usuário parcial sobreposta às vezes pode implicar que ela é recolhível ou temporária; portanto, fique atento às implicações de interação ao alterar esse comportamento. Essa técnica pode ser mais adequada para dispositivos com tamanho menor.

overlaid UI vs dual-screen layout with vertical seam

overlaid UI vs dual-screen layout with horizontal seam

Reorganizar elementos da interface do usuário

Mover para qualquer lado da fenda

Uma técnica de layout responsivo que você pode usar para otimizar os dispositivos com tela dupla é reorganizar seu conteúdo quando a orientação ou o tamanho da tela é alterado. Em vez de alongar arbitrariamente elementos de seu aplicativo entre as duas telas, você pode reorganizá-los com agrupamentos melhores para adaptar o conteúdo do aplicativo de modo mais intencional.

example of rearranged UI elements

Mascarar e dividir

Há duas maneiras nas quais a fenda pode ser manipulada pelo software. Uma é mascarar e a outra é dividir.

a spanned image using masking compared with using splitting

Uma técnica de mascaramento renderiza a imagem atrás da fenda. Quando uma imagem está parcialmente obstruída, nossos cérebros naturalmente conectam as partes que “não são vistas”. Essa técnica é normalmente melhor para mídias (vídeo, foto etc.) e para cenários do tipo tela em que manter a continuidade da imagem é mais importante do que garantir que todo o conteúdo seja exibido.

A técnica de divisão renderiza a imagem recortando-a e separando-a. Esse é o mesmo comportamento que você observa quando um aplicativo é exibido em vários monitores. Essa técnica funciona bem para aplicativos que têm muitos controles, como botões, que podem ser exibidos no meio das duas telas.

Há benefícios para cada opção dependendo do tipo de aplicativo que está sendo criado, e continuamos aprendendo qual é o melhor comportamento padrão para casos diferentes.

Padrões de aplicativos de tela dupla

As técnicas abordadas anteriormente são principalmente acomodar a fenda para que o aplicativo continue proporcionando valor aos usuários. Os padrões a seguir permitem que você aproveite que há duas telas.

Aqui há cinco padrões de tela dupla que devem ser considerados. Eles não são só padrões para dispositivos com tela dupla, mas são fornecidos aqui como um ponto de partida para sua imaginação se desenvolver.

an overview of dual-screen patterns

Tela estendida

O padrão de tela estendida é o padrão mais simples de duas telas, mas é avançado. Você poderá considerar esse padrão se precisar de uma tela maior para uma tarefa, como desenho ou se seu aplicativo tiver uma tela de fluxo livre que o usuário possa rolar livremente para evitar a fenda se algum conteúdo importante estiver obscuro. Isso oferece o benefício de dar ao seu aplicativo maior tamanho de tela, em vez de restringi-lo a uma ou outra tela.

Esse padrão só se aplica à parte da tela da interface do usuário. Você ainda poderá usar uma das outras técnicas para acomodar a fenda se ela obscurecer a parte sem tela do aplicativo.

drawing example of extended canvas UI

tabular and map examples of extended canvas UI

Valor principal:

estender a tela permite que os usuários aproveitem o maior tamanho da tela fornecido por dispositivos com tela dupla.

Tipos de aplicativos que podem se beneficiar desse padrão:

  • Aplicativos de mapa
  • Aplicativos de tela para desenho

Listas e detalhes

O padrão lista de detalhes tem um painel principal (geralmente com uma exibição de lista) e um painel de detalhes para o conteúdo. O painel Detalhes será atualizado quando um item da lista for selecionado. Esse padrão é naturalmente bom para quando você tem uma área de exibição mais ampla. Ele é usado com frequência para email e catálogos de endereços.

Usando as duas telas diferentes e ajustando-se ao limite natural, você pode usar uma tela para mostrar a lista de “itens” e a outra para mostrar detalhes do item selecionado.

examples of list detail UI

examples of complex list detail UI

Conforme mencionado anteriormente, estamos começando a observar uma tendência de os usuários preferirem usar o modo de exibição de paisagem dupla para utilizar o tamanho da tela maior. Por esse motivo, você deverá considerar mostrar exibições de listas e detalhes lado a lado no modo de retrato duplicado, porém com alterações para mostrar somente a exibição de lista ou detalhes no modo de paisagem duplicada.

list detail UI in dual-portrait vs dual-landscape mode

Valor principal:

A separação da navegação ou da visão geral dos detalhes permite que os usuários se aprofundem no conteúdo enquanto ficam parados na posição deles na lista/agregação geral.

Tipos de aplicativos que podem se beneficiar desse padrão:

  • Aplicativos que têm listas ou galerias
  • Aplicativos de email
  • Aplicativos de agendamento
  • Aplicativos de organização de fotos ou imagens
  • Aplicativos de música com playlists e detalhes de música
  • Aplicativos com estrutura de navegação forte

Duas páginas

Alguns aplicativos tendem naturalmente a ter uma experiência de paginação semelhante a um livro. Você pode usar o marco de delimitação natural para mostrar vários itens de uma coleção, como páginas ou imagens, o que, de outra forma, talvez exigiria que o usuário exibisse um de cada vez.

Dependendo do aplicativo, você poderia optar por paginar a cada duas páginas ou avançar uma página por vez.

an example of two page document UI

an example of two page card UI

Valor principal:

aproveitar a metáfora esqueumórfica de um livro para demonstrar uma página em cada tela para que a leitura seja mais proveitosa.

Tipos de aplicativos que podem se beneficiar desse padrão:

  • Aplicativo orientado para o documento
  • Aplicativos com conteúdo paginado
  • Aplicativos feitos para leitura
  • Aplicativos com uma tela discriminada (por ex., anotações, quadros)

Exibição dupla

Ter duas telas proporciona uma funcionalidade natural para comparar e contrastar duas versões do mesmo tipo de conteúdo lado a lado, como duas imagens, listas ou documentos.

an example UI of a find the differences game with side by side images

Isso também pode ser usado para mostrar as mesmas informações de duas maneiras diferentes ao mesmo tempo, com cada tela funcionando perfeitamente para fornecer mais informações ao usuário. Por exemplo, uma lista de restaurantes em uma tela e um mapa com locais na outra.

example of UI with directions and map on different screens

Se desejar obter uma experiência semelhante à exibição dupla sem criar duas exibições específicas, considere dar suporte a várias instâncias com seu aplicativo para aproveitar o suporte interno que o sistema operacional oferece. Isso pode ser útil para comparar dois produtos abertos em duas guias ou outros cenários semelhantes.

an example UI of dual view that can also be achieved by multi-instance

Valor principal:

ter várias exibições do mesmo aplicativo no mesmo contêiner, permitindo a comparação de conteúdo de tipo semelhante lado a lado.

Tipos de aplicativos que podem se beneficiar desse padrão:

  • ferramentas de edição que contam com estados antes/depois lado a lado (por ex., código markdown e visualização)
  • Conteúdo e contexto lado a lado (por ex., mapa e lista de restaurantes)
  • Aplicativos que permitem que o usuário compare itens semelhantes
  • Ter duas telas com conteúdo coordenado, mas manter cada página separada (por ex., tela de um lado, anotações no outro)

Painel complementar

O padrão de painel complementar é uma ótima oportunidade de aproveitar o tamanho de tela adicionado usando superfícies de segundo nível que estão ocultas de algum outro modo e expondo-as quando o aplicativo está estendido.

example of companion pane UI with image and controls

Você também pode usar duas telas colocando a tela do aplicativo em uma delas e usando a outra para conter ferramentas que manipulam o conteúdo da tela. Ao usar o painel complementar para um cenário de ferramentas, devido à ergonomia, provavelmente será mais adequado as ferramentas ficarem à direita ou na parte inferior, mas teste seu aplicativo para ver o que funciona melhor para ele.

an example of companion pane UI with charts or editing

an example of companion pane UI with tables or a game controller

Valor principal:

Mostrar contexto complementar para ampliar as tarefas dos usuários, geralmente com uma relação primária/secundária, trazendo à superfície funcionalidades de segundo nível que ficavam escondidas para ter acesso mais rápido.

Separar conteúdo para consumo de ferramentas para interações torna mais fácil para os usuários analisarem o conteúdo e se concentrarem nele. Isso oferece uma experiência mais ergonômica com as ferramentas mais próximas das mãos, principalmente nos modos de paisagem duplicada.

Tipos de aplicativos que podem se beneficiar desse padrão:

  • aplicativos de produtividade que têm informações complementares exibidas ao lado do conteúdo principal
  • Ferramentas criativas como aplicativo de desenho de imagens
  • Aplicativos de música ou editor de vídeo
  • Aplicativos de jogos

Próximas etapas

Selecione uma plataforma de desenvolvimento para saber como a criar aplicativos de tela dupla: