Skip to main content

Interface responsiva de usuário

Comportamento responsivo

O comportamento responsivo oferece uma melhor experiência do usuário dos elementos em uma visualização, a despeito do tamanho da tela — minimizando a rolagem horizontal e maximizando a apresentação de dados no espaço disponível de exibição. 

Veja uma introdução sobre a interface do usuário (IU) responsiva no vídeo a seguir:

Transcrição do vídeo

Cada empresa luta para alcançar seus clientes em qualquer canal, local ou dispositivo. Com diversos tamanhos e resoluções de telas, uma IU responsiva pode se adaptar automaticamente para criar uma melhor experiência do usuário em qualquer dispositivo. A IU responsiva não só beneficia o usuário final, como também beneficia a empresa, já que uma única versão da IU pode atender múltiplos dispositivos.

Por exemplo, após um pequeno acidente de carro, o segurado inicia uma solicitação de sinistro em casa, utilizando o laptop. A IU é feita sob medida para resolução mais alta de tela. Em outro exemplo, o segurado deseja enviar a solicitação imediatamente de seu dispositivo móvel. O mesmo processo é apresentado ao cliente, com a IU se adaptando à resolução de tela do dispositivo móvel e oferecendo uma experiência igualmente produtiva.

Opções de comportamento responsivo

As opções de comportamento responsivo incluem o layout do design do formulário e a importância das colunas nas tabelas. Por exemplo, quando um usuário alterna de visualização em paisagem para retrato em um tablet, a IU responde e a tela se torna mais estreita dinamicamente.

responsive-behavior-gif
Dica: Personalizações avançadas para o comportamento responsivo, como a configuração de pontos de interrupção personalizados e a modificação de importância das colunas, são executadas no Dev Studio.

Pontos de interrupção responsivos

Um ponto de interrupção define a largura de uma tela. Por padrão, os pontos de interrupção da Pega são ajustados automaticamente. Quando a largura da tela cruza um ponto de interrupção, o comportamento responsivo é aplicado ao layout. Com um layout dinâmico, o comportamento do ponto de interrupção responsivo muda o layout dos campos com base na largura da área da tela. 

Por exemplo, os pontos de interrupção padrão exibem automaticamente quatro colunas como duas colunas em um tablet e como uma única coluna em um dispositivo móvel, tornando o formulário legível em telas menores e eliminando a necessidade de rolagem horizontal.

responsive-ui-loop-gif

Comportamentos do ponto de interrupção

É possível selecionar o comportamento que aciona o ponto de interrupção. As opções para os comportamentos do ponto de interrupção incluem:

Comportamento Descrição
Ocultar este componente Oculte o layout se os campos no layout não forem necessários ou não forem considerados essenciais ao processo de negócio.
Transformar em outro formato

Transformar o layout em outro formato. As opções disponíveis variam com base no formato selecionado de transformação.

Por exemplo, é possível transformar os layouts Two-Column e Three-Column em um layout Single-Column. No entanto, para um grupo de layout, um menu pode ser transformado em um layout em sanfona.

Transformar em lista  Condense a tabela em um layout de única coluna, onde cada linha é exibida verticalmente, antes de exibir a próxima coluna.
Soltar colunas com importância Other Priorize as colunas em uma tabela para garantir que as colunas mais importantes estejam sempre visíveis para os usuários. Ao exibir a tabela em uma tela menor, você pode ocultar colunas opcionais. A importância da coluna define como a Pega Platform exibe ou oculta colunas (colunas marcadas como Other são opcionais).

Modelos de layout

No App Studio, o layout dos campos é limitado aos modelos de design disponíveis. O modelo de design determina como a interface do usuário é alterada. É possível mudar o modelo de layout configurando a visualização no tempo de execução. 

Por exemplo, é possível configurar uma visualização para utilizar um modelo de design de 2 colunas em vez de modelo de design de 1 coluna. 

template-change

Pré-visualizar múltiplos dispositivos

É possível pré-visualizar seu aplicativo para ver como ele é exibido em vários dispositivos utilizando o recurso Preview . No App Studio, clique em Preview e então selecione um portal na lista de portais ao lado do nome do aplicativo. Passe com o mouse sobre os ícones de monitor e tablet para verificar o tamanho da pré-visualização e clique no ícone para exibir a prévia do aplicativo em um dispositivo.

Preview button in the navigation pane of App Studio

 

Verifique seus conhecimentos com a interação a seguir.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Este conteúdo foi útil?

Quer nos ajudar a melhorar esse conteúdo?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice