Belles implémentations de Material Design dans les applications mobiles

De nos jours, de nombreuses personnes recherchent de belles implémentations de Material Design dans des applications mobiles pour s'inspirer.

Oui, la conception matérielle est venue et a changé l'histoire de la conception et au cours des deux dernières années, elle était très populaire dans la conception d'applications mobiles et il existe un grand nombre de belles implémentations de conception matérielle dans les applications mobiles.

Mais avant cela, comprenons ce qu'est le Material Design et pourquoi il est devenu le langage de design le plus populaire et le plus réussi.

Qu'est-ce que la conception matérielle ?

Material Design est un langage de conception développé en 2014 par Google. S'appuyant sur les motifs de "cartes" qui ont fait leurs débuts dans Google Now, Material Design utilise plus librement les mises en page basées sur une grille, les animations et transitions réactives, le rembourrage et les effets de profondeur tels que l'éclairage et les ombres.

En 2015, la plupart des applications mobiles de Google pour Android avaient appliqué le nouveau langage de conception, notamment Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox.

Toutes les applications de marque Google Play, et dans une moindre mesure le navigateur Chrome et Google Keep. Les interfaces Web de bureau de Google Drive, Docs, Sheets, Slides et Inbox l'ont également intégré.

L'implémentation canonique de Material Design pour les interfaces utilisateur d'applications Web s'appelle Polymer.

Il se compose de la bibliothèque Polymer, un shim qui fournit une API de composants Web pour les navigateurs qui n'implémentent pas la norme de manière native, et un catalogue d'éléments, y compris la "collection d'éléments papier" qui présente des éléments visuels du Material Design.

Le système, qui se concentre sur les mises en page basées sur une grille, les effets de transition et la profondeur, a rapidement fait son chemin dans les applications Android et a amené le système à la norme de conception d'iOS.

Les principes du Material Design

Repères visuels inspirés

Google utilise le terme «réalité tactile» pour décrire sa philosophie de conception, car les surfaces et les bords de la conception des matériaux sont inspirés d'études réelles sur le papier et l'encre.

Cela aide les utilisateurs à comprendre visuellement l'interface numérique sur leur écran sans aucune difficulté. Une conception ancrée dans la réalité rend les objets à l'écran reconnaissables et faciles à interagir.

Esthétique audacieuse

Les choix de couleurs dans la conception des matériaux sont audacieux et délibérés. Des schémas de couleurs accrocheurs fonctionnent avec des techniques de conception fondamentales basées sur l'impression pour immerger l'utilisateur dans l'expérience.

Des espaces blancs intentionnels, des images bord à bord et une grande typographie sont utilisés pour mettre l'accent sur les actions de l'utilisateur. De cette façon, l'utilisateur comprend rapidement le but et la fonctionnalité de l'interface sur son écran.

Article connexe : Erreurs les plus courantes dans la conception d'applications mobiles

Le sens fait par le mouvement

Au lieu d'animations artificielles et mécaniques, le mouvement dans la conception matérielle apparaît fluide et naturel. Google recommande de procéder de différentes manières :

• Accélération et décélération naturelles : pour éviter les mouvements non naturels, les éléments d'une page doivent accélérer et décélérer en douceur. Les démarrages, les arrêts et les changements de direction brusques sont choquants et distrayants pour l'utilisateur.
• Continuité visuelle : une transition entre deux états visuels doit être fluide et sans effort afin que l'utilisateur ne soit pas distrait. Trop de cloches et de sifflets lorsqu'un site Web ou une application passe d'une page à l'autre ne sont pas nécessaires.
• Synchronisation hiérarchique : les éléments qui contiennent le contenu le plus important doivent être mis en valeur en étant placés sur le chemin le plus facile à suivre pour l'œil. En d'autres termes, il est important d'attirer l'attention sur des éléments importants.
• Chorégraphie cohérente : les éléments animés ne doivent pas passer au hasard, car cela peut être distrayant. Au lieu de cela, ils devraient voyager dans des chemins ordonnés qui ont du sens.

