Essentials UX para Visual StudioUX Essentials for Visual Studio

Procedimientos recomendadosBest practices

1. Ser coherente dentro del entorno de Visual Studio.1. Be consistent within the Visual Studio environment.

  • Siga existente patrones de interacción dentro del shell.Follow existing interaction patterns within the shell.

  • Diseñar características que se va a ser coherente con el lenguaje visual del shell y requisitos de acabado.Design features to be consistent with the shell's visual language and craftsmanship requirements.

  • Uso compartido de comandos y controla cuando existen.Use shared commands and controls when they exist.

  • Comprender la jerarquía de Visual Studio y cómo se establece el contexto y las unidades de la interfaz de usuario.Understand the Visual Studio hierarchy and how it establishes context and drives the UI.

2. Usar el servicio de entorno para fuentes y colores.2. Use the environment service for fonts and colors.

  • Interfaz de usuario debe respetar actual fuente del entorno configuración a menos que se expone para la personalización en la página fuentes y colores en el cuadro de diálogo de opciones.UI should respect the current environment font setting unless it is exposed for customization in the Fonts and Colors page in the Options dialog.

  • Elementos de interfaz de usuario deben usar el VSColor Service, usar compartidos tokens de entorno o específico de la característica de símbolos (tokens).UI elements must use the VSColor Service, using shared environment tokens or feature-specific tokens.

3. Hacer que todas las imágenes sea coherente con el nuevo estilo de VS.3. Make all imagery consistent with the new VS style.

  • Siga los principios de diseño de Visual Studio para iconos, glifos y otros gráficos.Follow Visual Studio design principles for icons, glyphs, and other graphics.

  • No se debe colocar el texto en elementos gráficos.Do not place text in graphic elements.

4. Diseñar desde una perspectiva centrada en el usuario.4. Design from a user-centric perspective.

  • Crear el flujo de tareas antes de las características individuales dentro de él.Create the task flow before the individual features within it.

  • Estar familiarizado con los usuarios y ponen ese conocimiento explícito en su especificación.Be familiar with your users and make that knowledge explicit in your spec.

  • Al revisar la interfaz de usuario, evaluar la experiencia completa, así como los detalles.When reviewing the UI, evaluate the complete experience as well as the details.

  • Diseñar la interfaz de usuario para que permanezca funcional y atractiva independientemente del idioma o configuración regional.Design your UI so that it remains functional and attractive regardless of locale or language.

Resolución de pantallaScreen resolution

Resolución mínimaMinimum resolution

  • La resolución mínima de Dev14 de Visual Studio es 1280 x 720.The minimum resolution for Visual Studio Dev14 is 1280x720. Esto significa que es posibles se usa Visual Studio en esta solución, aunque es posible que no sea una experiencia de usuario óptima.This means that it is possible to use Visual Studio at this resolution, although it might not be an optimal user experience. No hay ninguna garantía de que todos los aspectos se podrán usar resolución inferior a 1280 x 720.There is no guarantee that all aspects will be usable at resolutions lower than 1280x720.

  • La resolución de destino para Visual Studio es 1366 x 768.The target resolution for Visual Studio is 1366x768. Ésta es la resolución más bajo en el que te prometemos un buena experiencia del usuario.This is the lowest resolution at which we promise a good user experience.

  • Alto del cuadro de diálogo inicial debe ser menor que 700 píxeles, por lo que se ajuste a la resolución mínima del marco del IDE a 96 PPP.Initial dialog height should be smaller than 700 pixels, so it fits within the minimum resolution of the IDE frame at 96 dpi.

Pantallas de alta densidadHigh-density displays

Interfaz de usuario en Visual Studio debe funcionar bien en PPP todos los factores que Windows admite de fábrica de escala: 150%, 200% y % de 250.UI in Visual Studio must work well in all DPI scaling factors that Windows supports out of the box: 150%, 200%, and 250%.

AntipatronesAnti-patterns

