Share
Au cours des derniers mois, Material Design a connu une croissance importante. Différentes composantes de la conception de matériaux, telles que les cartes de contenu et l'utilisation améliorée de l'animation, peuvent être trouvées dans de nombreuses applications que nous utilisons aujourd'hui..
Comme de nombreux articles de blog l'ont couvert, d'un côté, il s'agit d'une bonne évolution car il devient plus facile que jamais de créer un design solide. D'autre part, il y a des voix qui réfutent le manque d'originalité puisque tout le monde utilise un style similaire. De plus, avoir accès à un bon langage de conception ne signifie pas qu'il est appliqué correctement.
Dans ce didacticiel, nous verrons comment vous pouvez utiliser les concepts de conception de matériaux et les améliorer pour créer de meilleures interfaces qui sont en même temps plus distinctes dans leur style visuel. Nous allons également examiner quelques astuces générales avant de commencer à concevoir en utilisant Material Design comme point de départ..
D'abord et avant tout, il ne faut pas désapprouver, de la conception des matériaux à la conception. Pas du tout. En fait, cela aide à jeter les bases qui incombent aux utilisateurs d’Android..
Lorsqu'il s'agit de créer une bonne expérience utilisateur, il est souvent déconseillé de réinventer la roue..
L'utilisation de normes est un excellent début pour vous assurer de construire quelque chose qui fonctionne. La structure de l'interface et ses interactions ont fait leurs preuves. Cela dit, cela ne signifie pas qu'il n'y a pas de place pour l'erreur ou pour l'amélioration.
Un exemple de design de carteL'essentiel de Material Design revient à l'utilisation de cartes de contenu. Maintenant, les cartes sont certainement un composant qui peut être utilisé dans de nombreuses situations, ce qui en fait des modèles de conception très utiles. Simultanément, il peut être intéressant pour vous de concevoir des solutions de rechange plus intéressantes. Comme nous voyons de plus en plus de conceptions à base de cartes, il est bon de penser comment concevoir quelque chose. meilleur.
Prenez le calendrier comme exemple. Au lieu d'une liste par jour avec une carte pour chaque rendez-vous, remarquez comment Sunrise propose une vue combinée dans laquelle vous voyez à la fois la vue mensuelle et la vue quotidienne..
Gauche: Un concept de calendrier de conception de matériaux; À droite: lever du soleilLes jeux sont une autre grande source d’inspiration si vous essayez de trouver des interfaces uniques comme source d’inspiration. Consultez des sites Web inspirants tels que UIMovement pour découvrir de nouveaux types d'interfaces..
Lorsque vous construisez une interface, les cartes de contenu constituent-elles la solution la plus optimale ou pourrait-il exister d'autres moyens intéressants d'afficher du contenu qui pourraient constituer une meilleure solution?
Chaque application tente de résoudre un problème de sa propre manière. Dans cette optique, il peut être logique que votre solution nécessite un type d'interface différent..
Eh bien, comment procédez-vous? Tout commence par le contenu et la navigation, dont je parlerai plus en détail ci-dessous.
Exemple de bouton d'action flottant dans la boîte de réception de GoogleUn autre modèle de conception introduit par Material Design est le bouton d'action flottante. Un bouton d'action flottant est un excellent moyen de mettre en évidence une action dans une interface. En même temps, cela peut être l’un des pires mécanismes de conception possibles. Il existe de nombreuses façons d'utiliser un bouton d'action flottant de manière incorrecte:
Personnellement, je vois quelques cas où un bouton d'action flottant est un excellent ajout au produit, principalement dans les applications qui ont une interaction de base pour l'utilisateur. Une application de messagerie est un excellent exemple. Le bouton d'action flottante permet à l'utilisateur de composer un nouveau message. Uber serait un autre excellent exemple où cela se comprend. L'interaction principale du produit consiste à héler une voiture.
L'astuce consiste à faire attention et à voir si cela a du sens dans le contexte de votre produit. Ce n'est pas parce que c'est un élément d'interface standard qu'il pourrait convenir à votre application. Pour les produits plus complexes, où un utilisateur effectue fréquemment plusieurs actions, un bouton d'action flottant convient rarement..
Avec une direction de conception forte à partir de Material Design, il est parfois assez facile d'oublier une base stratégique avant de commencer à concevoir. Comment décidez-vous de ce que vous pouvez utiliser dans Material Design et de ce que vous pouvez améliorer?
Certains choix de conception, comme l’utilisation de cartes de contenu, par exemple limite vous au début.
Vous trouverez ci-dessous une brève liste de contrôle de certains éléments de votre application qui doivent être bien définis avant de prendre ce type de décision de conception..
Poser les bonnes questions vous permet de mieux comprendre ce que vous essayez de construire et de créer des interfaces plus efficaces..
Pour conclure, il y a deux règles simples que j'ai tendance à garder à l'esprit lors de la structuration de la navigation d'un produit..
Appliquez la règle des 80/20. 80% de mes utilisateurs n'utiliseront que 20% de mes fonctionnalités. Comment puis-je m'assurer que ces 20% de mes fonctionnalités sont les plus faciles d'accès dans mon produit??
S'il existe plusieurs façons d'accéder à un écran dans un produit, assurez-vous qu'il se déroule de manière très cohérente. Par exemple, le passage d’un écran de synthèse à un écran de détail doit se faire de la même manière..
Sur la base de ce qui précède, vous pouvez choisir le meilleur moyen pour les utilisateurs de naviguer dans un produit. Si vous avez un produit compliqué avec beaucoup d'options, un tiroir est le bon choix. Produit simple? Travailler avec des onglets est généralement votre réponse. Pour plus d'informations sur la navigation et la conception de matériel, je vous recommande de parcourir les directives de conception de matériau..
Ce concept d'application musicale trouvé sur Dribbble est un exemple de gestion de plusieurs types de contenu..Chaque application a un contenu. Les questions suivantes devraient vous aider à décider de la structure et de l'affichage du contenu du point de vue de la conception:
Une fois que vous avez déterminé votre contenu, il sera beaucoup plus facile de prendre des décisions de conception. C'est le moment où vous pouvez définir si l'utilisation de cartes est logique ou s'il existe des alternatives meilleures ou plus intéressantes à utiliser pour votre interface..
Le plus grand défi de conception auquel vous puissiez faire face est le suivant:
Comment puis-je m'assurer que mon application est tout aussi gratifiante pour les nouveaux utilisateurs que pour les anciens utilisateurs? Comment cela affecterait-il mon contenu et ma navigation??
Il s’agit là d’un défi difficile à relever, qui implique souvent une intégration efficace et la garantie que l’écran principal de votre produit est l’écran où l’essentiel de la valeur est pour vos utilisateurs. Avez-vous besoin d'exemples? Jetez un coup d'oeil aux produits suivants. Quel est leur écran principal et quelle valeur donne-t-il? Comment abordent-ils les utilisateurs??
Les produits ci-dessus devraient vous donner une inspiration. Ne vous découragez pas si cela vous semble intimidant au début. Il a fallu plusieurs itérations aux produits ci-dessus pour arriver là où ils sont aujourd'hui..
L'intégration est un sujet en soi. Je vous recommande de consulter certaines ressources qui vous donnent des informations précieuses, telles que Utilisateur intégré.
Maintenant que nous avons une bonne idée du fonctionnement fondamental de votre produit et des éléments possibles que vous pouvez utiliser dans Material Design, il est temps de pimenter un peu les choses. Il y a plusieurs façons d'améliorer votre application esthétiquement, certaines sont énumérées ci-dessous..
Votre sélection de polices contribue énormément à l'aspect et à la convivialité de votre produit. Choisir une police personnalisée peut fortement aider à créer un design plus diversifié et à donner à votre produit une apparence et une convivialité uniques sans faire de grands changements. Trouver les bonnes polices peut être délicat et une bonne partie dépend également du goût du design. Ma ressource préférée personnelle est Typewolf.
Dropbox est un excellent exemple d'application d'icônes et d'illustrations personnalisées sur leurs produits..L'ajout d'icônes personnalisées est un autre moyen d'intégrer votre propre apparence dans une application. L'utilisation d'iconographie personnalisée est délicate, car Material Design a créé un standard de qualité. Pour les icônes, cela signifie que certaines actions, navigations et autres éléments ont la même icône..
Si vous décidez de commencer à travailler avec votre propre ensemble d’icônes, vous devez vous rappeler deux aspects importants:
Timehop est un excellent exemple d'utilisation d'illustrations personnalisées pour créer une apparence distincte..La façon dont vous affichez le contenu photographique ou l’utilisation d’illustrations peut facilement ajouter du caractère à votre application. Sois créatif.
Ceci est un exemple d'animation unique et d'interaction correspondante. La source.Les animations et les interactions personnalisées exigent plus d’efforts, mais c’est un travail gratifiant de voir s’animer un produit. Des animations uniques construites sur des interfaces uniques juste travailler sont parmi les travaux de conception les plus gratifiants que vous pouvez trouver en ligne.
Cette conception utilise des concepts de conception de matériaux avec des couleurs inattendues. La source.Material Design fournit un grand choix de couleurs que vous pouvez choisir. Cela ne signifie pas que vous ne pouvez pas être très créatif avec votre utilisation de la couleur pour créer quelque chose de vraiment unique.
Il y a une raison pour laquelle la plupart des interfaces que nous connaissons quotidiennement sont des conceptions assez simples, dont l'efficacité a été prouvée et que les utilisateurs se sentent familiers lorsqu'ils l'utilisent..
Un design expérimental peut nuire à votre application.
Cela dit, avec quelques ajustements mineurs, par exemple, en vous concentrant uniquement sur la typographie et la couleur, vous pouvez aller très loin pour concevoir quelque chose d'unique pour votre application..
Material Design a créé une solution de secours confortable lorsque vous êtes confronté à un problème de conception. Jusque-là, vous avez toute la liberté créative pour repenser le fonctionnement d’une interface. Snapchat a mis au point un produit axé sur les gestes, une hiérarchie et une animation repensées sur Facebook Paper (iOS) et Medium réduit efficacement une interface pour se concentrer sur la lecture (et l'écriture)..
Dans cet esprit, allez de l'avant et concevez. Des commentaires ou des questions? Laissez-les dans les commentaires ou contactez-moi sur Twitter.
Accentsconagua