Personnalisation de votre application

Applies to Windows and Windows Phone

Observons certaines des nombreuses possibilités de création dont peuvent s’inspirer les concepteurs et développeurs d’applications pour personnaliser leurs applications du Windows Store.

Pour quelle raison personnaliser votre application avec votre marque ?

La marque d’une entreprise définit les qualités pour lesquelles elle souhaite être reconnue. Lors de la conception d’applications du Windows Store, vous devez prendre des décisions réfléchies afin de vous assurer que ces applications intègrent ce qui fait l’essence de votre marque. Son expression à travers votre application du Windows Store permettra de distinguer cette dernière des autres applications, à la manière dont votre marque définit ce que représente votre entreprise. Prenons un exemple.

Application du Windows Store avant personnalisation :

Exemple d’application du Windows Store de Contoso Bakery avant personnalisation
L’exemple de Contoso Bakery illustre ce à quoi pourrait ressembler l’application d’une boulangerie-pâtisserie respectant les principes de conception Microsoft. Il constitue un bon exemple de positionnement du contenu au premier plan et au centre mais il ne permet pas de véhiculer de manière efficace la marque de la boulangerie-pâtisserie.

 

Même application après personnalisation :

Exemple d’application du Windows Store de Contoso Bakery après personnalisation
Certains changements évidents apportés au sein de cette version de l’application de Contoso Bakery sauront plus capter l’intérêt des utilisateurs. Une plus grande intégration de ce qui fait la marque permet de présenter le contenu de l’application de façon plus convaincante et d’évoquer ce qui constitue l’essence d’une boulangerie-pâtisserie.

 

Comment intégrer votre marque

Votre marque s’exprime à travers un ensemble d’éléments visuels. Par exemple, une palette de couleurs, des graphismes, une disposition et un style photographique spécifiques contribuent, ensemble, à créer une marque reconnaissable pouvant se répéter sur toute une variété de supports (diffusion, impression, Web, applications du Windows Store, etc.).

Ces éléments visuels sont les outils qui vous permettent de créer une application du Windows Store à l’aspect unique via votre code.

Élément visuelDescription
Couleurs

La couleur est un attribut clé dans l’expression d’une marque. Appliquez la couleur primaire associée à votre marque de telle façon qu’elle rappelle aux utilisateurs que l’application provient de votre entreprise.

Graphismes

Utilisez des graphismes pour renforcer votre marque en ajoutant du caractère à la présentation du contenu. Toutefois, un nombre excessif de graphismes peut interférer avec votre flux de contenu et s’apparenter à de la décoration ou de la distraction pure.

Images

Les illustrations et les photographies devraient aussi refléter votre marque. Réutilisez les images et le style des autres communications et sites web de votre société.

Grille

Le système de grille de l’application du Windows Store permet d’unifier les éléments visuels de la présentation de votre application. L’interface utilisateur de votre application personnalisée s’aligne alors avec le reste de Windows.

Disposition

La disposition des éléments visuels de toutes les pages doit être adaptée à votre marque. Vous devez rechercher la cohérence entre les pages et les types de contenu.

Logo

Utilisez votre logo pour aider les utilisateurs à identifier rapidement votre application et à reconnaître votre marque.

Typographie

Les polices des applications du Windows Store sont essentielles. L’impact de leur caractère approprié sur votre marque peut être aussi important que celui d’une couleur, d’un logo ou d’une disposition : veillez donc à choisir minutieusement la typographie utilisée.

 

Exemple d’application métier

La personnalisation de vos applications métier est importante à la fois du point de vue commercial et de celui de l’entreprise. Cet exemple illustre la personnalisation d’une application commerciale et d’entreprise avec une marque pour une société de services express.

Éléments de la marque de la société

Fabrikam Worldwide Logistics propose trois niveaux de services express au niveau international. Les clients cibles sont les propriétaires de petites entreprises qui veulent organiser et gérer aisément des chargements. Un transport fiable à l’échelle mondiale et des transactions harmonieuses sont les principaux messages adressés aux clients.

