Conception d'interface utilisateur Android Conception d'icônes

Tout comme les applications iOS doivent imiter l'apparence de la plate-forme iOS, les applications Android de qualité professionnelle doivent être conçues pour s'intégrer parfaitement au reste de la plate-forme Android. Aujourd'hui, nous divergent légèrement de nos tutoriels centrés sur les développeurs et fournissons une introduction de base à la conception d'icônes adaptées à la plate-forme Android..

L'équipe de développement Android fournit un ensemble de directives de conception d'icônes aux développeurs d'applications et aux concepteurs d'interface utilisateur. Nous ne pensons pas qu'une discussion rapide sur la conception des icônes Android soit trop éloignée du sujet. Lors de diverses conférences de l’industrie, l’équipe Android a recommandé aux développeurs d’Android de faire appel à des graphistes professionnels pour concevoir leurs graphiques d’application et leurs icônes. Bien que ce soit probablement le scénario optimal, nous avons constaté que le développeur d’applications mobiles porte souvent un certain nombre de chapeaux et que, par conséquent, ces tâches graphiques tombent parfois dans une configuration moins graphique (nous-mêmes inclus). Par conséquent, nous pensons que ce sujet mérite un rapide tutoriel..

Outils de conception d'icônes

Vous pouvez concevoir des icônes pour la plate-forme Android à l'aide de plusieurs outils de conception graphique. Nous vous recommandons d’en trouver un qui prenne en charge le format de fichier .PSD (format de fichier natif d’Adobe Photoshop) ainsi que le format PNG (idéal pour la plupart des graphiques mobiles). Nous utilisons des produits Adobe Creative Suite, tels que Photoshop et Illustrator, qui prennent en charge ces formats de fichier. Nous connaissons bien la suite d’applications Adobe, mais de nombreux autres programmes disponibles prennent également en charge ces formats. Trouvez-en un et respectez-le!

Étape 1: Créer des icônes compatibles

Les applications Android peuvent utiliser la hiérarchie de fichiers de ressources alternative pour fournir des ressources (y compris des graphiques) pour différents types de périphériques. Les ressources graphiques des applications Android (appelées dessinables) sont organisées dans une hiérarchie de répertoires de ressources à l'aide d'étiquettes spéciales. Plus particulièrement pour la conception d'icônes, vous pouvez fournir des versions alternatives d'icônes pour des périphériques spécifiques avec différentes densités d'écran.

Par exemple, les icônes stockées dans un répertoire intitulé ldpi serait conçu pour convenir aux écrans de périphériques à faible densité. Inversement, les icônes stockées dans un répertoire de ressources intitulé hdpi serait conçu pour convenir aux écrans haute densité. Il existe quatre catégories principales de périphériques spécifiques aux dpi:

  • le ldpi label peut être utilisé pour spécifier des ressources d'icône pour les écrans à faible densité (~ 120 dpi).
  • le mdpi label peut être utilisé pour spécifier des ressources d'icône pour les écrans de densité moyenne (~ 160 dpi).
  • le hdpi label peut être utilisé pour spécifier des ressources d'icône pour les écrans haute densité (~ 240 dpi).
  • le xhdpi label peut être utilisé pour spécifier des ressources d'icône pour des écrans très haute densité (~ 320 dpi).

Remarque: chaque version alternative d'un fichier d'icône (stockée dans son répertoire dpi spécifique) doit avoir le même nom que ses alternatives dans les autres répertoires..

Étape 2: Téléchargez le dernier pack d'icônes

Vous pouvez trouver toutes les différentes versions d'une icône que vous devez créer pour votre application spécifique, ou vous pouvez utiliser le très pratique Android Icon Template Pack fourni sur le site Web de développement d'Android pour vous aider à générer les fichiers appropriés..

Nous vous recommandons de jeter un coup d'œil au kit de modèles et de voir s'il fonctionne pour vous. L'équipe Android publiant une nouvelle version de temps en temps, consultez le site Web pour connaître la dernière version, qui date d'octobre 2011, disponible sur le pack de modèles d'icônes Android, v4.0 (zip, 1,5 Mo)..

Téléchargez le fichier zip et extrayez-le sur votre ordinateur. Il contient un fichier README ainsi que plusieurs répertoires contenant des modèles de fichier Photoshop (.PSD) pour chaque icône de taille que vous devez créer dans différentes circonstances..

Étape 3: Explorez le pack de modèles d'icônes

