Patrones compuestos para Visual Studio
Los patrones compuestos combinan elementos de interacción y diseño en configuraciones distintas. Algunos de los patrones compuestos más importantes de Visual Studio con respecto a la coherencia incluyen:
Visualización de datos
Los gráficos son una manera visual de agregar y visualizar datos con el fin de mejorar la toma de decisiones. Pueden ayudar a los usuarios a enfrentarse a una gran cantidad de datos, pero poco significado ver lo que merece atención y lo que podría necesitar una acción.
El usuario se beneficiará de un gráfico si se cumple alguna de las condiciones siguientes:
¿El gráfico ayudará a los usuarios a identificar las tareas en las que pueden actuar?
¿El gráfico permitirá a los usuarios predecir las consecuencias de los posibles cambios?
¿El gráfico ayudará a los usuarios a detectar tendencias e identificar patrones?
¿El gráfico permitirá a los usuarios tomar mejores decisiones?
¿Ayudará el gráfico a responder a una pregunta específica que los usuarios puedan tener en el contexto dado?
Reglas generales para gráficos
Etiquetar claramente los datos. Las ilustraciones sin explicación son simplemente imágenes bonitas.
Inicie ejes en cero para evitar proporciones de esquela. La longitud de línea y el tamaño de la barra son indicaciones visuales importantes para comprender las relaciones entre los puntos de datos.
Crear gráficos, no infografías. Las infografías son representaciones artísticas de los datos y su objetivo principal es contar historias visuales. Los gráficos pueden (y deben) ser visualmente atractivos, pero dejar que los datos hablen por sí mismos.
Evite el skeumorphism, gráficos de barras pictoriales, marcas hash de contraste y otros toques de infografía.
No utilice efectos 3D como elemento decorativo. Úselos solo si realmente son integrales para la capacidad del usuario de comprender la información.
Evite usar varias líneas y rellenos, ya que más de dos colores pueden dificultar la lectura e interpretación correcta de este tipo de gráfico.
No use un gráfico (ni ninguna ilustración) como único medio para comprender un concepto o interactuar con los datos. Esto presenta dificultades para los usuarios con discapacidades visuales.
No use gráficos como elementos decorativos o gratuitos en una página. Es decir, si un gráfico no agrega ningún valor ni ayuda a los usuarios a resolver un problema, no lo use.
Tipos de gráfico
Los tipos de gráficos usados en Visual Studio incluyen gráficos de barras, gráficos de líneas, un gráfico circular modificado conocido como gráfico de anillos o "gráfico de anillos", escalas de tiempo, gráficos de dispersión (también denominados "gráficos de clúster") y diagramas de Gantt. Cada tipo de gráfico es útil para comunicar un tipo de información diferente.
Otras consideraciones sobre gráficos
Color
Hay una paleta específica de colores de gráfico definidos para su uso en Visual Studio. La paleta es accesible para los principales tipos de daltonismo, y los colores se pueden diferenciar incluso cuando se usan como segmentos de color muy estrechos. Puede usar estos colores en cualquier combinación para cualquier tipo de gráfico o gráfico en la interfaz de usuario. No es necesario usar los siete colores si no necesita tantos colores distintos. Estos colores no se diseñaron para usarse con ningún elemento en primer plano, por lo que no colocan texto ni glifos encima de estos colores. Estos tonos deben codificarse de forma rígida y exponerse a la personalización del usuario en Opciones de herramientas > (vea Exponer colores para los usuarios finales).
| Muestra | Hex | RGB |
|---|---|---|
 |
#71B252 | 113,178,82 |
 |
#BF3F00 | 191,63,0 |
 |
#FCB714 | 252,183,20 |
 |
#903F8B | 144,63,139 |
 |
#117AD1 | 17,122,209 |
 |
#79D7F2 | 121,215,242 |
 |
