Mise en page pour Visual StudioLayout for Visual Studio

La majorité des boîtes de dialogue Visual Studio sont mise en page de la boîte de dialogue utilitaire, qui sont l’unthemed boîtes de dialogue de cette norme suivi principes de mise en page de boîte de dialogue Windows Desktop.The majority of Visual Studio dialogs are Utility dialog layout, which are the unthemed dialogs that follow standard Windows Desktop dialog layout principles. Lorsque Visual Studio s’à actualiser son interface utilisateur, certaines des boîtes de dialogue plus apparents ont une nouvelle conception qui établit les expériences comme définition de produit.As Visual Studio moves to refresh its UI, some of the more prominent dialogs have a new design that establishes them as product-defining experiences. Ces mise en page de boîte de dialogue à thème ont une apparence à thème.These Themed dialog layout have a themed appearance.

Mise en page de boîte de dialogue utilitaireUtility dialog layout

  • Tous les contrôles dans une boîte de dialogue Utilitaire doivent commencer en haut/gauche et vers le bas de flux.All controls within a utility dialog should start at the top/left and flow downward.

  • Centre jamais des contrôles dans une boîte de dialogue pour remplir une zone importante.Never center controls on a dialog to fill a large area.

  • Utiliser la police d’environnement pour tout texte de la boîte de dialogue.Use the environment font for all dialog text. Lorsque vous écrivez une spécification visual, spécifiez la police d’environnement au lieu de sélectionner une police particulière et la taille.When writing a visual spec, specify the environment font instead of selecting a particular font and size. Consultez la police d’environnement.See The environment font.

  • Utiliser l’espacement du contrôle cohérent et le positionnement pour prendre en charge l’objectif de qualité dans savoir-faire.Use consistent control spacing and placement to support the goal for quality in craftsmanship.

  • Boîtes de dialogue peuvent devenir plus complexes à partir d’un plus grand nombre de contrôles, une unique juxtaposition des contrôles ou les deux.Dialogs can become more complex from a larger number of controls, a unique juxtaposition of controls, or both. Pour ces situations complexes, permettre suffisamment d’espace entre les regroupements de contrôle à un flux logique d’analyse de l’utilisateur.For those complex situations, allow adequate space between control groupings to give the user a logical flow to parse.

Exemples de mise en page de boîte de dialogue utilitaireUtility dialog layout examples

Toutes les dimensions sont exprimées en pixels.All dimensions are expressed as pixels.

Espacement de boîte de dialogue pour les étiquettes au-dessus des contrôlesDialog spacing for labels above controls

Figure 08.01-a : Espacement des instructions pour les boîtes de dialogue utilitaire avec étiquettes au-dessus des contrôlesFigure 08.01-a: Spacing guidelines for utility dialogs with labels above controls

Espacement de boîte de dialogue pour les étiquettes à gauche des contrôlesDialog spacing for labels to the left of controls

Figure 08.01-b : Espacement des instructions pour les boîtes de dialogue utilitaire avec des étiquettes à gauche des contrôlesFigure 08.01-b: Spacing guidelines for utility dialogs with labels to the left of controls

Détails de la mise en pageLayout details

MargesMargins

  • Toutes les boîtes de dialogue doivent avoir une bordure de 12 pixels autour de tous les bords.All dialogs should have a 12-pixel border around all edges.

  • Marges dans un cadre de groupe doivent être 9 pixels du bord de l’image.Margins within a group frame should be 9 pixels from the edge of the frame.

  • Marges dans un contrôle onglet doivent être 6 pixels du bord du contrôle onglet.Margins within a tab control should be 6 pixels from the edge of the tab control.

Boutons de commandeCommand buttons

  • Boutons de commande fonctionnent sur le frame de boîte de dialogue, pas sur le contenu.Command buttons operate on the dialog frame, not on the content. Ils doivent être placés dans la partie inférieure droite et doivent avoir suffisamment d’espace variable ci-dessus pour définir les boutons distinctes.They should be placed at the bottom right and should have enough variable space above to set the buttons distinctly separate.

  • S’il existe des boutons horizontaux qui opèrent au sein de la boîte de dialogue, la configuration de bouton de commande alternatif est une pile verticale en haut à droite.If there are horizontal buttons that operate within the dialog, the alternate command button configuration is a vertical stack at the upper right. Consultez des boutons de commande intérieurs ci-dessous.See Interior command buttons below.

  • L’espace à gauche des boutons de commande (gauche/centre en bas de la boîte de dialogue) est considéré comme partie de la « bande » des contrôles d’opération de boîte de dialogue.The space to the left of the command buttons (lower left/center of the dialog) is considered part of the "band" of dialog operation controls. La seule chose qui doit empiéter sur cet espace est un lien d’aide correspondant à la tâche globale ou de la boîte de dialogue.The only thing that should intrude on that space is a Help link that is relevant to the overall task or dialog.

  • Boutons de commande doit être x 23 75 pixels.Command buttons should be 75x23 pixels.

  • Boutons de commande doit être 6 pixels uns des autres.Command buttons should be 6 pixels apart.

    Alignement des boutons de baseBasic button alignment

    Figure 08.01-c : Alignement des boutons de baseFigure 08.01-c: Basic button alignment

