2015-03-10

Cet article a fait l'objet d'une traduction automatique.

Applications modernes

Créez une meilleure interface utilisateur grâce aux Vignettes dynamiques

Rachel Appel Tuiles vivants sont un moyen efficace d'introduire votre app. Vous pouvez afficher des informations sur votre application sans nécessiter un utilisateur d'entrer dans l'application elle-même. Dans le cadre de la fonctionnalité UX de la plate-forme Windows, tuiles vivants doivent être séduisants et invitant, rempli de contenu pertinent et click-worthy.

Tuiles vivants sont votre chance de faire une bonne première impression. L'utilisateur ne se soucie du code ou des détails techniques. Tout ce qu'il se soucie est l'expérience qu'il va falloir à l'aide de votre application. Est-ce facile à utiliser ? Il est intuitif ? Ces choses sont plus importantes pour l'utilisateur que ce qui est sous le capot.

Tuiles vivants sont la porte d'entrée de votre application, cette première impression qui informe l'utilisateur sur l'utilisabilité de votre application. Tous ceux qui utilisent votre application va voir et utiliser votre Webcam live tile avant toute autre partie de l'application. Peu importe que ce soit pour lancer l'app ou juste grignoter bouchées de données que vous affichez en eux. La tuile direct, c'est comment vous pouvez faire cette première impression très importante.

Cela signifie que vous avait mieux assurer que vos tuiles et l'écran de démarrage sont alléchantes et attrayant. Cela ne veut ne pas pour dire vous pouvez ignorer le reste de l'application, mais vous n'obtiendrez jamais utilisateurs jusque-là sans partant avec quelques tuiles de bonne mine. Comme vous sans doute l'imaginer, vous pouvez actualiser périodiquement, tuiles vivants avec des informations fraîches via les notifications push. Vous pouvez même étendre les notifications à l'écran de serrure en ajoutant des badges pour afficher des informations relatives à l'application.

Figure 1 illustre les quatre styles de tuiles direct disponibles sur les ordinateurs de bureau et tablettes Windows : grande, grande, moyenne et petite. Les images dans Figure 1 montrer comment The Weather Channel a misé sur un design épuré, lorsque les tuiles ne sont pas afficher d'informations. Quand ils sont, vous voyez des graphismes riches et les tuiles affichent uniquement les informations les plus importantes. Dans ce cas, c'est le temps actuel et les avertissements de tempête.

Figure 1 les quatre tailles de carreaux vivants — grande, grande, moyenne et petite

A UX mieux conduira à la meilleure cote dans le magasin et une meilleure satisfaction des utilisateurs. Tuiles vivants avec votre image de marque sont la meilleure façon de différencier votre application à d'autres. Figure 1 montre comment les tuiles peuvent faire partie d'une grande expérience. Les utilisateurs ne doivent ouvrir l'application pour voir le temps actuel. Sur la grande mosaïque de primaire, ils peuvent définir jusqu'à trois villes pour suivre la météo et puis suivre une ville à la fois sur les autres. Qui est serrant certaines données sérieuses dans seulement 310 x 310 pixels, ou un terrain de jeu encore plus petit.

Comment vivre travaux graphiques de tuile

Maintenant que je vous ai expliqué pourquoi les tuiles vivants sont importants, il est temps de comprendre le fonctionnement des graphiques avec eux. Heureusement, Microsoft fait un excellent travail, création d'un paradigme UX développeur facile facile à suivre avec un ensemble de principes de conception qui fonctionne bien sur les tablettes, téléphones et dispositifs plus petits, de toucher en premier. Vous pouvez publier des apps qui semblent bonnes sans embauche un concepteur. Cela ne veut ne pas pour dire que vous devriez évitent concepteurs au total. Certaines applications, en particulier des jeux, ont compliqué les graphiques nécessitant qu'un concepteur d'entrée.

