Diseño para Visual StudioLayout for Visual Studio

La mayoría de los cuadros de diálogo de Visual Studio son diseño del cuadro de diálogo de utilidad, que son el unthemed dicho estándar de seguimiento de cuadros de diálogo principios de diseño del cuadro de diálogo de 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. Cuando Visual Studio se desplaza al actualizar su interfaz de usuario, algunos de los cuadros de diálogo más destacados 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 dentro de un cuadro de diálogo utilidad deben iniciar en la parte superior izquierda y fluyen 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 un área de gran tamaño.Never center controls on a dialog to fill a large area.

  • Utilice la fuente del entorno para 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. Consulte 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 artesano.Use consistent control spacing and placement to support the goal for quality in craftsmanship.

  • Los cuadros de diálogo pueden ser más complejas 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, permitir suficiente espacio entre las agrupaciones de control para proporcionar al usuario un flujo lógico a 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 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 controlesDialog 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íxeles en torno a todos 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 de 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 variables 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 funcionen dentro del 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. Consulte 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/central del cuadro de diálogo) se considera parte de "banda" de los controles de la operación de cuadro de diálogo.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 la que el espacio es un vínculo de ayuda que es relevante para la tarea global o un 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 de 75 x 23 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 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, 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 frase y seguidas de dos puntos.Labels are sentence case and are followed by a colon. Consulte estilo de texto.See Text style.

Distancia entre los controlesDistance between controls

Pila controles razonablemente.Stack controls reasonably. No hay ningún criterio 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 etiqueta/control horizontal.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.

Recomienda la distancia entre los controlesRecommended distance between controls

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

Sangría de controlControl indentation

Cuando se anidan los controles, alinear controles internos horizontalmente, con el borde izquierdo del control anterior, normalmente 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 la entrada promedio del 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 se requiere un nombre de ruta de acceso larga debe ser siempre y cuando el diseño horizontal permite, 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 oraciones.This typically sits at the top and can be 1-2 sentences.

  • La longitud de línea debe ser un 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 medio 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 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) de 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 botón interiores debe tener como destino el tamaño de botón 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 botón estándar, los demás botones de dicho conjunto deben alinearse con ese ancho deseado.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 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: Horizontal interiores botones vertical Aceptar/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 detallar "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 el espacio es ajustado 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 una apariencia más clara 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 intereses, ofreciendo interlineado más abierto y una variación de ponderaciones y los tamaños de fuente.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 color 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 énfasis en un tamaño mayor de punto e interés visual.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 junto con texto adicional, como una descripción, deben ser fuente del entorno + negrita.Labels coupled with additional text, such as a description, should be Environment font + Bold.

  5. Interiores columnas se separan mediante una regla de 1 píxel en color gris claro.Interior columns are separated by a 1-pixel rule in light gray.

  6. Vínculos predeterminados no tengan ningún carácter de subrayado.Default links have no underscore. Al mantener el mouse y los 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

Las dimensiones del cuadro de diálogo con temasThemed dialog dimensions

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

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

Los 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)