Modifiez les paramètres de police et de couleur dans les applications AEM Mobile.

Remarque :

  Typekit s’appelle désormais Adobe Fonts et est inclus avec Creative Cloud et d’autres abonnements. En savoir plus.

Vous pouvez personnaliser vos applications en téléchargeant des polices à utiliser dans les cartes des pages de navigation, les vues de l'application et les articles HTML. Vous pouvez également modifier les couleurs utilisées dans différentes vues de l'application, telles que le menu de l'application, les barres de navigation et les invites de connexion.

 

Utilisation de polices personnalisées

Vous pouvez utiliser la section Polices et personnalisation appli de Portal pour charger des polices personnalisées à utiliser dans les cartes de mise en page, les articles HTML et les vues de l'application, telles que le menu de l'application.

Pour référencer les polices dans les articles HTML. Reportez-vous à la page Création d'articles HTML pour AEM Mobile : Utilisation de polices partagées.

  1. Dans Portal, cliquez sur Contenu et mises en page, puis sur Polices et personnalisation appli. Sélectionnez l'onglet Polices.

    customize_fonts_main
  2. Pour ajouter des polices individuellement, cliquez sur Ajouter > Ajouter une police.

  3. Faites glisser les fichiers de police dans la section Ajouter des polices ou cliquez sur le bouton Parcourir et spécifiez le fichier de police.

    Après avoir glissé-déposé le fichier de police, le nom de la police est automatiquement ajouté.

    Il est recommandé de limiter les polices que vous téléchargez de manière à n'inclure que les polices que vous prévoyez d'utiliser dans votre application afin d'améliorer les performances et de réduire la taille de l'application.

    Ajout de polices
  4. Lorsque vous avez terminé de télécharger des polices, spécifiez la police lors de la modification des cartes et des mises en page, de la création d'articles HTML ou de la personnalisation des vues de l'application.

    Sélection de polices dans une liste déroulante
    Choix d'une police téléchargée lors de la modification d'une carte de mise en page.

  5. Générez ou recréez l'application personnalisée afin de prévisualiser les polices.

    L'application AEM Preflight n'affiche pas les polices personnalisées. Chaque fois que vous ajoutez ou modifiez des polices, vous devez créer ou recréer l'application afin d'afficher les modifications.

    Reportez-vous à la page Aperçu de contenu de projet pour les applications AEM Mobile.

Remarque :

vérifiez que vous disposez des licences appropriées pour utiliser la police dans votre application.

Ajout de polices en bloc

Plutôt que d'ajouter des polices une par une, vous pouvez glisser et déposer plusieurs polices dans une fenêtre.

  1. Dans la section Polices et personnalisation appli, cliquez sur Ajouter > Ajout de polices en bloc.
  2. Sélectionnez les fichiers de police que vous souhaitez charger dans une fenêtre du Finder ou de l'Explorateur, puis glissez et déposez les fichiers sélectionnés sur l'icône.
  3. Vérifiez la liste des polices à charger. Sélectionnez les polices que vous ne souhaitez pas charger et cliquez sur l'icône moins ( – ) qui apparaît. Cliquez sur Charger pour charger les polices.

Polices système et polices web

Seule la police système est requise pour afficher la police sur les smartphones et les tablettes. Toutefois, pour chaque police utilisée, nous vous recommandons de charger la police système (OpenType ou TrueType) et la police web (.woff). Les polices système sont utilisées dans les pages de navigation des smartphones et des tablettes. Les polices web sont utilisés dans le lecteur web pour ordinateur, dans les applications Windows (si le fichier .otf ou .ttf ne peut pas être installé) et pour l'aperçu des polices dans les cartes.

Avec la licence de police appropriée, vous devez avoir accès à la version .woff de la police. Cette version est généralement incluse dans le package pour la police pour laquelle vous avez une licence. Pour plus d’informations, contactez le concédant de la police.

Les polices auxquelles vous avez accès via Adobe Typekit ne sont pas disponibles pour chargement.

 

Remarque :

chaque fois que vous ajoutez une nouvelle police, vous devez regénérer votre application afin que la nouvelle police soit disponible.

Utilisation de polices dans les applications Windows

Windows applique les règles d’utilisation intégrées à chaque police par la fonderie typographique. Si une police n’est pas marquée comme « installable » par la fonderie, le système d’exploitation Windows refuse de la charger. Vous pouvez savoir si une police est « installable » en faisant un clic droit dessus et en vérifiant ses propriétés. Pour un résultat optimal, incluez une version web de la police (.woff) pour les applications Windows.

Personnalisation des vues d'une application

