Patrones compuestos para Visual StudioComposite Patterns for Visual Studio

Patrones compuestos combinan elementos de interacción y diseño de configuraciones.Composite patterns combine interaction and design elements in distinct configurations. Algunos de los patrones compuestos más importantes en Visual Studio con respecto a la coherencia incluyen:Some of the most important composite patterns in Visual Studio with regard to consistency include:

Visualización de datosData visualization

Información generalOverview

Los gráficos son una forma visual para agregar y visualizar datos con el fin de mejorar la toma de decisiones.Charts are a visual way to aggregate and visualize data in order to enhance decision-making. Pueden ayudar a los usuarios que se enfrentan con una gran cantidad de datos, pero lo que significa poco vea lo que merecen atención y lo que podría necesitar una acción.They can help users faced with a lot of data but little meaning see what deserves attention and what might need an action.

El usuario puede beneficiarse de un gráfico si se cumple alguna de las condiciones siguientes:The user will benefit from a chart if any of the following conditions are true:

  • ¿El gráfico ayudarán a los usuarios identificar las tareas que pueden actuar en?Will the chart help users identify tasks they can act on?

  • ¿Permitirá el gráfico a los usuarios prever las consecuencias de posibles cambios?Will the chart enable users to forecast consequences of potential changes?

  • ¿El gráfico para los usuarios detectar tendencias e identificar patrones?Will the chart help users discover trends and identify patterns?

  • ¿Permitirá el gráfico a los usuarios a tomar mejores decisiones?Will the chart allow users to make better decisions?

  • ¿El gráfico ayudará a responder a una pregunta específica que los usuarios podrían tener en el contexto determinado?Will the chart help answer a specific question that users may have in the given context?

Reglas generales para gráficosGeneral rules for charts

  • Claramente los datos de etiqueta.Clearly label data. Ilustraciones sin explicación son simplemente queda imágenes.Illustrations without explanation are just pretty pictures.

  • Iniciar ejes en cero para evitar sesgar proporciones.Start axes at zero to avoid skewing proportions. Tamaño de longitud y barra de línea son importantes indicaciones visuales para entender las relaciones entre los puntos de datos.Line length and bar size are important visual cues to understanding the relationships between data points.

  • Crear gráficos, no infografías.Create charts, not infographics. Infografías son artísticos representaciones de datos, y su objetivo principal es storytelling visual.Infographics are artistic representations of data, and their primary goal is visual storytelling. Los gráficos pueden (y deben) ser visualmente atractivo, pero permiten que los datos hablen por sí mismos.Charts can (and should) be visually appealing, but let the data speak for itself.

  • Evite skeumorphism, gráficos de barras gráficos, contraste hashmarks y otros infografía los últimos retoques.Avoid skeumorphism, pictorial bar graphs, contrast hashmarks, and other infographic touches.

  • No utilice efectos 3D como un elemento decorativo.Do not use 3D effects as a decorative element. Utilizar estas opciones solo si se realmente parte integral de la capacidad del usuario para comprender la información.Use them only if they truly integral to the user's ability to comprehend the information.

  • Evite el uso de varias líneas y rellenos, tal y como más de dos colores pueden hacer que este tipo de gráfico que resulte difícil leer e interpretar correctamente.Avoid using multiple lines and fills, as more than two colors can make this type of chart difficult to read and interpret correctly.

  • No use un gráfico (o cualquier ilustración) como el único medio de descripción de un concepto o interactuar con los datos.Do not use a chart (or any illustration) as the sole means of understanding a concept or interacting with data. Esto presenta dificultades para los usuarios con discapacidades visuales.This presents difficulties for users with visual impairments.

  • No use gráficos como innecesarias o decorativos elementos en una página.Do not use charts as gratuitous or decorative elements on a page. En otras palabras, si un gráfico no agrega que ningún valor o ayuda usuarios resolución un problema, no usarlo.In other words, if a chart doesn't add any value or help users solve a problem, don't use it.

Tipos de gráficosChart types

Tipos de gráficos que se usa en Visual Studio incluyen gráficos de barras, gráficos de líneas, un gráfico circular modificado que se conoce como un gráfico de anillos o "gráfico de anillos," escalas de tiempo, dispersión trazados (también denominadas "gráficos del clúster") y los diagramas de Gantt.Types of charts used in Visual Studio include bar charts, line charts, a modified pie chart known as a ring chart or "donut chart," timelines, scatter plots (also called "cluster charts"), and Gantt charts. Cada tipo de gráfico es útil para la comunicación de un tipo diferente de información.Each type of chart is useful for communicating a different type of information.

Otras consideraciones de creación de gráficosOther charting considerations

ColorColor

Hay una paleta específica de los gráficos de colores definidos para su uso en Visual Studio.There is a specific palette of charting colors defined for use in Visual Studio. La paleta es accesible para los tipos principales de ciegos de color y los colores se pueden diferenciar incluso cuando se utiliza como sectores muy limitados de color.The palette is accessible for the major types of color blindness, and the colors can be differentiated even when used as very narrow slices of color. Puede usar estos colores en cualquier combinación de cualquier tipo de gráfico en la interfaz de usuario.You can use these colors in any combination for any type of chart or graph in your UI. No es necesario utilizar todos los colores de siete si no es necesario que muchos colores distintos.You do not need to use all seven colors if you do not need that many distinct colors. Estos colores no se diseñaron para su uso con los elementos de primer plano, por lo que no se debe colocar el texto o glifos encima de estos colores.These colors were not designed to be used with any foreground elements, so do not place text or glyphs on top of these colors. Estos matices deben codificado de forma rígida y expone a la personalización del usuario en Herramientas > opciones (consulte exponer colores para los usuarios finales).These hues should be hard-coded and exposed to user customization under Tools > Options (see Exposing colors for end users).

MuestraSwatch HexHex RGBRGB
Muestrario 71B252Swatch 71B252 #71B252#71B252 113,178,82113,178,82
Muestrario BF3F00Swatch BF3F00 #BF3F00#BF3F00 191,63,0191,63,0
Muestrario FCB714Swatch FCB714 #FCB714#FCB714 252,183,20252,183,20
Muestrario 903F8BSwatch 903F8B #903F8B#903F8B 144,63,139144,63,139
Muestrario 117AD1Swatch 117AD1 #117AD1#117AD1 17,122,20917,122,209
Muestrario 79D7F2Swatch 79D7F2 #79D7F2#79D7F2 121,215,242121,215,242
Muestrario B5B5B5Swatch B5B5B5 #B5B5B5#B5B5B5 181,181,181181,181,181

Interfaz de usuario en el objeto y el examenOn-object UI and peeking

Esta sección proporciona el contexto para leerlo, también conocido como vista de peek de código, un tipo de interfaz de usuario de objeto único a Visual Studio.This section gives context to peeking, also known as code peek view, a type of on-object UI unique to Visual Studio.

Información generalOverview

  • Interfaz de usuario en objeto debe dar al usuario más información o interactividad sin apartarse de su tarea principal.On-object UI should give the user more information or interactivity without detracting from their main task.

  • El patrón principal de interfaz de usuario del objeto en Visual Studio se conoce como "información en el momento de atención".The main pattern for on-object UI in Visual Studio is known as "information at the point of attention."

  • Interfaz de usuario en el objeto en Visual Studio es ya sea en línea o flotante y perdurables o transitoria.On-object UI in Visual Studio is either inline or floating and either durable or transient.

    • Vista de peek de código, un tipo de interfaz de usuario del objeto en Visual Studio, es duradera y en línea.Code peek view, a type of on-object UI in Visual Studio, is inline and durable.

    • CodeLens, un tipo de interfaz de usuario del objeto en Visual Studio, es transitorio y flotanteCodeLens, a type of on-object UI in Visual Studio, is floating and transient

    Entender cómo funciona un fragmento de código, o buscar detalles sobre ese código, a menudo requiere un programador cambiar el contexto y vaya a otro tipo de contenido o en otra ventana.Understanding how a piece of code works, or finding details about that code, often requires a developer to switch context and go to other content or another window. Estos desplazamientos de contexto pueden ser perjudiciales, porque los usuarios pueden perder el foco en su tarea original si deja en su ventana principal.These context shifts can be disruptive, because users can lose focus on their original task if they leave their main window. Además, la obtención de que copia original de contexto puede ser difícil, especialmente si el cambio entre ventanas provocó el código original para verse oscurecidas por otra interfaz de usuario.Furthermore, getting that original context back can be difficult, especially if switching windows caused their original code to be obscured by other UI.

    Interfaz de usuario en el objeto sigue un patrón denominado "información en el momento de atención".On-object UI follows a pattern called "information at the point of attention." Estos mensajes, ventanas emergentes y cuadros de diálogo proporcionan a los usuarios información adicional relevante que agrega alguna aclaración o interactividad sin perder el foco en su tarea principal.These messages, pop-up windows, and dialog boxes give users additional, relevant information that adds clarification or interactivity without losing focus on their main task. Algunos ejemplos de interfaz de usuario de objeto son ventanas emergentes que aparecen cuando un usuario desplace el puntero sobre un icono en el área de notificación, la línea ondulada roja debajo de una palabra mal escrita, la vista de peek introdujo en Visual Studio 2013.Examples of on-object UI include pop-up windows that appear when a user hovers their pointer over an icon in the notification area, the red squiggle under a misspelled word, and the peek view introduced in Visual Studio 2013.

Puntos de decisiónDecision points

En Visual Studio, hay varias formas de usar este patrón de información en el momento de atención.Within Visual Studio, there are several ways to use this pattern of information at the point of attention. Elegir el mecanismo adecuado e implementar de forma coherente y predecible son esencial para la experiencia global.Choosing the right mechanism and implementing it in a consistent, predictable way is essential to the overall experience. En caso contrario, los usuarios pueden presentarse una experiencia incoherente o confusa que implica menoscabo alguno foco desde el propio contenido.Otherwise, users might be presented with a confusing or inconsistent experience that detracts focus from the content itself.

Relaciones entre maestro y detalles de contenidoRelationships between master and detail content

Información en el momento de atención se usa para mostrar una relación entre el contenido que el usuario está centrado en (el contenido de "master") y adicionales relacionados con contenido (el contenido de "Detalles").Information at the point of attention is used to display a relationship between content that the user is focused on (the "master" content) and additional related content (the "detail" content). En este modelo, el contenido de detalle está claramente relacionado con el contenido que el usuario está trabajando con y se puede mostrar cerca el contenido principal.In this pattern, the detail content is clearly related to the content the user is working with and can be displayed close to the master content. Información adicional o información que no se pueden resumir sin abrumar el contenido principal debe seguir otro patrón, como una ventana de herramientas.Supplemental information or information that cannot be summarized without overwhelming the master content should follow another pattern, such as a tool window.

  • Siempre mostrar el contenido de detalle cerca el contenido principal.Always display the detail content in close proximity to the master content.

  • Siempre Asegúrese de que el contenido de detalle todavía permite que un usuario permanezca centrado en el contenido principal.Always ensure that the detail content still enables a user to remain focused on the master content. A menudo, la mejor manera de lograrlo es representar el contenido de detalle como cerca el contenido principal como sea posible.Often, the best way to achieve this is to render the detail content as close to the master content as possible. Esto puede hacerse representar el contenido de detalle en una ventana emergente junto al contenido principal, o bien el detalle contenido en línea debajo el contenido principal de representación.This can be done by rendering the detail content in a pop-up window next to the master content, or by rendering the detail content inline underneath the master content.

  • Nunca usar información en el momento de la atención que lleva al usuario fuera el contenido principal.Never use information at the point of attention that takes the user away from the master content. Si los usuarios necesitan ver el contenido de detalle por separado, exponer una acción explícita que permite al usuario hacer esto.If users need to view the detail content separately, expose an explicit action that enables the user to do this.

Detalles de diseñoDesign details

Una vez que haya determinado que la interfaz de usuario en el objeto es la elección correcta, existen cuatro consideraciones de diseño principal:Once you have determined that on-object UI is the right choice, there are four main design considerations:

  1. Persistencia: se espera el contenido sea duradero o temporales?Persistence: is the content expected to be durable or transient?
    ¿Los usuarios desee mantener visible para hacer referencia a o para interactuar con la información?Will users want to keep the information visible to refer to or interact with? ¿O bien, los usuarios desearán rápidamente Eche un vistazo a la información y, a continuación, continúe con su tarea principal?Or will users want to quickly glance at the information and then continue with their main task?

  2. ¿Tipo de contenido: el contenido será informativo, navegación o procesable?Content type: will the content be informational, actionable, or navigational?
    ¿El usuario necesita información adicional sobre el contenido principal?Does the user need additional detail about the master content? ¿El usuario necesita para completar una tarea que afecta al contenido del principal?Does the user need to complete a task that affects the master content? ¿O bien, necesita el usuario para que se dirijan a otro recurso?Or does the user need to be directed to another resource?

  3. ¿Tipo de indicador: tiene un indicador de ambiente sentido?Indicator type: does an ambient indicator make sense?
    ¿Puede la información de resumen en una forma útil y mostrar sin abrumar el contenido principal?Can the information be summarized in a useful way and displayed without overwhelming the master content?

  4. Movimientos: qué gestos que se usarán para invocar y descartar la interfaz de usuario?Gestures: what gestures will be used to invoke and dismiss the UI?
    ¿Cómo mostrar el contenido de detalle y enviarlo inmediatamente el usuario?How will the user bring up the detail content and send it away? ¿Hay valor en Agregar un gesto como anclaje para alternar entre los estados transitorios y duraderos?Is there value in adding a gesture such as pinning to switch between transient and durable states?

    Cada uno de estos puntos de cuatro decisión tendrá un impacto en los principales componentes de interfaz de usuario del objeto.Each of these four decision points will have an impact on the major components of on-object UI.

Componentes de interfaz de usuario en objetoOn-object UI components

  1. Tipo de contenedor (moderador contenido)Container (content presenter) type

    • FlotanteFloating

    • AlineadoInline

  2. Tipo de contenidoContent type

    • Informativo: datos que pueden ser estática o dinámicaInformational: data that might be static or dynamic

    • Procesables: comandos que cambian el contenido principalActionable: commands that change the master content

    • Navegación: vínculos que guiará al usuario a otra ventana o aplicación, como MSDNNavigational: links that take the user to another window or application, such as MSDN

  3. GestosGestures

    • InvocaciónInvocation

    • DespidoDismissal

    • FijarPinning

    • Otras interaccionesOther interactions

  4. Modelo de persistencia y la confirmaciónPersistence and commit model

    • TransitorioTransient

    • DurableDurable

    • AutomáticoAutomatic

    • A peticiónOn-demand

  5. Indicadores de ambiente (opcionales)Ambient indicators (optional)

    • Subrayado onduladoSquiggle underline

    • Icono de etiqueta inteligenteSmart tag icon

    • Otros indicadores de ambienteOther ambient indicators

Tipo de contenedor (moderador contenido)Container (content presenter) type

Hay dos opciones principales disponibles para presentar contenido en el momento de atención:There are two major options available to present content at the point of attention:

  1. En línea: un presentador en línea, como la vista de información que se introdujo en el Editor de código de Visual Studio 2013, para crear espacio para el contenido nuevo trasladando el contenido existente.Inline: an inline presenter, such as the peek view that was introduced in the Visual Studio 2013 Code Editor, makes space for new content by shifting existing content.

    • Prefiere alineado moderadores si espera que los usuarios desearán dedicar una cantidad considerable de tiempo que hace referencia a o interactuar con el contenido a presentar.Prefer inline presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

    • Evitar alineado moderadores si espera que los usuarios desearán Eche un vistazo a la información que presenta y luego continúe con su tarea principal con interrupciones mínimas.Avoid inline presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

  2. Flotante: un presentador flotante se coloca lo más cerca del contenido seleccionado como sea posible, pero no modificar el diseño del contenido existente.Floating: a floating presenter is positioned as close to the selected content as possible but does not alter the layout of the existing content. Se pueden emplear diversas estrategias, como mostrar un panel flotante contenido sobre el más cercano disponible espacio en blanco para el símbolo seleccionado.Various strategies can be employed, such as displaying a floating content panel over the nearest available white space to the selected symbol.

    • Prefiere flotante moderadores si espera que los usuarios desearán Eche un vistazo a la información que presenta y luego continúe con su tarea principal con interrupciones mínimas.Prefer floating presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

    • Evitar flotante moderadores si espera que los usuarios desearán que dedicar una cantidad considerable de tiempo que hace referencia a o interactuar con el contenido que está presente.Avoid floating presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

Tipo de contenidoContent type

Hay tres tipos principales de contenido que se pueden mostrar en cualquier contenedor de interfaz de usuario en el objeto.There are three main types of content that can be displayed inside any on-object UI container. Se puede mostrar cualquier combinación de estos tipos de información.Any combination of these types of information can be shown. Los tres tipos son:The three types are:

  1. Informativo: contenedores de la interfaz de usuario mostrará algún tipo de contenido informativo a objeto de mayoría.Informational: most on-object UI containers will display some kind of informational content. El contenido puede representar la información sobre el estado actual del entorno o puede representar información sobre un estado futuro potencial del entorno.The content can represent information about the present state of the environment or it may represent information about a potential future state of the environment. Por ejemplo, podría utilizarse para mostrar el efecto de un comando concreto, como una refactorización en el código existente.For example, it could be used to show the effect of a particular command, such as a refactoring, on the existing code.

    • Siempre usar la representación canónica de la información que mostrar.Always use the canonical representation of the information that you display. Por ejemplo, el código debería ser similar a código, junto con el resaltado de sintaxis y debe respetar la fuente y otras opciones de entorno que el usuario ha establecido.For example, code should look like code, complete with syntax highlighting, and should respect whatever font and other environment settings the user has set.

    • Siempre considere la posibilidad de admitir todas las acciones sobre el contenido informativo que sería posible si esa misma información se presenta como contenido principal.Always consider supporting any actions over the informational content that would be possible if that same information is presented as master content. Por ejemplo, si presentar el código existente en un contenedor de interfaz de usuario en el objeto, considere fervientemente admitir la capacidad de examinar y modificar ese código.For example, if presenting existing code inside an on-object UI container, strongly consider supporting the ability to browse and modify that code.

    • Siempre considere el uso de un color de fondo diferente si presentar contenido informativo que representa un estado futuro potencial.Always consider using a different background color if presenting informational content that represents a potential future state.

  2. Procesables: algunos contenedores de la interfaz de usuario en el objeto proporcionará la capacidad de realizar alguna acción sobre el contenido principal, como realizar una operación de refactorización.Actionable: some on-object UI containers will provide the ability to perform some action over the master content, such as performing a refactoring operation.

    • Siempre colocar procesables comandos por separado desde el contenido informativo.Always position actionable commands separately from the informational content.

    • Siempre habilitar y deshabilitar las acciones cuando corresponda.Always enable and disable actions when appropriate.

    • Siempre hacen referencia a las directrices estándar para representar comandos dentro de los cuadros de diálogo.Always refer to the standard guidelines for representing commands inside dialog boxes.

    • Siempre mantener mínimo el número de acciones que se exponen en un contenedor de la interfaz de usuario en el objeto en absoluto.Always keep the number of actions that are exposed in an on-object UI container to an absolute minimum. Interactuar con la interfaz de usuario del objeto debe ser una experiencia ligera y rápida.Interacting with on-object UI should be a lightweight, fast experience. El usuario no debe tener dedicar energía acerca de cómo administrar el contenedor de interfaz de usuario en el objeto.The user should not have to expend energy on managing the on-object UI container itself.

    • Siempre tenga en cuenta cómo y cuándo se cierra o descartar un contenedor de la interfaz de usuario en el objeto.Always consider how and when an on-object UI container will be closed or dismissed. Como práctica recomendada, cualquier acción que concluye el cuadro de diálogo entre el maestro y detalles contenido también debe cerrar el contenedor de la interfaz de usuario en el objeto cuando se llama a esa acción.As a best practice, any action that concludes the dialog between the master and detail content should also close the on-object UI container when that action is invoked.

  3. Navegación: algunos en objetos contenedores de la interfaz de usuario incluyen vínculos que llevan al usuario a otra ventana o aplicación, como la apertura de un artículo MSDN en el explorador del usuario web.Navigational: some on-object UI containers include links that take the user to another window or application, such as opening an MSDN article in the user's web browser.

    • Siempre anteponer cualquier vínculo de navegación con "Abierta" para que los usuarios no sorprenderá por algún otro tipo de contenido que se navega.Always prepend any navigational link with "Open" so that users will not be surprised by being navigated to some other content.

    • Siempre separar los vínculos de navegación de vínculos útiles.Always separate navigational links from actionable links.

Indicadores de ambiente (opcionales)Ambient indicators (optional)

Indicadores de ambiente pueden ser sutil, incluyendo el texto que se presentan en un color contraste respecto del resto del código, u obvio, incluidos los símbolos de tickler como un subrayado ondulado e iconos de etiqueta inteligente.Ambient indicators can be subtle, including text presented in a contrasting color from the rest of the code, or obvious, including tickler symbols such as squiggle underlines and smart tag icons. Indicadores de ambiente comunican la disponibilidad de información adicional relevante.Ambient indicators communicate the availability of additional, relevant information. Idealmente, que proporcionan información útil incluso sin solicitar al usuario interactuar con ellos.Ideally, they provide useful information even without requiring the user to interact with them.

  • Siempre colocar un indicador de ambiente para que no quede oculta o sobrecargando el usuario.Always position an ambient indicator so that it does not distract or overwhelm the user. Si no es posible colocar un indicador de ambiente de forma, considere la posibilidad de otra solución.If it is impossible to position an ambient indicator in such a way, consider another solution.

  • Siempre coloca lo más cerca posible al contenido que está relacionado con el indicador de ambiente.Always position the ambient indicator as close as possible to the content that it's related to.

  • Siempre intenta crear un indicador que resume la información hace que estén disponible.Always try to create an indicator that summarizes the information it makes available. Considere la posibilidad de proporcionar un recuento del número de elementos de datos disponibles (por ejemplo, "3 referencias" en lugar de simplemente "Referencias") o de alguna otra manera para resumir los datos de reflexión.Consider providing a count of the number of data items available (for example, "3 references" instead of simply "References") or think of some other way to summarize the data.

    • En casos en que los datos de un indicador no siempre se calcula y muestra, inmediatamente se considera comentarios progresiva tal y como se calculan los valores.In cases where the data for an indicator cannot always be computed and displayed, immediately consider providing progressive feedback as the values are computed. Por ejemplo, considere la posibilidad de animar cambios que reflejan las actualizaciones de los datos disponibles, de forma similares a la forma en que el icono dinámico de correo electrónico en Windows Phone se actualiza cuando el número de mensajes de correo electrónico no leído aumenta.For example, consider animating changes that reflect updates to the available data, similar to the way the email live tile on Windows Phone refreshes as the number of unread emails increases.
  • Nunca agregar indicadores más de un usuario puede razonablemente llevar a cabo una parte determinada del contenido.Never add more indicators than a user can reasonably take in for a given piece of content. Indicadores de ambiente deben ser útiles sin necesidad de intervención del usuario.Ambient indicators should be useful without requiring any interaction from the user. Indicadores de perderán su ambiente si necesitan desbordamiento y otros controles de administración para volver a ponerlos en la vista.Indicators lose their ambience if they require overflow and other management controls to bring them into view.

GestosGestures

Un aspecto clave de permitir que el usuario mantener el foco en el contenido principal es admitiendo los movimientos de la derecha para abrir y descartar el contenido de detalles adicionales.A key aspect of allowing the user to maintain focus on the master content is by supporting the right gestures to open and dismiss the additional detail content.

  • Siempre requiere que el usuario realizar algunas gesto explícito para abrir el contenido adicional.Always require the user to perform some explicit gesture to open the additional content. Gestos de abrir comunes son:Common open gestures include:

    • Al mantener el mouse: información sobre herramientas o contenido informativo no interactivoHover: tooltips or non-interactive informational content

    • Comando explícito: presentador en líneaExplicit command: inline presenter

    • Haga doble clic en el indicador de ambiente: ventana emergente de CodeLensDouble-click the ambient indicator: CodeLens pop-up window

  • Siempre descartar el contenido de detalle cada vez que el usuario presiona la tecla Esc.Always dismiss the detail content whenever the user presses the Esc key.

  • Siempre tenga en cuenta el contexto de la interfaz de usuario en el objeto.Always consider the context of the on-object UI. Para contenido moderadores que permiten la interacción dentro del contenedor, tenga en cuenta si se debe mostrar información adicional al mantener el mouse, que suele ser perjudiciales para el flujo de trabajo del usuario.For content presenters that allow for interaction within the container, carefully consider whether to show additional information on hover, which is likely to be disruptive to the user's workflow.

  • Nunca mostrar contenido al mantener el mouse que parece ser editable o invita a la interacción del usuario.Never display content on hover that appears to be editable or invites user interaction. Este comportamiento puede frustrar a los usuarios si intentan mover el cursor sobre el contenido de detalle, como es el comportamiento estándar para una información sobre herramientas descartar inmediatamente cuando el cursor ya no está por encima del patrón contenido que lo generó.This behavior can frustrate users if they try to move the cursor over the detail content, as the standard behavior for a tooltip is to immediately dismiss when the cursor is no longer over the master content that produced it.

Modelos de selecciónSelection models

Información generalOverview

Un modelo de selección es el mecanismo utilizado para indicar y confirmar las operaciones en uno o varios objetos de interés dentro de la interfaz de usuario.A selection model is the mechanism used to indicate and confirm operations on one or more objects of interest within the user interface. Este tema describen los patrones de interacción de selección en los editores de documento de Visual Studio: editores de texto, superficies de diseño y modelado de superficies.This topic discusses selection interaction patterns within Visual Studio document editors: text editors, design surfaces, and modeling surfaces.

