Partager via

Zoom optique et redimensionnement

  • Article

Cet article décrit les éléments de zoom et de redimensionnement Windows et fournit des instructions d’expérience utilisateur pour l’utilisation de ces mécanismes d’interaction dans vos applications.

API importantes : Windows.UI.Input, Input (XAML)

Le zoom optique permet aux utilisateurs d’agrandir leur vue du contenu au sein d’une zone de contenu (elle est effectuée sur la zone de contenu elle-même), tandis que le redimensionnement permet aux utilisateurs de modifier la taille relative d’un ou de plusieurs objets sans modifier la vue de la zone de contenu (elle est effectuée sur les objets de la zone de contenu dans la zone de contenu).

Les interactions de zoom optique et de redimensionnement sont effectuées par le biais des mouvements de pincement et d’étirement (éloigner les doigts pour un zoom avant et rapprocher les doigts pour un zoom arrière), ou en maintenant la touche Ctrl enfoncée tout en faisant défiler la roulette de défilement de la souris, ou en maintenant la touche Ctrl enfoncée (avec la touche Maj, si aucun pavé numérique n’est disponible) et en appuyant sur la touche plus (+) ou moins (-).

Les diagrammes suivants illustrent les différences entre le redimensionnement et le zoom optique.

Zoom optique : l’utilisateur sélectionne une zone, puis effectue un zoom dans l’ensemble de la zone.

moving the fingers closer together zooms in on the content area and moving them apart zooms out

Redimensionner : l’utilisateur sélectionne un objet dans une zone et redimensionne cet objet.

moving the fingers closer together shrinks an object and moving them apart enlarges it

Remarque : le zoom optique ne doit pas être confondu avec le zoom sémantique. Bien que les mêmes mouvements soient utilisés pour les deux interactions, le zoom sémantique fait référence à la présentation et à la navigation du contenu organisés dans un affichage unique (par exemple, la structure de dossiers d’un ordinateur, une bibliothèque de documents ou un album photo).

 

Pratiques conseillées et déconseillées

Utilisez les instructions suivantes pour les applications qui prennent en charge le redimensionnement ou le zoom optique :

  • Si des contraintes ou limites de taille maximale et minimale sont définies, utilisez des commentaires visuels pour illustrer quand l’utilisateur atteint ou dépasse ces limites.

  • Utilisez des points d’ancrage pour influencer le comportement de zoom et de redimensionnement en fournissant des points logiques pour arrêter la manipulation et vérifier qu’un sous-ensemble spécifique de contenu est affiché dans la fenêtre d’affichage. Fournissez des points d’ancrage pour les niveaux de zoom courants ou les vues logiques pour faciliter la sélection de ces niveaux par un utilisateur. Par exemple, les applications photo peuvent fournir un point d’ancrage de redimensionnement à 100 % ou, dans le cas d’applications de mappage, les points d’ancrage peuvent être utiles aux vues de ville, d’état et de pays.

    Les points d’ancrage permettent aux utilisateurs d’être imprécis et d’atteindre leurs objectifs. Si vous utilisez XAML, consultez les propriétés des points d’ancrage de ScrollViewer.

    Il existe deux types de points d’ancrage :

    • Proximité : une fois le contact levé, un point d’ancrage est sélectionné si l’inertie s’arrête à une certaine distance du point d’ancrage. Les points d’ancrage de proximité autorisent toujours un zoom ou un redimensionnement à la fin entre les points d’ancrage.
    • Obligatoire : le point d’ancrage sélectionné est celui qui précède immédiatement ou réussit le dernier point d’ancrage franchi avant que le contact ne soit levé (selon la direction et la vitesse du mouvement). Une manipulation doit se terminer sur un point d’ancrage obligatoire.

  • Utilisez la physique de l’inertie. Ces options en question sont les suivantes :

    • Décélération : se produit lorsque l’utilisateur cesse de pincer ou d’étirer. Cela revient à glisser pour s’arrêter sur une surface glissante.
    • Rebond : un léger effet de rebond se produit lorsqu’une contrainte de taille ou une limite est passée.

  • Contrôles de l’espace en fonction des Instructions de ciblage.

  • Fournissez des descripteurs de mise à l’échelle pour le redimensionnement contraint. Le redimensionnement isométrique ou proportionnel est la valeur par défaut si les descripteurs ne sont pas spécifiés.

  • N’utilisez pas de zoom pour parcourir l’interface utilisateur ou exposer des contrôles supplémentaires au sein de votre application, utilisez plutôt une région de mouvement panoramique. Pour plus d’informations sur le panoramique, consultez Instructions de mouvement panoramique.

  • Ne placez pas d’objets redimensionnables dans une zone de contenu redimensionnable. Des exceptions s’appliquent :

    • dessin d’applications où les éléments redimensionnables peuvent apparaître sur une zone de dessin ou un tableau d’art redimensionnable ;
    • pages web avec un objet incorporé tel qu’une carte.

    Remarque : dans tous les cas, la zone de contenu est redimensionnée, sauf si tous les points tactiles se trouvent dans l’objet redimensionnable.

Exemples

Exemples d’archive