Aplicativo Calendário mostrando o efeito de translucidez presente no Fluent Design System.
O Microsoft Fluent Design (antes conhecida como: Project Neon),[1] oficialmente anunciado como Microsoft Fluent Design System,[2] em português: Sistema de Design Fluente, é uma linguagem de design e uma interface gráfica desenvolvida em 2017 pela Microsoft. O Fluent Design é uma reformulação da interface Metro UI que foi inserida no Windows 8, a reformulação inclui instruções para projetos e uma nova interação com o software, o Fluent Design é projetado para todos os dispositivos e plataformas com o Windows 10. O sistema é baseado em cinco componentes principais: luz, profundidade, movimento, material e escala e inclui um uso mais proeminente dos efeitos de movimento, profundidade e translucidez.[3] A transição para o Fluent Design é um projeto de longo prazo, que será lançado em ondas, ou seja aos poucos em atualizações do sistema, e não possui um objetivo ou tempo específico para conclusão, mas elementos da nova linguagem de design foram incorporados em aplicativos selecionados desde a Creators Update. O design terá um uso mais amplo na atualização Fall Creators, mas a Microsoft afirmou que o sistema de design não estará totalmente concluído na atualização do Fall Creators.[4]
O acrílico é um tipo de Pincel que cria uma textura parcialmente transparente. O acrílico é aplicado na superfícies dos aplicativos para adicionar profundidade e ajudar a estabelecer uma hierarquia visual.[5] A característica mais notável do acrílico é sua transparência, existem dois tipos de mistura de acrílico que alteram o que é visível através do material;
Acrílico de fundo
O acrílico de fundo revela o papel de parede da área de trabalho e outras janelas que estão atrás do aplicativo ativo no momento, adicionando profundidade entre janelas das aplicações, ao mesmo tempo que celebra as preferências de personalização do usuário.[5]
Acrílico de aplicativo
O acrílico de aplicativo adiciona uma sensação de profundidade dentro do quadro do aplicativo, oferecendo foco e hierarquia. ao design.[5]
As animações conectadas permitem que o usuário crie uma experiência de navegação dinâmica e convincente através da animação da transição de um elemento entre duas exibições diferentes. Isso ajuda o usuário a manter o contexto e oferece continuidade entre os modos de exibição.[6] Em uma animação conectada, um elemento parece "continuar" entre duas exibições durante uma alteração no conteúdo da interface de usuário, voando pela tela desde a sua localização na exibição de origem até seu destino na nova exibição. Isso enfatiza o conteúdo comum entre os modos de exibição e cria um efeito belo e dinâmico como parte de uma transição.[6] As animações conectadas fornecem uma metáfora visual poderosa que enfatiza a relação entre dois modos de exibição, chamando a atenção do usuário para o conteúdo compartilhado entre eles. Além disso, animações conectadas adicionam brilho e interesse visual à navegação da página, o que pode ajudar a diferenciar o design de movimento do aplicativo.[6]
A paralaxe é um efeito visual onde os itens mais próximos ao visualizador se movem mais rápido do que itens no plano de fundo.[7] A paralaxe cria uma sensação de profundidade, perspectiva e movimento.[7] Em uma interface de usuário, cria-se um efeito paralaxe movendo objetos diferentes em diferentes taxas quando a interface de usuário é rolada ou faz um movimento panorâmico.[7] Conforme o usuário rola a interface, a lista se move a uma taxa mais rápida que a imagem de fundo, o que cria a ilusão de profundidade.[7]
Revelação
O revelação é um efeito de iluminação que ajuda a trazer profundidade e foco para os elementos interativos do aplicativo.[8] Por meio da exposição das bordas ocultas ao redor de objetos, o revelação proporciona aos usuários uma melhor compreensão do espaço com o qual eles estão interagindo, ajudando-os a entender as ações disponíveis. Isso é especialmente importante em controles de lista e controles com placa traseira.[8] Existem dois componentes visuais principais no Revelação;
Revelação Hover
A revelação Hover está diretamente vinculada ao conteúdo que está sendo flutuado (via ponteiro ou entrada de foco), e aplica uma forma halo suave ao redor do item flutuado ou em foco, permitindo que o usuário saiba que pode interagir com ele.[8]
Revelação Borda
A revelação Borda é aplicada ao item em foco e aos itens próximos. Isso mostra que esses objetos nas proximidades podem executar ações semelhantes às do objeto em foco.[8]
Os princípios-chave do Fluent Design System são os blocos, luz, profundidade, movimento, material e escala, que se afastam do conceito plano que a interface Metro definiu e, ao mesmo tempo, preserva a aparência limpa introduzida na Metro UI, o Fluent Design renova os visuais do Windows Aero, que foi introduzido no Windows Vista e no Windows 7, e incluía translucidez desfocada, padrões de animação de paralaxe, sombras, efeitos de destaque após o ponteiro do mouse passar por um ícone ou aplicativo e movimentos de gesto de entrada, uma vez que a Metro UI tornou-se obsoleta.[10]
.svg){kind=logo}
