Una revisión del diseño interactivo de efectos de micromovimiento
La facilidad, el desplazamiento y el retraso (offset & delay) están relacionados principalmente con el tiempo. La crianza de los hijos se utiliza para explicar las relaciones entre elementos. Las transformaciones, los cambios de valor, las máscaras, las superposiciones y los clones desempeñan un papel a la hora de mejorar la continuidad del elemento en sí. El paralaje se utiliza principalmente para representar la relación jerárquica de elementos. Utilice oclusión, dimensiones, Dolly y Zoom para mostrar la relación entre los elementos y el espacio.
1. Liberación
Cuando se produce el movimiento, la velocidad de movimiento del elemento cambia de acuerdo con las expectativas del usuario. Rara vez existe un movimiento rectilíneo perfecto en la naturaleza y nada puede mantener perfectamente un movimiento uniforme. El efecto de cámara lenta puede hacer que los movimientos parezcan más naturales, en línea con la percepción del usuario y cumplir con sus expectativas.
Por ejemplo: Casi todos los efectos dinámicos de tu teléfono son de cámara lenta. ¿No parece cómodo y armonioso?
2. Compensación y retraso (compensación y retraso)
La compensación y el retraso se utilizan para escalonar el tiempo de movimiento de los elementos y representar la jerarquía y la relación entre los elementos. Los diseñadores utilizan tiempos de movimiento escalonados para hacer que la información o los elementos de la interfaz avancen y retrocedan en diferentes órdenes, utilizan movimientos desordenados obvios para insinuar que puede haber algunas diferencias entre la información del usuario y los elementos de la interfaz, o utilizan métodos desordenados para atraer la atención de los usuarios. Pero, en general, los diseñadores no deberían utilizar demasiados efectos de retardo porque, por ejemplo, la carga de la red en sí lleva tiempo, por lo que es mejor utilizar efectos de retardo sólo para servir a la tecnología.
Ejemplo: la página de detalles del producto del sitio web oficial de Apple se utiliza ampliamente.
3. Crianza de los hijos
Cuando los usuarios operan, los elementos con una relación padre-hijo ayudan a los usuarios a comprender mejor la relación jerárquica entre ellos y brindan una retroalimentación operativa más racional. Al igual que la animación anterior, el cuadro inferior se mueve hacia la izquierda y hacia la derecha, y el cuadro superior se mueve hacia la izquierda y hacia la derecha con el cuadro inferior y realiza su propio movimiento de escala al mismo tiempo. Esto constituye una relación padre-hijo. En pocas palabras, la relación padre-hijo significa que el valor de un atributo del elemento hijo cambia en cierta proporción con el valor de un parámetro de atributo del elemento padre.
Ejemplo: Google Allo, mantén presionada la tecla enviar y desliza hacia arriba, el tamaño de fuente del contenido enviado aumentará.
4. Transformación
Utilizar transformaciones para notificar al usuario que el estado o funcionalidad de un elemento ha cambiado. Las personas son sensibles a la deformación de los objetos físicos. Una deformación razonable puede transmitir de forma clara y eficiente la información correcta a los usuarios de la manera más eficiente y agradable. Tenga en cuenta que la deformación mencionada aquí no necesariamente tiene que ser tan grande como la animación anterior para considerarse deformación. Quizás un cambio de color o ángulo pueda lograr el efecto deseado.
Ejemplo: Conozca el efecto de animación de la selección del monto del patrocinio por parte de Live.
5. Cambios de valor
El efecto dinámico de los cambios numéricos continuos permite a los usuarios ver claramente si el valor está aumentando o disminuyendo. En este sentido, me gustaría utilizar dos animaciones para presentarlo. Como puede ver, ¿el efecto dinámico continuo de los cambios numéricos no le permitiría saber mejor si el número aumenta o disminuye? Imagínese, si este valor es su dinero en una aplicación de gestión financiera, entonces el aumento o disminución de este número es muy importante para el usuario.
Ejemplo: aplicación móvil JD Financial, el efecto de cambio numérico de las páginas "Activos totales" y "Baidiao".
6. Enmascaramiento
La animación de máscara es una opción para crear un efecto continuo cuando los elementos de la interfaz entran o salen. Este tipo de efecto dinámico parece ser relativamente común en Material Design, por lo que los socios que no han utilizado el sistema Android nativo pueden no estar familiarizados con él.
Ejemplo: Sistema Android nativo (por encima de 5.0 y por debajo de 7.0), 7.0 cancela la tecla de menú y la reemplaza con la operación anterior. )Haga clic en el botón de menú para que aparezca el efecto de animación del menú. El efecto de transición después de hacer clic en cada botón de función en la página de inicio de la aplicación móvil Meitu Xiuxiu.
7. Superposición
La superposición se utiliza para aclarar la relación posicional entre dos elementos independientes en una interfaz de diseño plana (sin espesor). En diseños planos donde no existe el concepto de grosor y profundidad, el uso de animación superpuesta puede aprovechar mejor el ya limitado espacio de la pantalla.
Ejemplo: utilice la tarjeta WeChat para eliminar el historial de chat.
8. Dim
Las máscaras son muy similares a los revestimientos, mostrando profundidad en el diseño gráfico sin el concepto de profundidad. No cubre completamente el elemento subyacente, pero generalmente mantiene el elemento subyacente visible a través de un desenfoque u oscurecimiento gaussiano.
Ejemplo: El efecto de vidrio esmerilado se puede ver en todas partes en iOS.
9. Clonación
Cuando se genera un elemento, expresa la relación continua entre elementos. Este tipo de animación puede mostrar claramente la ocurrencia y relación de uno o más eventos causados por una operación.
Ejemplo: El efecto de enviar mensajes a través de Apple Messages.
10. Parallax
Los elementos de la interfaz comienzan a moverse al mismo tiempo, pero la eficiencia del movimiento es diferente, formando un efecto de paralaje.
Los usuarios pueden utilizar el efecto de paralaje para mostrar la posición y la relación jerárquica de tres elementos en el espacio mientras se desplazan. Este efecto es muy hermoso y de alta calidad y puede hacer que toda la página se vea más vívida. A través de la naturaleza del paralaje, puedo guiar a los usuarios para que presten atención a dónde deben prestar atención. Los elementos con alta eficiencia de movimiento generalmente significan que están más cerca del usuario y son adecuados para transportar información más práctica e importante, mientras que los elementos con baja eficiencia de movimiento generalmente significan que están lejos del usuario y pueden no transportar ninguna información importante.
Por ejemplo: página de detalles del producto del sitio web oficial de Apple.
11. Dimensión
Los elementos de la interfaz plana son multidimensionales y se utilizan para expresar la posición y la relación jerárquica de cada elemento en el espacio. De hecho, la planitud no se ajusta a la lógica cognitiva humana (y ajustarse a la lógica cognitiva humana es casi el primer principio de usabilidad), por lo que la gente se ha esforzado mucho en que las interfaces planas expresen profundidad y grosor. Esta frase suena incómoda de leer, pero en realidad es cierta. Lo multidimensional rara vez se utiliza porque hay muchas formas de agregar profundidad (superposiciones, máscaras, sombras, etc.) y lo multidimensional es más costoso de desarrollar.
Ejemplos: el efecto de paso de página de iBooks y Flipboard, la animación de la barra de aplicaciones de Didi Taxi saliendo del estado de llamada.
12. Zoom y panorámica de la lente (Dolly & Zoom)
La panorámica y el zoom de la lente suenan como lo mismo, pero en realidad son completamente diferentes. El desplazamiento de lente es un término para la fotografía. El objeto permanece estacionario mientras la cámara se mueve, o cuando el objeto se mueve hacia adelante o hacia atrás, alejándose o acercándose a la lente. Hacer zoom significa que la lente y el sujeto permanecen estacionarios mientras el sujeto hace zoom. El efecto de panorámica y zoom de la lente muestra la relación entre los elementos y el espacio, y también puede transmitir una sensación de profundidad.
Ejemplo: la animación de desbloqueo de iOS es un efecto de panorámica de lente típico, mientras que la animación de hacer doble clic para ampliar una imagen es un efecto de zoom típico.
¿Me acuerdo? Un sitio web sobre recuerdos que te brindará una experiencia de navegación refrescante después de hacer clic en él.
Dos. Tiempo de respuesta y duración
El tiempo es el elemento central de los efectos dinámicos Al diseñar efectos dinámicos, se deben considerar dos tipos de tiempo: el tiempo de reacción y la duración.
1. Tiempo de respuesta
El tiempo de respuesta se refiere al intervalo de tiempo desde la operación del usuario hasta la retroalimentación. Los diferentes mecanismos de activación tienen diferentes límites en el tiempo de respuesta:
Para la retroalimentación activada directamente por las operaciones del usuario, el tiempo de respuesta ideal debe controlarse dentro de los 100 milisegundos.
Para los comentarios generados indirectamente por las operaciones del usuario, se puede permitir que el tiempo de respuesta sea de aproximadamente 1 segundo y no se proporcionará ningún comentario si supera los 2 segundos.
Cuando se necesitan más de 2 segundos para obtener resultados de retroalimentación, se debe diseñar la carga.
Cuando el tiempo de retroalimentación es de 2 a 9 segundos, se puede utilizar la carga en bucle (como el giro de crisantemo común).
Cuando el tiempo de retroalimentación supera los 10 segundos se debe utilizar el método de carga con instrucciones de progreso (si se carga el 60% quedan 30 segundos).
2. Duración
La duración del efecto jog interactivo no debe ser demasiado larga, para no hacer perder tiempo al usuario y afectar la lectura y la eficiencia de operación. La duración generalmente no debe exceder los 500 milisegundos (excluidos los efectos de carga).
Si desea que el usuario capture claramente el gradiente del elemento, debe durar más de 200 milisegundos si no le importa que el usuario piense que el cambio del elemento es instantáneo y lo desea; Para ahorrar el mayor tiempo posible al usuario, la duración también se puede diseñar en Dentro de 200 milisegundos (como cambios sutiles de color al pasar el cursor al botón).
Por un lado, la duración específica se verá afectada por el tamaño del elemento y la complejidad del efecto dinámico, por otro lado, también se verá afectada por la eficiencia dinámica objetivo y la dinámica; eficiencia del funcionamiento del dispositivo:
Los cambios leves en elementos pequeños (como aparición y desaparición gradual, cambios de tamaño y otros cambios de pequeña escala) generalmente ocurren entre 200 y 300 milisegundos.
Los efectos cambiantes complejos (como el desplazamiento lento a gran escala) en elementos más grandes pueden durar hasta 400-500 milisegundos.
Los efectos dinámicos más rápidos son más fáciles de atraer la atención de los usuarios y ahorrar tiempo. Si el elemento de efecto dinámico está fuera de la vista del usuario, para atraer su atención y tomar medidas, puede utilizar efectos dinámicos que cambien significativamente en un corto período de tiempo (como movimiento de posición, cambio de velocidad, etc.); Si el elemento dinámico ya está dentro del rango de atención del usuario, para mantener la continuidad visual, puede finalizar después de completar las transiciones necesarias (como la aparición y desaparición gradual).
Los efectos dinámicos más lentos son menos perjudiciales para los usuarios y son más adecuados para escenarios que no son desencadenados directamente por los usuarios. Si el usuario no activa directamente el efecto dinámico y no se espera que desvíe su atención, puede utilizar un efecto dinámico que no cambie mucho durante un largo período de tiempo (generalmente no se producirá ningún cambio de posición).
Los diferentes dispositivos tienen diferentes tamaños de pantalla y características, y la duración ideal también es diferente. En términos generales, para los dispositivos móviles, cuanto más grande es la pantalla, mayor es el desplazamiento del efecto dinámico, por lo que la duración debería ser mayor (la duración en los dispositivos portátiles es aproximadamente un 30% más rápida que en los teléfonos móviles y la duración en las tabletas es más lenta). que en los teléfonos móviles) Alrededor del 30%). El diseño de efectos dinámicos para dispositivos de escritorio suele ser más simple y rápido que para dispositivos móviles (150 ms ~ 200 ms es más común). Esto se debe a que en escenarios de escritorio, los efectos dinámicos complejos son propensos a caídas y congelaciones de fotogramas, mientras que los efectos dinámicos de respuesta instantánea evitan esta situación.
El efecto dinámico entrante es generalmente más rápido que el efecto dinámico entrante (por ejemplo, el efecto dinámico entrante se establece en 230 milisegundos y el efecto dinámico entrante se puede configurar en 200 milisegundos). Esto se debe a que los usuarios normalmente necesitan leer y procesar nueva información cuando un elemento ingresa al mercado, y cuando un elemento ingresa al mercado, generalmente indica que la tarea del usuario sobre ese elemento se ha completado y, por lo tanto, no es necesario prestar atención. La entrada rápida puede ahorrar a los usuarios más tiempo.
Tres. Tipos de efectos dinámicos y referencias de aplicaciones comúnmente utilizados
El rendimiento más utilizado, más fácil de implementar y mejor garantizado en los navegadores son los cambios en los cuatro atributos de posición, escala, rotación y transparencia. Cuando cambiar uno o más de estos cuatro atributos puede lograr el propósito de los microefectos interactivos, no es necesario agregar otros atributos innecesarios para evitar afectar la suavidad de los efectos dinámicos.
Los cambios de atributos generalmente se dividen en cambios lineales y cambios curvos.
1.? Cambio lineal
El cambio lineal tiene las características de velocidad uniforme y parada de emergencia. Generalmente es adecuado para efectos dinámicos de transición que no tienen nada que ver con las propiedades físicas (como cambios en las propiedades de transparencia, incluido el desvanecimiento). o cambiar entre colores) o efectos dinámicos de carga regulares (como bucles de velocidad constante, cambios numéricos o cambios de progreso). En los cambios relacionados con parámetros físicos (como cambios de posición), trate de evitar el uso de cambios lineales; de lo contrario, es fácil dar a las personas una sensación rígida y antinatural de efectos dinámicos.
2.? Cambios de curva
Hay muchos tipos de curvas. En el diseño de efectos de micromovimiento interactivos, las curvas de relajación tienen la gama más amplia de aplicaciones, los efectos más naturales y menos interferencias para los usuarios. Se utiliza principalmente para cambios de atributos relacionados con atributos físicos. Los escenarios comunes son los siguientes:
Etiqueta
Los efectos de micromovimiento interactivos son principalmente funcionales y deben seguir tres principios de diseño básicos: moderación, enfoque claro y suavidad natural. Antes de diseñar, piense en cómo queremos afectar la atención del usuario, cuál es el objetivo del efecto dinámico, cuál es la frecuencia del efecto dinámico y cuál es el mecanismo de activación. Al diseñar, debe elegir el tipo y la duración del efecto dinámico apropiado y prestar atención al tiempo de respuesta de la retroalimentación para que sea razonable y persuasiva.
Referencia autotraducida:/UX in Motion/UX in Motion Creando Manifiesto de Usabilidad-a87a4584ddc