Padrão de design de exibição dupla
Ter duas telas oferece uma oportunidade natural de comparar duas versões do mesmo tipo de conteúdo. Você pode comparar duas imagens, duas listas ou dois documentos lado a lado.
Você também pode mostrar as mesmas informações de duas maneiras diferentes ao mesmo tempo. Cada tela funciona perfeitamente para fornecer mais informações ao usuário. Por exemplo, mostre uma lista de restaurantes em uma tela e um mapa com locais na outra.
Se você quiser obter uma experiência semelhante a uma exibição dupla sem criar duas exibições específicas, considere, em vez disso, dar suporte a várias instâncias com seu aplicativo. Essa abordagem aproveita o suporte interno que o sistema operacional fornece. Essa experiência pode ser útil para comparar dois produtos abertos em duas guias ou em outros cenários semelhantes.
Práticas recomendadas
Aqui estão alguns cenários que ajudam a orientar você ao aplicar esse padrão de design:
| O que fazer | O que não fazer |
|---|---|
| Use o lado esquerdo da tela para exibir conteúdo em um modo de exibição enquanto usa a segunda tela para exibir o mesmo conteúdo em um modo de exibição diferente. | Não use a tela esquerda para exibir uma lista e a segunda tela para exibir detalhes. Esse é o padrão de design de detalhes da lista. |
| O que fazer | O que não fazer |
|---|---|
| Use indicadores visuais para exibir as mesmas informações em dois modos de exibição diferentes. | Não use os visuais incorretamente. Não usar os indicadores visuais da maneira correta pode resultar em uma exibição de detalhes da lista. |
| O que fazer | O que não fazer |
|---|---|
| Use duas telas para comparar a mesma instância do produto. | Não tem uma lista em uma tela e detalhes na segunda tela. |
| O que fazer | O que não fazer |
|---|---|
| Use a segunda tela para editar ou marcar alterações do conteúdo na primeira tela em uma exibição dupla. | Não permita que os usuários editem ou marquem alterações em ambas as telas em uma exibição dupla. |
Tipos de aplicativos que podem se beneficiar desse padrão
- Editar ferramentas que se beneficiam de ter estados anteriores/posteriores lado a lado. Por exemplo, código markdown e versão prévia.
- Conteúdo e contexto lado a lado. Por exemplo, um mapa e uma 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 exemplo, tela de um lado, observação assumindo o outro.
Exemplos de código
Esses projetos mostram uma implementação simples de exibição dupla que você pode usar em seus aplicativos:
Próximas etapas
Considere estes outros padrões de design: