Diseño para Visual StudioLayout for Visual Studio

La mayoría de los cuadros de diálogo de Visual Studio están diseño del cuadro de diálogo de utilidad, que son el unthemed dicho seguimiento estándar de cuadros de diálogo principios de diseño del cuadro de diálogo de escritorio de Windows.The majority of Visual Studio dialogs are Utility dialog layout, which are the unthemed dialogs that follow standard Windows Desktop dialog layout principles. Cuando Visual Studio se desplace a actualizar su interfaz de usuario, algunos de los cuadros de diálogo más importancia tienen un nuevo diseño que ellos establece experiencias como definición de producto.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. Estos diseño del cuadro de diálogo con temas tienen un aspecto con temas.These Themed dialog layout have a themed appearance.

Diseño del cuadro de diálogo de utilidadUtility dialog layout

  • Todos los controles en un cuadro de diálogo de utilidad deben empezar en la parte superior izquierda y flujo hacia abajo.All controls within a utility dialog should start at the top/left and flow downward.

  • Nunca center controles en un cuadro de diálogo para rellenar una gran área.Never center controls on a dialog to fill a large area.

  • Usar la fuente del entorno de todo el texto de cuadro de diálogo.Use the environment font for all dialog text. Al escribir una especificación visual, especifique la fuente del entorno en lugar de seleccionar una fuente concreta y el tamaño.When writing a visual spec, specify the environment font instead of selecting a particular font and size. Vea la fuente del entorno.See The environment font.

  • Espaciado de control coherente de uso y la ubicación para admitir el objetivo de calidad de acabado.Use consistent control spacing and placement to support the goal for quality in craftsmanship.

  • Los cuadros de diálogo pueden resultar más complejos de un mayor número de controles, un único juxtaposition de controles o ambos.Dialogs can become more complex from a larger number of controls, a unique juxtaposition of controls, or both. Para estos casos complejos, deje suficiente espacio entre las agrupaciones de control para proporcionar al usuario un flujo lógico para analizar.For those complex situations, allow adequate space between control groupings to give the user a logical flow to parse.

Ejemplos de diseño del cuadro de diálogo de utilidadUtility dialog layout examples

Todas las dimensiones se expresan como píxeles.All dimensions are expressed as pixels.

Espaciado de cuadro de diálogo para etiquetas encima de los controlesDialog spacing for labels above controls

Figura 08.01-a: Espaciado directrices para los cuadros de diálogo de utilidad con etiquetas encima de los controlesFigure 08.01-a: Spacing guidelines for utility dialogs with labels above controls

Espaciado de cuadro de diálogo para etiquetas a la izquierda de los controles deDialog spacing for labels to the left of controls

Figura 08.01-b: Espaciado directrices para los cuadros de diálogo de utilidad con etiquetas a la izquierda de los controlesFigure 08.01-b: Spacing guidelines for utility dialogs with labels to the left of controls

Detalles de diseñoLayout details

MárgenesMargins

  • Todos los cuadros de diálogo deben tener un borde de 12-píxel alrededor de los bordes.All dialogs should have a 12-pixel border around all edges.

  • Los márgenes dentro de un marco de grupo deben ser 9 píxeles desde el borde del marco.Margins within a group frame should be 9 pixels from the edge of the frame.

  • Los márgenes dentro de un control de ficha deben ser 6 píxeles desde el borde del control de ficha.Margins within a tab control should be 6 pixels from the edge of the tab control.

Botones de comandoCommand buttons

  • Botones de comando funcionan en el marco del cuadro de diálogo, no en el contenido.Command buttons operate on the dialog frame, not on the content. Se debe colocarse en la parte inferior derecha y debe tener suficiente espacio de variable anterior para establecer los botones claramente separados.They should be placed at the bottom right and should have enough variable space above to set the buttons distinctly separate.

  • Si hay botones horizontales que operan en el cuadro de diálogo, la configuración del botón de comando alternativo es una pila vertical en la esquina superior derecha.If there are horizontal buttons that operate within the dialog, the alternate command button configuration is a vertical stack at the upper right. Vea botones de comando interiores a continuación.See Interior command buttons below.

  • El espacio a la izquierda de los botones de comando (parte inferior izquierda y central del cuadro de diálogo) se considera parte de la banda de"" de los controles de cuadro de diálogo operación.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. Lo único que debe interfieren en ese espacio es un vínculo de ayuda que es relevante para la tarea global o el cuadro de diálogo.The only thing that should intrude on that space is a Help link that is relevant to the overall task or dialog.

  • Botones de comando deben ser x 23 de 75 píxeles.Command buttons should be 75x23 pixels.

  • Botones de comando deben ser 6 píxeles.Command buttons should be 6 pixels apart.

    Alineación de botón básicaBasic button alignment

    Figura 08.01-c: Alineación de botón básicaFigure 08.01-c: Basic button alignment