Élément de la marqueDescription

Marque principale de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

La marque principale communique la passion de fournir des services fiables à l’échelle mondiale en utilisant les éléments graphiques, par exemple la carte et la bande.

Logos de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

À la suite de la marque principale, le logo de chaque service indique les trois niveaux de services.

Éléments de la marque de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

Les éléments de la marque, tels que les pointillés et la carte, sur les packages sont réutilisés dans la conception de l’application pour créer une histoire de la marque cohésive.

 

Organisation d’un chargement

Un client d’une petite entreprise se connecte à son compte pour renouveler un chargement.

Page de connexion avec le titre personnalisé de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple
La couleur, le graphique et le logo se retrouvent sur l’en-tête et les pages en tant qu’éléments de la marque.

 

Sur la page du compte, la couleur, les graphiques (la bande et les pointillés) et la police indiquent la marque principale. L’identité du client est associée à la marque dans l’en-tête.

Page Coho Craftsman montrant le partenariat de marques de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple
L’association du client à la marque s’inspire des polices de la marque principale et utilise les polices serif font Constantia pour le titre et sans-serif font Corbel partout ailleurs dans l’application.

 

La page des transactions utilise un modèle de navigation plat. Un utilisateur peut effectuer un panoramique de chaque section pour examiner et modifier les informations.

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un mouvement panoramique horizontal sur une page

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un mouvement panoramique horizontal sur le côté gauche d’une page

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un mouvement panoramique horizontal au milieu d’une page

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un mouvement panoramique horizontal sur le côté droit d’une page

Un utilisateur peut rapidement accéder au zoom sémantique à partir de la page des transactions pour afficher l’historique de toutes les transactions avec un résumé des informations.

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un zoom sémantique dans une vue avec zoom arrière

Modèle de navigation plat de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, montrant un zoom sémantique avec mouvement panoramique dans la vue avec zoom arrière
Les éléments de la marque, tels que la couleur, les graphiques, les logos des services et les polices, sont utilisés de façon cohérente pour rappeler l’objet de l’entreprise.

 

Un utilisateur accède aux autres catégories à l’aide de la barre de navigation.

Barre de navigation de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

Remise d’un chargement

Un chauffeur utilise l’application pour remettre les chargements aux clients. En utilisant la conception sur deux colonnes qui affiche l’inventaire sur la gauche et le contenu sur la droite, un chauffeur peut aisément parcourir les informations détaillées relatives à un chargement. Les éléments de la marque, tels que la bande et les contrôles courants, sont utilisés de façon cohérente dans toute l’application.

Page à deux colonnes de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple montrant une liste d’inventaire et une carte

Lorsque le chauffeur arrive, la colonne de droite affiche les détails dans une liste à défilement vertical. La liste d’inventaire et le contenu détaillé défilent tous deux dans le même sens.

Page à deux colonnes de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple montrant la liste d’inventaire et les détails de cette liste
Le graphique d’information qui aide le chauffeur à localiser le chargement dans le camion bénéficie des mêmes couleurs de la marque que les autres parties de l’application.

 

Lorsque le chauffeur demande la signature du client, l’application affiche la page de signature en mode portrait et expose la barre de navigation personnalisée. Il est plus facile pour le chauffeur de donner l’appareil au client en mode portrait.

Page de signature de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, orientation portrait
La demande d’une signature est un moment important pour la promotion de la marque. L’utilisateur est en contact avec l’application et la marque de l’entreprise.

 

Une fois que le chauffeur obtient la signature, l’application affiche les graphiques et éléments restants de l’avancement.

Page de liste d’inventaire de l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple, orientation portrait

Partenariat avec votre application

Une relation entre plusieurs marques est appelée partenariat. Gardez à l’esprit les questions suivantes lorsque vous concevez une application qui doit s’adapter à plusieurs marques :

  • Quelle marque dirige la communication ?
  • Quel rôle joue la marque associée dans la communication ?