Material Design ne se contente pas de créer de l'ordre, il crée de l'ordre avec un but et un sens. C'est une expression sensorielle de la marque Google.

S'il trouve un achat, il pourrait s'agir de la première menace sérieuse pour le monopole apparent d'Apple sur une expérience utilisateur sublime. En tant que passionné d'iPhone, je dois avouer que pour la première fois, j'ai commencé à jeter des regards obliques à la manière d'Android.

La spécificité abrutissante du Material Design répond à deux faits :

• S'il est possible pour un développeur de ruiner une interface utilisateur, il le fera.
• L'alternative à un bon design n'est pas l'absence de design, c'est un mauvais design.

Maintenant, voici quelques-unes des plus belles implémentations de Material Design dans les applications mobiles.

Qui peut mettre en œuvre le Material Design mieux que ceux qui l'ont créé. Google Calendar est l'une des plus belles implémentations de Material Design dans les applications mobiles. Avec plus de 1 000 000 de téléchargements, il fait assurément vibrer la fête.

Google Agenda

Pour commencer, l'application de Google a finalement supprimé la conception skeuomorphique conventionnelle utilisée par la plupart des applications de calendrier qui imite la disposition d'un planificateur physique.

Il n'y a plus de restriction par la nécessité d'écrire notre horaire sur papier. Le calendrier de Google vous donne une disposition verticale et place le jour en cours en haut de la page.

De cette façon, vous ne voyez que les jours et événements à venir. Les jours où rien ne se passe sont condensés, ce qui rationalise davantage l'expérience pour ne vous montrer que ce qui est réellement utile.

Cette modification unique de l'interface permet simultanément à l'utilisateur de rester au centre de l'expérience afin que l'interface utilisateur se déplace autour d'eux. Ajoutez un peu de défilement parallaxe et vous avez une très belle application qui se combine.

Evernote

Evernote est souvent loué pour son approche de la conception matérielle et est un exemple accrocheur des belles implémentations de la conception matérielle dans les applications mobiles

L'application a une palette de couleurs forte et cohérente et est aussi bien conçue que fonctionnelle. Les icônes indiquent clairement et efficacement s'il s'agit d'une note textuelle, d'une note manuscrite ou d'une photo que vous allez prendre.

L'icône de l'éléphant est simple et élégante, tandis que le site Web, les applications iOS et Windows 10 sont également conçus et mis en page avec soin.

Microsoft Santé

Microsoft Health est en fait l'un des meilleurs exemples sur le Play Store.

L'application est conçue pour fonctionner avec le tracker de fitness Band et affiche toutes vos statistiques dans une disposition verticale simple avec des icônes blanches planes. Lorsque vous cliquez sur l'un de ces titres, le panneau s'ouvre pour révéler vos statistiques.

L'interface utilisateur est idéale pour vous permettre d'avoir un aperçu en un coup d'œil tout en ayant la possibilité d'approfondir si nécessaire, ce qui est la marque d'une bonne conception d'application.

Fabuleux : motivez-moi

Beaucoup de gens pensent que Fabulous: Motivate Me est l'implémentation de conception matérielle la plus précise et la plus réfléchie dans les applications mobiles.

L'application explore de nouveaux principes de conception de matériaux de toutes les manières normales avec ses images nettes et plates et ses couleurs vives, mais elle propose également certaines des animations les plus attrayantes du Play Store.

La liste ne serait pas complète sans l'application mobile de Facebook Live.

L'application est un exemple très minimal mais efficace de Material Design. Il utilise l'ombrage d'une manière qui n'est généralement pas vue; en utilisant des ombres claires au lieu de sombres pour donner de la profondeur.

Il fait un usage intéressant de l'iconographie, de l'animation et de la conception d'interaction - des aspects clés de Material.