EtiquetasLabels

  • Alinear a la izquierda todas las etiquetas.Left-align all labels.

  • Para las etiquetas que se encuentran por encima de un control, debe alinear a la izquierda con precisión con el control por debajo de él y la parte inferior de la etiqueta debe ser 5 píxeles por encima de la parte superior del otro control (por ejemplo, un cuadro combinado).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).

  • Para las etiquetas que se encuentran a la izquierda de los controles, el ancho mínimo entre la etiqueta y el control de entrada es de 10 píxeles.For labels that sit to the left of controls, the minimum width between the label and the input control is 10 pixels. Para alinear los cuadros de texto, cuadros combinados u otros controles que se debe establecer una segunda columna implícita.An implied second column should be established for aligning the text boxes, combo boxes, or other controls.

  • Las etiquetas distinguen mayúsculas de la oración y seguidas de dos puntos.Labels are sentence case and are followed by a colon. Vea estilo de texto.See Text style.

Distancia entre los controlesDistance between controls

Controles de la pila es razonablemente.Stack controls reasonably. No hay ninguna regla absoluta para el espaciado entre controles apilados.There is no absolute guideline for the spacing between stacked controls. El apriete entre los controles puede variar ligeramente entre los cuadros de diálogo.The tightness between the controls may vary slightly between dialogs. El espacio recomendado es 20 píxeles para los pares de etiqueta/control vertical y 9 píxeles para los pares de horizontal o etiquetas de control.The recommended spacing is 20 pixels for vertical control/label pairs, and 9 pixels for horizontal control/label pairs. El espaciado mínimo de control para los pares horizontales es 6 píxeles.The minimum control spacing for horizontal pairs is 6 pixels.

Distancia entre los controles se recomiendaRecommended distance between controls

Figura 08.01-d: Recomendaciones para la distancia entre los controlesFigure 08.01-d: Recommendations for distance between controls

Control sangríaControl indentation

Cuando los controles están anidados, alinear los controles internos horizontalmente con el borde izquierdo del control anterior, por lo general la etiqueta.When controls are nested, align inner controls horizontally with the left edge of the control above, usually the label.

Anidar la alineación del controlNested control alignment

Figura 08.01-e: La alineación del control NestedFigure 08.01-e: Nested control alignment

Ancho del controlControl width

El ancho de un cuadro de texto u otros controles similares debe ser no supere los datos proporcionados por el promedio para el campo.The width of a text box or other similar controls should be no longer than the average input for the field. La palabra inglesa promedio es de cinco caracteres.The average English word is five characters. Por ejemplo, un cuadro de texto que requiere un nombre de ruta de acceso larga duración debe ser igual que permite el diseño horizontal, mientras que una lista desplegable de nombres de plataforma solo deben tener una longitud que permite la entrada más larga.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.

Texto auxiliarHelper text

  • Un cuadro de diálogo puede mostrar texto de aplicación auxiliar que proporciona más información sobre la finalidad del cuadro de diálogo.A dialog can display helper text that provides more information about the purpose of the dialog. Esto normalmente se encuentra en la parte superior y puede ser 1 o 2 frases.This typically sits at the top and can be 1-2 sentences.

  • La longitud de línea debe ser un valor de ancho cómodo para un usuario analizar y leer.The line length should be a comfortable width for a user to parse and read. Un cuadro de diálogo intermedio debe ser no más de 550 píxeles de ancho.A medium dialog should be no more than 550 pixels wide.

Botones de comando interioresInterior command buttons

