Icônes de boîte de dialogue

Les icônes de boîte de dialogue sont affichées dans des boîtes de dialogue pop-up qui invitent l'utilisateur à interagir. Elles utilisent un dégradé clair et une ombre intérieure afin de se démarquer sur un arrière-plan sombre.

Comme décrit dans la section Fournir des ensembles d'icônes spécifiques à la densité, vous devez créer des ensembles d'icônes distincts pour les écrans basse, moyenne et haute densité. Cela garantit que vos icônes s'afficheront correctement sur les appareils sur lesquels votre application peut être installée. Consultez le tableau 1 pour obtenir la liste des tailles d'icône finales recommandées pour chaque densité. Consultez également les conseils à l'attention des concepteurs pour obtenir des suggestions sur l'utilisation de plusieurs ensembles d'icônes.

Tableau 1. Résumé des dimensions de l'icône de boîte de dialogue terminée pour chacune des trois densités d'écran généralisées.

ldpi (120 ppp)
(écran basse densité)
mdpi (160 PPP)
(Écran à densité moyenne)
hdpi (240 ppp)
(écran haute densité)
xhdpi (320 ppp)
(Écran très haute densité)
Taille de l'icône de boîte de dialogue 24 x 24 px 32 x 32 px 48 x 48 px 64 x 64 px

L'illustration finale doit être exportée au format PNG transparent. N'incluez pas de couleur d'arrière-plan.

Des modèles pour créer des icônes dans Adobe Photoshop sont disponibles dans le Pack de modèles d'icône.

Toutes les versions d'Android

Les consignes suivantes décrivent comment concevoir des icônes de boîte de dialogue pour toutes les versions de la plate-forme Android.

Structure

  • Les icônes de boîte de dialogue comportent un cadre SafeFrame de 1 pixel. La forme de base doit tenir dans le cadre sécurisé, mais l'anticrénelage d'une forme ronde peut chevaucher le cadre sécurisé.
  • Toutes les dimensions spécifiées sur cette page sont basées sur une taille de plan de travail de 32 x 32 pixels dans Adobe Photoshop. Conservez un pixel de marge intérieure autour du cadre de délimitation dans le modèle Photoshop.
Vue de la structure d'une icône de boîte de dialogue

Figure 1 Cadres SafeFrame et dégradé de remplissage pour les icônes des boîtes de dialogue. La taille de l'icône est de 32 x 32.

Lumière, effets et ombres

Les icônes de boîte de dialogue sont plates et visibles face à face. Pour se démarquer sur un arrière-plan sombre, elles sont construites à l'aide d'un dégradé clair et d'une ombre intérieure.

Vue de la lumière, des effets et des ombres pour les icônes de boîte de dialogue.

Figure 2 : Lumière, effets et ombres pour les icônes de boîte de dialogue.

1.Partie avant:superposition de dégradé | angle de 90°
bas: r 223 | g 223 | b 223
haut: r 249 | g 249 | b 249
emplacement de la couleur inférieure: 0%
emplacement de la couleur supérieure: 75%
2.Ombre intérieure:noir | 25% d'opacité |
angle -90° | distance 1 px | taille 0 px

Procédure détaillée

  1. Créez les formes de base à l'aide d'un outil comme Adobe Illustrator.
  2. Importez la forme dans un outil tel qu'Adobe Photoshop, puis mettez-la à l'échelle pour l'adapter à une image de 32 x 32 pixels sur un arrière-plan transparent.
  3. Ajoutez les effets de la figure 2 pour le filtre approprié.
  4. Exportez l'icône au format PNG avec la transparence au format 32 x 32.