Vous pouvez spécifier différentes couleurs et polices pour les différentes vues qui apparaissent dans votre application, notamment la barre de navigation de l'application, le menu de l'application et les écrans de connexion et de paywall. Vous pouvez également afficher ou masquer l'option Menu de l'application ou Compte dans le menu de l'application et vous pouvez toujours afficher ou masquer la barre de navigation.

Tenez compte des points suivants :

  • L'image d'aperçu de la personnalisation de l'application ne fournit pas une représentation réellement précise. Assurez-vous de tester les couleurs et polices de personnalisation de l'application lors de la création d'une application personnalisée.
  • Les paramètres de thème de couleur (Thème clair, Thème sombre ou Thème personnalisé) sont des paramètres globaux qui s'appliquent à toutes les vues pour chaque plateforme. Les paramètres Thème clair et Thème sombre sont prédéfinis et ne peuvent pas être modifiés. Si vous modifiez un paramètre de couleur ou de police, le thème devient Personnalisé.
  • Assurez-vous de cliquer sur Enregistrer pour sauvegarder votre travail avant de quitter la page. L'enregistrement s'applique uniquement à la plateforme actuelle.

Vidéo de personnalisation de l'application

Vidéo de personnalisation de l'application
Cette vidéo présente les nouvelles fonctionnalités de personnalisation de l'application disponibles dans les versions 2016.14 and 2017.1.

  1. Dans Portal, cliquez sur Contenu et mises en page, puis sur Polices et personnalisation appli. Sélectionnez l'onglet Personnalisation de l'application.

    customize_allscreens
  2. Spécifiez la plateforme (iOS ou Android).

    Les paramètres que vous spécifiez ne s'appliquent qu'à la plateforme sélectionnée. Actuellement, l'enregistrement de paramètres de personnalisation n'est pas disponible, vous devez indiquer des paramètres de personnalisation d'application séparément pour iOS et Android.

  3. Sélectionnez la vue Tous les écrans. Pour utiliser un paramètre prédéfini, choisissez Thème clair ou Thème sombre. Si vous modifiez les paramètres de couleur ou de police, Thème personnalisé est automatiquement sélectionné. Pour les paramètres personnalisés, lancez la vue Tous les écrans et sélectionnez les paramètres de couleur et de police que vous souhaitez utiliser.

    Lorsque l'option Tous les écrans est sélectionnée, les modifications que vous apportez s'appliquent à toutes les vues. Vous pouvez ensuite remplacer les paramètres de couleur et de police personnalisés pour chaque vue.

    Remarque :

    les paramètres de couleur et de police sont associés à chaque thème : Thème clair, Thème sombre et Thème personnalisé. Lorsque vous sélectionnez un thème différent, les paramètres de police et de couleur sont réinitialisés.

  4. Dans la vue Tous les écrans, indiquez les paramètres de mouvement pour l'application.

    Pincer pour zoomer : indiquez si le mouvement de pincement pour zoomer doit être activé ou désactivé pour chaque type d'article. Si vous désactivez cette option, les utilisateurs ne peuvent pas pincer pour un zoom avant ou arrière sur la vue de l'article.

    • L'option Articles de pixellisation inclut les articles basés sur InDesign et les articles basés sur PDF dans lesquels l'option « Ajuster une page complète à la taille de l’écran » est sélectionnée.
    • L'option Articles PDF inclut les articles basés sur PDF dans lesquels l'option « Ajuster une page complète à la taille de l’écran » n'est pas sélectionnée.
    • L'option Articles HTML inclut les articles basés sur HTML.

    Pincer pour fermer (iOS uniquement) : sur iPad, vous pouvez pincer pour fermer les pages de navigation afin de revenir à la vue précédente. Indiquez si ce mouvement doit être activé ou désactivé.

    Balayage depuis le cadre (iOS uniquement) : dans les applications iOS, vous pouvez balayer à partir de la gauche pour revenir à la vue précédente ou afficher le menu de l'application à partir de la vue de niveau supérieur. Indiquez si ce mouvement doit être activé ou désactivé.

    customize_gestures
  5. Sélectionnez la vue donnée de l'application en sélectionnant une option dans le menu ou en cliquant sur les flèches de navigation, puis spécifiez les paramètres de police et de couleur personnalisés pour cette vue.

    customize_app_appmenu2
  6. Pour masquer l'option Menu de l'application ou Compte, accédez à la vue Menu de l'application. Cliquez sur l'icône Menu de l'application pour activer ou désactiver cette option. Vous pouvez également cliquer sur l'option Se connecter pour activer ou désactiver l'option Compte.

    Lorsque l'option Menu de l'application est désactivée, le menu de l'application ne peut pas être affiché dans l'application.

    Lorsque l'option Se connecter est désactivée, l'option « Compte » n'apparaît pas en bas du menu de l'application.

    Lorsque la barre de menus est masquée, vous pouvez utiliser les formats de redirection (navto) ou d'accès (goto) afin de proposer des liens de navigation et déclencher différentes fonctionnalités, telles que la recherche. Reportez-vous à la page Hyperliens dans AEM Mobile.

    Si vous masquez l'option Se connecter (option Compte dans l'IU) ou la barre de menus, vous pouvez utiliser les API JavaScript HTML et Cordova pour permettre aux utilisateurs de se connecter et se déconnecter. Pour un exemple de code permettant à un utilisateur de se connecter ou se déconnecter en utilisant une bannière dynamique, reportez-vous à la page Création de bannières et de bannières dynamiques : Bannières dynamiques.

  7. Pour modifier le comportement de la barre de navigation, accédez à la vue Barre de navigation de l’application. Choisissez l'une des options suivantes pour tablette et téléphone.

    Par défaut – La barre de navigation ne s'affiche que lorsque l'utilisateur touche une zone non interactive d'un article. Lorsqu'elle est affichée, la barre de navigation masque le contenu de l'article.

    Toujours visible – Si vous sélectionnez cette option, la barre de navigation apparaît en haut des écrans de navigation et des articles et ne peut pas être masquée. Lorsque la barre de navigation est définie de manière à être toujours affichée, le contenu figurant en haut de l'article n'est pas masqué. Les articles HTML commencent en haut de l'écran, en dessous de la barre de navigation. Les articles à mise en page fixe sont mis à l'échelle et un cadre (letterbox) leur est appliqué.

    app_customization_example
    Lorsque la barre de navigation est définie comme étant toujours visible, le contenu à mise en page fixe est mis à l'échelle et un cadre (letterbox) lui est appliqué.

    Toujours masquée – Si vous sélectionnez cette option, la barre de navigation et la barre d'état sont désactivées et masquées. Lorsque la barre de navigation est masquée, vous pouvez utiliser les formats de redirection (navto) et d'accès (goto) dans les articles afin de proposer des liens de navigation et déclencher différentes fonctionnalités, telles que le bouton Précédent et les options de partage sur les réseaux sociaux. Reportez-vous à la page Hyperliens dans AEM Mobile.

    Barre de statut visible et barre de navigation masquée – Si vous sélectionnez cette option, la barre de navigation est désactivée et masquée et la barre d'état est toujours affichée. Le contenu de l'article s'affiche sous la barre d'état, avec mise à l’échelle et application d'un cadre (letterbox) si besoin.

    app_customization_navbars
  8. Cliquez sur Enregistrer pour sauvegarder les paramètres pour la plateforme actuelle.

    Le fait de cliquer sur Enregistrer sauvegarde les paramètres pour la plateforme actuelle. Si vous travaillez sur les plateformes iOS et Android, assurez-vous de cliquer sur Enregistrer pour chaque plateforme.

  9. Vous devez générer ou regénérer l'application personnalisée pour afficher les paramètres de l'application personnalisés.

    Les polices et les paramètres d'application personnalisés téléchargés sont intégrés à l'application. Chaque fois que vous téléchargez les nouvelles polices ou modifiez des paramètres de personnalisation de l'application, vous devez recréer votre application pour afficher les modifications.

    L'application AEM Preflight n'affiche pas les paramètres de personnalisation de l'application.

    Reportez-vous à la page Aperçu de contenu de projet pour les applications AEM Mobile.

Méthodes de personnalisation de l'application supplémentaires

Parallèlement à l'utilisation de la section Polices et personnalisation appli de Portal, vous pouvez également apporter d'autres modifications à la personnalisation.

  • Dans les paramètres du projet, vous pouvez indiquer une image de marque s'affichant dans le menu de l'application.
  • Lors de la création de l'application, vous pouvez déterminer si le smartphone est à double orientation (iOS), en mode portait uniquement ou en mode paysage uniquement. Pour les applications iOS et Android, vous pouvez également déterminer si l'application fonctionne uniquement sur smartphone, sur tablette ou sur les deux.
  • Dans les paramètres de la collection, vous pouvez déterminer d'autoriser le balayage horizontal pour naviguer entre différents articles. Vous pouvez également déterminer si une collection s'affiche en tant que page de navigation ou s'ouvre sur le premier article de la collection. Vous pouvez également autoriser les utilisateurs à sauvegarder les collections pour un affichage hors ligne.
  • Utilisez les modèles de mise en page pour déterminer l'apparence des pages de navigation d'une collection.
  • Vous pouvez activer différentes fonctionnalités, telles que le partage sur les réseaux sociaux, les droits et la recherche.

 

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne