Animaciones para Visual Studio

Aspectos básicos de la animación

Procedimientos recomendados de animación en Visual Studio

Siga estas reglas para garantizar estilos de animación coherentes y fáciles de usar en el IDE de Visual Studio.

• Ser selectivo. Limite las animaciones a las que sirven fines específicos.

• El tiempo y la velocidad son importantes para garantizar que las transiciones se sientan rápidas y naturales:

  • Realiza transiciones animadas en un medio segundo (500 milisegundos).

  • Las animaciones que se producirían con frecuencia necesitan ser lo suficientemente rápidas como para que no interrumpan el flujo de trabajo del usuario. Observe la animación en un bucle y ajuste el tiempo hasta que se sienta correcto.

  • Las animaciones no deben ser tan rápidas o jarras que es difícil de entender, pero no tan lenta que hace que uno esté impaciente para que la transición finalice.

  • Use el tiempo de variable para resaltar la importancia. Por ejemplo, al navegar por una secuencia de elementos en un diagrama de clases, la velocidad a través de las transiciones entre los elementos se ralentiza para centrarse en elementos importantes.

• Utilice la aceleración gradual no lineal de un estado a otro, dando una sensación de calma y movimiento natural.

• Cuando sea posible, use una animación sutil al mantener el puntero para indicar elementos interactivos bajo el mouse.

• Si se basa en gran medida en animaciones en las características, proporcione un medio para desactivarlas localmente (para todas las características) como opción en el cuadro de diálogo Opciones de herramientas>.

• Solo se debe producir una animación a la vez y transmitir solo un fragmento de información. Más de un objeto que se mueve o intenta transmitir varias cosas puede resultar confusa.

• La sutileza es importante. En la mayoría de los casos, la animación no tiene que exigir atención al usuario para servir su propósito. Los cambios sutiles en el tiempo, la secuenciación y el comportamiento pueden afectar significativamente a la percepción y pueden marcar la diferencia entre una animación eficaz e ineficaz.

• Al usar la animación para atraer la atención a algo, asegúrese de que merece la pena interrumpir el entrenamiento de pensamiento del usuario.

• Al mostrar el progreso o el estado a través de la animación:

  • Deje de mostrar el movimiento del progreso cuando el proceso subyacente no avance.

  • Distinguir los procesos indeterminados de los procesos determinados.

  • Asegúrese de que una animación tiene estados de finalización y error identificables.

  • Minimice el uso de animaciones de efecto que muestran el estado y asegúrese de que tienen valor real proporcionando información adicional de uso real. Entre los ejemplos se incluyen cambios transitorios de estado y emergencias

La animación no es así:

• No use movimientos pequeños (movimiento en una superficie pequeña). Prefiere fundidos y cambios sobre los objetos móviles.

• No use animaciones que tienen lugar en una gran área de bienes raíces de pantalla. Independientemente del tamaño, este estilo de animación se distrae al usuario.

• No use animaciones no relacionadas con el objeto con el que el usuario se centra actualmente o interactúa con él.

• No use animaciones que requieran interacción del usuario para restablecer el estado, como forzar al usuario a responder a una notificación parpadeante para que deje de parpadear. Interactuar con ellos de cualquier manera debe ser suficiente para descartarlos.

Para obtener más información sobre las aplicaciones para estos procedimientos recomendados, consulte Patrones de animación.

Métricas de animación

• El sistema debe reaccionar visiblemente a los gestos del usuario en menos de 10 milisegundos.

• Las transiciones animadas no deben tardar más de 500 milisegundos en completarse.

• Una manera de compensar las transiciones que requieren tiempos más largos es separarla en dos partes. Por ejemplo, la primera parte de una animación podría ser el contenedor de contenido vacío (hasta 500 milisegundos), seguido del desvanecimiento del contenido en el contenedor (hasta 500 milisegundos).

• Para los tiempos de carga que se pueden calcular, se prefiere un indicador de progreso determinante (indicador de progreso realizado por porcentaje).

• Para los tiempos de carga que no se pueden calcular, es adecuado un indicador ocupado, como un cursor o una animación giratoria incrustada (carga o indicador de trabajo).

Animación como comunicador

En la interfaz de usuario de Visual Studio, la animación solo funciona como herramienta de comunicación. Se usa para comunicar una variedad de información, como los cambios estructurales en la interfaz de usuario (por ejemplo, cuando se abre o cierra un menú). La animación puede ayudar a visualizar el comportamiento dependiente del tiempo de los sistemas complejos, como la visualización del progreso de la instalación. Las animaciones también se pueden usar para atraer la atención con alertas y notificaciones.

Las animaciones de interfaz de usuario normalmente funcionan de cuatro maneras: visualizar, atraer la atención, simular y los indicadores de tiempo de progreso y respuesta.

Visualización

La animación puede resaltar la naturaleza tridimensional de los objetos y facilitar a los usuarios visualizar su estructura espacial. Para lograr esto, es posible que la animación tenga que girar el objeto en un círculo completo, girarlo lentamente hacia atrás y hacia delante, o acercar el objeto y aumentar ligeramente su tamaño para resaltar la sustitución o el foco.