Cet article portera sur certains modèles de tuile direct que les développeurs non-conception peuvent facilement accomplir. Dans le cadre de cet ensemble de principes, live tiles permettent à l'utilisateur de consommer des données de votre application sans réellement interagir avec votre application. C'est le summum du confort, car l'utilisateur peut analyser rapidement l'écran d'accueil de son appareil pour obtenir des informations pertinentes provenant de plusieurs sources en un éclair.

Il existe deux types de graphiques dans une application moderne : généré par les utilisateurs et les graphiques de l'app. Vacances en famille ou photos professionnelles sont considérés comme généré par l'utilisateur. Les images dans les carreaux vivants ou sur la barre de l'app sont app graphiques. Lors de la construction des tuiles, vous pouvez utiliser deux types pour transmettre des informations. Visual Studio comprend des modèles qui suivent la conception moderne de Microsoft qui vous aideront à réaliser une présentation professionnelle. Cela signifie que tout ce dont vous avez besoin est prêt dans le fichier package.appxmanifest. Tout ce que vous devez faire est de fournir les graphismes eux-mêmes dans la taille correcte.

Il est important d'avoir la bonne image de marque pour tuiles qui ne sont pas encore vivants. Comme vous pouvez le voir dans Figure 2, les tuiles ont une conception simple avec un ballon de citation et les initiales pour la citation du jour (QotD). Il est facile de trouver et de déterminer quel app c'est avec son design épuré et de couleur rouge vif. Pour l'instant, ils sont les tuiles standards, statiques. Cela va changer lorsque vous commencez à envoyer des mises à jour.

Figure 2 les tuiles vivants pour la citation de l'App du jour

L'utilisation de graphiques dans un app Store de Windows ou l'app Store de Windows Phone nécessite plusieurs images pour les actifs suivants :

Vivre à carreaux : Les grands ou petits carrés ou rectangles l'utilisateur robinets ou clique pour lancer une application. Ceux-ci contiennent souvent des images ou du texte.
Insignes : Petites icônes ou glyphes sur les tuiles vivants qui désignent l'état de l'application. Figure 1 montre un badge dans les carreaux de grandes et petites.
Écran de démarrage : L'écran d'introduction qui s'affiche juste avant le chargement de l'application. Cet écran contient fréquemment, un logo ou un graphique.
Tuiles en application : Ces tuiles à affichent les données de l'app et vivent dans un GridView ou ListView. Ils regardent et se sentent comme des tuiles direct sur la page de démarrage de Windows.

Ces images fonctionnent mieux en utilisant les formats .png et .jpg. Chaque app Windows Store et app Store Windows Phone peuvent contenir beaucoup de différentes tailles de ces actifs d'image. Vous pouvez configurer Quelles images appartiennent à quelle tuile en éditant le manifeste du package du projet. Le manifeste du package est un fichier où vous pouvez configurer tous les paramètres app spécifiques, telles que le nom, numéro de version, déclarations de moyens et capacités graphiques. Figure 3 montre les logos vous définissez dans le package.appxmanifest dans un app Store de Windows.

Figure 3 configurer les graphiques de tuile dans le fichier Package.appxmanifest de l'application

Vous devez fournir au moins un graphique pour chacun des types de biens suivants, ou l'application affichera leurs icônes par défaut à la place :

Carré 70 x 70 Logo : Une image de 70 x 70 pixels
Logo carré de 150 x 150 : Une image de 150 x 150 pixels
Large 350 x 150 Logo : Une image de 350 x 150 pixels
Carré 310 x 310 Logo : Une image de 310 x 310 pixels
Carré 30 x 30 Logo : Une image de 30 x 30 pixels

Vous pouvez – et doit – fournissent un graphique à l'échelle pour ces classes de tuiles. Les actifs à l'échelle pour les éléments dans Figure 3 sont à 80 pour cent, 100, 140 et 180 pour cent. Bas de Figure 3 listes des dimensions précises requises pour les actifs à l'échelle. Notez que ce sont seulement pour les applications Windows Store. Projets de app Store Windows Phone ont légèrement différents ensembles d'actifs et d'échelles qui fonctionnent pour les types d'appareils plus petits. Les magasin de Windows et Windows Phone Store apps ont le logo ci-dessous et les configurations d'écran Splash :

