| Versão | Data | Descrição | Autor |
|---|---|---|---|
| 1.0 | 23/03/2023 | Criação do Documento | Igor Feitoza |
| 1.1 | 08/05/2023 | Atualização Documento | Diéssica Ávila |
| 1.2 | 09/05/2023 | Atualização Documento | Igor Feitoza |
| 1.3 | 10/05/2023 | Atualização Link Figma | Igor Feitoza |
Além do seu valor estético, essas animações têm diversas funções, que vão desde guiar e facilitar a experiência da pessoa usuária até dar uma personalidade única para determinado app ou página da web.
Neste documento, listamos as principais interações e Microinterações propostas para o novo site Petrobras.
<aside> ℹ️ Documentação referente a motion Design e Microinterações
</aside>
Hover é uma função em que, quando você move o cursor do mouse sobre um elemento na interface de usuário, como um botão ou link, esse elemento pode ter uma mudança visual, como uma mudança de cor, exibição de texto adicional ou um efeito de animação. Isso é comumente usado em design de interface para tornar a experiência do usuário mais agradável e intuitiva.
Abaixo a listagem de principais interações em Hover:
Clique aqui para interagir com o protótipo - Button Hover - Enabled
Especificações Técnicas:
While hovering
Default Button color: #038542
Change to: #00552A
animation-dissolve animation-timing-function: ease-in-out; animation-duration: 300ms;
<aside> ⚠️ Atenção: As interações de Hover nos botões funcionam da mesma forma para todas as variações de Button que sigam as respectivas cores listadas acima. As variantes em questão são: ❖ button/default/primary, ❖ button/default/secondary, ❖ button/default/tertiary
</aside>