Une application du Windows Store qui n’arrive pas à répondre à ces questions court le risque d’embrouiller les clients et d’affaiblir la marque.

Partenariat de marques dans l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

L’exemple Fabrikam traite le partenariat en renforçant sa marque par le biais d’une implémentation cohérente des éléments visuels. Par exemple, la couleur de la marque Fabrikam, les graphiques, la disposition et la police s’affichent dans toute l’application et se conforment à un ensemble limité de variations de styles. Chaque page de l’application indique clairement que cette dernière provient de Fabrikam.

Pour indiquer que la marque Coho Craftsman est secondaire à la marque principale, le logo Coho Craftsman, la police et l’image s’intègrent à la disposition Fabrikam. Vous pouvez imaginer, par exemple, comment un autre partenaire de petite entreprise de Fabrikam pourrait s’adapter à la zone actuellement occupée par Coho Craftsman.

Partenariat de marques dans l’application du Windows Store Fabrikam Worldwide Logistics fournie en exemple

D’autres marques apparaissent également dans cet exemple. Les sociétés de cartes de crédit du côté gauche de la page apparaissent en tant que marques de niveau inférieur en partie en raison de leur petite taille, du placement du contenu spécifique et de leurs couleurs limitées. Du côté droit de la page, les marques du fabricant des produits d’habillement apparaissent dans un logo d’une seule couleur qui est réduit en taille et sont conformes aux styles de conception de la marque principale. Dans tous les cas, les éléments visuels ont été modifiés de façon à ce que les marques associées soient claires, mais pas aussi importantes que la marque principale.

Exemples évoquant des marques uniques

Voici quelques exemples illustrant comment les divers éléments visuels permettent d’évoquer différentes émotions et sentiments. La description associée à chaque élément visuel fournit des détails spécifiques sur la création de la disposition et dans quelle mesure elle importe.

Contoso Downtown Café

Exemple d’application du Windows Store du Contoso Downtown Café montrant l’expression de la marque à travers divers éléments visuels (couleur, grille, disposition et typographie)
La marque Contoso Downtown Café est connue pour son authenticité. Elle propose des plats principaux et des boissons spécifiques faits maison. Dans cet exemple, les éléments visuels essentiellement utilisés pour évoquer la marque sont les suivants : couleur, grille, disposition et typographie.

 

Exemple de palette de couleurs utilisée pour personnaliser une application du Windows StoreCouleurs   La palette de couleurs gris foncé, blanc cassé et cuivre apporte chaleur et richesse à cette conception. Elle évoque certaines couleurs que l’on retrouve dans le pain, les soupes ou les pâtisseries faits maison.
Exemple de grille utilisée pour personnaliser une application du Windows StoreGrille   Dans cet exemple, le contenu « rompt » intentionnellement la grille. Le contenu du menu étant essentiel pour cette marque, la marge du haut est réduite de façon à ce qu’un espace plus grand soit consacré au menu. La marge de gauche est modifiée afin que le nom du restaurant, le texte d’introduction et les informations de localisation semblent plus centrées, donnant ainsi l’impression d’un contenu plus aéré. Tous ces ajustements ont été apportés de façon cohérente et se retrouvent sur l’ensemble des autres pages de l’application.
Exemple de disposition utilisée pour personnaliser une application du Windows StoreDisposition   La conception de l’application est destinée à évoquer un menu car il s’agit bien là de la raison pour laquelle les clients reviennent dans cet établissement. Que ce soit pour les sandwiches ou les autres éléments du menu, la disposition est destinée à évoquer l’artisanat, le « fait maison ». L’arrière-plan blanc cassé rappelle le papier, le ton est engageant et le contenu structuré, avec des règles de séparation verticales et un fort alignement à gauche du texte.
Exemple de typographie utilisée pour personnaliser une application du Windows StoreTypographie   Copperplate Gothic Bold est la police principale utilisée au sein de la conception. Elle permet de fournir au nom du restaurant une apparence unique, semblable aux panneaux en bois sculptés à la main. Les polices Script MT Bold et Segoe UI constituent les polices d’accompagnement. La police de script est utilisée avec modération au niveau de l’en-tête du menu et évoque une écriture à la main. La police Segoe UI est utilisée pour le corps du texte afin d’accroître la lisibilité des plats proposés.

 

