Share
Ce que vous allez créerGrâce à Material Design, un langage visuel développé par Google, la conception d'interfaces utilisateur pour la plate-forme Android est plus simple que jamais. Une fois que vous avez passé quelques minutes à parcourir ses spécifications, qui sont mises à jour régulièrement, vous pouvez commencer à concevoir des applications Android qui correspondent à l'apparence native des versions récentes d'Android, notamment Marshmallow et Nougat. De plus, pour vous faire gagner du temps et de l'énergie, Google a publié une feuille d'autocollants pour Material Design..
Feuille d'autocollantDans ce tutoriel, je vais vous montrer comment utiliser la feuille d'autocollants pour Adobe Photoshop pour concevoir rapidement l'interface utilisateur d'une application Android..
Les interfaces utilisateur conformes à la spécification Material Design sont, pour la plupart, composées de formes simples, de couleurs unies et de quelques ombres. Par conséquent, contrairement aux interfaces utilisateur skeuomorphic, elles ne varient pas beaucoup. En fait, à l'exception de leurs couleurs, de leurs tailles et de leurs élévations, les widgets d'interface utilisateur se ressemblent dans presque toutes les applications Material Design. La feuille d'autocollants Material Design contient des images de ces widgets et, en l'utilisant, vous pouvez effectivement suivre une approche par glisser-déposer en matière de conception d'interface utilisateur..
Conception de l'interface utilisateur par glisser-déposerBien que nous utilisions Adobe Photoshop dans ce didacticiel, il convient de noter que la feuille d'autocollants est également disponible pour Sketch, Adobe Illustrator et After Effects..
Pour pouvoir suivre, vous aurez besoin de:
Lancez Adobe Photoshop et allez à Fichier> Ouvrir… pour ouvrir la feuille d’autocollants que vous avez téléchargée. Sauf si vous avez le Roboto police déjà installée sur votre ordinateur, une boîte de dialogue vous invitant à la synchroniser à partir d'Adobe Typekit ou à la télécharger à partir d'une autre source (telle que Google Fonts).
Si vous utilisez Typekit, appuyez sur le bouton Résoudre les polices bouton pour continuer. Bien sûr, vous devez être connecté à votre compte Creative Cloud pour que la synchronisation soit terminée..
Une fois que la feuille d’autocollants s’est ouverte, vous verrez qu’il s’agit d’un document très volumineux. 5688 × 6790 px-avec plusieurs couches et groupes de couches. Je suggère que vous passiez quelques minutes à regarder tout ce qu'il a à offrir.
La barre d'état, la barre de navigation et la barre d'applications sont souvent appelées les «éléments globaux» d'une application. En les créant d'abord, nous définissons la zone dans laquelle le reste des widgets d'interface utilisateur sera placé.
Dans la feuille d’autocollants, tous les éléments globaux sont présents dans le groupe de couches appelé Éléments globaux. Il contient également des éléments globaux pour les interfaces utilisateur mobiles, tablettes et ordinateurs de bureau. Pour le moment, cependant, concentrons-nous uniquement sur MOBILE groupe de couches en le sélectionnant et Alt-cliquant son icône pour les yeux.
Comme vous pouvez le constater, le groupe de couches contient tous les éléments dont nous avons besoin, ainsi que quelques guides qui nous aideront à positionner précisément les autres widgets de l'interface utilisateur. Aller à Couche> Groupe en double… créer une copie dans un nouveau document appelé MyMaterialApp.
Dans ce tutoriel, nous créons l'interface utilisateur d'une application Android qui servira de compteur de calories. Par conséquent, dans le document nouvellement créé, développez le Barre d'application groupe de couches et utiliser le Outil de type horizontal (T) changer le titre de l'application en “Calories”.
De plus, notre conception aura un graphique dans la région de la barre d'applications. Pour faire de la place, sélectionnez les deux ombre clé et ombre ambiante couches, appuyez sur Ctrl + T, et les faire tous les deux 250px de haut. N'oubliez pas de commettre la transformation en frappant Entrer.
Revenez à l'onglet de la feuille d'autocollants et recherchez le LISTES groupe de couches. Il existe huit types de listes disponibles à l'intérieur. Cependant, nous utiliserons uniquement le septième type. Par conséquent, sélectionnez le groupe de couches appelé Liste7 et allez à Couche> Groupe en double… créer son duplicata dans le MyMaterialApp document.
Retour dans le MyMaterialApp onglet, assurez-vous que vous placez le Liste7 couche juste en dessous de la Barre d'application couche. Une fois que vous le faites, vous verrez que les guides et le contenu de la liste s’alignent parfaitement.
C'est toujours une bonne idée de donner des noms significatifs à vos groupes de calques. Par conséquent, renommez le groupe de couches de la liste en «Liste des aliments»..
Modifions maintenant la liste pour qu’elle affiche les aliments avec la taille de leurs portions. C'est facile. Sélectionnez les calques de type appropriés et utilisez le Outil de type horizontal (T) pour changer leur contenu. Je vous suggère également de changer le poids de la police des aliments en "Gras".
Une application de compteur de calories ne serait pas très utile si elle ne affichait pas de calories. Notre liste, cependant, n'a pas de place pour plus de texte. Par conséquent, supprimez les calques appelés «carrés» des groupes de calques nommés liste_01, list_02, et liste_03.
Vous pouvez maintenant utiliser le Outil de type horizontal (T) pour ajouter de nouveaux calques de type affichant les calories. Changer la taille de la police des calques en 24px, leur nom de police à Roboto Regular, et leur couleur # 333333.
Nous pouvons rendre notre interface utilisateur beaucoup plus attrayante en y ajoutant des icônes Material Design. Pour le moment, téléchargeons trois icônes différentes pour les trois éléments de notre interface..
Allez à la page Material Icons et choisissez d’abord l’icône nommée pizza locale. Dans la feuille du bas qui apparaît, modifiez sa taille en 36dp et cliquez sur le PNGS bouton pour télécharger un fichier ZIP contenant l'icône.
Extraire le fichier ZIP et aller dans le dossier android / drawable-mdpi pour trouver le fichier image réel. Faites-le glisser et déposez-le à l'intérieur du MyMaterialApp onglet de la fenêtre Adobe Photoshop.
Répétez les mêmes étapes pour les icônes étiquetées café local et repas locaux.
Nous pouvons maintenant remplacer les cercles dans les éléments de la liste par les icônes. Commençons par le pizza locale icône. Sélectionnez son calque et le calque appelé cercle, celui qui est à l'intérieur du liste_01 groupe de couches. Aller à Couche> Aligner> Centres verticaux pour aligner leurs centres verticalement. De même, allez à Couche> Aligner> Centres horizontaux aligner leurs centres horizontalement.
À ce stade, vous pouvez supprimer le calque «cercle» dans liste_01.
Répétez les mêmes étapes pour les deux autres icônes.
Ajoutons maintenant quelques couleurs, car les interfaces utilisateur de Material Design ont tendance à être lumineuses et colorées..
Sélectionnez la couche nommée «ic_local_pizza_black_36dp», cliquez dessus avec le bouton droit de la souris et sélectionnez Options de fusion… . Dans la boîte de dialogue qui apparaît, allez à la Superposition de couleurs section et choisissez la couleur # ffc107, qui est appelé Ambre 500 dans la palette de couleurs Material Design.
Répétez les mêmes étapes pour les couches nommées «ic_local_cafe_black_36dp» et «ic_local_dining_black_36dp». Assurez-vous de choisir une couleur différente à chaque fois.
Colorons les éléments globaux maintenant. Pour changer la couleur de l'arrière-plan, sélectionnez le calque nommé «Arrière-plan», appuyez sur UNE pour sélectionner le rectangle à l'intérieur et changer le Remplir couleur au blanc.
Pour changer la couleur de la barre d'état, ouvrez le groupe de calques «Barre d'état», sélectionnez le calque nommé «barre», appuyez sur UNE, et changer le Remplir couleur à Rouge 900, dont la valeur hexadécimale est # b71c1c.
De même, pour changer la couleur de la barre d’application, ouvrez le groupe de calques «Barre d’application», sélectionnez le calque nommé «ombre touche», appuyez sur UNE, et mettre le Remplir couleur à Rouge 500, ou # f44336.
Un bouton d'action flottant est l'un des widgets les plus importants d'une interface utilisateur Material Design. Vous pouvez l'obtenir en dupliquant le groupe de calques «Bouton d'action flottant» de la feuille d'autocollants. Si vous avez des difficultés à le trouver, cherchez-le dans le groupe de couches «METRICS AND KEYLINES»..
Dans votre document, placez le groupe de calques «Bouton d’action flottant» au-dessus du groupe de calques «Liste des aliments»..
Ensuite, utilisez le Outil de déplacement (V) et positionnez le bouton d'action flottant dans le coin inférieur droit de l'interface utilisateur.
Le bouton d'action flottante doit avoir une couleur d'accent. Par conséquent, sélectionnez le calque «Ombre de touche» dans son groupe de groupe de calques, appuyez sur UNE pour sélectionner le cercle à l'intérieur et changer le Remplir couleur à Accent Rouge 700, ou # d50000.
De même, changez la couleur du calque «ic_add», qui contient le symbole plus, en blanc. En outre, ouvrez son Options de fusion… et changer la valeur de son Opacité à 100%.
Vous avez peut-être remarqué que notre document est très volumineux et que son dessin n’occupe qu’une petite région. Pour modifier la taille du document afin qu'elle corresponde à celle du motif, allez à Image> Garniture. Dans la boîte de dialogue qui s’ouvre, continuez avec les valeurs par défaut et appuyez sur D'accord.
Comme je l'ai mentionné précédemment, la zone de la barre d'applications dans notre interface utilisateur comportera un graphique. Parce que la feuille d'autocollants n'a pas d'autocollants pour les graphiques, nous devrons le créer manuellement.
Commencez par allumer la grille. Pour ce faire, allez à Voir> Afficher> Grille.
presse Maj + Ctrl + N créer un nouveau calque à l'intérieur du Barre d'application groupe de couches et utilisez le Outil Crayon (B) tracer quatre lignes horizontales, blanches et 1 px épais, en dessous du titre de l'application.
Utilisez le Outil de type horizontal (T) d'ajouter trois dates sous la dernière ligne horizontale. La taille de la police des dates peut être 13px.
Vous pouvez maintenant désactiver la grille en allant à Voir> Afficher> Grille encore.
Sélectionnez tous les calques que vous avez créés à cette étape et appuyez sur Ctrl + G pour créer un nouveau groupe de couches pour eux. Nommez le groupe de couches «Graphique».
Ensuite, dans le groupe de couches «Graphique», créez un nouveau calque et appelez-le «Données». À l’intérieur du calque, tracez un tracé fermé à l’aide du Outil stylo (P). La forme du chemin n'a pas beaucoup d'importance, tant qu'elle ressemble à une courbe lisse.
Pour remplir le chemin avec la couleur de premier plan, allez à la Les chemins panneau, clic droit sur Chemin de travail et choisir Chemin de remplissage… . Dans la boîte de dialogue qui apparaît, choisissez les valeurs par défaut et appuyez sur D'accord.
Pour que le graphique ait l’air moins envahissant, réduisez le Opacité du groupe de couches «Graphique» à 75%.
Enfin, utilisez le Outil de type horizontal (T) pour afficher le nombre total de calories consommées sous le graphique. Laissez la taille de la police du numéro être 24px, et celui de l'étiquette soit 14px.
Notre conception est maintenant terminée. Allez-y et cachez le groupe de couches "Guides" car nous n'en aurons plus besoin.
Envelopper votre conception dans le cadre d'un périphérique réel et y ajouter un éclat à l'écran a tendance à lui donner un aspect plus poli et plus réaliste. Bien que vous puissiez utiliser Adobe Photoshop pour ce faire, il est beaucoup plus simple d'utiliser le Device Art Generator de Google..
Tout d’abord, exportez votre dessin au format PNG en allant à Fichier> Enregistrer sous… .
Vous pouvez maintenant faire glisser le fichier PNG sur n’importe quel appareil que vous voyez dans le générateur d’illustrations. Notez que vous devrez redimensionner votre image jusqu'à au moins 1080 × 1920px pour utiliser les cadres des derniers appareils..
Une fois que l'image de périphérique a été générée, vous pouvez la faire glisser dans n'importe quel dossier de votre ordinateur pour l'enregistrer..
Dans ce tutoriel, vous avez appris à utiliser la feuille d'autocollants Material Design et Adobe Photoshop pour concevoir l'interface utilisateur d'une application Android. N'hésitez pas à lui ajouter d'autres widgets, à changer ses couleurs et à expérimenter sa mise en page..
Je voudrais également vous rappeler que la spécification Material Design est simplement une collection de directives recommandées. Vous n'avez pas à y adhérer tout le temps, tant que vous vous assurez que le résultat final est cohérent et intuitif.
Pour en savoir plus sur la conception d'applications pour Android et pour trouver plus de ressources en matière de conception, vous pouvez visiter Google Design..
Accentsconagua