Conception de dispositions adaptables (applications de style Metro en JavaScript et en HTML)

[Cette documentation est une version préliminaire qui peut faire l’objet de modifications.]

Dans Windows 8 Release Preview, une vue correspond à la façon dont le contenu de votre interface utilisateur Windows de style Metro s’adapte au mode d’accès utilisé pour l’application et à sa manipulation par l’utilisateur. Une application qui est conçue pour prendre en charge plusieurs vues doit fonctionner sur différentes tailles et orientations d’appareils, et permet aux utilisateurs de manipuler le contenu en fonction de leurs besoins et de leurs préférences.

État de l’affichage

L’état d’affichage fait référence aux trois modes d’affichage qu’un utilisateur peut choisir pour votre application de style Metro : ancré, rempli et plein écran, tels que l’illustrent les images suivantes.

État de l’affichageDescription
Plein écranL’application remplit l’écran dans son intégralité.

État d’affichage en plein écran

AncrageL’application est ancrée sur une région étroite de l’écran.

État d’affichage ancré

RemplissageL’application remplit l’espace de l’écran restant non occupé par l’application en état ancré.

État d’affichage rempli

 

Dans la mesure où les utilisateurs sont susceptibles de travailler avec jusqu’à deux applications à la fois, les dispositions fournies doivent être suffisamment fluides et souples pour prendre en charge ces trois états.

Lorsque vous prévoyez des affichages plein écran, ancré et rempli, l’interface de votre application se réorganise en douceur et de façon élégante afin de s’adapter à la taille de l’écran, à l’orientation et aux interactions de l’utilisateur.

Orientation de l’écran

Les utilisateurs retournent et font pivoter leurs tablettes et écrans. Vous devez donc veiller à ce que votre application prenne en charge à la fois l’orientation paysage et l’orientation portrait.

Orientations paysage et portrait

Interactions de l’utilisateur

Les applications idéales permettent aux utilisateurs de faire ce qu’ils veulent avec le contenu affiché dans l’interface.

Lorsque vous concevez une application, identifiez les régions de l’interface devant prendre en charge les mouvements panoramiques et le défilement, le zoom optique et sémantique et le redimensionnement des objets.

Créez des vues permettant aux utilisateurs de redimensionner le contenu de l’application et d’effectuer un zoom avant dessus.

Région prenant en charge le redimensionnement

Si nécessaire, laissez la surface de l’interface déborder de la zone d’écran sur d’autres « pages ». Dans ces cas, permettez aux utilisateurs de recourir à un mouvement panoramique et à un défilement pour explorer ces surfaces d’interface larges et découvrir le contenu présent sur les autres pages.

Mouvement panoramique sur plusieurs pages de contenu

Dans cette section

RubriqueDescription

Recommandations sur la mise à l’échelle d’après la densité en pixels

Windows met votre application à l’échelle afin d’assurer la cohérence des tailles physiques des éléments d’interface quelle que soit la densité de pixels de l’écran. Cette rubrique décrit comment créer une application dont l’affichage de la disposition et des images reste de grande qualité lorsqu’elle est mise à l’échelle.

Recommandations pour l’adaptation à la taille des écrans

Cette rubrique décrit les meilleures pratiques permettant de concevoir et créer, pour votre application de style Metro en JavaScript, une disposition s’adaptant aux différentes tailles d’écran prises en charge par Windows 8 Release Preview.

Recommandations pour les affichages ancrés et remplis

Ces recommandations vous aideront à concevoir une interface d’application de style Metro s’adaptant à tous les états d’affichage.

 

 

 

Afficher:
© 2015 Microsoft