Ações
Utilizado em todas as páginas institucionais da Bradesco Seguros, é uma forma simples de navegar pelo site e encontrar todas as opções e recursos que estão disponínveis para você. Todas as ações e interatividade comportada no portal.
Na prática :)
Sobre
O comportamento das micro interações tem seu conceito de design para demonstrar sempre como feedback de uma ação ou tarefa,acompanhe ao longo da página.
Downloads :)
Basic_
No conceito de design constituido pela Bradesco Seguros, a parte de downloads segue diversos estilos para demonstrar seu papel, nesse primeiro Basic, mostra apenas simplificando o nome, tamanho e o icone para baixar.
A micro interação dessa primeira interface é seguida através dos estilos já utilizados no design, respeitado pela marca.
Fundo acionado
Cor Background: #fafaf6
Fundo normal
Cor Background: #ffffff
Links fonte
Cor Texto: #4d4e53
Titulo fonte
Cor Texto: #4d4e53
Icone seta download
Cor Background: #f0092f
Multi
No conceito de design constituido pela Bradesco Seguros, a parte de downloads segue diversos estilos para demonstrar seu papel, nesse primeiro Basic, mostra apenas simplificando o nome, tamanho e o icone para baixar.
As instruções para criação segue com o padrão utilizado, as mudanças são pequenas, porém aceitas.
Padrão de construção_
Dimensão botão: 137px x 39px
Primeira cor fundo: #e60935
Segunda cor fundo: #99000f
Tamanho fonte: 16px
Font-family: Open Sans
Cor fonte: #fff
Raio Borda: 1px
Fundo acionado
Cor Background: #fafaf6
Fundo normal
Cor Background: #ffffff
Links fonte
Cor Texto: #4d4e53
Titulo fonte
Cor Texto: #4d4e53
Icone seta download
Cor Background: #f0092f
Filter_
O modelo de filter, mostra novas interações com o usário, onde ele demonstra mais ações que sera feita, gerando-lhe maior confiança e interatividade antes do seu desejo que é o download.
Seguindo os modelos anteriores, as recompensas visuais mudam, não são muito diferentes, porém satisfatória para o estilo do modelo.
Fundo acionado
Cor Background: #fafaf6
Fundo normal
Cor Background: #ffffff
Links fonte
Cor Texto: #4d4e53
Titulo fonte
Cor Texto: #4d4e53
Icone seta download
Cor Background: #f0092f
Accordion_
O modelo accordion, segue com as interações de versatilidade, que incorpora-se em vários estilos já conhecidos no design, principalmente em portais grandes como a da Bradesco Seguros.
Modelo com sensações necessárias, com diferenças dos modelos anteriores, com a forma mais humana com a interface utilizada.
Fundo acionado
Cor Background: #fafaf6
Fundo normal
Cor Background: #ffffff
Links fonte
Cor Texto: #4d4e53
Titulo fonte
Cor Texto: #4d4e53
Icone seta download
Cor Background: #f0092f
Full_
Modelo que engloba todas as vertentes e interações dos modelos anteriores, funções conjuntas que funcionam lado a lado do design, com versatilidade e minimalismo com os detalhes.
Utiliza-se todos os conceitos dos anteriores, como o mais notavel dos recursos.
Fundo acionado
Cor Background: #fafaf6
Fundo normal
Cor Background: #ffffff
Links fonte
Cor Texto: #4d4e53
Titulo fonte
Cor Texto: #4d4e53
Icone seta download
Cor Background: #f0092f
FAQ :)
Faq
Sessão que disponibiliza ao usuário acesso rápido a preguntas frequentemente feitas pelos clientes, juntamente com suas respectivas respostas. Para a visualização dessas informações é utilizado o elemento acordeom, que possibilita o usuário expandir ou diminuir sessões do conteúdo. Este componente contém campos para inserção de título da seção, título da linha de pergunta, texto descritivo de resposta de cada linha. Permitir que ao clicar sobre cada linha, exista uma expansão do texto.
Lista de perguntas que se expandem mostrando a resposta quando clicadas. Botão para visualizar mais perguntas no rodapé do componente (opcional).
Box List :)
Text
Uso das micro interações para geração de links, os boxs servem para demonstrar a principal função, que é a receptividade de uma interface mais humana, facil entendimento e compreensão.
Reforçando sempre com um padrão de cores e tamanhos seguindo a marca Bradesco Seguros .
Fundo acionado
Cor Background: #fafaf6
Titulo fonte
Cor Texto: #4d4e53
Link cor
Cor : #f0092f
Link_
Modelo link, uma vez que utiliza a mesma experiência do usuário para criar melhor feedback, links selecionaveis de formas diferentes, mostram sua diferença na interação com o usuário.
Reforçando um padrão utilizavel, sempre em busca da simplicidade.
Fundo normal
Cor Background: #fafaf6
Titulo fonte
Cor Texto: #4d4e53
Link cor
Cor : #f0092f
Lista Link :)
Baseando-se em experiência do usuário, os botões sempre são a interação mais notavel e basicamente o mais propício a resposta rápida do usuário na sua interatividade.
Segue uma ordem de tamanhos, design e cor lembrando a suavidade nos tons.
Padrão de construção_
Dimensão botão: 745px x 52px
Cor botão normal: #fff
Cor botão hover: #cc092f
Tamanho fonte: 16px
Font-family: Open Sans
Cor fonte: #fff
Raio Borda: 6px
4 Colunas_
A interação fica mais possível, quando é utilizada a micro interação visual conhecida como icone, acertando com o nome, o feedback ao usuário fica mais rápida e de fácil compreendimento.
Segue uma ordem de tamanhos, design e cor lembrando a suavidade nos tons.
Padrão de construção_
Dimensão botão: 733px x 52px
Dimensão icone: 25px 24px
Cor botão hover: #cc092f
Tamanho fonte: 16px
Font-family: Open Sans
Cor fonte: #fff
Raio Borda: 6px