ÉtiquettesLabels

  • Aligner à gauche toutes les étiquettes.Left-align all labels.

  • Pour les étiquettes qui se trouvent au-dessus d’un contrôle, ils doivent aligner à gauche précisément avec le contrôle en dessous et le bas de l’étiquette doit être de 5 pixels au-dessus du haut de l’autre contrôle (par exemple, une zone de liste déroulante).For labels that sit above a control, they should left-align precisely with the control below it and the bottom of the label should be 5 pixels above the top of the other control (for example, a combo box).

  • Pour les étiquettes qui se trouvent à gauche des contrôles, la largeur minimale entre l’étiquette et le contrôle d’entrée est de 10 pixels.For labels that sit to the left of controls, the minimum width between the label and the input control is 10 pixels. Une deuxième colonne implicite doit être établie pour aligner les zones de texte, zones de liste déroulante ou d’autres contrôles.An implied second column should be established for aligning the text boxes, combo boxes, or other controls.

  • Étiquettes adoptent une majuscule et sont suivies par un signe deux-points.Labels are sentence case and are followed by a colon. Consultez style de texte.See Text style.

Distance entre les contrôlesDistance between controls

Contrôles de pile raisonnablement.Stack controls reasonably. Il n’existe aucune règle absolue pour l’espacement entre les contrôles empilées.There is no absolute guideline for the spacing between stacked controls. La précision entre les contrôles peut-être varier légèrement entre les boîtes de dialogue.The tightness between the controls may vary slightly between dialogs. L’espacement recommandée est 20 pixels pour les paires de contrôle/étiquette verticale et 9 pixels pour les paires de contrôle/étiquettes horizontales.The recommended spacing is 20 pixels for vertical control/label pairs, and 9 pixels for horizontal control/label pairs. L’espacement du contrôle minimal pour les paires horizontales est 6 pixels.The minimum control spacing for horizontal pairs is 6 pixels.

Recommandé de distance entre les contrôlesRecommended distance between controls

Figure 08.01-d: Des recommandations pour la distance entre les contrôlesFigure 08.01-d: Recommendations for distance between controls

Mise en retrait du contrôleControl indentation

Lorsque les contrôles sont imbriqués, aligner les contrôles internes horizontalement avec le bord gauche du contrôle ci-dessus, généralement l’étiquette.When controls are nested, align inner controls horizontally with the left edge of the control above, usually the label.

Imbriqué alignementNested control alignment

Figure 08.01-e : Alignement des contrôles imbriquésFigure 08.01-e: Nested control alignment

Largeur du contrôleControl width

La largeur d’une zone de texte ou d’autres contrôles similaires doit être pas plue de l’entrée moyenne pour le champ.The width of a text box or other similar controls should be no longer than the average input for the field. La moyenne des mots anglais sont cinq caractères.The average English word is five characters. Par exemple, une zone de texte qui requiert un nom de chemin d’accès long devrait être aussi longue que la disposition horizontale permet, tandis que d’une liste déroulante pour les noms de plateforme doivent uniquement avoir une longueur qui autorise l’entrée la plus longue.For example, a text box that requires a long path name should be as long as the horizontal layout allows, while a dropdown for platform names should only be a length that allows for the longest entry.

Texte d’aideHelper text

  • Une boîte de dialogue peut afficher le texte d’assistance qui fournit plus d’informations sur l’objectif de la boîte de dialogue.A dialog can display helper text that provides more information about the purpose of the dialog. En règle générale, cela se trouve en haut et peut être des phrases de 1 à 2.This typically sits at the top and can be 1-2 sentences.

  • La longueur de ligne doit être une largeur à l’aise pour un utilisateur à analyser et à lire.The line length should be a comfortable width for a user to parse and read. Une boîte de dialogue de taille moyenne doit être pas plus de 550 pixels de large.A medium dialog should be no more than 550 pixels wide.

Boutons de commande intérieursInterior command buttons

