Fluent Design
![](http://upload.wikimedia.org/wikipedia/pt/thumb/c/cc/Fluent_UI_Apps.png/250px-Fluent_UI_Apps.png)
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]
A Microsoft anunciou o Fluent Design em 11 de maio de 2017, na conferência Build para desenvolvedores.
Principais elementos
[editar | editar código-fonte]Material acrílico
[editar | editar código-fonte]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]
Animação conectada
[editar | editar código-fonte]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]
Paralaxe
[editar | editar código-fonte]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
[editar | editar código-fonte]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]
Kits de ferramentas de design
[editar | editar código-fonte]Os kits de ferramentas do Fluent Design fornecem controles e modelos de layout para o design de aplicativos da Plataforma Universal do Windows.[9] Os kits fornecem ferramentas do Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer (no GitHub) e Sketch.[9]
Relação com interfaces anteriores
[editar | editar código-fonte]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]
Ver também
[editar | editar código-fonte]Referências
- ↑ «Fluent Design is Microsoft's new modern UI for Windows and more». The Verge. 11 de maio de 2017. Consultado em 11 de maio de 2017
- ↑ «Windows Developer on Twitter». Twitter (em inglês). Consultado em 11 de maio de 2017
- ↑ «"Fluent Design Language"». Microsoft. Consultado em 12 de maio de 2017
- ↑ «New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"». Ars Technica. Consultado em 11 de maio de 2017
- ↑ a b c «Material acrílico». Microsoft. 2017. Consultado em 24 de outubro de 2017
- ↑ a b c «Animação conectada para aplicativos UWP». Microsoft. 2017. Consultado em 24 de outubro de 2017
- ↑ a b c d «Paralaxe». Microsoft. 2017. Consultado em 24 de outubro de 2017
- ↑ a b c d «Revelação». Microsoft. 2017. Consultado em 24 de outubro de 2017
- ↑ a b «Projetar kits de ferramentas e recursos para aplicativos UWP». Microsoft. 2017. Consultado em 24 de outubro de 2017
- ↑ «Sistema de Design Fluent». Microsoft. 2017. Consultado em 24 de outubro de 2017