Fluent Design

Aplicativo Calendário mostrando o efeito de translucidez presente no Fluent Design System.

O Microsoft Fluent Design (antes conhecida como: Project Neon), oficialmente anunciado como Microsoft Fluent Design System, 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. 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.

A Microsoft anunciou o Fluent Design em 11 de maio de 2017, na conferência Build para desenvolvedores.

Principais elementos

Material acrílico

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. 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.

• 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.

Animação conectada

Ficheiro:Fluid connected effect.gif

Animação ilustrando o efeito de animação conectada.

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. 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. 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.

Paralaxe

Ficheiro:Parallax, fluent.gif

Animação ilustrando o efeito do paralaxe.

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. A paralaxe cria uma sensação de profundidade, perspectiva e movimento. 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. 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.

Revelação

O revelação é um efeito de iluminação que ajuda a trazer profundidade e foco para os elementos interativos do aplicativo. 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. 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.

• 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.

Kits de ferramentas de design

Os kits de ferramentas do Fluent Design fornecem controles e modelos de layout para o design de aplicativos da Plataforma Universal do Windows. Os kits fornecem ferramentas do Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer (no GitHub) e Sketch.

Relação com interfaces anteriores

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.

Ver também

• Material Design
• Windows Aero
• Windows Insider

Ligações externas

• Website oficial
• Documentação oficial do design
• Introdução oficial