Dans les boîtes de dialogue plus complexes, un contrôle interne peut avoir ses propres boutons associés, qui peuvent affecter l’emplacement où se trouvent les boutons de validation de la boîte de dialogue.In more complex dialogs, an internal control might have its own related buttons, which might affect where the dialog's commit buttons are located.

  • Utilisez un alignement vertical (colonne) de l’intérieur boutons lorsque OK/Annuler est orienté horizontalement dans le coin inférieur droit.Use a vertical alignment (column) of interior buttons when OK/Cancel are horizontally oriented in the lower right corner.

  • Utilisez un alignement horizontal (ligne) de l’intérieur boutons lorsque OK/Annuler est orienté verticalement dans le coin supérieur droit.Use a horizontal alignment (row) of interior buttons when OK/Cancel are vertically oriented in the upper right corner. Cette situation est moins courante.This situation is less common.

  • Taille du bouton intérieurs doit cibler la taille des boutons standard de 75 x 23 pixels, correspondant à la taille de OK/Annuler boutons lorsque cela est possible.Interior button size should target the standard button size of 75x23 pixels, matching the size of OK/Cancel buttons when possible. Si une étiquette de bouton rend le bouton de dépassement de la taille de bouton standard, les autres boutons dans cet ensemble doivent s’aligner avec cette taille plus large.If a button label makes the button exceed the standard button size, the other buttons in that set should align with that wider size.

    Boutons horizontaux OK et annulerHorizontal OK and Cancel buttons

    Figure 08.01-f: Boutons d’intérieur Vertical avec OK/Annuler horizontauxFigure 08.01-f: Vertical Interior buttons with horizontal OK/Cancel

    Boutons verticale OK et annulerVertical OK and Cancel buttons

    Figure 08.01-g: Horizontal intérieurs boutons OK/Annuler verticauxFigure 08.01-g: Horizontal interior buttons with vertical OK/Cancel

[Parcourir...] bouton[Browse...] button

[Parcourir...] boutons qui suivent une zone de texte énoncez à « Parcourir... » dans sa totalité, y compris les points de suspension.[Browse...] buttons that follow a text box should spell out "Browse..." in full, including the ellipsis. Si l’espace est étroit ou il existe plusieurs [Parcourir...] boutons à l’écran, le bouton peut être réduit à simplement les points de suspension.If space is tight or there are multiple [Browse...] buttons on the screen, the button can be reduced to just the ellipsis.

Mise en page de boîte de dialogue à thèmeThemed dialog layout

Boîtes de dialogue à thème dans Visual Studio ont une apparence plus claire et offrent davantage d’espace blanc.Themed dialogs in Visual Studio have a lighter appearance and offer more white space. Typographie fournit plus l’accent et centres d’intérêt, offrant plus ouvert interligne et une variante de tailles de police et les poids.Typography provides more emphasis and interest, offering more open line spacing and a variation of font sizes and weights. Si possible, les barres de titre et de chrome ont été réduites ou supprimés.Where possible, chrome and title bars have been reduced or removed. La disposition de ces boîtes de dialogue doit suivre ce modèle de base :The layout of these dialogs should follow this basic pattern:

  1. L’arrière-plan de la boîte de dialogue est blanc.The background of the dialog is white.

  2. Il existe une bordure de la règle de 1 pixel dans un gris moyen de valeur.There is a 1-pixel rule border in a mid-value gray.

  3. Le titre de la boîte de dialogue n’est plus se trouve dans une barre de titre, mais fournit un intérêt visuel et une accentuation dans une taille supérieure.The dialog title no longer sits in a title bar, but provides visual interest and emphasis in a larger point size. (Consultez la section de taille de police dans style de texte.)(See the font size section in Text style.)

  4. Les étiquettes couplés avec un texte supplémentaire, telle qu’une description, doivent être police d’environnement + gras.Labels coupled with additional text, such as a description, should be Environment font + Bold.

  5. Intérieurs colonnes sont séparées par une règle de 1 pixel en gris clair.Interior columns are separated by a 1-pixel rule in light gray.

  6. Liens par défaut n’ont aucun trait de soulignement.Default links have no underscore. États survol et enfoncés ont un changement de couleur suivi d’un trait de soulignement.Hover and pressed states have a color change plus underscore.

  7. Valider des boutons (comme OK/Annuler) se trouvent dans le coin inférieur droit.Commit buttons (like OK/Cancel) sit in the lower right corner.

Exemples de mise en page de boîte de dialogue à thèmeThemed dialog layout examples

Mise en page de boîte de dialogue à thèmeThemed dialog layout

Figure 08.01-h : Boîte de dialogue à thèmeFigure 08.01-h: Themed dialog

Dimensions de la boîte de dialogue à thèmeThemed dialog dimensions

Figure 08.01-i Dialogue à thème - DimensionsFigure 08.01-i: Themed dialog - Dimensions

Polices de boîte de dialogue à thèmeThemed dialog fonts

Figure 08.01-j : Dialogue à thème - policesFigure 08.01-j: Themed dialog - Fonts

Couleurs de la boîte de dialogue à thèmeThemed dialog colors

Figure 08.01-k : Dialogue à thème - couleursFigure 08.01-k: Themed dialog - Colors

Voir aussiSee Also

Modèles d’application pour Visual Studio Application Patterns for Visual Studio
Contrôles (Windows) Controls (Windows)
Boîtes de dialogue (Windows)Dialog Boxes (Windows)