Los usuarios deben tener una forma de indicar a Visual Studio qué están trabajando, y Visual Studio debe responder previsiblemente con comentarios a los usuarios sobre lo que se está ejecutando en.Users must have a way of indicating to Visual Studio what they are working on, and Visual Studio must respond predictably with feedback to users about what it is operating on. Puede dar lugar a una falta de comunicación entre el usuario y la interfaz de usuario o de diferencias en el usuario no teniendo en cuenta una acción, que puede tener consecuencias no deseadas.Differences or a miscommunication between the user and the user interface can result in the user not noticing an action, which can have unintended consequences. A menudo, el error inadvertido hasta que el usuario ve que falta algo o ha cambiado.Often, the error goes unnoticed until the user sees that something is missing or has changed. Los modelos de selección son, por tanto, uno de los elementos más importantes de diseño de la interfaz de usuario.Selection models are therefore one of the most critical pieces of user interface design. Aunque los modelos de selección en Visual Studio son coherentes con Windows, hay pequeñas variaciones.Although selection models in Visual Studio are consistent with Windows, there are slight variations.

En Visual Studio, como en Windows, los modelos de selección varían según el contexto en el que se produce la interacción.In Visual Studio, as in Windows, selection models differ depending on the context in which the interaction occurs. Las selecciones pueden producirse en cuatro tipos de objetos:Selections can occur in four types of objects:

  • TextoText

  • Objetos gráficosGraphical objects

  • Listas y árbolesLists and trees

  • CuadrículasGrids

    Dentro de estos objetos, hay tres tipos de selecciones:Within these objects, there are three types of selections:

  • ContiguosContiguous

  • No contiguoDisjoint

  • RegiónRegion

ÁmbitoScope

El componente más importante de selección es asegurarse de que el usuario sabe en qué ventana trabajan (activación) y donde el foco está ubicada (selección).The most important component of selection is ensuring that the user knows in which window they are working (activation) and where the focus is located (selection). Visual Studio extiende la funcionalidad de administración de la ventana de Windows, pero el esquema de activación es el mismo: interactuar con una ventana trae el foco a la ventana.Visual Studio extends the window management functionality in Windows, but the activation scheme is the same: interacting with a window brings focus to the window. Visual Studio tiene dos indicadores para la activación: uno para las ventanas de documento y otro para las ventanas de herramientas.Visual Studio has two indicators for activation: one for document windows, and one for tool windows.

Para las ventanas de documento, la ventana activa se indica mediante la pestaña de una ventana de documento que llegue a la parte delantera y cambiar su color de fondo:For document windows, the active window is indicated by a document window tab coming to the front and changing its background color:

Selección de pestaña activa en Visual StudioActive tab selection in Visual Studio

Selección de pestaña activaActive tab selection

Para las ventanas de herramientas, la ventana activa se indica mediante un cambio en el color del área de la barra de título de la ventana de herramientas:For tool windows, the active window is indicated by a change in the color of the title bar area of the tool window:

Selección de ventana de herramientas activa en Visual StudioActive tool window selection in Visual Studio

Mostrar selección primaria de un nodo de ventana de herramientas activaActive tool window showing primary selection of a node

Selección de ventana de herramientas inactiva en Visual StudioInactive tool window selection in Visual Studio

Ventana de herramientas inactiva, mostrando latente selección del nodoInactive tool window, showing latent selection of node

Una vez que una ventana está activa, se indica su enfoque según los modelos de selección que se describen en esta sección de las instrucciones.Once a window is active, its focus is indicated according to the selection models outlined in this section of the guidelines.

ContextoContext

Visual Studio fue diseñado para conservar un concepto seguro de contexto, realizar el seguimiento de donde el usuario está trabajando.Visual Studio was designed to retain a strong concept of context, keeping track of where the user is working. Sólo una ventana está activa, si es una ventana de herramientas o de documento.Only one window is active, whether it is a tool or document window. Sin embargo, la ventana de documento de nivel superior siempre conserva una selección latente.However, the topmost document window always retains a latent selection. Aunque es posible el foco en una ventana de herramientas, la ventana de documento que estaba activo por última vez muestra una selección, incluso en un estado inactivo.Although the focus might be in a tool window, the document window that was last active displays a selection, even in an inactive state. Esto sirve para conservar el contexto del usuario en el documento que estaban editando, mostrándoles que Visual Studio ha conservado su estado de forma que puede volver y cambiar sin problemas entre las ventanas de herramientas y ventanas de documento.This is done to retain the user's context in the document they were editing, showing them that Visual Studio has retained their state so that they can return and shift seamlessly between tool windows and document windows.

Selección de textoText selection

Los editores de Visual Studio que sean estrictamente textuales, como el editor de texto integrado, usan el mismo modelo de selección de texto y apariencia se describe en la mouse (ratón) y punteros página de Windows User Experience Interaction Guidelines en MSDN.Visual Studio editors that are strictly textual, such as the built-in text editor, use the same text selection model and appearance described in the Mouse and Pointers page of the Windows User Experience Interaction Guidelines on MSDN. El foco de entrada en el editor de texto se indica mediante una barra vertical que llama el punto de inserción.The input focus in the text editor is indicated by a vertical bar called the insertion point. El punto de inserción es un solo píxel grueso y color como el inverso de todo lo que aparece detrás de él.The insertion point is a single pixel thick and colored as the inverse of whatever appears behind it. Parpadea según la frecuencia establecida el velocidad de intermitencia del Cursor en el velocidad pestaña de la teclado applet del Panel de Control.It blinks according to the rate set by the Cursor blink rate setting in the Speed tab of the Keyboard applet in Control Panel.

Selección de contigua y no contiguoContiguous and disjoint selection

Solo es contiguo selección en el editor de texto.Selection within the text editor is contiguous only. Texto selecciones no están permitidas, pero deben llevar a cabo en el Editor de objeto gráfico inconexos.Disjoint text selections are not permitted, but should be addressed in graphical object editors. Cuando el puntero del mouse está sobre un área de texto, el cursor cambia a un cursor en i.When the user's mouse pointer is over a text area, the cursor changes to an I-beam. Un solo clic, coloca el punto de inserción en el editor de texto en la ubicación de haga clic en.A single click places the insertion point in the text editor at the click location. Mantenga presionado el botón del mouse inicia un resalte de la selección y soltar el botón del mouse (ratón) finaliza el resalte de la selección.Holding the mouse button down starts a selection highlight and releasing the mouse button ends the selection highlight.

Selección de región (selección de cuadro)Region selection (box selection)

Visual Studio es compatible con selecciones de región en el editor de texto, y esto se denomina selección del cuadro.Visual Studio supports region selections in the text editor, and this is called box selection. Selección del cuadro permite al usuario seleccionar un área de texto que no sigue la secuencia de texto normal.Box selection allows the user to select a region of text that does not follow the regular text stream. Al igual que con la selección de texto estándar, la selección debe ser contigua.As with standard text selection, the selection must be contiguous. Selección del cuadro se inicia manteniendo presionada la tecla Alt mientras arrastra el puntero con el mouse.Box selection is initiated by holding down the Alt key while dragging with the mouse. También se puede iniciar la selección del cuadro manteniendo presionadas las teclas de desplazamiento y Alt mientras usa las teclas de dirección para indicar la región de selección.Box selection can also be initiated by holding down the Alt and Shift keys while using the arrow keys to indicate the region of selection. Selección del cuadro usa el resaltado de selección normal y muestra el cursor del punto de inserción parpadea al final del área de selección.Box selection uses the normal selection highlight and shows the insertion point cursor blinking at the end of the selection area.

Configuración regional ( cuadro ) la selección en Visual StudioRegional (box) selection in Visual Studio

Selección de región (cuadro) en Visual StudioRegion (box) selection in Visual Studio

Apariencia de la selección de textoText selection appearance

Se pueden personalizar los colores utilizados para la selección activa e inactiva en el editor.The colors used for active and inactive selection in the editor can be customized. Para personalizar la apariencia visual del editor, un usuario puede ir a Herramientas > opcionesy después haga clic en entorno > fuentes y colores > Editor de texto.To customize the visual appearance of the editor, a user can go to Tools > Options, and then look under Environment > Fonts and Colors > Text Editor.

Selección de gráficoGraphical selection

InteracciónInteraction

Selección de objetos gráficos puede ser compleja y depende de una serie de factores:Graphical object selection can be complex and depends upon a number of factors:

  • El modelo del editor selección primaria.The editor's primary selection model. Los editores que contienen objetos gráficos también pueden utilizarse para editar texto o cuadrículas.Editors that contain graphical objects can also be used to edit text or grids. Por ejemplo, el editor podría ser un editor de texto que también es compatible con la colocación de objetos gráficos, como el Diseñador XAML de Visual Studio.For example, the editor might be a text-based editor that also supports the placement of graphical objects, such as the Visual Studio XAML designer. Compatibilidad con varios tipos de objeto puede afectar a cómo el usuario selecciona grupos formados por diferentes tipos de objetos.Supporting multiple object types can affect how the user selects groups made up of different types of objects.

  • Compatibilidad con los Estados de selección primaria y secundaria.Support for primary and secondary selection states. Un editor puede proporcionar selección primaria y secundaria Estados para que los objetos se pueden editar en al mismo tiempo, alineados entre sí, cambiar de tamaño juntos, y así sucesivamente.An editor can provide primary and secondary selection states so that objects can be edited in unison, aligned with each other, resized together, and so on.

  • Compatibilidad de edición en contexto.In-place editing support. Los editores también pueden permitir que el contenido de sus objetos gráficos que se pueda editar.Editors can also allow the contents of their graphical objects to be edited. Por ejemplo, una forma de rectángulo también podría contener texto interno que puede cambiarse por el usuario.For example, a rectangle shape might also contain text on the inside that can be changed by the user. Además, que el texto se podría centrado o justificado.In addition, that text could be centered or justified. Edición en contexto implica un nivel más detallado de la interacción del usuario y, por tanto, requiere un conjunto adecuado de indicaciones visuales para presentar la información de estado al usuario.In-place editing involves a more detailed level of user interaction and therefore requires an appropriate set of visual cues for presenting state information to the user.