Marque Contoso French Bakery

Exemple d’application du Windows Store de Contoso French Bakery montrant l’expression de la marque à travers divers éléments visuels (couleur, disposition et photographie)
La marque Contoso French Bakery est connue pour ses pâtisseries fines. Pour de nombreux clients, il s’agit là du repère des gourmands. Dans cet exemple, les éléments visuels utilisés pour évoquer la marque sont les suivants : couleurs, disposition et images.

 

Exemple de palette de couleurs utilisée pour personnaliser une application du Windows StoreCouleurs   Une palette uniquement constituée de deux couleurs, le marron et le rose, suffit pour évoquer aux clients une boulangerie-pâtisserie. Le marron, couleur principale, rappelle le chocolat et le rose, couleur de thème, le glaçage recouvrant les biscuits et les gâteaux. Ces deux couleurs sont également pertinentes vis-à-vis de la marque. Le marron est une couleur d’arrière-plan riche assez neutre pour faire ressortir la photographie en couleurs, et le rose une couleur assez vive pour mettre en relief certains éléments spécifiques du contenu.
Exemple d’image utilisée pour personnaliser une application du Windows StoreImages   La photographie est au cœur de cette conception. Il ne fait aucun doute que du temps et une certaine expertise ont été consacrés afin de s’assurer que chaque image donne littéralement envie de la manger. Les photos de pâtisseries sont ainsi très évocatrices de ce que la marque représente. Elles servent également à définir les catégories de contenu.
Exemple de disposition utilisée pour personnaliser une application du Windows StoreDisposition   L’apparence de cet exemple diffère des conceptions d’application du Windows Store standard. Sa différence la plus marquante réside dans l’absence de vignettes carrées. Bien que les vignettes et la grille soient toujours présentes, les images ont été stylées de façon à imiter les articles susceptibles de se trouver dans une boulangerie-pâtisserie (par exemple, les formes circulaires et cannelées d’un moule à petits gâteaux).

 

Marque Contoso Sandwich Truck

Exemple d’application du Windows Store de Contoso Sandwich Truck montrant l’expression de la marque à travers divers éléments visuels (graphismes, grille et logo)
La marque Contoso Sandwich Truck est connue pour son caractère urbain et social et la pertinence de sa localisation géographique. Forte de son équipe d’excellents chefs et de son parc de camionnettes de restauration, elle s’adresse aux personnes actives. Dans cet exemple, les éléments visuels utilisés pour évoquer la marque sont les suivants : graphismes, grille et logo.

 

Exemple de graphisme utilisé pour personnaliser une application du Windows StoreGraphismes   L’accent reste sur les choix proposés dans le menu, sans usage excessif de graphismes. Ces derniers jouent toutefois un rôle dans l’établissement de la marque. Par exemple, les « étoiles » suggèrent un système de notation par les clients, la couleur et les formes rappellent la signalisation des rues dans les villes américaines et les informations géographiques sont placées sur fond de zone noire au sein de laquelle est incorporé un graphisme de trace de roue sur l’asphalte d’une chaussée.
Exemple de grille utilisée pour personnaliser une application du Windows StoreGrille   Tous les aspects de cette conception sont ancrés dans la grille standard, imitant une structure semblable à ce que l’on voit lorsque l’on regarde le plan d’une ville de dessus. Du contenu et des graphismes à fond perdu se chevauchant apportent une touche contrastant avec cette présentation ordonnée et donnent à cet exemple toute sa particularité. La présentation générale assurée et directe du contenu est destinée à capter l’intérêt des personnes actives devant prendre des décisions rapidement.
Exemple de logo utilisé pour personnaliser une application du Windows StoreLogo   Dans cet exemple, aucun logo d’entreprise n’est utilisé. Le nom de l’entreprise apparaît dans le texte, et là où le logo Pour la première fois, le nom de l’entreprise est intégré dans la composition globale. Le logo ou nom n’est plus simplement aligné en haut à gauche.
Exemple de palette de couleurs utilisée pour personnaliser une application du Windows StoreCouleurs   Le noir et le jaune sont utilisés comme couleurs de thème. D’un point de vue personnalité, le noir et le jaune sont des couleurs qui figurent dans les environnements urbains, tels que les panneaux et le marquage des routes aux États-Unis.

 

