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 standard suivez 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 de 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 démarrer à l’angle supérieur gauche et vers le bas de flux.All controls within a utility dialog should start at the top/left and flow downward.

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

  • Utilisez 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 une 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.

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

  • Les boîtes de dialogue peuvent devenir plus complexes à partir d’un plus grand nombre de contrôles, une juxtaposition unique des contrôles ou les deux.Dialogs can become more complex from a larger number of controls, a unique juxtaposition of controls, or both. Dans ce cas complex, permettre suffisamment d’espace entre les regroupements de contrôle pour permettre à l’utilisateur un flux logique d’analyse.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 recommandations pour les boîtes de dialogue utilitaire avec des é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 recommandations 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.

  • Les marges dans un intervalle 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.

  • Les marges d’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 dans le cadre de la 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 clairement séparés.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 horizontales qui opèrent dans 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 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 qui s’applique à 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 de 75 x 23 pixels.Command buttons should be 75x23 pixels.

  • Boutons de commande doit être 6 pixels éloignés.Command buttons should be 6 pixels apart.

    Alignement du bouton 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 situent 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 5 pixels au-dessus 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 situées à 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.

  • Les étiquettes sont de casse de la phrase 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 indication 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 contrôle horizontal/étiquette.The recommended spacing is 20 pixels for vertical control/label pairs, and 9 pixels for horizontal control/label pairs. L’espacement minimal de contrôles 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 sur 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 nécessite un nom de chemin d’accès long doit être tant que la mise en page horizontale permet, tandis que d’une liste déroulante pour les noms de plateforme doivent être uniquement 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’aide qui fournit des informations supplémentaires 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 général, cela se situe 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 moyenne doit être pas plus de 550 pixels de largeur.A medium dialog should be no more than 550 pixels wide.

Boutons de commande intérieursInterior command buttons

Les boîtes de dialogue plus complexes, un contrôle interne peut contenir ses propres boutons associés, qui peut affecter l’emplacement où se trouvent les boutons de la 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 des 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 des boutons lorsque OK/Annuler sont orientés 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 fréquent.This situation is less common.

  • Taille du bouton intérieurs doit cibler la taille des boutons standard de pixels correspondant à la taille de 75 x 23 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 du bouton standard, les autres boutons de ce groupe 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 OK horizontale et annulerHorizontal OK and Cancel buttons

    Figure 08.01-f: Boutons intérieur Vertical horizontal OK/AnnulerFigure 08.01-f: Vertical Interior buttons with horizontal OK/Cancel

    Boutons OK vertical 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 doit spécifier « Parcourir... » dans leur intégralité, 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 limité 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

Les 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 d’importance et présentant un intérêt, interligne plus ouvrir et une variante de tailles de police et le poids de l’offre.Typography provides more emphasis and interest, offering more open line spacing and a variation of font sizes and weights. Lorsque cela est possible, les barres de titre et chrome ont été réduits 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 valeur moyenne de gris.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 il 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 de style de texte.)(See the font size section in Text style.)

  4. Les étiquettes couplées 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. Colonnes intérieurs sont séparés par une règle de 1 pixel en gris clair.Interior columns are separated by a 1-pixel rule in light gray.

  6. Les liaisons par défaut n’ont aucun trait de soulignement.Default links have no underscore. États pointage et appuyés ont une modification de la couleur et le 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 - des 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)