Interacción con el mouseMouse interaction

EntradaInput ResultadoResult
Haga clic en un objeto no seleccionadoClick an unselected object Selecciona el objeto y se muestra una línea discontinua y controladores de selección, si el objeto se puede cambiar el tamaño.Selects the object and displays a dashed line and selection handles, if the object is resizable.
Haga clic en un objeto seleccionadoClick a selected object Activa la edición en contexto si el objeto lo admite.Activates in-place editing if the object supports it. Hacer clic fuera del objeto, desactiva el modo de edición en contexto.Clicking outside the object deactivates the in-place editing mode.
Haga doble clic en un objetoDouble-click an object Se abre el código detrás del objeto para su edición y podría insertar un controlador de eventos de forma predeterminada, si procede.Opens the code behind the object for editing, and might insert a default event handler, if appropriate.
Seleccione un objetoPoint to an object Cambia el puntero hasta el cursor de movimiento.Changes the pointer to the move cursor. Puede cambiar la apariencia del objeto, como su luminosidad o color.The object's appearance, such as its luminosity or color, might change.
Seleccione un controlador de selecciónPoint to a selection handle Cambia el puntero hasta el cursor de cambio de tamaño.Changes the pointer to the resize cursor. Para los objetos que admiten la rotación, algunos controladores de selección pueden cambiar el puntero a un cursor Girar tal y como se sitúa el puntero diferente (por ejemplo, si se mueven más lejos) en relación con el controlador de selección.For objects that support rotation, some selection handles might change the pointer to a rotate cursor as the pointer is positioned differently (for example, moved farther away) with respect to the selection handle.
ArrastreDrag Incluso si el objeto no se ha seleccionado anteriormente, cambia el puntero hasta el cursor de movimiento y mueve el objeto.Even if the object is not previously selected, changes the pointer to the move cursor and moves the object.
Editor de pierde el focoEditor loses focus Desactiva el modo de edición en contexto, aunque el objeto conserva el contenido y el aspecto que tenía durante su último estado de operación/selección.Deactivates in-place editing mode, although the object retains the content and appearance it had during its last operation/selection state.
Selección de objetosObject selection Indicado por un borde, línea de puntos u otro tratamiento visualmente distinto para resaltar el límite del objeto.Indicated by a border, dotted line, or other visually distinct treatment to highlight the boundary of the object.
Cambiar el tamaño de un objeto seleccionadoResize a selected object Indicado por controladores de selección.Indicated by selection handles.

Un objeto puede cambiar el tamaño tiene ocho controladores, que representa cada dirección en la que puede cambiarse.A resizable object has eight handles, representing each direction in which it can be resized. Si el objeto solo pueden cambiarse en determinadas direcciones, se pueden usar identificadores de menos.Fewer handles may be used if the object can only be resized in certain directions. Cuando el usuario cambia el tamaño de un objeto hasta donde ocho controladores de no ser interactivas, pueden utilizarse cuatro identificadores.When the user sizes an object down to where eight handles would not be interactive, then four handles may be used. Tamaños de identificador deben asociarse a las métricas de borde y el borde de ventana con la GetSystemMetrics función de la API para el tamaño proporcionalmente a la resolución de pantalla.Handle sizes should be tied to the window border and edge metrics with the GetSystemMetrics API function to size in proportion to the display resolution.

Controladores de tamañoResize handles
Girar un objeto seleccionadoRotate a selected object Controladores de giroRotate handles

Interacción con el tecladoKeyboard interaction

EntradaInput ResultadoResult
TabTab Mueve el indicador de foco entre el orden lógico de objetos en el editor.Moves the focus indicator among the logical order of objects in the editor. Puede tratarse de izquierda a derecha o de arriba a abajo según TabIndex (o equivalente) valor de propiedad, el orden de creación de objetos y el propósito general del editor.This may be left-to-right or top-to-bottom depending on TabIndex (or equivalent) property value, order of object creation, and the overall purpose of the editor. MAYÚS + Tabulador invierte la dirección de los indicadores de foco.Shift+Tab reverses the direction of the focus indicator.
Barra espaciadoraSpacebar Activa el modo de panorámico mientras se mantiene la pulsación de tecla.Activates panning mode while keystroke is maintained. Entrada de mouse adicional es necesario para aplicar una panorámica de la posición de la ventanilla.Additional mouse input is required to pan the viewport position.
Ctrl+Barra espaciadoraCtrl+Spacebar Activa el modo de zoom mientras se mantiene la pulsación de tecla.Activates zoom mode while keystroke is maintained. Entrada de mouse adicional es necesario para aumentar y disminuir el factor de zoom.Additional mouse input is required to increase and decrease the zoom factor.
Ctrl + Alt + signo menosCtrl+Alt+Minus Sign Disminuye el factor de zoom en un nivel.Decreases the zoom factor by one level.
Ctrl + Alt + signo másCtrl+Alt+Plus Sign Aumenta el factor de zoom en un nivel.Increases the zoom factor by one level.
MAYÚS o CtrlShift OR Ctrl Agrega el objeto al grupo de selección.Adds the object to the selection group. CTRL también permite quitar los objetos por separado desde el grupo de selección.Ctrl also allows you to remove objects individually from the selection group.
EntrarEnter Realiza el comando predeterminado para el objeto (normalmente se abre o editar).Performs the default command for the object (usually Open or Edit).
F2F2 Activa la edición en contexto para el objeto.Activates in-place editing for the object.
Teclas de direcciónArrow keys Mueve los objetos seleccionados en la dirección de la tecla presionada, en incrementos pequeños (por ejemplo, 1 píxel a la vez)Moves the selected object(s) in the direction of the arrow key pressed, in small increments (for example, 1 pixel at a time)
CTRL + teclas de direcciónCtrl+arrow keys Mueve los objetos seleccionados en la dirección de la tecla presionada, en incrementos mayores (por ejemplo, 10 píxeles a la vez)Moves the selected object(s) in the direction of the arrow key pressed, in larger increments (for example, 10 pixels at a time)
Mayús + flecha clavesShift+arrow keys Cambia el tamaño de los objetos seleccionados en la dirección correspondiente, en incrementos pequeños (por ejemplo, 1 píxel a la vez)Resizes the selected object(s) in the respective direction, in small increments (for example, 1 pixel at a time)
Ctrl + Mayús + teclas de direcciónCtrl+Shift+arrow keys Cambia el tamaño de los objetos seleccionados en la dirección correspondiente, en incrementos mayores (por ejemplo, 10 píxeles a la vez)Resizes the selected object(s) in the respective direction, in larger increments (for example, 10 pixels at a time)

Cuando los usuarios modificar controles en su lugar, tendría sentido para los objetos que se va a cambiar de forma automática con proporcionados por el usuario.When users edit controls in place, it might make sense for objects to automatically resize with user input. Por ejemplo, si el usuario edita un control de etiqueta, la etiqueta debe crecer para mostrar el texto que acaba de escribir el usuario.For example, if the user edits a label control, then the label should grow to display the text that the user just typed. Si no es así, el usuario debe cambiar el tamaño del control manualmente después de editar el texto.If this is not done, the user must resize the control manually after editing the text. Si el usuario tiene una gran cantidad de controles, se convierte en una tarea improductivo y básicas.If the user has a lot of controls, this becomes a rote and unproductive task.

Contenedores de gráficosGraphical containers

En algunos casos, editores gráficos proporcionan contenedores para otros objetos gráficos, como el control de Panel de Windows Forms o el diseño de cuadrícula en el Diseñador HTML.In some cases, graphical editors provide containers for other graphical objects, such as the Windows Forms Panel control or the Grid Layout control in the HTML designer. Si el editor proporciona contenedores para otros objetos gráficos, el siguiente modelo de selección debe utilizarse para el contenedor solo (objetos en el seguimiento de contenedor del modelo estándar como se ha descrito anteriormente):If your editor provides containers for other graphical objects, then the following selection model should be used for the container only (objects within the container follow the standard model as described above):