Visual Studio contiene muchos ejemplos de interfaz de usuario que siguen nuestras directrices y procedimientos recomendados.Visual Studio contains many examples of UI that follow our guidelines and best practices. En un esfuerzo para que sean coherentes, los desarrolladores a menudo pedir prestado a los patrones de diseño de interfaz de usuario de producto similares a lo que va a compilar.In an effort to be consistent, developers often borrow from product UI design patterns similar to what they're building. Aunque se trata de un buen enfoque que ayuda a nosotros unidad de coherencia en la interacción del usuario y el diseño visual, que en ocasiones enviamos características con algunos detalles que no cumplan nuestras directrices debido a restricciones de programación o dar de baja prioridad.Although this is a good approach that helps us drive consistency in user interaction and visual design, we do on occasion ship features with a few details that do not meet our guidelines due to schedule constraints or defect prioritization. En estos casos, no queremos que los equipos para copiar uno de estos "antipatrones" porque proliferan interfaz de usuario incorrecta o incoherente en el entorno de Visual Studio.In these cases, we do not want teams to copy one of these "anti-patterns" because they proliferate bad or inconsistent UI within the Visual Studio environment.

Requiere configuración de campos que se muestra en estado de error predeterminadaRequired fields/settings shown in error state by default

Objetivos del equipo de característicasFeature team goals

  • Advierta a los usuarios que se ha agregado un elemento que se debe configurar.Warn users that they have added an element that must be configured.

  • Dibuje la atención del usuario a las áreas que se necesita una entrada.Draw the user's attention to the areas that need input.

Antipatrón de soluciónAnti-pattern solution

Tan pronto como el usuario ha iniciado una acción y antes de que haya completado la tarea, coloque inmediatamente parada crítica iconos junto a las áreas que necesitan una configuración.As soon as the user has initiated an action and before they have completed the task, immediately place critical-stop icons next to the areas that need configuration.

Ejemplo: Las declaraciones de diseñador de manifiestosExample: Manifest Designer declarations

Agregar una declaración a la lista inmediatamente, coloca en un estado de error, lo que se conserven hasta que el usuario establece las propiedades necesarias.Adding a declaration to the list immediately places it in an error state, which persists until the user sets the required properties.

En este caso, hay una preocupación adicional porque el icono utilizado para la alerta contiene una "×" icono, por lo que no se puede usar el icono de eliminación común junto a él.In this case, there is an additional concern because the icon used for the alert contains a "×" icon, so the common remove icon cannot be used beside it. Como resultado, la interfaz de usuario usa un botón de quitar un control más inadecuado.As a result, the UI uses a Remove button, a more clunky control.

Colocación de interfaz de usuario en un estado de error de forma predeterminada es un antipatrón de Visual Studio. Placing UI in an error state by default is a Visual Studio anti-pattern.
Colocación de interfaz de usuario en un estado de error de forma predeterminada es un antipatrón de Visual Studio.Placing UI in an error state by default is a Visual Studio anti-pattern.

AlternativasAlternatives

Una mejor solución a este problema sería:A much better solution to this problem would be to:

  • Permitir al usuario que agregue una declaración sin previo aviso y, a continuación, mover inmediatamente establecer propiedades en el elemento.Allow the user to add a declaration without warning and then move immediately to set properties on the item.

  • Agregar el icono de advertencia (triángulo gold) al pasar el foco del elemento, como, por ejemplo, para agregar otra declaración a la lista o intente cambiar de ficha en el diseñador.Add the warning icon (gold triangle) when focus moves from the item, such as to add another declaration to the list or to attempt to change tabs within the designer.

  • Si el usuario intenta cambiar pestañas antes de establecer las propiedades en todas las declaraciones, extraer un cuadro de diálogo que explica que no se compilará la aplicación (o cualquier las implicaciones) hasta que se resuelvan las advertencias.If the user attempts to change tabs before setting properties on any declarations, pop a dialog explaining that the application will not build (or whatever the implications) until the warnings are resolved. Si el usuario cierra el cuadro de diálogo y cambia las tabulaciones todos modos, a continuación, un icono (crítico o advertencia, según corresponda) se agrega a la ficha de declaraciones.If the user dismisses the dialog and changes tabs anyway then an icon (critical or warning, as appropriate) is added to the Declarations tab.

Varios clics para descartar la interfaz de usuarioMultiple clicks to dismiss UI

Objetivos del equipo de característicasFeature team goals

No se permite el usuario descartar la interfaz de usuario sin tener que consultar primero el texto de explicación.Don't allow the user to dismiss the UI without first seeing the explanation text.