En los cuadros de diálogo más complejos, un control interno podría tener sus propios botones relacionados, lo que podrían afectar a donde se encuentran los botones de confirmación del cuadro de diálogo.In more complex dialogs, an internal control might have its own related buttons, which might affect where the dialog's commit buttons are located.

  • Use una alineación vertical (columna) del interior botones cuando Aceptar/cancelar se orienta horizontalmente en la esquina inferior derecha.Use a vertical alignment (column) of interior buttons when OK/Cancel are horizontally oriented in the lower right corner.

  • Use una alineación horizontal (fila) del interior botones cuando Aceptar/cancelar se orientan verticalmente en la esquina superior derecha.Use a horizontal alignment (row) of interior buttons when OK/Cancel are vertically oriented in the upper right corner. Esta situación es menos común.This situation is less common.

  • Tamaño de los botones interior debe tener como destino el tamaño de los botones estándar de píxeles de 75 x 23, que coinciden con el tamaño de Aceptar/cancelar botones cuando sea posible.Interior button size should target the standard button size of 75x23 pixels, matching the size of OK/Cancel buttons when possible. Si una etiqueta de botón hace que el botón superan el tamaño de los botones estándar, los demás botones de ese conjunto deben alinearse con ese tamaño más amplio.If a button label makes the button exceed the standard button size, the other buttons in that set should align with that wider size.

    Botones horizontales Aceptar y cancelarHorizontal OK and Cancel buttons

    Figura 08.01-f: Botones de Vertical Interior con horizontal Aceptar/CancelarFigure 08.01-f: Vertical Interior buttons with horizontal OK/Cancel

    Botones verticales Aceptar y cancelarVertical OK and Cancel buttons

    Figura 08.01-g: Botones de interiores Horizontal a vertical Aceptar o cancelarFigure 08.01-g: Horizontal interior buttons with vertical OK/Cancel

[Examinar...] botón[Browse...] button

[Examinar...] botones que siguen un cuadro de texto deben deletrear "Examinar..." en su totalidad, incluidos los puntos suspensivos.[Browse...] buttons that follow a text box should spell out "Browse..." in full, including the ellipsis. Si hay una estrecha espacio o hay varios [Examinar...] botones en la pantalla, el botón se pueden reducir a solo los puntos suspensivos.If space is tight or there are multiple [Browse...] buttons on the screen, the button can be reduced to just the ellipsis.

Diseño del cuadro de diálogo con temasThemed dialog layout

Los cuadros de diálogo con temas en Visual Studio tienen un aspecto más claro y ofrecen más espacio en blanco.Themed dialogs in Visual Studio have a lighter appearance and offer more white space. Tipografía proporciona más énfasis e interés, ya que proporcionan más abierto interlineado y una variedad de tamaños de fuente y pesos.Typography provides more emphasis and interest, offering more open line spacing and a variation of font sizes and weights. Siempre que sea posible, barras de título y chrome se han reducido o eliminado.Where possible, chrome and title bars have been reduced or removed. El diseño de estos cuadros de diálogo debe seguir este patrón básico:The layout of these dialogs should follow this basic pattern:

  1. El fondo del cuadro de diálogo es blanco.The background of the dialog is white.

  2. Hay un borde de la regla 1 píxel en un valor intermedio gris.There is a 1-pixel rule border in a mid-value gray.

  3. El título del cuadro de diálogo ya no se encuentra en una barra de título, pero proporciona interés visual y énfasis de mayor tamaño de punto.The dialog title no longer sits in a title bar, but provides visual interest and emphasis in a larger point size. (Vea la sección de tamaño de fuente en estilo de texto.)(See the font size section in Text style.)

  4. Las etiquetas de acoplamiento con texto adicional, como una descripción, fuente del entorno + negrita.Labels coupled with additional text, such as a description, should be Environment font + Bold.

  5. Columnas interiores están separadas por una regla de 1 píxel en gris claro.Interior columns are separated by a 1-pixel rule in light gray.

  6. Los vínculos de forma predeterminada no tienen ningún carácter de subrayado.Default links have no underscore. Al mantener el mouse y Estados presionados tienen un cambio de color más el carácter de subrayado.Hover and pressed states have a color change plus underscore.

  7. Confirmar botones (como Aceptar/cancelar) se colocan en la esquina inferior derecha.Commit buttons (like OK/Cancel) sit in the lower right corner.

Ejemplos de diseño del cuadro de diálogo con temasThemed dialog layout examples

Diseño del cuadro de diálogo con temasThemed dialog layout

Figura 08.01-h: Cuadro de diálogo con temasFigure 08.01-h: Themed dialog

Dimensiones del diálogo con temasThemed dialog dimensions

Figura 08.01-i: Cuadro de diálogo con temas - dimensionesFigure 08.01-i: Themed dialog - Dimensions

Las fuentes del cuadro de diálogo con temasThemed dialog fonts

Figura 08.01-j: Cuadro de diálogo con temas - fuentesFigure 08.01-j: Themed dialog - Fonts

Colores del cuadro de diálogo con temasThemed dialog colors

Figura 08.01-k: Cuadro de diálogo con temas - coloresFigure 08.01-k: Themed dialog - Colors

Vea tambiénSee Also

Patrones de aplicación para Visual Studio Application Patterns for Visual Studio
Controles (Windows) Controls (Windows)
Cuadros de diálogo (Windows)Dialog Boxes (Windows)