EntradaInput ResultadoResult
Hacer clic en el contenedorSingle-click on the container Selecciona el objeto de contenedor sin directamente si se selecciona cualquiera de los objetos contenidos.Selects the container object without directly selecting any of the contained objects. El contenedor se puede mover o cambiar de tamaño con estándar mouse y teclado (tal y como se ha descrito anteriormente).The container may be moved and/or resized with standard mouse and keyboard input (as described above). Objetos contenidos se mueven en relación al contenedor, pero los objetos contenidos no se cambia el tamaño a menos que se seleccionan directamente.Contained objects are moved in relation to the container, but contained objects are not resized unless they are also directly selected.
Mantenga el mouse sobre la región de límites del contenedorHover over the container's boundary region El mouse se convierte en el cursor de movimiento, que indica que se puede mover el contenedor.Turns the mouse into the move cursor, indicating that the container can be moved.
Arrastre el control región de límites del contenedorDrag the container's boundary region Cambia el mouse hasta el cursor de movimiento y mueve el contenedor (y los objetos contenidos en).Changes the mouse to the move cursor and moves the container (and the contained objects within). El contenedor no se pueden mover sin primero se seleccionan con un solo clic.The container cannot be moved without first being selected with a single click.
Hacer clic en un objeto dentro del contenedorSingle-click on an object within the container Anula el contenedor (si ha seleccionado) y selecciona sólo el objeto donde ha hecho clic.Deselects the container (if selected) and selects only the clicked object.
Mayús + clic o Ctrl + clic en un objeto independiente o un contenedorShift+click OR Ctrl+click on a contained object and/or container Agrega el objeto donde ha hecho clic en un grupo de selección o selección existente.Adds the clicked object to an existing selection or selection group. Si el objeto ha hecho clic ya es miembro del grupo de selección, se quita del grupo de selección.If the clicked object is already a member of the selection group, it is removed from the selection group.

Los objetos contenidos deben respetar el modelo de selección básica como se describe en la sección anterior.The contained objects should adhere to the basic selection model as described in the previous section. De las pruebas de facilidad de uso del Diseñador de Windows Forms, espera que los usuarios un acceso ininterrumpido a los objetos contenidos sin intervención de los pasos (impuestas por el objeto de contención).From usability testing of the Windows Forms designer, users expected seamless access to the contained objects without intervening steps (imposed by the containment object).

Discontinuas y las selecciones de regiónDisjoint and region selections

Editores de objeto gráfico deben admitir selecciones discontinuas.Graphical object editors should support disjoint selections. Tenga en cuenta que este gráfico no muestra la apariencia de los controles para Visual Studio.Please note that this graphic does not show the control appearance for Visual Studio. Vea apariencia de selección de objeto gráfico para obtener especificaciones detalladas visuales.See Graphical object selection appearance for detailed visual specifications.

Discontinuas selectores de región yDisjoint and region selectors

Selección separadoDisjoint selection

Editores gráficos también deben proporcionar las selecciones de la región con un indicador de selección de tipo de marquesina.Graphical editors should also provide region selections with a marquee-type selection indicator. Si el editor gráfico de es compatible con otros tipos de objeto (por ejemplo, texto), selecciones de región no sería posibles según las restricciones de esos otros tipos de objeto.If the graphical editor supports other object types (such as text), then region selections might not be possible depending on the constraints of those other object types.

Selección de recuadroMarquee selection

Selección de recuadroMarquee selection

Selecciones principal y secundariaPrimary and secondary selections

Algunos editores de objeto gráfica permiten al usuario editar o alinear objetos en los grupos.Some graphical object editors allow the user to edit or align objects in groups. En este caso, se necesita introducir el concepto de selecciones principal y secundaria.In this case, the concept of primary and secondary selections needs to be introduced. La selección primaria es el objeto al que todos los demás objetos responden para las operaciones de grupo.The primary selection is the object to which all other objects respond for group operations. El objeto que el usuario seleccione primero se convierte en el control primario y selecciones posteriores se convierten en las selecciones secundarias.The object that the user selects first becomes the primary control, and subsequent selections become the secondary selections. La selección primaria tiene un tratamiento distinto visual de las selecciones secundarias para indicar el objeto que es el principal:The primary selection has a distinct visual treatment from the secondary selection(s) to indicate which object is primary:

Selección primaria y secundariaPrimary and secondary selection

Selección primaria con dos selecciones secundariasPrimary selection with two secondary selections

Apariencia de la selección de objeto gráficoGraphical object selection appearance

Los controladores de selección son cuadrados dibujados en un patrón rectangular alrededor del cuadro de límite del objeto.The selection handles are squares drawn in a rectangular pattern around the bounding box of the object. La siguiente tabla muestra ejemplos de los diferentes Estados que puede tener un objeto gráfico en identificador, el tamaño y la apariencia de edición en contexto.The chart below shows examples of the various states that a graphical object can have with handle, sizing, and in-place editing appearance. El tamaño de los identificadores debe asociarse a borde de ventana y el uso de las métricas de borde la GetSystemMetrics API.The size of the handles should be tied to window border and edge metrics using the GetSystemMetrics API.

EstadoState AparienciaAppearance Detalles de VisualVisual details
Anular la selecciónUnselected DefaultDefault Estado del botón predeterminadoDefault button state
Selección primariaPrimary selection Puede cambiar el tamañoResizable Selección primaria con controladores de tamañoPrimary selection with resize handles
Selección primariaPrimary selection No puede cambiar el tamañoNot resizable Selección primaria sin controladores de tamañoPrimary selection without resize handles
Selección primariaPrimary selection BloqueadoLocked Selección primaria bloqueadaPrimary selection locked
Selección secundariaSecondary selection Puede cambiar el tamañoResizable Selección primaria con controladores de tamañoSecondary selection with resize handles
Selección secundariaSecondary selection No puede cambiar el tamañoNot resizable Selección secundaria sin controladores de tamañoSecondary selection without resize handles
Selección secundariaSecondary selection BloqueadoLocked Selección secundaria bloqueadaSecondary selection locked
Interfaz de usuario activaUI active DefaultDefault Estado activo de interfaz de usuarioUI active state

Modelos de selección de vistaView selection models

Vista de árbolTree view

Se muestra la selección en una vista de árbol con un resaltado simple.Selection in a tree view is shown with a simple highlight. Si el usuario hace clic en un nombre de nodo o un icono de nodo, el nodo deja de estar seleccionado.If the user clicks on a node name or a node icon, the node becomes selected. Los glifos triangulares a la izquierda del nodo expandir o contraer el control de árbol pero no afectan a la selección del usuario, con una excepción: al contraer un nodo primario cuando la selección está en un elemento secundario de ese nodo, la selección se mueve al elemento primario.The triangular glyphs to the left of the node expand or contract the tree control but do not affect the user's selection, with one exception: upon collapsing a parent node when the selection is on a child of that node, the selection moves to the parent.

Vista de árbol típica de Visual StudioTypical tree view in Visual Studio

Vista de árbol típica de Visual StudioTypical tree view in Visual Studio

Vistas de árbol pueden admitir selecciones contiguas y no contiguas, incluso a través de varios niveles del árbol.Tree views can support contiguous and disjoint selections, even across multiple levels in the tree. Contiguos o no contiguos se deben realizar varias selecciones en los nodos de árbol visible.Contiguous or disjoint multiple selections must be made on visible tree nodes. Si un nodo está contraído, la selección no contiguo se pierde y el nodo que se contrajo Obtiene la selección.If a node is collapsed, the disjoint selection is lost and the node that was collapsed obtains the selection. De esta manera, el usuario puede ver los nodos que se verán afectados por una operación.In this way, the user can see the nodes that will be affected by an operation. Cuando se contraen los nodos, se vuelve claro qué nodos podrían verse afectados.When nodes are collapsed, it becomes unclear which nodes might be affected.

Cuando se selecciona un nodo primario, debe aplicar la operación al elemento primario, aunque puede haber casos en relacione con una operación aplicar el elemento primario y todos sus elementos secundarios.When a parent node is selected, the operation should apply to the parent, though there may be cases where it makes sense for an operation to apply to the parent and all of its children. En este caso, proporcionan la interfaz de usuario adicional durante la operación, como una casilla de verificación o el cuadro de diálogo de confirmación para que la opción "aplicar a todos los elementos secundarios" explícita para el usuario.In this case, provide additional UI during the operation, such as a check box or confirmation dialog to make the "apply to all children" option explicit to the user.

Cambiar nombreRenaming

Si los nodos del árbol admiten el cambio de nombre, cambiar el nombre debe realizarse en su lugar.If nodes in the tree support renaming, renaming should be done in place. La operación en el contexto debe ser el estándar en todos los controles de árbol en Visual Studio.The in-place operation should be the standard across all tree controls in Visual Studio. Proporciona un comando de cambio de nombre que se activa inmediatamente el modo de edición en contexto, con la selección de texto que abarcan el nombre completo del nodo, listo para aceptar proporcionados por el usuario.Provide a rename command that immediately activates the in-place editing mode, with the text selection covering the entire name of the node, ready to accept user input. Si el nodo representa un archivo, el nombre de archivo debe contener la extensión.If the node represents a file, the filename should contain the extension. El resaltado de selección debe incluir solo el cuerpo del nombre de archivo y no la extensión.The selection highlight should include only the body of the filename and not the extension.