Exemple consolidant la marque dans les pages de l’application

Le fait de personnaliser votre application avec votre marque dans des pages secondaires riches en contenu est aussi important que de personnaliser la page d’accueil. Cet exemple utilise l’application d’une équipe sportive fictive pour vous montrer comment intégrer la marque dans plusieurs pages de l’application.

Fabrikam FC, équipe de football professionnel

Les supporters de l’équipe de football professionnel Fabrikam FC veulent avoir un œil sur les coulisses de leur équipe favorite, connaître les moindres secrets de leurs joueurs préférés et bénéficier des dernières informations où qu’ils se trouvent. La conception de la page d’accueil reflète le caractère audacieux et dynamique de la marque.

Page d’accueil de l’application du Windows Store de l’équipe Fabrikam FC fournie en exemple

La couleur, la typographie et les graphismes mettent en évidence le caractère audacieux et dynamique de la marque.

 

Cette application utilise un modèle de navigation plat. Un utilisateur effectue un balayage dans la barre de navigation pour accéder à d’autres vues de l’application.

Barre de navigation dans l’application du Windows Store de l’équipe Fabrikam FC fournie en exemple

La couleur et le logo se retrouvent dans l’ensemble de la barre de navigation de l’application en tant qu’éléments de la marque. Les couleurs électriques de l’équipe sur un fond noir créent un contraste saisissant qui évoque la personnalité conquérante de l’équipe tandis que le jaune est employé partout dans l’application pour signaler le côté interactif.

 

À l’aide de la barre de navigation, l’utilisateur peut afficher les joueurs de l’équipe.

Page des joueurs dans l’application du Windows Store de l’équipe Fabrikam FC fournie en exemple

Les polices sont homogènes dans les différentes vues de l’application. La police de caractères sans serif complète le caractère ultra dynamique et audacieux de l’équipe. L’usage de majuscules partout comme style de police donne une apparence d’élément graphique à certaines étiquettes de texte.

 

Pour accéder rapidement à un joueur donné, effectuez un zoom arrière dans la vue du zoom sémantique de cette page.

Zoom sémantique dans l’application du Windows Store de l’équipe Fabrikam FC fournie en exemple

Les photos d’action des joueurs ressortent mieux et créent une présentation dynamique débordante d’énergie. Elles sont utilisées dans la page de l’équipe et la page d’accueil.

 

Application du Windows Store de l’équipe Fabrikam FC fournie en exemple et dotée d’icônes et d’images qui renforcent l’image de la marque.

L’emploi d’icônes et de graphismes simples rend le contenu plus amusant et plus accessible et il encourage l’interactivité avec l’application et la volonté de la découvrir.

 

Rubriques associées

Découvrir les applications du Windows Store
Recommandations en matière d’expérience utilisateur
Modèles de commandes
Modèles de navigation
Disposition d’une page d’application
Recommandations en matière de tailles de fenêtre et de mise à l’échelle à la taille des écrans
Recommandations en matière de polices
Comment personnaliser un contrôle ListView
Galerie

 

 

Afficher:
© 2014 Microsoft