AntipatrónAnti-pattern

El equipo de insertar los vínculos de vídeo en varios lugares de la interfaz de usuario de VS decidió con el modelo común de la "×" explicación de información sobre herramientas y el botón Cerrar como especificado UX y, en su lugar implementa una lista desplegable y "No volver a mostrar" vincula.The team inserting the video links into various places within the VS UI decided against the common pattern of the "×" close button and tooltip explanation as specified by UX, and instead implemented a drop-down and "Don't show again" link.

Forzar el usuario pueda leer el texto explicativo antes al descartar la interfaz de usuario es un antipatrón dentro de Visual Studio.Forcing the user to read explanatory text before dismissing UI is an anti-pattern within Visual Studio. Vínculos vídeo correctamente diseñado deben mostrar una información sobre herramientas con información adicional al mantener el mouse y haga clic en el "×" debe descartar el mensaje sin necesidad de intervención.Correctly designed, video links should display a tooltip with additional information on hover, and clicking the "×" should dismiss the message without need for further interaction.

El texto explicativo anti-patrón - incorrectaExplanatory text anti-pattern - incorrect
Patrón de vínculo de vídeo incorrectoIncorrect video link pattern

ResultadoResult

En lugar de un botón de cierre simple (un solo clic), el usuario está obligado a utilizar dos clics para descartar simplemente la interfaz de usuario en todos los lugares que aparecen los vínculos de vídeo.Instead of a simple close button (one click), the user is forced to use two clicks to simply dismiss the UI in every place that the video links appear.

AlternativasAlternatives

El diseño correcto para esta situación sería seguir el patrón común para Internet Explorer, Office y Visual Studio: al mantener el mouse, el usuario puede ver la descripción de la información sobre herramientas y un solo clic oculta la interfaz de usuario.The correct design for this situation would be to follow the pattern common to Internet Explorer, Office, and Visual Studio: on hover, the user can see the tooltip description and one click hides the UI.

El texto explicativo anti-patrón - correctaExplanatory text anti-pattern - correct
Patrón de vínculo de vídeo correctoCorrect video link pattern

Usar barras de comandos para la configuraciónUsing command bars for settings

Figura A representa este antipatrón: poner un valor por debajo de un botón de comando que se aplica a algo más que el comando.Figure A represents this anti-pattern: putting a setting underneath a command button that applies to more than just the command. En este esquema, hay comandos además de iniciar la depuración, como la vista de explorador, iniciar sin depurar y paso a paso, que respetará la configuración seleccionada.In this sketch, there are commands besides Start Debugging — like View in Browser, Start Without Debugging, and Step Into — that will respect the selected setting.

Figura r: antipatrón de barra de comandosFigure A: Command bar anti-pattern
Figura r: antipatrón de barra comandoFigure A: Command bar anti-pattern

Indeseable ligeramente mejor, pero aún, es sinónimo de poner la configuración de este tipo en las barras de herramientas, como se muestra en figura B. Aunque los botones de expansión que ocupen menos espacio y son, por tanto, una mejora en listas desplegables, ambos diseños se sigue usando una barra de herramientas para promocionar algo que no es realmente un comando.Slightly better, but still undesirable, is putting settings of this type in the toolbars, as shown in Figure B. While split buttons take less space and are therefore an improvement over drop-downs, both designs are still using a toolbar to promote something that isn't really a command.

Figura B: mejor, pero que todavía un antipatrón de barra de comandosFigure B: Better, but still a command bar anti-pattern
Figura B: mejor, pero que todavía un antipatrón de barra de comandosFigure B: Better, but still a command bar anti-pattern

En el enfoque correcto que se muestra en figura C, la configuración está vinculada a una serie de comandos.In the correct approach shown in Figure C, the setting is tied to a series of commands. No hay ninguna configuración global que se va a establecer y solo estamos cambiar entre cuatro comandos.There is no global setting being set and we're just switching between four commands. Esta es la única situación en la que los comandos en la barra de herramientas son aceptables.This is the only situation in which commands in the toolbar are acceptable.