EntradaInput ResultadoResult
Entrar (tecla)Enter key Confirma la operación de cambio de nombreCommits the rename operation
Tecla ESCEsc key Cancela la operación de cambio de nombreCancels the rename operation
Hacer clic fuera de la región de edición en contextoClicking outside the in-place edit region Confirma la operación de cambio de nombreCommits the rename operation
DeshacerUndo Proporcionar fácil deshacer para cancelar la operación de cambio de nombreProvide easy undo to cancel the rename operation

Selección de listas y los controles de cuadrículaSelection within lists and grid controls

El concepto clave en la selección de la lista es que está basado en la fila, lo que significa que cuando se realiza una selección toda la fila está seleccionada como una unidad.The key concept in list selection is that it is row-based, meaning that when a selection is made the whole row is selected as a unit. Por el contrario, cuadrículas pueden permitir que determinadas celdas seleccionarse sin afectar a cualquier otro aspecto de la fila.By contrast, grids can allow specific cells to be selected without affecting any other aspect of the row. Cuadrículas también podrían contener una jerarquía de filas anidadas (como en un control TreeGrid) que permiten todos ramas de la jerarquía se selecciona y se anula la selección mediante la interacción con las filas primarias.Grids might also contain a hierarchy of nested rows (such as in a TreeGrid) that allow entire branches of the hierarchy to be selected and deselected by interacting with the parent rows. Selección en las listas se indica con un color de resaltado simple en toda la fila de datos.Selection in lists is shown by a simple highlight color on the entire row of data. Enfoque se indica con un borde con puntos de píxel alrededor de la fila editable actual o la celda (fila si todas las celdas son de solo lectura).Focus is shown by a single-pixel dotted border around the current editable row or cell (row if all cells are read-only).

Nota

Foco y selección son conceptos diferentes.Focus and selection are different concepts. Foco es una indicación de qué interfaz de usuario tiene como destino el elemento para recibir entrada dirigido no explícitamente a otro objeto, mientras que selección se refiere al estado de inclusión de un objeto de un conjunto de objetos en los que posteriores pueden realizar operaciones.Focus is an indication of which UI element is targeted to receive input not explicitly directed at another object, while selection refers to the state of an object's inclusion in a set of objects on which subsequent operations may take place.

Las selecciones en las listas pueden ser contiguas, separado, o la región.Selections in lists may be contiguous, disjoint, or region. Cuando selecciones múltiples están permitidos, contiguo y siempre debe ser compatibles selección separado al soporte técnico para las selecciones de región (cuadro) son opcional.When multiple selections are allowed, contiguous and disjoint selection should always be supported, while support for region (box) selections is optional. Selecciones de región se inician y arrastrándola en el espacio en blanco del cuerpo de la lista.Region selections are initiated by dragging in the white space of the list body.

ObjectObject SelecciónSelection
ListaList ContiguosContiguous
ListaList No contiguoDisjoint
ListaList RegiónRegion

Al hacer clic una vez en una lista, selecciona la fila en el que hizo clic.Clicking once on a list selects the row where the click occurred. Si el usuario haga clic en una celda de la lista que admite la edición en contexto, la celda se activa también inmediatamente para su edición en contexto.If the user happens to click in a list cell that supports in-place editing, the cell is also immediately activated for in-place editing. En caso contrario, la fila completa inmediatamente queda seleccionada y muestra un resaltado.Otherwise, the whole row is immediately selected and shows a highlight.

Arrastrar en el cuerpo de la lista, realiza una de estas tres cosas:Dragging in the list body does one of three things:

  • Inicia una selección de región, si lo admite la lista y la profundidad del mouse se encuentra en el espacio en blancoInitiates a region selection if the list supports it and the mouse-down is in white space

  • Inicia una operación de arrastrar y colocar si la fila o celda de la lista admite que se va a un origen de arrastreInitiates a drag/drop operation if the list cell or row supports being a drag source

  • Selecciona la fila actualSelects the current row

Edición en contextoIn-place editing

Cuando se permite la edición en contexto, hay dos modelos básicos: selector de control y la propiedad de edición simple.When in-place editing is allowed, there are two basic models: simple edit control and property picker. Con un control de edición simple, el contenido está resaltado y listo para entrada tan pronto como se activa la edición en contexto del usuario.With a simple edit control, the content is highlighted and ready for user input as soon as in-place editing is activated. Cuando se implementa un selector de propiedades, se muestra el botón que invoca el selector de propiedad una vez que se activará el modo de edición en contexto y la selección actual no está resaltada.Where a property picker is implemented, the button that invokes the property picker is displayed once in-place editing mode is activated, and the current selection is not highlighted. El botón selector debe estar justificado a la derecha en la celda.The picker button should be right-justified in the cell. Para obtener ejemplos de edición en contexto, vea la ventana propiedades y lista de tareas en Visual Studio.For in-place editing examples, see the Properties Window and Task List in Visual Studio.

Compatibilidad con el tecladoKeyboard support

Compatibilidad con el teclado para la selección en listas y cuadrículas sigue las convenciones estándar de Windows:Keyboard support for selection in lists and grids follows the standard Windows conventions:

  • Teclas de dirección desplazarse por la lista, seleccione cada celda de filas mientras se mueve el foco.Arrow keys navigate the list, selecting each row/cell as the focus is moved.

  • Mayús + flecha realiza una selección contigua en la dirección de las teclas de dirección.Shift + arrow performs a contiguous selection in the direction of the arrow keys.

  • Ctrl + flecha seguido de barra espaciadora alterna entre agregar y quitar elementos de la lista de la selección, crear una selección no contiguo.Ctrl + arrow followed by Spacebar toggles between adding and removing list items from the selection, creating a disjoint selection.

  • Para las cuadrículas que contienen las jerarquías anidadas, la tecla flecha derecha expande una fila primaria y la tecla flecha izquierda contrae uno.For grids that contain nested hierarchies, the Right Arrow key expands a parent row, and the Left Arrow key collapses one.

  • La tecla Tab mueve el foco entre las celdas de la fila actual si las celdas se pueden modificables.The Tab key moves focus among the cells in the current row if the cells are editable.

  • La tecla ENTRAR realiza el comando predeterminado en el elemento en la lista (a menudo abiertos).The Enter key performs the default command on the item in the list (often Open).

  • La tecla F2 activa la edición en contexto para la celda seleccionada actualmente.The F2 key activates in-place editing for the currently selected cell.

Persistencia y guardar la configuraciónPersistence and saving settings

Información generalOverview

Aunque es suele ser responsable de su propio estado y persistencia de cada componente de software en Visual Studio, Visual Studio guarda la configuración en algunos casos, como con posiciones y tamaños de ventana.Although each software component in Visual Studio is usually responsible for its own state and persistence, Visual Studio automatically saves settings in some cases, such as with window sizes and positions. En la tabla siguiente es una combinación de opciones que se guardan automáticamente y que requieren un usuario explícito o programarse la acción que se realizará.The table below is a combination of settings saved automatically and settings that require an explicit user or programmed action to be taken.

ObjectObject Lo que se debe guardarWhat to save Cuándo se debe guardarWhen to save Dónde guardarWhere to save
Objeto seleccionable (por ejemplo, una línea de código)Selectable object (for example, a line of code) Un punto de interrupción en una línea de códigoA breakpoint on a line of code

Un acceso directo de usuario asociado a la línea de códigoA user shortcut associated with the line of code
Cuando se guarda el proyectoWhen the project is saved El opciones de usuario (.suo) archivo para el proyectoThe user options (.suo) file for the project
Cuadro de diálogoDialog La ubicación del cuadro de diálogo, si se han movidoThe location of the dialog, if it had been moved

La vista que el usuario utilizó por última vez en el cuadro de diálogoThe view that the user last used in the dialog
Cuando se cierra el cuadro de diálogoWhen the dialog closes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
En la memoriaIn memory

Registro en HKEY_Current_UserRegistry in HKEY_Current_User
VentanaWindow El tamaño y la ubicación de la ventanaThe size and location of the window Cuando se cierra la ventanaWhen the window closes

Cuando se cambia el modo de Visual StudioWhen the Visual Studio mode changes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
El opciones de usuario (.suo) archivo para el proyectoThe user options (.suo) file for the project

Archivo de opciones personalizadas para la configuración de la ventanaCustom options file for window settings
DocumentoDocument La selección actual en el documentoThe current selection in the document

La vista del documentoThe view of the document

