Criar layouts de painel para tipos de dispositivo diferentes

Os painéis podem incluir layouts para tipos diferentes de dispositivos que abrangem uma ampla variedade de tamanhos de tela. Ao publicar esses layouts no Tableau Server ou no Tableau Online, as pessoas que visualizarem o seu painel terão um design otimizado para telefone, tablet ou desktop. Por ser o autor, você só precisa criar um único painel e compartilhar uma única URL.

Dica: além de otimizar os layouts para os dispositivos móveis, otimize o desempenho da pasta de trabalho para atender melhor às necessidades de usuários móveis, que frequentemente têm largura de banda limitada e querem acesso rápido.

Como o painel padrão se relaciona com os layouts de dispositivo

Os layouts de dispositivo são exibidos na guia Painel, em Padrão. Inicialmente, cada layout de dispositivo disponibiliza os mesmos itens fornecidos no painel Padrão, além do apresentar o mesmo tamanho e layout.

Considere o painel padrão como um painel pai e os layouts de dispositivo (computador, tablet e celular) como os filhos. Qualquer exibição, filtro, ação, legenda ou parâmetro que você deseja adicionar a um layout de dispositivo deve existir primeiro no painel padrão.

Layouts de Telefone e o painel Padrão

Por padrão, os layouts de telefone são gerados automaticamente sempre que você criar um novo painel. Para criá-los somente para painéis específicos, no menu Painel, desmarque a opção Adicionar layouts de telefone para novos painéis.

Para economizar tempo com uma opção de layout de Telefone exclusiva, que reflete automaticamente as alterações no painel Padrão, clique no ícone de cadeado aberto ou escolha Gerar layout automaticamente no menu suspenso.

Em vez disso, se você clicar no ícone de cadeado fechado ou escolher a opção Editar layout, no menu, o layout de Telefone ficará totalmente independente e será necessário adicionar e organizar manualmente os itens para refletir as alterações no painel Padrão.

Layouts de desktop e tablet e o painel Padrão

Diferentemente dos layouts de telefone, você precisa adicionar manualmente os layouts de Desktop e Tablet a um painel. Os layouts de desktop e tablet sempre são totalmente independentes do painel Padrão, de modo que cada layout de dispositivo possa conter uma disposição exclusiva dos objetos.

Visualizar e adicionar layouts de dispositivo

  1. Abra um painel.

  2. Na guia Painel à esquerda, clique em Visualização do dispositivo.

    No modo de visualização do dispositivo essas opções aparecem acima do painel:

  3. Reserve um momento para clicar pelos Tipos de dispositivos e Modelos e explorar os diferentes tamanhos de tela. Em seguida defina essas opções:

    • Para saber como o painel ficará em modo paisagem em vez de retrato, clique em . Normalmente, o modo paisagem é ideal para tablets e o modo retrato é ideal para smartphones.

    • Selecione aplicativo Tableau Mobile para ver a aparência do painel, em vez do navegador. Essa opção está disponível para dispositivos iOS ou Android e diminui um pouco o painel, dando espaço para os controles do aplicativo.

  4. Escolha um Tipo de dispositivo, como Tablet.

  5. No canto superior direito, clique no botão Adicionar layout para o tipo de dispositivo selecionado (por exemplo, Adicionar layout de tablet).

  6. Acrescente um layout adicional ao selecionar um novo Tipo de dispositivo e clicar em Adicionar layout.

    Com a criação de um layout para cada tipo de dispositivo, você terá mais controle sobre a experiência de seus usuários ao visualizarem o painel em diferentes dispositivos. Após publicar um painel com os três layouts, os usuários não verão o layout padrão do painel. Em vez disso, eles sempre verão o layout adequado, específico ao dispositivo.

Observação: se fizer alterações em uma exibição, verifique os layouts do dispositivo relacionado para garantir que têm a aparência desejada.

Personalizar um layout de dispositivo

Após adicionar um layout de dispositivo ao painel, comece a reorganizar os objetos para criar a aparência desejada.

  1. Para layouts de desktop e tablet, clique em Personalizar:

    Para layouts de Telefone, clique no ícone de cadeado ou escolha Editar layout no menu suspenso:

  2. Tudo que pode ser adicionado ao seu layout está listado à esquerda, em Layout. Se um item tiver uma marca de seleção azul, isso significa que ele faz parte do layout de dispositivo em que você está trabalhando no momento.

  3. Se você remover um item, ele só será removido do layout de dispositivo atual. Ele ainda existirá no painel padrão e poderá ser adicionado ao layout de dispositivo.

  4. Clique nas opções em Modelo do dispositivo para ver como o layout aparecerá em modelos diferentes.

    Por fim, o tamanho do navegador da Web que carrega o painel determina qual layout aparece no dispositivo. Para obter mais detalhes, consulte Confirmar qual layout será exibido por um dispositivo.

  5. À esquerda, explore as opções em Tamanho.

    Padrão: a altura e a largura do layout do dispositivo mimetizam o que o painel padrão estiver usando. Por exemplo, se você estiver criando um layout para tablet e o painel padrão estiver definido como um tamanho fixo de Navegador do desktop (1000 x 800), definir Tamanho como Padrão para o layout do tablet fará com que ele também tenha 1000 x 800 de tamanho.

    Preencher tudo: todos os itens são automaticamente redimensionados para caber no tamanho do quadro do dispositivo. O tamanho do quadro do dispositivo é determinado pelo Tipo de dispositivo, Modelo e configurações de orientação (retrato ou paisagem).

    Ajustar largura (recomendado para smartphones): os itens são automaticamente redimensionados para caber no quadro do dispositivo, mas a altura é fixa. Esta é uma excelente opção para os layouts de celular e a rolagem vertical.