Aunque los objetos tridimensionales se pueden mover con el control de usuario, el diseñador debe determinar de antemano (mediante programación o manualmente) cómo animar mejor un movimiento que proporcione una comprensión óptima del objeto. Después, el usuario puede activar esta animación programada colocando el cursor sobre el objeto, mientras que los movimientos controlados por el usuario requieren que el usuario comprenda cómo manipular el objeto. Limitar el movimiento a un solo eje o orientación a la vez; escale, gire o traduzca, pero no realice más de una simultáneamente.

La categoría Visualizar incluye los aspectos de los datos, las relaciones, el estado, la estructura, la secuencia y el tiempo.

Data

Ilustración de información compleja y variable:

• Desplazarse por visualizaciones de información como gráficos y gráficos

• Paso a paso por una secuencia, una visita guiada y una paginación

• Llamar a detalles, apuntar y resaltar información específica

• Superposición de detalles e información adicional sobre un elemento centrado

• Transformación de una representación estructural o organizativa a otra

• Representa los cambios a lo largo del tiempo mediante controles deslizantes de tiempo, volantes y volantes y controles de transporte (reproducir, detener y pausar)

Relaciones

• Ilustración de cómo los elementos se relacionan entre sí o con qué elementos se relacionan con un elemento determinado

• Mostrar jerarquías y relaciones de elementos primarios y secundarios o del mismo nivel

• Un elemento genera otro

• Un elemento minimiza a otro elemento

• Un elemento anclado a otro

Estado

• Actualizaciones de contenido

• Enfoque y selección del usuario

• Progreso

• Errores

Estructura

• Dinamización de la estructura en un nodo

• Reorientar

• Minimizar y maximizar, o expandir y contraer

Secuencia

• Secuencia de presentación

• Voltear imágenes

Hora

• Mostrar el cambio a lo largo del tiempo, el período de tiempo y la difusión de pantalla

• Mover a la basura, deshacer y rehacer

• Restauración del estado histórico

Atraer la atención

Si el objetivo es llamar la atención del usuario a un solo elemento de varios o alertar al usuario para actualizar la información, es posible que una animación sea adecuada. Por ejemplo, la página de inicio de la aplicación podría emplear un botón Introducción que se desliza hacia su lugar después de cargar la página.

Como regla, el último elemento móvil de la pantalla atrae la atención del usuario. En una serie de elementos animados, la atención del usuario seguirá el último objeto en movimiento.

Alerta

• Alertar al usuario, recibir atención, mostrar el progreso

• Mostrar que algo se está haciendo correctamente o incorrectamente o mostrar los cambios de progreso o progreso

• Preguntar a los usuarios durante una tarea, como buscar más información en línea o aprender sobre la tarea actual

Notificaciones

• Alertar al usuario sobre una condición de error

• Interrumpir al usuario para ver si desea asistir a otra cosa

• Informe suavemente al usuario de que un proceso se ha completado o cambiado, como cuando se completa una descarga.

Simular

Esta categoría abarca la física y la dimensionalidad.

• Ilustración de dónde proceden o dónde van a

• Expandir y contraer o abrir y cerrar

• Desplazamiento panorámico, desplazamiento y giros de página

• Apilamiento y ordenación z

• Carrusel y acordeón

• Voltear y girar la interfaz de usuario

Indicadores de respuesta y progreso

Los indicadores de progreso tienen un par de ventajas notables:

• Tanto los indicadores de progreso determinados como los indeterminados aseguran al usuario que el sistema no se ha bloqueado y está trabajando en el problema.

• Los indicadores determinados dan al usuario una idea de lo lejos que está avanzando la acción, así como una sensación de acercarse al final.

Patrones de animación

Las animaciones de Visual Studio están diseñadas para servir una función específica sin dificultar la productividad del usuario. Por lo general, las animaciones de Visual Studio deben ser:

• Pequeño y discreto

• Natural y realista

• Sutil y subduado

• Rápido y eficaz

• Relajado, no apresurado

En esta ilustración se muestran los estilos de animación que se recomiendan para Visual Studio. No se usan animaciones ni animaciones sutiles como atenuar o atenuar. Hay una aplicación limitada de animaciones de movimiento, como expandir y contraer, cambio de posición X e Y, y rotación.

Estilos de animación recomendados para Visual Studio

Aparecer y desaparecer

Con este patrón, un elemento cambia de visible a fuera de vista y atrás sin una animación de transición.

Mostrar y desaparecer la animación

Uso correcto

Elementos frescos de la interfaz de usuario que necesitan aparecer o desaparecer al instante para que el usuario no esté distraído ni obstruido. Además, las animaciones de movimiento lento pueden percibirse como un arrastre de rendimiento, que no se producirá con el estilo de aparición y desaparición.

Uso incorrecto

Los casos en los que la interfaz de usuario aparece tan abruptamente, el usuario no tiene idea de lo que ha ocurrido y agregar una animación le ayudará con la comprensión contextual.

