--- title: "Images, icônes et boutons d'outils dans les applications mobiles" date: "2018-09-21" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "mobile-development" - "mobiletogether" - "tool-buttons-in-mobile-apps" - "tool-icons" description: Découvrez comment utiliser efficacement des icônes d'images comme boutons d'outils dans les applications mobiles pour améliorer la navigation. Apprenez les meilleures pratiques en matière de conception et de fonctionnalité, quel que soit l'appareil. --- Status: #blog Tags: #mobile-development #mobiletogether #tool-buttons-in-mobile-apps #tool-icons Categories: [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) | [mobile-development](/blog/fr/category/mobile-development.md) # Images, icônes et boutons d'outils dans les applications mobiles Nous avions déjà publié un article sur [l'intégration des API et des applications mobiles](https://www.altova.com/blog/integrating-apis-and-mobile-apps/) afin de créer une expérience utilisateur riche et agréable. Depuis la publication de cet article, nous avons continué à améliorer l'application de démonstration GPS en ajoutant une prise en charge supplémentaire des API pour obtenir les conditions météorologiques actuelles et les événements prévus à proximité. L'un des défis liés à l'intégration de toutes ces fonctionnalités sur un petit écran mobile est de proposer aux utilisateurs un système de navigation clair, cohérent et facile à utiliser, quel que soit l'écran de l'application. L'utilisation d'images d'icônes comme boutons dans les applications mobiles peut créer un menu de navigation élégant et raffiné, surtout si les icônes sont choisies en fonction de conventions largement reconnues. Par exemple, une flèche pointant vers la gauche indique souvent la fonction "retour", et une icône de disquette représente fréquemment la fonction "enregistrer", même si la destination finale n'est pas nécessairement un nouveau fichier ou un disque. Dans cet article, nous allons expliquer comment utiliser des icônes d'images pour créer des menus de navigation multiplateformes avec des boutons d'outils dans les applications mobiles, en utilisant MobileTogether. [![](/blog/images/wai_700x335.jpg)](wai_700x335.jpg) Les captures d'écran ci-dessous montrent l'application "Where Am I" en fonctionnement sur les appareils Apple iOS et Android. ![Boutons d'outils dans les applications mobiles : exemple pour iPhone](/blog/images/tool-buttons-iphone-2.png) [![Boutons d'outils dans les applications mobiles : exemple pour Android](/blog/images/tool-buttons-android-1.png)](tool-buttons-android-1.png) Dans chaque vue, l'utilisateur a récemment obtenu les coordonnées GPS actuelles et se voit présenter la même série d'options, représentées par des boutons d'outils : - Visualisez une photo satellite du lieu, en fonction du niveau de zoom sélectionné - Envoyez un message texte contenant votre position actuelle - Ouvrez l'application de cartographie par défaut et affichez la position actuelle - Effectuer une recherche générale sur le web en fonction de la localisation actuelle - Obtenez les conditions météorologiques actuelles pour cet endroit - Consultez la liste des événements à venir dans les environs - Utilisez l'API de recherche MapQuest pour explorer les environs Les boutons des outils sont définis et configurés dans l'application grâce à MobileTogether Designer, l'outil de développement d'applications visuel qui permet aux développeurs de prévisualiser la mise en page de l'application et de tester des logiques d'exécution complexes à tout moment pendant le développement. Notre menu de navigation est structuré sous forme de tableaux, illustrés ici comme on peut les voir dans la fenêtre de conception de page de MobileTogether Designer : [![Définition des boutons d'outils dans les applications mobiles, dans l'outil MobileTogether Designer](/blog/images/tool-button-nav-table.png)](tool-button-nav-table.png) Il y a plusieurs éléments à prendre en compte lors de la création d'un menu avec des icônes, notamment pour offrir une expérience utilisateur prévisible et cohérente sur une gamme d'appareils mobiles dotés de différentes tailles d'écran et résolutions. Tout d'abord, il est important que chaque image suggère clairement la fonction qui sera exécutée lorsqu'elle est cliquée. Deuxièmement, les images doivent être suffisamment grandes pour convenir aux utilisateurs ayant des doigts de différentes tailles. Nous entendons souvent les utilisateurs de mobiles justifier des clics accidentels en invoquant "mes doigts maladroits". Mais l'utilisateur était-il vraiment maladroit, ou l'interface de l'application est-elle trop petite et confuse pour être utilisée facilement ? Enfin, pour les applications qui affichent plusieurs écrans avec divers boutons d'outils, une présentation et une fonctionnalité cohérentes sur toutes les pages rendent l'application beaucoup plus intuitive à utiliser. Notre application de démonstration "Where Am I" combine de manière stratégique les fonctionnalités de deux propriétés de contrôle pour gérer la taille et la disposition des icônes d'outils. [![Propriétés du bouton d'outil pour définir sa taille](/blog/images/tool-icon-properties.png)](tool-icon-properties.png) Définir la largeur de chaque icône à "fill_parent" nous permet d'utiliser un seul fichier image pour toutes les tailles d'écran. Dans notre application, chaque icône est un fichier image .png de 192x192 pixels, et "fill_parent" redimensionnera automatiquement l'image pour qu'elle remplisse la largeur de la colonne sur tous les appareils mobiles utilisés par les utilisateurs finaux. Les largeurs des colonnes du tableau pour chaque icône d'outil sont définies dans des expressions XPath. Nous avons utilisé un élément dans l'arborescence des données persistantes pour spécifier la largeur des colonnes pour les icônes d'outils. Cela nous a permis de tester différentes tailles sur divers appareils en redéfinissant la valeur dans l'arborescence des données, au lieu de modifier chaque propriété de largeur de colonne pour chaque test. Dans l'ensemble, nous avons utilisé trois tailles d'icônes différentes dans l'application. Voici la partie de l'arborescence des données où les largeurs des colonnes sont stockées : [![Définir des boutons d'outils dans les applications mobiles en utilisant des tailles standardisées sur tous les appareils](/blog/images/tool-button-persistent-data.png)](tool-button-persistent-data.png) Le tableau comprend également des colonnes vides pour créer des marges autour de chaque icône. La largeur de ces colonnes est laissée vide, ce qui signifie que tout l'espace restant non attribué est réparti équitablement entre elles. Nous avons ajouté un contrôle de l'espacement entre les lignes d'icônes afin de créer une marge verticale entre ces lignes. Vous pouvez également choisir d'intégrer le fichier image de l'icône de l'outil directement dans le fichier de l'application, ou de téléverser les images séparément sur le serveur MobileTogether. ### Définir les actions associées aux boutons d'outils dans les applications mobiles Il est facile de définir les actions à effectuer lorsque l'icône de l'outil est cliquée. MobileTogether permet de rendre n'importe quel élément cliquable, tout comme un bouton. Les actions associées à un élément sont définies via le menu contextuel qui s'affiche en faisant un clic droit : [![Définir les actions déclenchées par les boutons d'outils dans les applications mobiles](/blog/images/tool-button-click-actions.png)](tool-button-click-actions.png) Le bouton sélectionné ci-dessus est conçu pour ouvrir l'application de cartographie par défaut sur l'appareil mobile, en centrant l'affichage sur les coordonnées GPS. Cependant, le script d'action est amélioré avec des définitions distinctes pour un simple appui, un clic normal, et un appui prolongé. [![Actions par simple clic ou par appui prolongé pour les boutons d'outils dans les applications mobiles](/blog/images/tool-button-action-details.png)](tool-button-action-details.png) Selon la préférence de l'utilisateur, un simple clic peut déclencher un son provenant de la bibliothèque sonore intégrée de MobileTogether. Un clic normal ouvre alors la carte, tandis qu'un clic long affiche simplement une boîte de dialogue expliquant la fonction du bouton. ### Tailles variables pour les boutons d'outils dans les applications mobiles Nous avions besoin de boutons d'outils plus petits pour les situations où le bouton d'outil partage de l'espace avec du texte ou d'autres éléments de contrôle sur la page, par exemple sur les pages de recherche et les pages de résultats de recherche présentées ici [![Pages de recherche et résultats affichant des boutons d'outils dans les applications mobiles](/blog/images/search-and-results.png)](search-and-results.png) Les icônes des outils présentes sur ces pages ont été définies en utilisant les éléments de largeur d'icône plus petite, dans la structure de données persistante, et organisées en colonnes. ### Apprenez-en davantage et essayez par vous-même Si vous avez manqué notre article précédent sur l'intégration d'API dans les applications mobiles, vous pouvez [le consulter ici](https://www.altova.com/blog/integrating-apis-and-mobile-apps/). Ou, si vous découvrez MobileTogether, visitez la page [Démonstrations MobileTogether](https://www.altova.com/fr/mobiletogether/demos) qui contient des liens vers des vidéos, des tutoriels et d'autres applications de démonstration. Vous pouvez examiner plus en détail notre application de démonstration pour voir exactement comment nous avons implémenté les boutons d'outils dans les applications mobiles, ou pour consulter les API relatives à la cartographie, la recherche, la météo et les événements. Téléchargez simplement le logiciel [MobileTogether Designer](https://www.altova.com/fr/mobiletogether/download), qui est gratuit, et obtenez une copie de notre application sur GitHub dans ce dépôt : [https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I)