Projetar Layouts de Tela para Tamanhos de Monitor Distintos

Você pode projetar layouts de tela para responder a dispositivos de tamanhos distintos, otimizando o conteúdo para que se adapte no browser para cada tamanho de monitor.

Tópicos:

Sobre o Projeto de Layouts de Tela para Exibição em Dispositivos com Tamanhos de Monitor Distintos

Você pode projetar layouts de tela que se adaptem a dispositivos de tamanhos diversos, otimizando o conteúdo no browser, por exemplo, em um celular, tablet ou laptop.

Otimizar layouts de tela para tamanhos de monitor distintos

Quando você abre uma pasta de trabalho em dispositivos de tamanhos distintos, o tamanho da tela no monitor é escalado para o tamanho da tela do browser usando os padrões do browser. O redimensionamento do browser pela redução de seu tamanho pode impactar sua capacidade de ver os detalhes nas visualizações. Por exemplo, os dados em um gráfico de dispersão, um mapa de calor ou a maioria dos dados de medida em uma visualização de mosaico podem ficar difíceis de ler, tornando impossível ver informações cruciais.

Quando você reduz o tamanho da tela em um browser, as visualizações ficam pequenas demais para exibir os dados adequadamente.
Esta imagem mostra um tamanho de tela no monitor visto em um browser no qual algumas visualizações ficaram pequenas demais para ver os dados corretamente.

Como autor, você pode projetar pontos de quebra da tela de forma que, quando o tamanho da tela no monitor for reduzido, a renderização de visualizações se altere para se adequar ao novo tamanho de monitor. Por exemplo, se o monitor disponível for pequeno demais para exibir uma visualização completa, você poderá reorganizar ou ocultar a visualização para funcionar melhor com o tamanho de monitor menor. Você especifica tamanhos de tela e layouts distintos no monitor usando pontos de quebra de tela, em que cada ponto de quebra representa um arranjo diferente de visualizações exibidas para cada tamanho de monitor.

Uma tela otimizada para um ponto de quebra de tamanho de monitor menor contém visualizações que são reorganizadas para tornar a exibição mais fácil no dispositivo menor.
Esta imagem mostra uma visualização otimizada usando um ponto de quebra para um dispositivo com um tamanho de monitor menor.

Você usa uma barra deslizante para definir tamanhos de monitor para quando os usuários consumidores exibirem telas em dispositivos de tamanhos distintos. Por exemplo, você pode alterar o modo de exibição das visualizações, reorganizando sua localização, tamanho ou visibilidade na tela.

Quando você adiciona um ponto de quebra a uma tela, o tamanho do monitor do ponto de quebra determina como as visualizações são exibidas quando vistas nesse tamanho de monitor. Você pode reposicionar, redimensionar ou remover visualizações de um ponto de quebra da tela para otimizar como os usuários percebem as visualizações. Você pode especificar diversas configurações de visualização para cada ponto de quebra, e as diferenças para cada ponto de quebra só são exibidas para o usuário consumidor quando a resolução de tamanho do monitor do browser corresponde ao tamanho do monitor do ponto de quebra para o qual as alterações são feitas.

Projetar Layouts de Tela para Exibição em Dispositivos Distintos

Você pode criar pontos de quebra da tela para determinar como as visualizações são exibidas para os usuários consumidores em dispositivos com tamanhos de monitor distintos. Por exemplo, você pode definir pontos de quebra distintos para otimizar a visualização no browser de um dispositivo móvel, tablet ou laptop.

Ícone Tutorial Tutorial

  1. Na Home page, passe o cursor do mouse sobre uma pasta de trabalho, clique em Ações e, em seguida, selecione Abrir.
  2. Clique em Editar para exibir a pasta de trabalho a ser editada.
  3. Expanda a tela até o tamanho máximo e, em Propriedades da Tela, defina o Layout como Ajuste Automático e clique em OK.
  4. No rodapé, clique em Editor de Tela Responsivo para abrir o editor, no qual você pode definir pontos de quebra para ver a tela em dispositivos distintos.
    Editor de Tela Responsivo

  5. Defina um ponto de quebra da tela:
    • Adicionar um ponto de quebra na posição atual da barra deslizante - Clique e arraste a barra deslizante para o valor em pixels do tamanho de monitor que você deseja usar para esse ponto de quebra;
      Arraste a barra deslizante até a largura necessária mostrada em pixels.

      em seguida, clique em Adicionar Ponto de Quebra Clique no ícone Adicionar Ponto de Quebra para adicionar um ponto de quebra no ponto em que a barra deslizante se localizapara adicionar o ponto de quebra na localização atual da barra deslizante.
    • Inserir manualmente um valor para um ponto de quebra - Clique em Abrir o Menu Editor de Tela Responsivo, clique em Adicionar Ponto de Quebra e digite um número no campo Posição para informar onde deseja colocar esse ponto de quebra.
      Informe uma posição manualmente para adicionar um ponto de quebra

  6. Repita a etapa anterior para definir pontos de quebra adicionais na tela.
  7. Inclua ou exclua visualizações para cada ponto de quebra da tela:
    • Clique com o botão direito do mouse no ponto de quebra da tela que deseja gerenciar (Um ponto final da tela e seu marcador) e clique em Gerenciar Ponto de Quebra.
      Use a caixa de diálogo Gerenciar Ponto de Quebra para incluir ou excluir visualizações do ponto de quebra desta tela.

    • Clique em uma visualização da lista a ser excluída ou incluída na tela para este ponto de quebra da tela. Em seguida, clique em OK.
      Use a caixa de diálogo Gerenciar Ponto de Quebra para excluir ou incluir visualizações e filtros do painel de controle da tela para este ponto de quebra.

  8. Opcional: Crie uma visualização e adicione-a a um ponto de quebra, selecionando dados no painel Dados e adicionando-os à tela.
    A nova visualização é adicionada apenas ao ponto de quebra atual. Porém, você pode adicionar a visualização a outros pontos de quebra na tela, selecionando a visualização na lista da caixa de diálogo Gerenciar Ponto de Quebra correspondente a esse ponto de quebra.
  9. Opcional: Otimize a exibição de visualizações para o ponto de quebra de uma tela.
    Talvez você queira otimizar o conteúdo para ser exibido em um dispositivo menor, como um celular.
    • Reorganizar visualizações - Clique e arraste visualizações para uma nova posição.
    • Otimizar visualizações - Use o painel Propriedades para ocultar conteúdo desnecessário, como o título ou a legenda.
    Quando você otimiza visualizações de um ponto de quebra, essas alterações não se aplicam a outros pontos de quebra da tela.
  10. Clique em Salvar.