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.
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.
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.
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.
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.
Quer nos ajudar a melhorar esse conteúdo?