Le pack de modèles d'icônes Android est organisé dans les répertoires requis pour différents types d'icônes. Les icônes sont utilisées à diverses fins. Vous n’avez pas besoin de toutes les icônes pour chaque application. Certaines ne sont utilisées qu'avec des types spécifiques de contrôles d'interface utilisateur. Les types d'icônes pris en charge dans le pack de modèles incluent:

  • Les icônes de lanceur sont peut-être l'icône la plus courante que vous souhaitiez créer. Celles-ci sont affichées à des endroits tels que la liste des applications et les écrans d’accueil et sont cliquées pour lancer votre application..
  • Les icônes de menu sont affichées lorsque l'utilisateur appuie sur le bouton Menu dans votre application..
  • Les icônes de la barre d'actions sont affichées dans la barre d'actions de votre application (auparavant, les éléments du menu Options)..
  • Les icônes de la boîte de dialogue sont affichées dans le coin supérieur gauche d'un contrôle de la boîte de dialogue, à côté de l'invite de la boîte de dialogue..
  • Les icônes de liste sont affichées sur les contrôles ListView qui ont des icônes et des contrôles de texte.
  • Les icônes d'onglets sont affichées sur les contrôles TabView qui ont des icônes et des étiquettes de texte..
  • Les icônes de la barre d'état sont affichées lorsqu'une notification associée à l'application se produit.

Étape 4: Identifiez les types d'icônes nécessaires

Vous devez ensuite déterminer les types d’icônes appropriés pour votre application spécifique. Par exemple, votre application simple peut avoir deux écrans, chacun avec un contrôle ListView. Par conséquent, vous aurez peut-être besoin d'un ensemble d'icônes de lanceur et de plusieurs ensembles d'icônes de liste..

Chaque ensemble d'icônes doit avoir un nom de fichier unique partagé par toutes les versions de cette icône pour différents types d'écran. Les noms de fichiers d'icônes doivent être en minuscules et ne contenir que des lettres, des chiffres et des traits de soulignement. Le site Web de développement Android vous recommande de nommer vos icônes avec le préfixe «ic_» suivi du type, d'un autre trait de soulignement et enfin du nom descriptif. Par exemple, "ic_list_songs" ou "ic_tab_highscores" sont des noms appropriés.

Étape 5: Créer des icônes de lanceur

Regardons un exemple rapide de la façon dont vous pourriez créer des icônes de lanceur pour votre application Android. Dans le pack de modèles d'icônes Android, recherchez le sous-répertoire ic_launcher_template. Il comporte quatre sous-répertoires, chacun contenant un fichier PSD de la configuration d'icône appropriée. Chargez chaque fichier PSD dans le programme graphique de votre choix, concevez l'icône à l'aide des paramètres de modèle et enregistrez-le (idéalement sous forme de fichier PNG) sous le nom ic_launcher.png dans son répertoire, par exemple "drawable_hdpi". Une fois que vous avez créé toutes les versions appropriées du fichier ic_launcher.png, transférez-les vers le répertoire de ressources équivalentes / res / drawable- * dans vos fichiers de projet Android (tels qu'Eclipse). Cela inclura les fichiers de ressources dans le package de votre application. C'est tout!

Étape 6: Prise en charge de plusieurs SDK

Vous avez peut-être remarqué à travers différentes versions d'Android que les directives de conception pour les icônes changent. Que devez-vous faire si vous souhaitez fournir les graphiques correctement stylés pour chacune des principales révisions des instructions (1.0, 2.0, 2.3 et maintenant 4.0)? La réponse facile est simplement de fournir des graphiques dans un répertoire de ressources nommé de manière appropriée. Les qualificateurs de ressources peuvent également être appliqués au niveau de l'API. Vous pouvez donc toujours ajouter le niveau d'API approprié à la fin du répertoire des ressources. Par exemple, vous pourriez avoir drawable_hdpi_v14 pour stocker les ressources extractibles uniquement applicables à Sandwich à la crème glacée. Vous verrez une partie de ce style de nommage dans les téléchargements de packs de modèles.

Conclusion

La conception de vos applications Android à l'aide des directives de style fournies par l'équipe Android confère à votre application une apparence et une convivialité professionnelles. Les icônes constituent l’un des moyens les plus simples de rendre votre application totalement intégrée à la plate-forme Android. L'équipe de développement d'Android fournit un ensemble de modèles de fichiers pour la création rapide d'icônes pour divers types de contrôles d'interface utilisateur, en utilisant les spécifications appropriées pour prendre en charge différents types d'écrans de périphériques Android..

à propos des auteurs

Les développeurs mobiles Lauren Darcey et Shane Conder ont co-écrit plusieurs livres sur le développement Android: un livre de programmation en profondeur intitulé Développement d'applications sans fil Android, deuxième édition et Sams Teach Yourself Développement d'applications Android dans 24 heures, Deuxième édition. Lorsqu'ils n'écrivent pas, ils passent leur temps à développer des logiciels mobiles dans leur entreprise et à fournir des services de conseil. Vous pouvez les contacter par courrier électronique à l'adresse [email protected], via leur blog à l'adresse androidbook.blogspot.com et sur Twitter @androidwireless..

Besoin d'aide pour écrire des applications Android? Consultez nos derniers livres et ressources!