#B5B5B5 | 181,181,181 |
Interfaz de usuario en el objeto y inspección
En esta sección se proporciona contexto para examinar, también conocido como vista de inspección de código, un tipo de interfaz de usuario en objeto única para Visual Studio.
La interfaz de usuario en el objeto debe proporcionar al usuario más información o interactividad sin destraer de su tarea principal.
El patrón principal para la interfaz de usuario en objetos en Visual Studio se conoce como "información en el punto de atención".
La interfaz de usuario en objeto de Visual Studio es insertada o flotante y duradera o transitoria.
La vista de inspección de código, un tipo de interfaz de usuario en objeto en Visual Studio, es insertada y duradera.
CodeLens, un tipo de interfaz de usuario en objeto en Visual Studio, es flotante y transitorio
Comprender cómo funciona un fragmento de código o buscar detalles sobre ese código, a menudo requiere que un desarrollador cambie el contexto y vaya a otro contenido u otra ventana. Estos cambios de contexto pueden ser perjudiciales, ya que los usuarios pueden perder el foco en su tarea original si dejan su ventana principal. Además, volver a conseguir ese contexto original puede ser difícil, especialmente si cambiar las ventanas hizo que el código original se oscurezca por otra interfaz de usuario.
La interfaz de usuario en el objeto sigue un patrón denominado "información en el punto de atención". Estos mensajes, ventanas emergentes y cuadros de diálogo proporcionan a los usuarios información adicional relevante que agrega aclaración o interactividad sin perder el foco en su tarea principal. Algunos ejemplos de la interfaz de usuario en el objeto incluyen ventanas emergentes que aparecen cuando un usuario mantiene el puntero sobre un icono en el área de notificación, el subrayado ondulado rojo bajo una palabra mal escrita y la vista de inspección introducida en Visual Studio 2013.
Puntos de decisión
En Visual Studio, hay varias maneras de usar este patrón de información en el momento de la atención. Elegir el mecanismo adecuado e implementarlo de forma coherente y predecible es esencial para la experiencia general. De lo contrario, los usuarios pueden presentar una experiencia confusa o incoherente que descuente el foco del propio contenido.
Relaciones entre contenido maestro y detallado
La información en el punto de atención se usa para mostrar una relación entre el contenido en el que se centra el usuario (el contenido "maestro") y el contenido relacionado adicional (el contenido "detalle"). En este patrón, el contenido detallado está claramente relacionado con el contenido con el que está trabajando el usuario y se puede mostrar cerca del contenido maestro. La información complementaria o la información que no se puede resumir sin sobrecargar el contenido maestro debe seguir otro patrón, como una ventana de herramientas.
Muestre siempre el contenido de detalle cerca del contenido maestro.
Asegúrese siempre de que el contenido detallado todavía permite a un usuario centrarse en el contenido maestro. A menudo, la mejor manera de lograr esto es representar el contenido de detalle lo más cerca posible del contenido maestro. Esto se puede hacer mediante la representación del contenido de detalles en una ventana emergente junto al contenido maestro o mediante la representación del contenido detallado en línea debajo del contenido maestro.
Nunca use información en el punto de atención que quita al usuario del contenido maestro. Si los usuarios necesitan ver el contenido detallado por separado, exponga una acción explícita que permita al usuario hacerlo.
Detalles de diseño
Una vez que haya determinado que la interfaz de usuario en el objeto es la opción correcta, hay cuatro consideraciones de diseño principales:
Persistencia: ¿se espera que el contenido sea duradero o transitorio? ¿Los usuarios querrán mantener la información visible para hacer referencia o interactuar con ellos? O bien, ¿los usuarios querrán echar un vistazo rápidamente a la información y, a continuación, continuar con su tarea principal?
Tipo de contenido: ¿el contenido será informativo, accionable o de navegación? ¿Necesita el usuario detalles adicionales sobre el contenido maestro? ¿Necesita el usuario completar una tarea que afecte al contenido maestro? ¿O es necesario que el usuario se dirija a otro recurso?
Tipo de indicador: ¿tiene sentido un indicador ambiental? ¿Se puede resumir la información de una manera útil y mostrar sin sobrecargar el contenido maestro?
Gestos: ¿qué gestos se usarán para invocar y descartar la interfaz de usuario? ¿Cómo mostrará el usuario el contenido detallado y lo enviará? ¿Hay valor en agregar un gesto como anclar para cambiar entre estados transitorios y duraderos?
Cada uno de estos cuatro puntos de decisión tendrá un impacto en los componentes principales de la interfaz de usuario en objetos.
Componentes de la interfaz de usuario en objetos
Tipo contenedor (presentador de contenido)
Flotante
Insertado
Content type
Informativo: datos que pueden ser estáticos o dinámicos
Accionable: comandos que cambian el contenido maestro
Navegación: vínculos que llevan al usuario a otra ventana o aplicación, como MSDN
Gestos
Invocación
Despido
Fijación
Otras interacciones
Modelo de persistencia y confirmación
Transitorio
Duradero
Automático
A petición
Indicadores ambientales (opcional)
Subrayado de subrayado ondulado
Icono de etiqueta inteligente
Otros indicadores ambientales
Tipo contenedor (presentador de contenido)
Hay dos opciones principales disponibles para presentar contenido en el punto de atención:
Insertado: un moderador insertado, como la vista de inspección que se introdujo en el Editor de código de Visual Studio 2013, hace espacio para nuevo contenido cambiando el contenido existente.
Prefiere moderadores insertados si espera que los usuarios quieran dedicar una cantidad significativa de tiempo a hacer referencia o interactuar con el contenido que presente.
Evite los presentadores insertados si espera que los usuarios quieran echar un vistazo a la información que presenta y, a continuación, continúe con su tarea principal con una interrupción mínima.
Flotante: un moderador flotante se coloca lo más cerca posible del contenido seleccionado, pero no modifica el diseño del contenido existente. Se pueden emplear varias estrategias, como mostrar un panel de contenido flotante sobre el espacio en blanco más cercano disponible para el símbolo seleccionado.
Prefiere los presentadores flotantes si espera que los usuarios quieran echar un vistazo a la información que presenta y, después, continuar con su tarea principal con una interrupción mínima.
Evite los moderadores flotantes si espera que los usuarios quieran dedicar una cantidad significativa de tiempo a hacer referencia o interactuar con el contenido que presente.
Content type
Hay tres tipos principales de contenido que se pueden mostrar dentro de cualquier contenedor de interfaz de usuario en objeto. Se puede mostrar cualquier combinación de estos tipos de información. Los tres tipos son:
Informativo: la mayoría de los contenedores de interfaz de usuario en objetos mostrarán algún tipo de contenido informativo. El contenido puede representar información sobre el estado actual del entorno o puede representar información sobre un posible estado futuro del entorno. Por ejemplo, podría usarse para mostrar el efecto de un comando determinado, como una refactorización, en el código existente.
Use siempre la representación canónica de la información que se muestra. Por ejemplo, el código debe tener un aspecto similar al código, completar con el resaltado de sintaxis y respetar cualquier fuente y otras configuraciones de entorno que haya establecido el usuario.
Considere siempre la posibilidad de admitir cualquier acción sobre el contenido informativo que sería posible si esa misma información se presenta como contenido maestro. Por ejemplo, si presenta código existente dentro de un contenedor de interfaz de usuario en objeto, considere encarecidamente la posibilidad de examinar y modificar ese código.
Considere siempre el uso de un color de fondo diferente si presenta contenido informativo que representa un posible estado futuro.
Accionable: algunos contenedores de interfaz de usuario en objetos proporcionarán la capacidad de realizar alguna acción sobre el contenido maestro, como realizar una operación de refactorización.
Coloque siempre los comandos accionables por separado del contenido informativo.
Habilite y deshabilite siempre las acciones cuando corresponda.
Consulte siempre las directrices estándar para representar comandos dentro de los cuadros de diálogo.
Mantenga siempre el número de acciones expuestas en un contenedor de interfaz de usuario en objeto a un mínimo absoluto. La interacción con la interfaz de usuario en el objeto debe ser una experiencia ligera y rápida. El usuario no debe tener que gastar energía en la administración del propio contenedor de interfaz de usuario en objeto.
Tenga en cuenta siempre cómo y cuándo se cerrará o descartará un contenedor de interfaz de usuario en objeto. Como procedimiento recomendado, cualquier acción que finalice el cuadro de diálogo entre el contenido maestro y de detalles también debe cerrar el contenedor de la interfaz de usuario en el objeto cuando se invoca esa acción.
Navegación: algunos contenedores de interfaz de usuario en objetos incluyen vínculos que llevan al usuario a otra ventana o aplicación, como abrir un artículo de MSDN en el explorador web del usuario.
Antepone siempre cualquier vínculo de navegación con "Abrir" para que los usuarios no se sorprendan al navegar a algún otro contenido.
Siempre separe los vínculos de navegación de los vínculos accionables.
Indicadores ambientales (opcional)
Los indicadores ambientales pueden ser sutiles, incluido el texto presentado en un color contrastante del resto del código, o obvio, incluidos los símbolos de tics, como subrayados ondulados y iconos de etiquetas inteligentes. Los indicadores ambientales comunican la disponibilidad de información adicional relevante. Idealmente, proporcionan información útil incluso sin necesidad de que el usuario interactúe con ellos.
Coloque siempre un indicador ambiental para que no distraiga ni sobresuma al usuario. Si es imposible colocar un indicador ambiental de tal manera, considere otra solución.
Coloque siempre el indicador ambiente lo más cerca posible del contenido al que está relacionado.
Intente crear siempre un indicador que resuma la información que pone a disposición. 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 piense en alguna otra manera de resumir los datos.
- En los casos en los que los datos de un indicador no siempre se pueden calcular y mostrar, considere inmediatamente la posibilidad de proporcionar comentarios progresivos a medida que se calculan los valores. Por ejemplo, considere la posibilidad de animar los cambios que reflejan las actualizaciones de los datos disponibles, de forma similar a la forma en que aumenta el icono activo de correo electrónico en Windows Teléfono se actualiza a medida que aumenta el número de correos electrónicos no leídos.
Nunca agregue más indicadores de los que un usuario pueda tomar razonablemente para un fragmento de contenido determinado. Los indicadores ambientales deben ser útiles sin necesidad de ninguna interacción del usuario. Los indicadores pierden su ambiente si requieren desbordamiento y otros controles de gestión para verlos.
Gestos
Un aspecto clave de permitir al usuario mantener el foco en el contenido maestro es admitir los gestos correctos para abrir y descartar el contenido de detalles adicional.
Requerir siempre al usuario que realice algún gesto explícito para abrir el contenido adicional. Los gestos abiertos comunes incluyen:
Mantener el puntero: información sobre herramientas o contenido informativo no interactivo
Comando explícito: moderador insertado
Haga doble clic en el indicador ambiental: Ventana emergente de CodeLens
Descarte siempre el contenido de detalle cada vez que el usuario presione la tecla Esc.
Tenga en cuenta siempre el contexto de la interfaz de usuario en el objeto. En el caso de los moderadores de contenido que permiten la interacción dentro del contenedor, considere detenidamente si desea mostrar información adicional sobre el mouse, lo que es probable que sea perjudicial para el flujo de trabajo del usuario.
Nunca se muestra el contenido al mantener el puntero que parece ser editable o invita a la interacción del usuario. Este comportamiento puede frustrar a los usuarios si intentan mover el cursor sobre el contenido de detalles, ya que el comportamiento estándar de una información sobre herramientas es descartar inmediatamente cuando el cursor ya no está sobre el contenido maestro que lo generó.
Modelos de selección
Un modelo de selección es el mecanismo utilizado para indicar y confirmar operaciones en uno o varios objetos de interés dentro de la interfaz de usuario. En este tema se describen los patrones de interacción de selección en los editores de documentos de Visual Studio: editores de texto, superficies de diseño y superficies de modelado.
Los usuarios deben tener una manera de indicar a Visual Studio en qué están trabajando y Visual Studio debe responder de forma predecible con los comentarios a los usuarios sobre lo que funciona. Las diferencias o una comunicación incorrecta entre el usuario y la interfaz de usuario pueden dar lugar a que el usuario no note una acción, lo que puede tener consecuencias imprevistas. A menudo, el error pasa desapercibido hasta que el usuario ve que falta algo o ha cambiado. Por lo tanto, los modelos de selección son una de las partes más críticas del diseño de la interfaz de usuario. Aunque los modelos de selección en Visual Studio son coherentes con Windows, hay pequeñas variaciones.
En Visual Studio, como en Windows, los modelos de selección difieren en función del contexto en el que se produzca la interacción. Las selecciones pueden producirse en cuatro tipos de objetos:
Texto
Objetos gráficos
Listas y árboles
Cuestionarios
Dentro de estos objetos, hay tres tipos de selecciones:
Contiguos
Desunido
Region
Ámbito
El componente más importante de la selección es asegurarse de que el usuario sabe en qué ventana está trabajando (activación) y dónde se encuentra el foco (selección). Visual Studio amplía la funcionalidad de administración de ventanas en Windows, pero el esquema de activación es el mismo: interactuar con una ventana lleva el foco a la ventana. Visual Studio tiene dos indicadores para la activación: uno para las ventanas de documento y otro para las ventanas de herramientas.
En el caso de las ventanas de documento, la ventana activa se indica mediante una pestaña de la ventana del documento que viene al frente y cambia su color de fondo:
Selección de pestañas activas
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:
Ventana de herramientas activa que muestra la selección principal de un nodo
Ventana de herramientas inactiva, en la que se muestra la selección latente del nodo
Una vez que una ventana está activa, su enfoque se indica según los modelos de selección descritos en esta sección de las directrices.
Context
Visual Studio se diseñó para conservar un concepto sólido de contexto y realizar un seguimiento de dónde está trabajando el usuario. Solo hay una ventana activa, tanto si es una herramienta como una ventana de documento. Sin embargo, la ventana del documento más arriba siempre conserva una selección latente. Aunque el foco puede estar en una ventana de herramientas, la ventana del documento que estaba activa por última vez muestra una selección, incluso en un estado inactivo. Esto se hace para conservar el contexto del usuario en el documento que estaba editando, mostrándoles que Visual Studio ha conservado su estado para que pueda devolver y desplazarse sin problemas entre ventanas de herramientas y ventanas de documento.
Selección de texto
Los editores de Visual Studio que son estrictamente textuales, como el editor de texto integrado, usan el mismo modelo de selección de texto y la misma apariencia descritos en la página Mouse y Punteros de las Directrices de interacción de la experiencia del usuario de Windows en MSDN. El foco de entrada en el editor de texto se indica mediante una barra vertical denominada punto de inserción. El punto de inserción es un solo píxel grueso y coloreado como el inverso de lo que aparezca detrás de él. Parpadea según la velocidad establecida por el valor de frecuencia de parpadeo del cursor en la pestaña Velocidad del applet teclado en Panel de control.
Selección contigua y desenlazación
La selección dentro del editor de texto solo es contigua. No se permiten selecciones de texto separados, pero deben abordarse en editores gráficos de objetos. Cuando el puntero del mouse del usuario está sobre un área de texto, el cursor cambia a un haz I. Un solo clic coloca el punto de inserción en el editor de texto en la ubicación de clic. Al mantener presionado el botón del mouse, se inicia un resaltado de selección y se suelta el botón del mouse finaliza el resaltado de selección.
Selección de región (selección de cuadro)
Visual Studio admite selecciones de región en el editor de texto y se denomina selección de cuadro. La selección de cuadros permite al usuario seleccionar una región de texto que no siga la secuencia de texto normal. Al igual que con la selección de texto estándar, la selección debe ser contigua. La selección de cuadro se inicia manteniendo presionada la tecla Alt mientras se arrastra con el mouse. La selección de cuadro también se puede iniciar manteniendo presionadas las teclas Alt y Mayús mientras usa las teclas de dirección para indicar la región de selección. La selección de cuadro usa el resaltado de selección normal y muestra el cursor de punto de inserción parpadeando al final del área de selección.
Selección de región (cuadro) en Visual Studio
Apariencia de la selección de texto
Los colores usados para la selección activa e inactiva en el editor se pueden personalizar. Para personalizar la apariencia visual del editor, un usuario puede ir a Opciones de herramientas> y, a continuación, buscar en Fuentes del entorno > y Editor de texto Colores>.
Selección gráfica
Interacción
La selección gráfica de objetos puede ser compleja y depende de varios factores:
Modelo de selección principal del editor. Los editores que contienen objetos gráficos también se pueden usar para editar texto o cuadrículas. Por ejemplo, el editor podría ser un editor basado en texto que también admita la colocación de objetos gráficos, como el diseñador XAML de Visual Studio. Admitir varios tipos de objetos puede afectar a cómo el usuario selecciona grupos formados por diferentes tipos de objetos.
Compatibilidad con estados de selección principal y secundario. Un editor puede proporcionar estados de selección principal y secundario para que los objetos se puedan editar al unísono, alinearse entre sí, cambiar el tamaño juntos, etc.
Compatibilidad con la edición local. Los editores también pueden permitir que se edite el contenido de sus objetos gráficos. Por ejemplo, una forma de rectángulo también puede contener texto en el interior que el usuario puede cambiar. Además, ese texto podría centrarse o justificarse. La edición local implica un nivel más detallado de interacción del usuario y, por tanto, requiere un conjunto adecuado de indicaciones visuales para presentar información de estado al usuario.
Interacción del mouse
| Entrada | Resultado |
|---|---|
| Haga clic en un objeto no seleccionado. | Selecciona el objeto y muestra un identificador de línea discontinua y selección, si el objeto se puede cambiar de tamaño. |
| Haga clic en un objeto seleccionado. | Activa la edición local si el objeto lo admite. Al hacer clic fuera del objeto, se desactiva el modo de edición local. |
| Haga doble clic en un objeto. | Abre el código subyacente al objeto para su edición y puede insertar un controlador de eventos predeterminado, si procede. |
| Apuntar a un objeto | Cambia el puntero al cursor de movimiento. El aspecto del objeto, como su luminosidad o color, puede cambiar. |
| Apuntar a un identificador de selección | Cambia el puntero al cursor de cambio de tamaño. En el caso de los objetos que admiten la rotación, algunos identificadores de selección pueden cambiar el puntero a un cursor de rotación, ya que el puntero se coloca de forma diferente (por ejemplo, se mueve más lejos) con respecto al identificador de selección. |
| Arrastrar | Incluso si el objeto no está seleccionado previamente, cambia el puntero al cursor de movimiento y mueve el objeto. |
| El editor pierde el foco | Desactiva el modo de edición local, aunque el objeto conserva el contenido y la apariencia que tenía durante su última operación o estado de selección. |
| Selección de objetos | Indicado por un borde, una línea de puntos u otro tratamiento visualmente distinto para resaltar el límite del objeto. |
| Cambiar el tamaño de un objeto seleccionado | Indicado por identificadores de selección. Un objeto redimensionable tiene ocho identificadores, que representan cada dirección en la que se puede cambiar el tamaño. Se pueden usar menos identificadores si el objeto solo se puede cambiar de tamaño en determinadas direcciones. Cuando el usuario cambia el tamaño de un objeto hasta donde ocho identificadores no serían interactivos, se pueden usar cuatro identificadores. Los tamaños de identificador deben estar vinculados al borde de la ventana y a las métricas perimetrales con la función de API GetSystemMetrics para ajustar el tamaño en proporción a la resolución de visualización.  |
| Girar un objeto seleccionado |  |
Interacción con el teclado
| Entrada | Resultado |
|---|---|
| Pestaña | Mueve el indicador de foco entre el orden lógico de los objetos del editor. Puede ser de izquierda a derecha o de arriba abajo en función del valor de propiedad TabIndex (o equivalente), el orden de creación de objetos y el propósito general del editor. Mayús+Tab invierte la dirección del indicador de foco. |
| Barra espaciadora | Activa el modo de movimiento panorámico mientras se mantiene la pulsación de tecla. Se requiere una entrada adicional del mouse para desplazar la posición de la ventanilla. |
| Ctrl+Barra espaciadora | Activa el modo de zoom mientras se mantiene la pulsación de tecla. Se requiere una entrada adicional del mouse para aumentar y disminuir el factor de zoom. |
| Ctrl+Alt+Signo menos | Disminuye el factor de zoom en un nivel. |
| Ctrl+Alt+Signo más | Aumenta el factor de zoom en un nivel. |
| Mayús O Ctrl | Agrega el objeto al grupo de selección. Ctrl también permite quitar objetos individualmente del grupo de selección. |
| Entrar | Realiza el comando predeterminado para el objeto (normalmente Abrir o Editar). |
| F2 | Activa la edición local para el objeto . |
| Teclas de dirección | Mueve los objetos seleccionados en la dirección de la tecla de flecha presionada, en incrementos pequeños (por ejemplo, 1 píxel a la vez) |
| Ctrl+teclas de dirección | Mueve los objetos seleccionados en la dirección de la tecla de flecha presionada, en incrementos más grandes (por ejemplo, 10 píxeles a la vez) |
| Mayús+teclas de dirección | Cambia el tamaño de los objetos seleccionados en la dirección respectiva, en incrementos pequeños (por ejemplo, 1 píxel a la vez) |
| Ctrl+Mayús+teclas de dirección | Cambia el tamaño de los objetos seleccionados en la dirección respectiva, en incrementos más grandes (por ejemplo, 10 píxeles a la vez) |
Cuando los usuarios editan controles en su lugar, es posible que tenga sentido que los objetos cambien automáticamente el tamaño con la entrada del usuario. Por ejemplo, si el usuario edita un control de etiqueta, la etiqueta debería crecer para mostrar el texto que el usuario acaba de escribir. Si esto no se hace, el usuario debe cambiar el tamaño del control manualmente después de editar el texto. Si el usuario tiene una gran cantidad de controles, esto se convierte en una tarea rote e improductiva.
Contenedores gráficos
En algunos casos, los editores gráficos proporcionan contenedores para otros objetos gráficos, como el control Panel de Windows Forms o el control Diseño de cuadrícula en el diseñador HTML. Si el editor proporciona contenedores para otros objetos gráficos, se debe usar el siguiente modelo de selección solo para el contenedor (los objetos del contenedor siguen el modelo estándar como se describe anteriormente):
| Entrada | Resultado |
|---|---|
| Haga clic con un solo clic en el contenedor. | Selecciona el objeto contenedor sin seleccionar directamente ninguno de los objetos contenidos. El contenedor se puede mover o cambiar de tamaño con la entrada estándar del mouse y el teclado (como se ha descrito anteriormente). Los objetos contenidos se mueven en relación con el contenedor, pero los objetos contenidos no se cambian de tamaño a menos que también estén seleccionados directamente. |
| Mantenga el puntero sobre la región de límite del contenedor. | Convierte el mouse en el cursor de movimiento, lo que indica que el contenedor se puede mover. |
| Arrastre la región de límites del contenedor. | Cambia el mouse al cursor de movimiento y mueve el contenedor (y los objetos contenidos dentro). El contenedor no se puede mover sin seleccionarlo primero con un solo clic. |
| Haga clic con un solo clic en un objeto dentro del contenedor. | Anula la selección del contenedor (si está seleccionado) y selecciona solo el objeto en el que se hace clic. |
| Mayús+clic o Ctrl+clic en un objeto contenido o contenedor | Agrega el objeto al que se hace clic en un grupo de selección o selección existente. Si el objeto en el que se hace clic ya es miembro del grupo de selección, se quita del grupo de selección. |
Los objetos contenidos deben cumplir el modelo de selección básico, tal como se describe en la sección anterior. A partir de las pruebas de facilidad de uso del diseñador de Windows Forms, los usuarios esperaban acceso sin problemas a los objetos contenidos sin pasos intermedios (impuesto por el objeto de contención).
Selecciones de regiones y separados
Los editores gráficos de objetos deben admitir selecciones no separadas. Tenga en cuenta que este gráfico no muestra la apariencia del control para Visual Studio. Consulte Apariencia de selección gráfica de objetos para obtener especificaciones visuales detalladas.
Selección desenlazación
Los editores gráficos también deben proporcionar selecciones de región con un indicador de selección de tipo de marca. Si el editor gráfico admite otros tipos de objetos (como texto), es posible que las selecciones de región no sean posibles en función de las restricciones de esos otros tipos de objetos.
Selección de marquesina
Selecciones principales y secundarias
Algunos editores de objetos gráficos permiten al usuario editar o alinear objetos en grupos. En este caso, es necesario introducir el concepto de selecciones primarias y secundarias. La selección principal es el objeto al que responden todos los demás objetos para las operaciones de grupo. El objeto que el usuario selecciona primero se convierte en el control principal y las selecciones posteriores se convierten en las selecciones secundarias. La selección principal tiene un tratamiento visual distinto de las selecciones secundarias para indicar qué objeto es principal:
Selección principal con dos selecciones secundarias
Apariencia de la selección de objetos gráficos
Los identificadores de selección son cuadrados dibujados en un patrón rectangular alrededor del rectángulo de selección del objeto. En el gráfico siguiente se muestran ejemplos de los distintos estados que un objeto gráfico puede tener con el control, el ajuste de tamaño y la apariencia de edición en contexto. El tamaño de los identificadores debe estar vinculado a las métricas perimetrales y de borde de la ventana mediante getSystemMetrics API.
| Estado | Aspecto | Detalles visuales |
|---|---|---|
| No seleccionado | Valor predeterminado |  |
| Selección principal | Redimensionable |  |
| Selección principal | No se puede cambiar el tamaño |  |
| Selección principal | Bloqueado |  |
| Selección secundaria | Redimensionable |  |
| Selección secundaria | No se puede cambiar el tamaño |  |
| Selección secundaria | Bloqueado |  |
| Interfaz de usuario activa | Valor predeterminado |  |
Ver modelos de selección
Vista de árbol
La selección en una vista de árbol se muestra con un resaltado sencillo. Si el usuario hace clic en un nombre de nodo o en un icono de nodo, el nodo se selecciona. Los glifos triangulares a la izquierda del nodo expanden o contraen 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.
Vista de árbol típica en Visual Studio
Las vistas de árbol pueden admitir selecciones contiguas e incontegidas, incluso en varios niveles del árbol. Se deben realizar selecciones contiguas o separadas en nodos de árbol visibles. Si se contrae un nodo, se pierde la selección desenlazada y el nodo que se contrajo obtiene la selección. De este modo, el usuario puede ver los nodos que se verán afectados por una operación. Cuando se contraen los nodos, no está claro qué nodos podrían verse afectados.
Cuando se selecciona un nodo primario, la operación debe aplicarse al elemento primario, aunque puede haber casos en los que tenga sentido que una operación se aplique al elemento primario y a todos sus elementos secundarios. En este caso, proporcione una interfaz de usuario adicional durante la operación, como una casilla o un cuadro de diálogo de confirmación para que la opción "aplicar a todos los elementos secundarios" sea explícita para el usuario.
Cambiar nombre
Si los nodos del árbol admiten cambiar el nombre, el cambio de nombre debe realizarse en su lugar. La operación local debe ser el estándar en todos los controles de árbol de Visual Studio. Proporcione un comando de cambio de nombre que active inmediatamente el modo de edición local, con la selección de texto que cubre todo el nombre del nodo, listo para aceptar la entrada del usuario. Si el nodo representa un archivo, el nombre de archivo debe contener la extensión . El resaltado de selección debe incluir solo el cuerpo del nombre de archivo y no la extensión.
| Entrada | Resultado |
|---|---|
| Escribir clave | Confirma la operación de cambio de nombre. |
| Tecla ESC | Cancela la operación de cambio de nombre. |
| Hacer clic fuera de la región de edición local | Confirma la operación de cambio de nombre. |
| Deshacer | Proporcionar fácil deshacer para cancelar la operación de cambio de nombre |
Selección dentro de listas y controles de cuadrícula
El concepto clave de la selección de lista es que se basa en filas, lo que significa que cuando se realiza una selección, se selecciona toda la fila como una unidad. Por el contrario, las cuadrículas pueden permitir que se seleccionen celdas específicas sin afectar a ningún otro aspecto de la fila. Las cuadrículas también pueden contener una jerarquía de filas anidadas (como en un TreeGrid) que permiten seleccionar y anular la selección de ramas completas de la jerarquía mediante la interacción con las filas primarias. La selección en listas se muestra mediante un color de resaltado simple en toda la fila de datos. El foco se muestra mediante un borde punteado de un solo píxel alrededor de la fila o celda editable actual (fila si todas las celdas son de solo lectura).
Nota:
El foco y la selección son conceptos diferentes. El foco es una indicación de qué elemento de interfaz de usuario está destinado a recibir la entrada no dirigida explícitamente a otro objeto, mientras que la selección hace referencia al estado de la inclusión de un objeto en un conjunto de objetos en los que se pueden realizar operaciones posteriores.
Las selecciones de las listas pueden ser contiguos, separados o región. Cuando se permiten varias selecciones, siempre se debe admitir la selección contigua y desenlazándose, mientras que la compatibilidad con las selecciones de región (cuadro) es opcional. Las selecciones de región se inician arrastrando en el espacio en blanco del cuerpo de la lista.
| Object | Número de selección |
|---|---|
| List | Contiguos |
| List | Desunido |
| List | Region |
Al hacer clic una vez en una lista, se selecciona la fila en la que se produjo el clic. Si el usuario hace clic en una celda de lista que admite la edición local, la celda también se activa inmediatamente para la edición local. De lo contrario, se selecciona inmediatamente toda la fila y se muestra un resaltado.
Arrastrar en el cuerpo de la lista hace una de las tres cosas:
Inicia una selección de región si la lista lo admite y el mouse está en espacio en blanco.
Inicia una operación de arrastrar y colocar si la celda de lista o fila admite ser un origen de arrastre
Selecciona la fila actual.
Edición local
Cuando se permite la edición local, hay dos modelos básicos: control de edición simple y selector de propiedades. Con un control de edición simple, el contenido está resaltado y listo para la entrada del usuario en cuanto se activa la edición local. Cuando se implementa un selector de propiedades, el botón que invoca el selector de propiedades se muestra una vez activado el modo de edición local y la selección actual no está resaltada. El botón del selector debe estar justificado a la derecha en la celda. Para ver ejemplos de edición en contexto, consulte la ventana Propiedades y la lista de tareas en Visual Studio.
Compatibilidad con el teclado
La compatibilidad con el teclado para la selección en listas y cuadrículas sigue las convenciones estándar de Windows:
Las teclas de dirección navegan por la lista, seleccionando cada fila o celda a medida que se mueve el foco.
Mayús + flecha realiza una selección contigua en la dirección de las teclas de dirección.
Ctrl + flecha seguida de alternancias de barra espaciadora entre agregar y quitar elementos de lista de la selección, creando una selección desenlazada.
En el caso de las cuadrículas que contienen jerarquías anidadas, la tecla flecha derecha expande una fila primaria y la tecla flecha izquierda contrae una.
La tecla Tab mueve el foco entre las celdas de la fila actual si se pueden editar las celdas.
La tecla Entrar realiza el comando predeterminado en el elemento de la lista (a menudo Abrir).
La tecla F2 activa la edición local para la celda seleccionada actualmente.
Persistencia y guardado de la configuración
Aunque cada componente de software de Visual Studio suele ser responsable de su propio estado y persistencia, Visual Studio guarda automáticamente la configuración en algunos casos, como con tamaños de ventana y posiciones. La tabla siguiente es una combinación de configuraciones guardadas automáticamente y configuraciones que requieren que se tome una acción explícita de usuario o programada.
| Object | Qué guardar | Cuándo guardar | Dónde guardar |
|---|---|---|---|
| Objeto seleccionable (por ejemplo, una línea de código) | Un punto de interrupción en una línea de código Acceso directo de usuario asociado a la línea de código |
Cuando se guarda el proyecto | Archivo de opciones de usuario (.suo) para el proyecto |
| Diálogo | Ubicación del cuadro de diálogo, si se había movido Vista que el usuario usó por última vez en el cuadro de diálogo |
Cuando se cierra el cuadro de diálogo Cuando finaliza la sesión de Visual Studio |
En memoria Registro en HKEY_Current_User |
| Ventana | Tamaño y ubicación de la ventana | Cuando se cierra la ventana Cuando cambia el modo de Visual Studio Cuando finaliza la sesión de Visual Studio |
Archivo de opciones de usuario (.suo) para el proyecto Archivo de opciones personalizado para la configuración de la ventana |
| Documento | Selección actual en el documento Vista del documento Los últimos lugares visitados por el usuario |
Cuando se guarda el documento | Archivo de opciones de usuario (.suo) para el proyecto |
| Proyecto | Referencias a archivos Referencias a directorios en disco Referencias a otro software Componentes Información de estado sobre el propio proyecto |
Cuando se guarda el proyecto | El archivo del proyecto |
| Solución | Referencias a proyectos Referencias a archivos |
Cuando se guarda el proyecto o la solución | El archivo de solución (.sln) |
| Configuración en Opciones de herramientas > | Personalizaciones de teclado Personalizaciones de la barra de herramientas Esquemas de colores |
Cuando se cierra el cuadro de diálogo Opciones de herramientas > Cuando finaliza la sesión de Visual Studio |
Registro en HKEY_Current_User |
Lo que hace el usuario y, cuando lo hace, determina si se guarda una configuración en la memoria (durante la sesión), se guarda en el disco (en sesiones como configuración del Registro), como parte del propio archivo de proyecto o solución, como parte del archivo de opciones de solución (.suo) o como un archivo de configuración personalizado que solo ese componente de software conoce. En la tabla anterior se muestran varios eventos en los que se puede guardar la configuración. Sin embargo, hay otras ocasiones en las que es posible que quiera guardar el estado:
Cuando el usuario cambia la ubicación dentro de un cuadro de diálogo o ventana
Cuando el usuario transfiere el foco a otra ventana
Cuando el usuario cambia de diseño al modo de depuración
Cuando el usuario cierra la sesión de su cuenta
Cuando el equipo entra en hibernación o se apaga
Cuando el equipo o disco duro está a punto de volver a formatearse y configurarse de nuevo
Configuraciones de ventana
Una configuración de ventana es la presentación básica del entorno de desarrollo: es un esquema que consta de la lista de ventanas de herramientas presentes y la forma en que se organizan. Para las ventanas administradas por el IDE (ventanas IDE), la información de diseño se conserva por usuario, por lo que cuando un usuario inicia el IDE, el diseño de la ventana aparece igual que cuando salió por última vez de Visual Studio. El estado y la posición de las ventanas del IDE se conservan en un archivo de opciones personalizado en formato XML. Las ventanas de herramientas creadas por paquetes cargados en el IDE conservan su información de estado en el Registro y pueden o no ser por usuario.
Diseños específicos del perfil
Cada perfil incluye diseños de ventana de herramientas, organizados de forma familiar con roles de desarrollador específicos (los desarrolladores de Visual C++ esperan ver el Explorador de soluciones en el lado izquierdo del IDE, mientras que los desarrolladores de C# esperan ver el Explorador de soluciones a la derecha). Los diseños de ventana específicos del perfil se cargan después de que el usuario elija un perfil al iniciarse. Un autor de paquetes debe determinar el diseño de ventana más adecuado para la experiencia del cliente, sabiendo que los cambios realizados por el usuario en la configuración de la ventana se conservarán.
Entrada táctil
Los usuarios usan cada vez más productos de desarrollo de Microsoft en dispositivos táctiles. Sin embargo, hay barreras que dificultan el uso de herramientas de desarrollo en dispositivos táctiles. Los usuarios esperarán que nuestros productos proporcionen una experiencia táctil confiable y precisa. La intención de estas directrices es informar a las decisiones sobre qué funcionalidades táctiles incorporar y fomentar una experiencia táctil coherente en Visual Studio y productos relacionados.
Niveles de experiencia
Los siguientes niveles de experiencia están diseñados para servir como guía para ayudar a los equipos a decidir qué funcionalidades táctiles ofrecer en función de su nivel deseado de interés de inversión en contacto.
La experiencia básica es para los equipos que desean proporcionar funcionalidades táctiles, por lo que no hay ningún punto muerto a lo largo de su trabajo.
La experiencia optimizada es para los equipos que desean proporcionar las funcionalidades táctiles más comunes (por ejemplo, las que normalmente están disponibles en las aplicaciones de explorador de Internet).
La experiencia con privilegios elevados es para los equipos que desean agregar funcionalidades como gestos u otras funcionalidades opcionales que pueden hacer que su aplicación sea fácil de usar.
| Experiencia básica | Experiencia optimizada | Experiencia con privilegios elevados | |
|---|---|---|---|
| Permite a los usuarios ... | Corrección de la lectura de código y solución o nivel de proyecto sin extremos fallidos | Realizar tareas de mantenimiento, refactorizaciones y navegación | Operar en una experiencia coherente, intuitiva y fluida con confianza |
| Editor | Movimiento panorámico táctil y selección Toque de barra de desplazamiento para saltar y presionar+arrastrar |
Reducir zoom Desplazamiento rápido Número de selección Fácil uso del menú contextual |
|
| Principales ventanas de herramientas | Desplazamiento panorámico de listas Selección de elementos Toque de barra de desplazamiento para saltar y presionar+arrastrar |
Desplazamiento y selección de elementos sencillos | |
| Basado en ventanas | Cambiar tamaño de ventana Acceso rápido |
||
| Documento bien | Navegación sencilla entre archivos abiertos | ||
| Gestos | Asegurarse de que los gestos comunes funcionan en el IDE | Acciones basadas en gestos Compatibilidad con diseñadores y arrastrar y colocar |
|
| Otras consideraciones | Teclado personalizado en pantalla |
Gestos
Los gestos proporcionan a los usuarios un acceso directo a los comandos que, de lo contrario, pueden requerir una interacción más complicada. Consulte las instrucciones de Windows sobre gestos táctiles comunes para aplicaciones de escritorio y siga estas instrucciones para la mayoría de los gestos, incluidos los gestos simples, como el movimiento panorámico y el zoom.