Logo de la boutique : Le logo affiché dans le magasin.
Logo de l'insigne : Une petite icône qui peut afficher sur l'écran de verrouillage ou à l'intérieur des carreaux existants.
Écran de démarrage : Une page plein écran qui contiennent généralement un logo ou un texte d'introduction au lancement de l'app.

Il existe de nombreuses versions de ces images en raison de la nécessité de les mesurer à taille correctement sur les différentes configurations d'écran, de bureau pour mobile à tablette et autres. Une image de 150 x 150 pixels ne doit étirer trop loin avant qu'il commence à regarder pixélisé et floue.

Vous pouvez créer des graphiques pour les carreaux à l'aide d'une photo ou un programme d'édition graphique. Avec ces outils, il n'est pas difficile de créer un logo comme Figure 2 c'est simple pourtant perceptible. Il y a de nombreux graphiques stocks également disponible pour une utilisation dans les applications.

Code tuiles de modèles

Tuiles serait un peu plus que de simples icônes, si ce n'est pour leur capacité à afficher les différentes images et texte à des moments différents. C' est ces mises à jour régulières qui les font vivent. Vous pouvez mettre à jour les tuiles avec le code ou les intégrer avec les notifications push. Si vous utilisez push, vous pouvez mettre à jour les carreaux à l'aide de tâches de fond qui s'inscrivent dans le cycle de vie. De cette façon, que votre application ne doit pas être en cours d'exécution, en soi, encore quelques code peut s'exécuter à des intervalles prédéterminés pour faire défiler les cinq éléments différents. Pour des informations générales sur la gestion des processus du cycle de vie, voir « The Windows Store App Lifecycle » à msdn.microsoft.com/magazine/jj660301.

Le code dans Figure 4 effectue une mise à jour de tuile simple pour générer les carreaux en Figure 5, sans avis de poussée. Il obtient d'abord un objet TileUpdater d'appeler la CreateTileUpdaterForApplication statique de la classe TileUpdateManager. Une fois cela fait, le code se place sur aller chercher un modèle prédéfini de tuile en passant dans une des options enum TileTemplateType à la méthode GetTemplateContent de la classe TileManager.

Figure 4 mise à jour de tuile Simple sans Notifications Push

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

Figure 5 plusieurs d'entre les tailles de carreaux, que vous pouvez utiliser

Accéder à l'attribut innerText ou bien composez le Setattribut permet le code de travailler avec la tuile. C'est parce qu'un modèle HTML est ce qui décrit comment un carreau ressemble et se sent. Heureusement, les développeurs XAML n'avez pas besoin d'apprendre beaucoup de HTML juste pour faire une tuile. Il ressemble à HTML, après tout. Toutefois, vous devez savoir sur des éléments comme le HTML ici qui définit le modèle de TileSquare150x150Text04.

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

Vous ne peut pas juste attiser de n'importe quelle tuile ancienne hors de n'importe quel vieux dimensions, et vous n'écrivez pas le modèle HTML vous-même. Au lieu de cela, il y a plusieurs modèles dont vous pouvez choisir qui vous permettent de modifier les formes de la tuile de base, les icônes et les messages. Il y a une liste de ces modèles pour le 8.1 de Windows et Windows Phone 8.1, ainsi que des exemples de code à bit.ly/1oqwQd6.

Choisissez un des modèles dans la liste et l'utiliser dans votre code. Dans Figure 4, l'appel à GetTemplateContent est ce qui va chercher ce modèle prédéfini. Vous pouvez choisir de n'importe lequel des nombreux modèles disponibles.

Jusqu'à présent, ont porté sur les exemples de code simple mise à jour un carreau une fois, sur place, par l'exécution du code. Si vous souhaitez ajouter un certain pizazz supplémentaire, les carreaux de mise à jour périodiquement avec des informations fraîches. Vous pouvez faire cela en ajoutant des tâches en arrière-plan et pousser des notes à votre application. Mise au point de cet article étant plus axés sur les UX, vous pouvez visionner la vidéo à bit.ly/1vH6J2p pour apprendre comment mettre à jour une tuile dans une tâche de fond.

