Fluent Design est là !

J’en parlais dans un précédent article (http://blog.florian-rousselet.fr/2017/05/microsoft-build-2017-details-nouveautes-xaml-uwp/) , le nouveau design  de Microsoft, le Fluent Design allait faire son apparition au fur et à mesure au sein de différentes applications de Windows 10. Et bien cela n’a pas trainé, après juste quelques semaines, plusieurs applications sont déjà à la nouvelle mode.

 

Calculatrice

Aussi étonnant que cela puisse paraître, c’est une application « banale » qui a été parmi les premières à profiter d’une mise à jour visuelle. La calculatrice, longtemps délaissée, profite depuis Windows 10 d’un cycle de développement plus rapide et s’accompagne même maintenant d’un convertisseur de devise.

En termes de design, la calculatrice a profité de 2 des nouvelles « fonctions » : Reveal & Acrylic Material.

Reveal est un nouvel effet, mettant en avant, par un « hover » certaines fonctionnalités/boutons afin de guider l’utilisateur. Ainsi au passage de souris, ou au clic, l’application sera légèrement modifiée visuellement.

Par exemple, au déplacement de la souris sur le bouton multiplier, l’apparence du bouton change et suis le pointeur de souris.

Le second effet, Acrylic Material, concerne le fond complet de l’application et remplace l’ancien fond « plein ». Cet effet ajoute de la transparence à toute l’application afin qu’elle puisse mieux se fondre dans son environnement et s’intégrer à l’ordinateur de l’utilisateur.

Avant
Maintenant

A noter que cette notion de transparence est aussi directement présente sur le Menu Démarrer par exemple

On retrouve l’Acrylic Material aussi au sein des applications afin de mieux intégrer les menus. Ici dans l’application « Cartes« , le menu du haut propose de la transparence afin de garder une continuité avec la carte située en dessous.

 

Groove Musique

Dernier effet que je souhaitais montrer dans cet article et qui existe depuis plusieurs années dans les guidelines de Material Design (design Android) fait maintenant son apparition au sein du monde Windows. Ici avec Groove par exemple, l’interface se compacte graduellement en haut de l’application afin d’apporter un niveau de détails selon le scroll de l’utilisateur.

 

Pour en savoir plus sur le Fluent Design, direction le site de Microsoft : http://fluent.microsoft.com/ ou alors cette vidéo de la Build 2017 https://channel9.msdn.com/Events/Build/2017/B8066?ocid=player

Laisser un commentaire

%d blogueurs aiment cette page :