Otimizar para celulares

As telas pequenas dos dispositivos móveis são beneficiadas por otimizações. Tente estas técnicas.

Otimizar layouts de telefone manuais

Se você tiver optado por editar um layout de telefone sozinho, poderá otimizar rapidamente o posicionamento dos filtros, remover o espaço em branco e muito mais. Na guia Painel, clique no menu suspenso à direita de Telefone e selecione Otimizar layout.

Esteja ciente de que esse comando reorganiza apenas itens que estão atualmente no layout de telefone. Se quiser atualizar continuamente o layout de telefone para refletir todas as alterações no painel Padrão, selecione Gerar layout automaticamente.

Para permitir que os usuários em telefones entrem em contato rapidamente com pessoas importantes sobre o conteúdo do painel, adicione ações de URL a objetos que acionam automaticamente mensagens de SMS e chamadas telefônicas. Use o formato do link sms:phone-number ou tel:phone-number. Não esqueça de incluir os códigos do país e da área, se necessário.

Criar exibições específicas de telefone

Crie duplicados de determinadas exibições no painel padrão, um otimizado para a exibição no computador e um segundo otimizado para telefones.

  1. Vá para a planilha de uma exibição, clique na guia e selecione Duplicar planilha.

  2. Personalize a exibição para visualização móvel.

    Para mapas, por exemplo, você pode desejar ampliar em uma região específica como padrão ou desabilitar a panorâmica, ampliação/redução e outra funcionalidade do mapa. Consulte Personalizar como as pessoas interagem com o mapa.

  3. Agora adicione a nova exibição ao painel padrão, de modo que ela possa ser disponibilizada aos layouts do dispositivo que você está criando.

Encurtar títulos

Títulos curtos funcionam melhor para visualização em dispositivo móvel. Clique duas vezes em um título para editá-lo.

Otimizar espaço em branco

O espaço em branco é outro elemento visual a ser considerado. Embora o estado atual da tela em um celular seja pequeno e você deseja tirar o maior proveito dele, também pode desejar oferecer locais adicionais seguros para os seus usuários tocarem ou iniciarem a rolagem da tela, de modo que não selecionem filtros e outros itens acidentalmente.

Para adicionar espaço em branco, use o preenchimento ou objetos em branco. Para obter mais informações, consulte Dimensionar e organizar seu painel.

Publicar o painel

  1. Clique em Servidor > Publicar pasta de trabalho. Caso ainda não tenha feito logon, você será solicitado a inserir as suas credenciais.

  2. Na caixa de diálogo Publicar pasta de trabalho no Tableau Server, certifique-se de que a caixa de seleção Mostrar planilhas como guias esteja desmarcada.

    Quando esta caixa de seleção está marcada para painéis específicos do dispositivo, os requisitos de dimensionamento das guias interferem na capacidade do servidor de detectar corretamente o tamanho do navegador da Web e carregar o layout correto.

  3. Clique em Publicar.

Testar o painel

Após publicar o painel no Tableau Server ou no Tableau Online, teste-o ao visualizá-lo em diferentes tamanhos de navegador.

  1. Abra o painel no Tableau Server ou no Tableau Online.

  2. No canto superior direito da página, clique em Compartilhar e copie o conteúdo da caixa de texto Link.

  3. Cole a cadeia de caracteres em uma URL do navegador da Web. A cadeia de caracteres deve incluir o seguinte: embed=y

  4. Com a cadeia de caracteres de código inserido como a sua URL de navegador, teste os layouts diferentes ao alterar o tamanho da sua janela do navegador da Web e atualizá-la.

Confirmar qual layout será exibido por um dispositivo

O layout do painel exibido por um dispositivo é baseado na menor dimensão (altura ou largura) do iframe na qual a exibição do Tableau é mostrada. Às vezes, os layouts de computador, tablet ou celular podem ser exibidos em outros tipos de dispositivos. Por exemplo, um layout de tablet pode ser exibido em um computador desktop se a tela ou a janela do navegador for pequena demais.

Se a menor dimensão do iframe for ... Este layout de dispositivo será exibido ...
500 pixels ou inferior Smartphone
Entre 501 e 800 pixels Tablet
Maior que 800 pixels Desktop

Se os usuários do Tableau Online e do Tableau Server encontrarem um layout de telefone ou tablet muito limitado, eles poderão clicar em Ver layout de desktop na barra de ferramentas. Este botão de alternância permite que os usuários alternem de volta para o layout de dispositivo móvel a qualquer momento.

Agradecemos seu feedback! Ocorreu um erro ao enviar o feedback. Tente novamente ou envie-nos uma mensagem.