Avril 2018
Volume 33, numéro 4
Cet article a fait l'objet d'une traduction automatique.
Fluent Design - Utilisation de Fluent : mouvements de balayage et animations connectées
Par Lucas Haines | Avril 2018
Développeurs d’applications ont plus et les types de périphérique plus à gérer, à partir de smartphones omniprésents et bureau classique et l’ordinateur portable pour les PC, à un écran tactile grand format affiche et même de nouvelles plateformes de réalité augmentée et virtuels comme HoloLens. Le système de conception Fluent est spécialement conçu et évolue en permanence pour le rendre est plus facile pour les développeurs d’intégrer des fonctionnalités avancées pour l’écosystème de périphériques mixte. Les fonctionnalités Fluent ajoutées à la plateforme Windows 10 dans la mise à jour des créateurs de chute sont puissant de cas, permettant aux applications de se sentir naturel, sans qu’appareil sur lequel elles s’exécutent.
Les fonctionnalités de l’interface utilisateur Fluent tels que lumière, flou et profondeur combiné pour autoriser des expériences attrayants et intuitives qui permettent aux utilisateurs de plus à faire. Mais jusqu'à récemment, défis qui restait à effectuer pour les utilisateurs qui tentent d’obtenir le meilleur parti de leurs appareils. Avec Windows 10 automne créateurs Update, Fluent ajoute deux fonctionnalités qui résolvent ces deux problèmes aujourd'hui : Actions de mouvement de balayage et les Animations connectées.
Actions de mouvement de balayage
Il s’agit pas étonnant que les ventes de PC d’équipé d’un écran tactile continuent à croître. La question pour les développeurs est comment aider les utilisateurs à effectuer d’autres opérations en activant les modèles d’interaction qui fonctionnent à la fois pour les PC de l’écran tactile et de la souris et clavier classique.
La réponse est fourni sous la forme d’objet d’exécution des commandes, ce qui a été autour des années via un clic droit ou d’un drainage et maintenez-la enfoncée. Ces méthodes recueil sont bien compris, mais avec un peu de travail, vous pouvez créer dans les accélérateurs qui exploitent les fonctionnalités de l’écosystème de périphériques pour les rendre mieux.
Entrez les actions de mouvement, qui sont très accélérateurs qui fonctionnent pour les utilisateurs à la fois tactiles et du clavier. Les actions de mouvement sont un accélérateur pratique pour les commandes contextuelles habituellement masquées derrière un menu contextuel ou sur une barre de commandes distincte. Autres exemples d’actions de mouvement : boutons sensitifs, faites défiler et les raccourcis clavier.
Effectuez un balayage de l’exécution de commandes n’est pas un nouveau concept. Le modèle d’interaction existe sur la création de documents de Google et Apple iOS. Il est utile pour le triage rapidement des éléments dans une liste, par exemple, la suppression des photos ou des messages électroniques dans un défilement, ou pour révéler les commandes les plus utilisées dans un scénario. Le contrôle de balayage XAML rend très facile d’ajouter cette fonctionnalité excellente à vos applications de plateforme Windows universelle (UWP).
Le contrôle de balayage contient deux comportements, le mode d’affichage et mode d’exécution :
Révéler le mode peut afficher une ou plusieurs commandes afin qu’un utilisateur peut sélectionner parmi les associé à un élément sélectionné. Par exemple, si vous avez une liste de messages et que vous souhaitez activer rapidement de transfert, la création d’un rappel de suivi ou la planification d’une réunion, révéler mode rend cela possible sans forcer l’utilisateur à parcourir les écrans. Cela peut être très puissant pour l’utilisateur « en déplacement ».
Exécuter en mode se termine à la commande avec un simple geste. Exemple des plus courants et plus simple serait delete. Vous n’avez plus besoin ce message et que vous souhaitez oubliez qu'elle existait déjà. Un simple geste (comme un balayage gauche) et il de le dans la Corbeille. Exécuter en mode ne doit pas nécessairement être un destructeur. Un autre exemple est balayez à enregistrer. Supposons que dans une colonne, vous avez une liste de clients et lorsque vous sélectionnez un volet d’informations apparaît à droite. Une fois que l’utilisateur apporte des modifications à l’enregistrement de client ou de formulaire, il ou elle simplement fait glisser sa l’élément pour enregistrer les modifications. Simple et rapide.
Toutefois, avant de créer le comportement de passage dans ma liste, je que configurer le SymbolIconSource pour mon application. Cela fournit un moyen facile pour accéder aux icônes pour votre application. Ajout de symboles à page.resources me permet de facilement ajouter des icônes si nécessaire ultérieurement dans le code. Quelle que soit l’implémentation de balayage, c’est une bonne solution pour rendre le code plus lisible et comment tirer profit d’IntelliSense dans Visual Studio. Voici le code :
<Page.Resources>
<SymbolIconSource x:Key="ReplyIcon" Symbol="MailReplyAll" />
<SymbolIconSource x:Key="PinIcon" Symbol="Pin" />
<SymbolIconSource x:Key="DeleteIcon" Symbol="Delete" />
</Page.Resources>
Les ressources chargées, vous pouvez commencer à implémenter le mouvement de balayage API sur un élément. Liste (vues) sont un élément très répandu pour implémenter des mouvements de balayage, c’est ce que vous travaillerez avec, comme indiqué dans le code de Figure 1.
Figure 1 implémentation balayez sur un ListView
<ListView x:Name="MainList" Width="400" Height="500">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<SwipeControl x:Name="LVSwipeContainer"
LeftItems="{StaticResource RevealOptions}"
RightItems="{StaticResource ExecuteDelete}">
<StackPanel Orientation="Vertical" Margin="5">
<TextBlock Text="{x:Bind}" FontSize="18" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Data Template Font" FontSize="12" />
</StackPanel>
</StackPanel>
</SwipeControl>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Notez que dans Figure 1 que j’utilise la propriété LeftItems et RightItems dans l’API SwipeControl. LeftItems détermine que se passe-t-il lorsque l’utilisateur fait glisser sa gauche (dans ce cas, RevealOptions) et place les boutons de commande sur le côté droit.
L’élément directionnelle fait référence à une ressource statique, qui est définie dans SwipeItems placées dans les ressources de page avec ma source icônes. Il s’agit sur lequel définir le mode de comportement à révéler ou d’exécuter comme suit :
<Page.Resources>
<SwipeItems x:Key="RevealOptions" Mode="Reveal">
<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
Foreground="White"/>
<SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"
Foreground="White" />
</SwipeItems>
<SwipeItems x:Key="ExecuteOptions" Mode="Execute">
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
Invoked="SwipeItem_Invoked"
Background="Red" Foreground="White" />
</SwipeItems>
</Page.Resources>
Maintenant que l’interface utilisateur créée et l’interaction d’utilisation, je peux utiliser la propriété Invoke pour définir un gestionnaire d’événements et de traiter l’action. Traitement de la commande lorsqu’un balayage est effectué est effectué sur la déclaration de SwipeItems dans page.resources en définissant la propriété Invoked. Voici le code pour que :
<SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
Invoked="DeleteItem_Invoked"
Background="Red" Foreground="White" />
Une fois dans le code-behind, vous pouvez ajouter votre code pour traiter la commande ici :
private void DeleteItem_Invoked(SwipeItem sender,
SwipeItemInvokedEventArgs args)
{
int index = myListView.Items.IndexOf(args.SwipeControl.DataContext);
myListView.Items.RemoveAt(index);
}
Même si les appareils tactiles associé à l’origine du balayage, il fonctionne très bien avec des blocs de suivre et de stylet. Souvent, je trouve que lorsque je travaille avec un appareil qui n’est pas le tactile qui rechercher les mouvements de balayage avec le remplissage de suivi. Je toujours lorsque je trouve que cela fonctionne. Par défaut, les actions de mouvement de balayage Fluent fonctionnent avec suivi remplit, donnez aux utilisateurs d’autres moyens pour effectuer leurs tâches et passer rapidement. Il est un parfait exemple d’implémentation pour une méthode d’entrée et de profiter de tous les utilisateurs.
Lorsque vous envisagez d’ajouter des balayez à votre application, tenez compte des si le mouvement sera en conflit avec d’autres comportements dans l’application. Avez-vous un FlipView, un concentrateur ou un tableau croisé dynamique en tant que la zone de contenu principale dans votre application ? Qui n’est probablement pas le meilleur endroit pour implémenter balayez, car les modèles d’interaction sont très similaires et peut être difficile de mise en route de l’équilibre correct pour les utilisateurs.
Effectuez un balayage est élevée lors de la même action doit être répétée plusieurs fois, mais n’oubliez pas que le résultat de l’action doit être cohérent. Je ne peux pas considérer pire à un utilisateur qui sait que le glissement gauche sera favori un élément, pour découvrir sur l’écran suivant que le mouvement de même le supprime. Enfin, un Conseil : Mon expérience, faites défiler pour les utilisateurs de touche ou de la souris est préférable si l’élément qui est passée est au moins 300 pixels de large.
Animations connectées
Aujourd'hui, nombre d’applications et sites Web ont des transitions « saccadées » ou le mot. Lorsqu’une action est entreprise qui requiert une navigation de page, l’utilisateur voit uniquement avec la nouvelle page. Il existe quelques, le cas échéant, les signaux visuels pour fournir le contexte ou des conseils sur la procédure à suivre, où ou quelles sont les nouveautés. Avec des animations connectées, vous pouvez conserver le contexte de l’utilisateur et augmenter les engagement, telles que par l’animation de l’élément où vous avez cliqué à partir d’une liste à l’emplacement cible de la page de détails. Ou vous pouvez conserver Avatar l’utilisateur visible pendant qu’il parcourt une application. Il s’agit sur la gestion de contexte et le focus.
Ajout d’animations connectées est un processus incrémentiel. Si vous souhaitez implémenter pour toutes les transitions de votre page, veuillez ne pas me laisser vous arrêter. Mais nous avons tous une file d’attente de travail permettant de graver, il est donc recommandé d’être sélective et d’attaquer les efforts au fil du temps. Il existe deux étapes requises pour implémenter des animations connectées :
- Préparer un objet d’animation dans la page source.
- Démarrez l’animation sur la page de destination.
Préparation de l’animation sur la page source vous permet de définir l’objet source qui doit être animée sur les pages. La même source de l’image doit être définie sur la page de destination, mais vous pouvez utiliser une image de faible résolution pour la page cible. Cela peut réduire l’encombrement mémoire de votre application. L’animation connectée sera ensuite enchaîné entre les deux images.
La règle générale des animations connectées est que l’animation doit démarrer environ 250 millisecondes entre les deux étapes ou l’élément source peut se bloquer dans la vue et finir recherche étrange. Avec l’animation implicite moteur fournis dans Windows 10, si vous préparez une animation, mais ne pas démarrer dans les trois secondes, le système supprimera de celui-ci.
Pour ce scénario je vais utiliser ListView avec du texte et des images, à l’aide du code fourni dans Figure 2. Listview et Gridview ont deux méthodes ajoutées spécifiquement pour les animations connectées : PrepareConnectedAnimations et TryStartConnectedAnimationAsync.
Figure 2 installation de Collection ListView pour animer
<ListView x:Name="Collection"
ItemClick="Collection_ItemClick"
ItemsSource="{Binding Source={StaticResource ItemsViewSource}}"
IsItemClickEnabled="True"
SelectionMode="None"
Loaded="Collection_Loaded"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:CustomDataObject">
<Grid Margin="0,12,0,12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- image to be animated-->
<Image x:Name="ConnectedElement" Source="{x:Bind ImageLocation}"
MaxHeight="100"
Stretch="Fill" />
<StackPanel Margin="12,0,0,0" Grid.Column="1" >
<TextBlock Text="{x:Bind Title}" HorizontalAlignment="Left"
Margin="0,0,0,6" />
<StackPanel Orientation="Horizontal" >
<TextBlock Text="{x:Bind Popularfor}" />
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
L’élément clé dans cette liste est x : Name de l’image dans le DataTemplate. C’est le nom que vous utiliserez lors de la créer la ConnectedAnimation et de la préparer pour la page de destination. Il permet d’accéder à la nouvelle page lorsque l’utilisateur clique sur un élément dans la collection. Vous allez vous préparer l’animation connectée pendant la méthode de clic. Le Gestionnaire d’événements défini dans la liste Collection_ItemClicked est où préparer la ConnectedAnimation avant la navigation. La méthode PrepareConnectedAnimation attend une clé unique, l’élément et le nom de l’élément à animer. Dans la méthode, j’ai nommé mon animation qui fera référence dans la page de destination lors de l’animation est démarrée, comme indiqué dans « ca1, » Figure 3.
Figure 3 PrepareConnectedAnimation (méthode)
private void Collection_ItemClick(object sender,
ItemClickEventArgs e)
{
var container =
collection.ContainerFromItem(e.ClickedItem) as ListViewItem;
if (container != null)
{
_storeditem = container.Content as CustomDataObject;
var animation = collection.PrepareConnectedAnimation("ca1", _
storeditem, "ConnectedElement");
}
Frame.Navigate(typeof(DestinationPage), _storeditem);
}
SuppressNavigationTransitionInfo bloque les animations de transition de page par défaut à partir de la lecture, et vous aide à éviter toute interférence avec l’animation connectée. À l’aide de la méthode OnNavigatedTo pour la page de destination, créez une ConnectedAnimation et transmettez la clé unique est créé sur la page source (« ca1 »). Ensuite, j’appeler TryStart et passer le nom de l’élément image XAML que je veux animer, à l’aide de ce code XAML :
<Image x:Name="detailedIamge" MaxHeight="400"
Source="{x:Bind ImageLocation}" />
Et ce code c# :
ConnectedAnimation imageAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null)
{
imageAnimation.TryStart(detailedIamge);
}
Cela crée l’animation connectée à sens unique à partir de listview à la page de destination. Je dois toujours créer une autre animation connectée pour gérer le scénario de navigation précédent. Je préparer l’animation connectée dans la substitution de OnNavigateFrom et lui donner une clé unique, « 2 », comme indiqué dans le code suivant :
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ca2", detailedIamge);
}
L’animation 2 est démarrée à l’aide de la méthode chargée de collections déclarée dans le modèle de listview, comme suit :
private async void Collection_Loaded(object sender, RoutedEventArgs e)
{
if (_storeditem != null)
{
ConnectedAnimation backAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca2");
if (backAnimation != null)
{
await collection.TryStartConnectedAnimationAsync(backAnimation, _
storeditem, "ConnectedElement");
}
}
}
J’utilise la méthode TryStart async appelée sur un listview, pour s’assurer que le contenu de listview est réalimentée avant le démarrage de l’animation.
En général, avec des listes ou des vues de données denses, vous avez un grand nombre de données secondaire associées à l’élément, par exemple, objet du message, l’expéditeur, date/heure et le type. Nous puissions vous aider à encore davantage l’utilisateur par l’animation de ces éléments dans la vue. Cela requiert l’utilisation de CoordinatedAnimation, laquelle je peux le faire à l’aide de la surcharge de deux paramètres pour TryStart.
Tout d’abord, je dois créer un élément dans la page de destination pour afficher le contenu approprié. J’utilise un stackpanel avec un bloc de texte, et j’ai nommé stackpanel CoordinatedPanel, comme illustré ici :
<StackPanel x:Name="CoordinatedPanel" Grid.Column="1"
VerticalAlignment="Top" Margin="20,0">
<TextBlock Text="{x:Bind HeaderText}" Style="{ThemeResource SubheaderTextBlockStyle}"
Margin="0,0,0,10" />
</StackPanel>
Puis utiliser la surcharge pour TryStart en référence à la fois l’animation connectée et l’élément d’interface utilisateur pour se coordonner avec, comme suit :
ConnectedAnimation imageAnimation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("ca1");
if (imageAnimation != null)
{
imageAnimation.TryStart(detailedIamge, new UIElement[] { CoordinatedPanel });
}
Cela permettra l’animation connectée, que j’ai créé et toute autre animation sur l’interface utilisateur à exécuter en même temps, à aider l’utilisateur à comprendre le contexte plus rapidement avec une expérience plus riche.
Une note rapide : Éviter l’utilisation des animations connectées si l’interface utilisateur dépend des demandes du réseau ou de toutes les opérations asynchrones de longs entre la préparation et de démarrage de l’animation. Ces scénarios seront entraîner une erreur passagère perceptible dans votre application ou créer des retards détournent l’impact de l’animation. Pour compenser pour ces situations, envisagez de chargement des ressources et des images dans votre application à l’avance.
Pour résumer
Actions de mouvement de balayage et les animations connectées sont des ressources utiles qui peuvent faciliter l’interaction, ajouter contexte visuel et créer une expérience attrayante et intuitive pour vos utilisateurs finaux. Dans le cas d’actions de mouvement de balayage, le modèle d’interaction est facile à implémenter et ajoute un nouveau niveau de l’efficacité de l’utilisateur qui s’étend à remplit de suivi et les utilisateurs de stylet. Ces interactions peu peuvent s’ajouter lorsque les utilisateurs répéter les mêmes actions indéfiniment.
Animations connectées aider l’utilisateur en fournissant le contexte visuel lors de la navigation entre les pages, tout en permettant une expérience attrayante. À partir d’un point de vue du développeur, l’animations connectées peuvent également être employées incrémentielle à des moments clés dans l’application. Résultat : Les utilisateurs finaux bénéficient d’une expérience plus cohérente et attrayante motive qu’ils utilisent le plus souvent l’application.
Lucas Hainescollabore avec l’équipe de contrôles XAML chez Microsoft en mettant l’accent sur les solutions de conception et l’interface utilisateur pour le système de conception Fluent. Il également travaillé trois ans au studio centrale Windows Design, où il a contribué forme la plateforme Fluent.
Merci aux experts techniques Microsoft suivants d'avoir relu cet article : Stéphane Moyes, Kiki Saintonge
Kiki Saintonge vient d’Ellsworth, Alaska et a un passionné de jeux vidéo et en particulier les outils et les technologies d’interface utilisateur, son conduisant à l’état de Washington pour en savoir plus informatique. Enfant Windows cœur, elle fonctionne désormais sur le développement les contrôles meilleures et l’expérience de l’équipe Microsoft XAML.
Steven Moyes est responsable de programme Microsoft de Redmond, Washington, vous travaillez sur Créer des animations dans UWP XAML plus facile et plus puissant. Pendant son temps libre, vous trouverez lui jeux vidéo, la lecture ou fonctionne sur projects.d codage personnel