Propiedades de animación

El retraso de tiempo suele ser cero segundos.

Ejemplos

• Ocultar automáticamente ventanas de herramientas

• Interfaz de usuario del editor activada por el teclado, como IntelliSense y ayuda de parámetros

• Expandir y contraer regiones de código

Atenuación y atenuación

Con este patrón, un elemento de interfaz de usuario pasa de no visible (0 % de opacidad) a visible (100 % de opacidad) o viceversa.

Animación de atenuación y atenuación

Uso correcto

Esta es la animación de interfaz de usuario más recomendada. Es un efecto sutil que agrega interés sin interrumpir el flujo. En algunos casos, es posible que el usuario no se dé cuenta de que hay una animación, percibiendo un sistema de interfaz de usuario fluido y fluido.

Propiedades de animación

• Opacidad inicial: 0 % para fundido, 100 % para atenuación

• Opacidad final: 100 % para fundido, 0 % para atenuación

• Duración: 200 milisegundos independientes, 100 milisegundos cuando se usan como parte de una secuencia de animación de combinación

• Estilo de aceleración: Sine InOut

Ejemplos

• Ocultar automáticamente ventanas de herramientas

• Menú abierto y cerrado

• Transiciones de pestañas en segundo plano y en primer plano

Combinación de colores de A a B

Con este patrón, un elemento de la interfaz de usuario cambia de color A a color B.

Animación de combinación de colores

Uso correcto

Como transición animada cuando un elemento de la interfaz de usuario cambia el color de un contexto o estado a otro.

Propiedades de animación

• Color inicial: específico de la interfaz de usuario

• Color final: específico de la interfaz de usuario

• Duración: 200 milisegundos independientes, 100 milisegundos cuando se usan como parte de una secuencia de animación de combinación

• Estilo de aceleración: Sine InOut

Ejemplos

• Transiciones de estado de ventana de documento (activa, última activa e inactiva)

• Transiciones de estado de ventana de herramientas (centradas y sin enfoque)

Expandir y contraer

Con este patrón, un elemento de interfaz de usuario se expande en las direcciones X, Y o ambas direcciones.

Expandir y contraer animación

Uso correcto

Como transición animada cuando un elemento de la interfaz de usuario cambia el tamaño de un contexto a otro.

Propiedades de animación

• Escala X: % o dimensión específica (en píxeles)

• Escala Y: % o dimensión específica (en píxeles)

• Posición de anclaje: generalmente superior izquierda (para idiomas de izquierda a derecha) o superior derecha (para idiomas de derecha a izquierda)

• Duración: 200 milisegundos independientes, 100 milisegundos cuando se usan como parte de una secuencia de animación de combinación

Ejemplos

• El panel Explorador de arquitectura expande y contrae

• El elemento página de inicio de Visual Studio 2017 se expande y contrae

Cambio de posición X-Y

Con este patrón, un elemento de la interfaz de usuario cambia su posición X o Y o ambas.

Animación de cambio de posición X-Y

Uso correcto

Como transición animada cuando un elemento de interfaz de usuario cambia la posición de un contexto a otro.

Propiedades de animación

• Posición X e Y inicial: específica de la interfaz de usuario

• Posición X e Y final: específica de la interfaz de usuario

• Ruta de movimiento: ninguno

• Duración: 200 milisegundos independientes, 100 milisegundos cuando se usan como parte de una secuencia de animación de combinación

• Estilo de aceleración: Sine InOut

Ejemplo

Reordenación de pestañas

Girar

Con este patrón, el elemento de la interfaz de usuario gira.

Animación de rotación de elementos de la interfaz de usuario

Uso correcto

Solo para el indicador de progreso giratorio indeterminado.

Propiedades de animación

• Grado de rotación: 360

• Centro de rotación: centro del objeto

• Duración: continua

Ejemplo

Indicador de progreso indeterminado (giro)

Acciones comunes de la interfaz de usuario de shell y animaciones recomendadas

Abrir la pestaña

Animación de apertura de tabulación

• Estilo: aparecen

• Duración: cero segundos

Cierre de tabulación

Animación de cierre de tabulación

• Estilo: Cambio de posición X

• Duración: 200 milisegundos

Reordenar tabulación

Animación de reordenación de tabulación

• Estilo: Cambio de posición X

• Duración: 200 milisegundos

Cerrar documento flotante

Cerrar animación de documento flotante

• Estilo: aparecen

• Duración: 200 milisegundos

Transición de estado de ventana

Animación de transición de estado de ventana

• Estilo: para ser coherente con otras ventanas, deje que el sistema operativo actual defina la animación de cierre del documento.

• Duración: 200 milisegundos

Menú abierto

Animación de apertura de menú

• Estilo: atenuación

• Duración: 200 milisegundos

Menú cerrar

Animación de cierre del menú

• Estilo: atenuación

• Duración: 200 milisegundos

Mostrar ventana de herramientas ocultar automáticamente

Ocultar automáticamente la ventana de herramientas mostrar animación

• Estilo: aparecen

• Duración: cero segundos