Basándome en los casos de más de una docena de importantes fabricantes, resumí las 9 principales tendencias en diseño de interacción en 2020.

En los últimos dos meses, desde Google I/O, Apple WWDC, Facebook Developer Conference hasta FeiChat nacional, revisión QQ y Douban FM 6.0, hemos visto muchas tendencias de diseño interactivo.

Mientras tanto, he recopilado algunas ideas de mi experiencia diaria con el producto. Aquí está mi análisis de las tendencias de diseño de interacción para 2020.

Visualización modal

En iOS 13, el panel modal es un nuevo estilo de tarjeta que ocupa el 90% de la pantalla. Cuando se abre el panel modal, la página original obtiene un efecto de profundidad y aparece gris, lo que impide que el usuario interactúe con ella. Los paneles modales se pueden bajar y cerrar con solo deslizar el dedo, lo que los hace adecuados para su uso con una sola mano y diseñados para pantallas más grandes.

Los paneles modales se utilizan ampliamente en el sistema de correo, calendario, libreta de direcciones, Apple Music, mensajes Animoji y otras aplicaciones.

△ Apple Music & Mail

Centrarse en la mitad inferior

Quark browser es la mejor aplicación que se centra en la mitad inferior de la pantalla. En lugar de colocar el cuadro de búsqueda en la parte superior como los navegadores Safari y Chrome, Quark coloca la barra de búsqueda integrada en la mitad inferior de la pantalla para facilitar la operación a los usuarios.

Contenido en capas

El contenido en capas se basa en un menú de acciones que completa el contenido en capas. El contenido en capas se presenta de una manera que reduce los saltos de página y mantiene a los usuarios en el entorno original. Las principales interacciones operativas se encuentran en la mitad inferior de la interfaz, de fácil acceso.

△ Snapchat & Keep

1. Capas flotantes

Las capas flotantes se utilizan en aplicaciones como NetEase Cloud Music, Instant y FlyChat. El contenido introductorio se muestra en la parte superior. Cuando la página se desliza hacia abajo, el contenido introductorio se ocultará y la barra de funciones se suspenderá en la parte superior para mostrar una gama más amplia de contenido.

△NetEase Cloud Music amp; Instant

△Exploración de la interfaz de usuario de la aplicación iOS de radio y televisión

Páginas continuas

El efecto de transición de Las páginas continuas pueden Memorizar bien la línea de productos y fortalecer la relación jerárquica de la página. Al mismo tiempo, los efectos de transición de animación suaves brindan una experiencia de usuario más coherente.

La App Store y Behance, así como el recientemente lanzado Douban FM 6.0, han adoptado este enfoque.

△ App Store y Behance

Visualización en pantalla completa

Muchas aplicaciones utilizan ventanas emergentes sistemáticas en su estilo de calificación de arranque. En la aplicación Keep, diseñamos mensajes de calificación para que aparezcan en pantalla completa. La forma novedosa, junto con las imágenes de fondo atmosféricas, aumenta considerablemente la disposición de la gente a valorar.

△ Airbnb Audemars Piguet & Keep

Verificación rápida

1. Inicio de sesión de cuenta de Apple

En los últimos dos años, casi todos los La aplicación recomendará usar primero el código de verificación SMS del número de teléfono móvil para registrarse/iniciar sesión. También se conectará a métodos de inicio de sesión de terceros, como WeChat, QQ y Alipay.

En la conferencia WWDC 2019, Apple también nos trajo "Iniciar sesión con una cuenta de Apple". Casi todos los dispositivos Apple pueden iniciar sesión con una ID de Apple.

Por lo tanto, en un futuro próximo podremos iniciar sesión en todas las aplicaciones directamente con nuestra cuenta de Apple, ¿no es muy conveniente?

2. Identificación de número

La función de identificación de número de NetEase Shield puede obtener automáticamente el número de tarjeta SIM del tráfico actualmente activado y puede completar las operaciones de registro e inicio de sesión con un solo clic. . Esto reduce los pasos tradicionales, como ingresar números de teléfono móvil y el tiempo de espera para los códigos de verificación por SMS, y mejora la tasa de conversión de enlaces clave.

△NetEase Yidun

Interacción de voz

En los últimos años, la tecnología de voz inteligente se ha utilizado en muchos escenarios, como Cortana de Microsoft, Siri de Apple y Google. Assistant es un representante de la tecnología de voz inteligente. Con la introducción del aprendizaje profundo, los asistentes de voz pueden volverse cada vez más fuertes durante el entrenamiento y su pronunciación puede volverse más coherente. El asistente de voz de Quark tiene funciones como el clima local, datos visuales de esta semana y mes, noticias de actualidad, saludos navideños y trivia.

En su conferencia de desarrolladores de mayo, Google mostró su tecnología Live Relay para inteligencia artificial y reconocimiento de voz. Proporciona soporte de llamadas basado en intercambio de voz/texto en tiempo real a usuarios que tienen dificultades para contestar llamadas. Esta es sin duda una característica muy útil para las personas sordas.

△Google I/O 2019 Live Relay

De hecho, Live Relay también puede ayudar a la gente común, por ejemplo, cuando necesitamos contestar una llamada importante pero no podemos salir. , Live Relay Resulta útil para responder llamadas ingresando texto.

Lo más conveniente es que Live Relay también integra una función de traducción instantánea, que proporciona una gran ayuda a la hora de comunicarse con extranjeros. Esta es también otra "función sin barreras".

Realidad aumentada AR

1. WANNA KICKS "probarse zapatos" a través de la tecnología AR

La tecnología de realidad aumentada AR se combina con la cámara del teléfono inteligente para ayudarte a ver La sensación de ponerse un par de zapatos (como YEEZY BOOST 350) sobre sus propios pies.

2. Mini programa AR Prueba de color de lápiz labial

Ayer, se actualizó y lanzó simultáneamente el primer mini programa "Armani Beauty" que admite pruebas dinámicas de maquillaje AR. Basándose en las capacidades básicas del miniprograma y con el apoyo de la plataforma de código abierto de aprendizaje automático TensorFlow de Google, L'Oréal Group ha desarrollado la capacidad de prueba de maquillaje dinámica AR. En comparación con el método anterior de cargar fotografías para pruebas de color, las pruebas de maquillaje dinámico AR hacen que las pruebas de color sean más realistas.

La aplicación de la RA en diseño web o aplicaciones combina de forma natural virtualidad y realidad para crear una nueva experiencia inmersiva.

Vista previa de ventanas múltiples

△ App Store y QQ

En la última versión de QQ, mantenga presionado el mensaje en la página de lista para que aparezca la ventana múltiple. -modo de ventana En este modo, los mensajes se pueden alternar, similar al modo de cambio de fondo de iOS. Al presionar prolongadamente en cualquier lugar de la ventana de la sesión, también aparecerá el modo de ventanas múltiples.

Resumen

El impacto de la tecnología en el diseño es enorme, y me hace más consciente de mi responsabilidad como diseñador. Estas tendencias de diseño ayudarán a los usuarios a tener una mejor experiencia con el producto, de forma intencionada o no.

Este artículo es una reproducción de: Udesign.com

Autor: Maestro Yang