Figura C: corregir el uso del patrón de barra de comandos de Visual StudioFigure C: Correct use of Visual Studio command bar pattern
Usar figura C: correcto del patrón de barra de comandos de Visual StudioFigure C: Correct use of Visual Studio command bar pattern

Antipatrones de controlControl anti-patterns

Algunos antipatrones son uso simplemente incorrecta o la presentación de un control o un grupo de controles.Some anti-patterns are simply incorrect usage or presentation of a control or group of controls.

Utilizar texto subrayado debe utilizarse solo para los hipervínculos.Underlining text should be used only for hyperlinks.

Incorrecta: Bad:
Texto subrayado que no sea un hipervínculo es un antipatrón de Visual Studio. Underlined text that is not a hyperlink is a Visual Studio anti-pattern.
Texto subrayado que no sea un hipervínculo es un antipatrón de Visual Studio.Underlined text that is not a hyperlink is a Visual Studio anti-pattern.

Buena: Good:
Un estilo correctamente, texto de hipervínculo no aparece sin adornar de la fuente del entorno. Styled correctly, non-hyperlink text appears unadorned in the environment font.
Un estilo correctamente, texto de hipervínculo no aparece sin adornar de la fuente del entorno.Styled correctly, non-hyperlink text appears unadorned in the environment font.

Al hacer clic en una casilla de verificación resultados en un cuadro de diálogo emergenteClicking on a check box results in a pop-up dialog

Haga clic en la casilla de verificación "Habilitar Escritorio remoto para todos los roles" en el Asistente "Publicar aplicación de Windows Azure" inmediatamente, se abrirá un cuadro de diálogo emergente, antipatrón de Visual Studio.Clicking the "Enable Remote Desktop for all roles" check box in the "Publish Windows Azure Application" wizard immediately brings up a pop-up dialog, a Visual Studio anti-pattern. Además, el campo de casilla de verificación no rellena con una casilla de verificación después de que se selecciona, otro antipatrón de interacción.In addition, the check box field does not fill with a check box after being selected, another interaction anti-pattern.

Abrir un cuadro de diálogo después de hacer clic en una casilla de verificación es un antipatrón de Visual Studio. Bringing up a dialog after clicking a check box is a Visual Studio anti-pattern.
Abrir un cuadro de diálogo después de hacer clic en una casilla de verificación es un antipatrón de Visual Studio.Bringing up a dialog after clicking a check box is a Visual Studio anti-pattern.

El ejemplo siguiente contiene dos antipatrones.The following example contains two anti-patterns.

  1. Primer plano activar rojo al mantener el mouse significa que no se utiliza el color correcto compartido desde el servicio de la fuente.The foreground turning red on hover means that the correct shared color from the font service is not being used.

  2. "Más" no es el texto adecuado para un vínculo a un tema conceptual."Learn more" is not the appropriate text for a link to a conceptual topic. Objetivo del usuario no es más, es para entender las implicaciones de su elección.The user's goal is not to learn more, it is to understand the ramifications of their choice.

    Se omitirá el servicio de color y el uso de "Obtener más información" para los hipervínculos están antipatrones de Visual Studio. Ignoring the color service and using "Learn more" for hyperlinks are Visual Studio anti-patterns.
    Se omitirá el servicio de color y el uso de "Obtener más información" para los hipervínculos están antipatrones de Visual Studio.Ignoring the color service and using "Learn more" for hyperlinks are Visual Studio anti-patterns.

    Una mejor solución: suponer la pregunta ¿se pregunte al usuario, haga clic en el vínculo.Better solution: Pose the question the user would be asking by clicking the link.

  • ¿Cómo funcionan los servicios de Windows Azure?How do Windows Azure services work?

  • ¿Cuándo se necesita un proyecto de servicios móviles de Windows Azure?When do I need a Windows Azure Mobile Services project?

Hipervínculos deben ser autodescriptivos.Hyperlinks should be self-descriptive. Es un antipatrón para usar "Haga clic aquí" o cualquier variación similar.It is an anti-pattern to use "Click here" or any similar variation.

Incorrecta: "Haga clic aquí para obtener instrucciones sobre cómo crear un nuevo proyecto".Bad: "Click here for instructions about how to create a new project."

Anuncio: "¿Cómo creo un nuevo proyecto?"Good: "How do I create a new project?"