Utilisez les tuiles secondaires pour un UX de première classe

Les utilisateurs veulent parfois épingler quelque morceau de données à l'écran de démarrage. Embarquement de la compagnie aérienne, un eBook ou des symboles du marché boursier spécifique sont tous de bons exemples de choses utilisateurs souhaitent épingler à leur écran. La façon de le faire en 8.1 de Windows ou Windows Phone 8.1 est avec tuiles secondaires. Tuiles secondaires le rendent facile pour l'utilisateur de personnaliser son app, qui se traduit par des cotes plus élevées dans le magasin.

Il y a un concept de liens profonds dans le monde de l'app. Cela signifie un utilisateur navigue quelques fois dans une application, puis épingle à lier à elle plus tard. Voici plusieurs utilisations pour tuiles secondaires :

Prévisions pour une ville spécifique
Itinéraires conseillés pour un voyage spécifique
Parties sauvegardées
Films spécifiques pour démarrer ou poursuivre
Coordonnées d'un ami
Vos photos favorites
Alarmes personnalisées

Gardez à l'esprit que ces tuiles sont secondaires, parce que vous avez déjà une tuile direct primaire. Mises à jour à l'échelle de l'app doivent aller dans la tuile primaire, s'il ne sont pas des règles strictes il. Les types de données particuliers énumérées pour tuiles secondaires ne serait pas logique généralement dans la dalle principale. Utilisateurs en général de lancer une application et puis aller à sa page de démarrage. Secondaire des tuiles permettent aux utilisateurs lancent une app et aller directement à une partie spécifique de l'application. L'expression pour cela est « liens profonds ». En règle générale, utilisez des tuiles primaires pour le lancement de l'application écran de démarrage et tuiles secondaires pour les détails des données spécifiques.

Le code suivant crée et affiche une tuile secondaire :

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

Lorsque vous appelez le constructeur SecondaryTile, passe toutes les informations dont vous avez besoin pour remplir la tuile, telles que le nom, les arguments, taille et dont l'image à utiliser. Tout ce dont vous avez besoin est juste là dans l'appel, et le constructeur est surchargé, alors vous avez beaucoup de choix.

Carreaux secondaires est semblables aux tuiles standards, mais ils permettent que profondes, lien vers le contenu ou une partie spécifique de l'application. Plus facile à utiliser vous faites les deux ensembles de tuiles, le mieux vos clients dans le magasin. Alors envisager d'utiliser des carreaux secondaires si votre application contient des données spécifiques qui est utiles pour visualiser de la page de démarrage de Windows.

Une Conclusion carrée

Lorsqu'un utilisateur n'a pas à faire quelque chose pour interagir avec votre application et reçoit encore des renseignements utiles, c'est une victoire. Les valeurs nominales de l'app store qui reflète. Même les développeurs qui ne sont pas gros en graphisme peuvent encore créer des applications de beau et utiles.

N'oubliez pas de créer des graphiques pour des tailles à l'échelle autant que possible, et Windows vous livrera le meilleur graphique selon le périphérique. Mieux l'UX, plus la cote dans l'app magasin. Et cela se traduit directement à plus de téléchargements.

Rachel Appel est consultante, auteure, mentor et a travaillé pour Microsoft. Elle dispose de plus de 20 ans d'expérience dans le secteur informatique. Elle participe aux conférences majeures du domaine, par exemple Visual Studio Live!, DevConnections, MIX, etc. Elle est experte en développement de solutions répondant aux exigences professionnelles et technologiques, et se concentre sur la pile de développement Microsoft et le Web ouvert. Pour plus d'informations sur Rachel Appel, consultez son site Web à l'adresse rachelappel.com.

Merci à l'expert technique Microsoft suivant d'avoir relu cet article : Frank La Vigne

Partager via