El último varios lugares, el usuario ha visitadoThe last several places the user visited
Cuando se guarda el documentoWhen the document is saved El opciones de usuario (.suo) archivo para el proyectoThe user options (.suo) file for the project
ProyectoProject Referencias a archivosReferences to files

Referencias a los directorios en el discoReferences to directories on disk

Referencias a otro softwareReferences to other software

ComponentesComponents

Información de estado sobre el propio proyectoState information about the project itself
Cuando se guarda el proyectoWhen the project is saved El archivo de proyectoThe project file
SolucionesSolution Referencias a proyectosReferences to projects

Referencias a archivosReferences to files
Cuando se guarda el proyecto o soluciónWhen the project or solution is saved El solución (.sln) archivoThe solution (.sln) file
Configuración de Herramientas > OpcionesSettings in Tools > Options Personalizaciones del tecladoKeyboard customizations

Personalizaciones de la barra de herramientasToolbar customizations

Combinaciones de coloresColor schemes
Cuando el Herramientas > opciones cierra el cuadro de diálogoWhen the Tools > Options dialog closes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
Registro en HKEY_Current_UserRegistry in HKEY_Current_User

¿Qué está haciendo el usuario y cuando está realizando, determina si una configuración se guarda en la memoria (durante la sesión), que se guardan en el disco (en las sesiones como una configuración del registro), como parte de la solución o proyecto propio archivo, como parte de la solución Opciones (.suo) de archivos o como una configuración personalizada de archivos que sólo ese componente de software conoce.What the user is doing, and when they are doing it, dictates whether a setting is being saved in memory (during the session), saved to disk (across sessions as a registry setting), as part of the project or solution file itself, as a part of the solution options (.suo) file, or as a custom settings file that only that software component knows about. La tabla anterior muestra varios eventos en el que se puede guardar configuración.The table above shows several events at which settings can be saved. Sin embargo, hay otras ocasiones en que puede guardar el estado:However, there are other times in which you might want to save state:

  • Cuando el usuario cambia la ubicación de un cuadro de diálogo o ventanaWhen the user changes location within a dialog or window

  • Cuando el usuario transfiere el foco a otra ventanaWhen the user transfers focus to another window

  • Cuando el usuario cambia de diseño en modo de depuraciónWhen the user switches from design to debug mode

  • Cuando el usuario cierra su cuentaWhen the user logs off their account

  • Cuando se pasa a hibernación o se apaga el equipoWhen the computer goes into hibernation or shuts down

  • Cuando la unidad de disco duro equipo está a punto de ser volver a formatear y volver a configurarWhen the computer/hard drive is about to be reformatted and set up again

Configuraciones de ventanasWindow configurations

Una configuración de la ventana es la presentación básica del entorno de desarrollo: es un esquema que se compone de la lista de las ventanas de herramientas está presentes y la manera en que se organizan.A window configuration is the basic presentation of the development environment - it is a scheme consisting of the list of tool windows present and the way in which they are arranged. Para windows administradas por el IDE (ventanas del IDE), información de diseño se conserva por usuario, lo que cuando un usuario ejecute el IDE, el diseño de ventana aparece el mismo que cuando duran salió de Visual Studio.For windows managed by the IDE (IDE windows), layout information is persisted per user, so when a user launches the IDE, the window layout appears the same as when they last exited Visual Studio. El estado y la posición de las ventanas del IDE se guardan en un archivo de opciones personalizadas en formato XML.The state and position of IDE windows is persisted in a custom options file in XML format. Ventanas de herramientas que se crean paquetes que se cargan en el IDE de conservan su información de estado en el registro y pueden o no ser por usuario.Tool windows that are created by packages loaded into the IDE persist their state information in the registry and may or may not be per user.

Diseños específicos de perfilProfile-specific layouts

Cada perfil incluye diseños de ventana de herramienta, organizados en una forma que resultará familiar a los roles de desarrollador determinado (esperar que los desarrolladores de Visual C++ ver el el Explorador de soluciones en el lado izquierdo del IDE, mientras que los desarrolladores de C# esperan que se muestre el El Explorador de soluciones a la derecha).Each profile includes tool window layouts, organized in a manner familiar to specific developer personas (Visual C++ developers expect to see the Solution Explorer on the left side of the IDE, while C# developers expect to see the Solution Explorer on the right). Diseños de ventana específica del perfil se cargan después de que el usuario elija un perfil en el inicio.Profile-specific window layouts are loaded after the user chooses a profile on startup. Un autor del paquete debe determinar el diseño de ventana más adecuado para la experiencia de sus clientes, sabiendo que, a continuación, se conservarán los cambios que el usuario realice en la configuración de la ventana.A package author should determine the window layout most suitable for their customer's experience, knowing that changes that the user makes to the window configuration will then be persisted.

Entrada táctilTouch input

Los usuarios utilizan cada vez más productos de desarrollo de Microsoft en dispositivos táctiles.Users are increasingly using Microsoft development products on touch devices. Sin embargo, existen obstáculos que hacen que sea difícil utilizar herramientas de desarrollo en dispositivos táctiles.However, there are barriers that make it difficult to use development tools on touch devices. Los usuarios esperarán que nuestros productos para proporcionar una experiencia táctil confiable y precisa.Users will expect our products to provide a reliable and precise touch experience. El propósito de estas instrucciones es informar a ninguna decisión sobre qué funciones táctiles para incorporar y animar a una experiencia táctil coherente entre Visual Studio y productos relacionados.The intent of these guidelines is to inform decisions about which touch capabilities to incorporate and to encourage a consistent touch experience across Visual Studio and related products.

Niveles de experienciaLevels of experience

Los siguientes niveles de experiencia están diseñados para actuar como una guía para ayudar a los equipos a decidir qué funciones táctiles para ofrecer basan en su nivel deseado de interés de la inversión en contacto.The following levels of experience are intended to serve as a guide to help teams decide which touch capabilities to offer based on their desired level of investment interest in touch.

  • El experiencia básica es para equipos que desean proporcionar touch capacidades, por lo que no hay ningún extremos no enviados a lo largo de su trabajo.The basic experience is for teams that want to provide touch capabilities so there are no dead ends throughout their work.

  • El optimizado experiencia es para equipos que desee proporcionar más capacidades táctiles (por ejemplo, las que suelen estar disponibles en las aplicaciones de explorador de internet).The optimized experience is for teams that want to provide the most common touch capabilities (for example, those typically available in internet browser applications).

  • El elevados experiencia es para equipos que desean agregar capacidades tales como gestos u otras capacidades opcionales que pueden hacer que su aplicación táctil primero descriptivo.The elevated experience is for teams that want to add capabilities such as gestures or other optional capabilities that can make their application touch-first friendly.

Experiencia básicaBasic experience Experiencia optimizadaOptimized experience Experiencia con privilegios elevadosElevated experience
Permite a los usuarios...Enables users to ... Corrija el código y solución/nivel de proyecto de lectura sin extremos no enviadosFix code and solution/project-level reading without dead ends Realizar tareas de mantenimiento, refactorizaciones y navegaciónPerform maintenance, refactors, and navigation tasks Operar en una experiencia coherente, intuitiva y fluida con confianzaOperate in a consistent, intuitive, and fluid experience with confidence
EditorEditor Modo panorámico táctil y la selecciónTouch panning and selection

Barra de desplazamiento táctil para saltar y presione + arrastrarScrollbar touch to jump and press+drag
Acercar alejarPinch zoom

Desplazamiento rápidoFast scroll

SelecciónSelection

Fácil de usar del menú contextualEasy use of context menu
Ventanas de herramientas superiorTop tool windows Aplicar una panorámica en listaList panning

Selección de elementosItem selection

Barra de desplazamiento táctil para saltar y presione + arrastrarScrollbar touch to jump and press+drag
Desplazamiento de elemento fácil y selecciónEasy item scrolling and selection
VentanaWindowing Cambiar el tamaño de ventanaResize window

Acceso rápidoQuick access
Cuadro de documentoDocument well Facilitar el desplazamiento entre los archivos abiertosEasy navigation between open files
GestosGestures Asegúrese de movimientos comunes pueden funcionar en el IDEEnsure common gestures work across the IDE Acciones de gestosGesture-based actions

Compatible con arrastrar y colocar y diseñadoresSupport drag-and-drop and designers
Otras consideracionesOther considerations Teclado en pantalla personalizadoCustom onscreen keyboard

GestosGestures

Movimientos de proporcionan a los usuarios un acceso directo a los comandos que en caso contrario, podrían requerir una interacción más complicada.Gestures provide users a shortcut to commands that might otherwise require a more complicated interaction. Consulte las instrucciones de Windows en gestos táctiles para las aplicaciones de escritorioy siga estas instrucciones para los gestos mayoría, incluidos los gestos simples como panorámica y zoom.Refer to the Windows guidelines on common touch gestures for Desktop Applications, and follow this guidance for most gestures, including simple gestures such as panning and zooming.