En los casos de muchos grandes fabricantes, resumí 9 tendencias de diseño de interacción en 2020

En los últimos dos meses, desde Google I/O, Apple WWDC y Facebook Developer Conference en el extranjero hasta FeiLiao, revisión QQ y Douban FM 6.0 en China, podemos ver mucho sobre la tendencia del diseño de interacción. .

Al mismo tiempo, he recopilado algunas ideas de mi experiencia diaria con el producto. La siguiente es una perspectiva de las tendencias del diseño de interacción en 2020.

Visualización modal

En iOS 13, el panel modal adopta un nuevo estilo de tarjeta, que ocupa el 90% del área de la pantalla. Cuando se abre el panel modal, las páginas originales tendrán un efecto de profundidad y se mostrarán en un estado gris, lo que impedirá que los usuarios interactúen con ellas. El panel modal se puede cerrar deslizándose hacia abajo, es adecuado para operar con una sola mano y está especialmente diseñado para pantallas grandes.

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

△ Apple Music & Mail

Centrarse en la segunda mitad

El navegador Quark es el mejor navegador que se centra en la segunda mitad no como Quark. Al colocar el cuadro de búsqueda en la parte superior como Safari y Chrome, la barra de búsqueda integrada se coloca en la mitad inferior de la pantalla, donde es más fácil de operar para los usuarios.

Contenido en capas

El contenido en capas se basa en el menú de acciones, que muestra contenido en capas. La presentación de contenido jerárquico puede reducir los saltos de página y mantener a los usuarios en el entorno más original. Y las principales interacciones operativas se encuentran en la mitad inferior de la interfaz, de fácil acceso.

△ Snapchat & Keep

1. Capas al pasar el mouse

Las capas al pasar el mouse se adoptan en aplicaciones como NetEase Cloud Music, Instant, FeiChat, etc. El contenido introductorio se muestra en la parte superior. A medida que la página se desliza hacia abajo, el contenido introductorio se oculta. Al mismo tiempo, la barra de funciones se desplazará hacia la parte superior y el área de contenido mostrada aumentará considerablemente.

△ NetEase Cloud Music amp; al instante

△ Exploración de la interfaz de usuario de la aplicación iOS de transmisión

Página de continuidad

Efecto de conversión de página de continuidad Puede fácilmente recordar la ruta del producto y fortalecer la relación jerárquica de la página. Al mismo tiempo, el efecto de transición de animación suave brinda 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 del sistema en el estilo de calificación de guía. En la aplicación Keep, se diseña un mensaje de calificación en pantalla completa. El formato novedoso y la atmósfera de la imagen de fondo aumentan enormemente el deseo de la gente de calificar.

△ Airbnb amp; Keep

Verificación rápida

1. Inicia sesión con una cuenta de Apple

Casi todas las aplicaciones en los últimos dos años Se recomendará registrarse/iniciar sesión primero utilizando un código de verificación SMS de número de teléfono móvil y también acceder a inicios de sesión de terceros como WeChat, QQ y Alipay.

En la WWDC 2019, Apple también nos trajo “Iniciar sesión con una cuenta de Apple”. Casi todos los dispositivos Apple iniciarán sesión con el ID de Apple.

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

2. Identificación de número

La identificación de número de NetEase Yidun puede obtener automáticamente el número de tarjeta SIM que actualmente tiene tráfico habilitado, y puede completar las operaciones de registro e inicio de sesión con un solo clic. Reduzca los pasos tradicionales, como ingresar números de teléfono móvil y esperar códigos de verificación por SMS, para mejorar 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 aplicado en muchos escenarios, como Cortana de Microsoft, Siri de Apple y Google. Asistente. Después de la introducción del aprendizaje profundo, el asistente de voz puede volverse cada vez más fuerte durante el entrenamiento y hablar de manera más coherente. El asistente de voz de Quark tiene funciones como el clima local, datos visuales de esta semana y mes, noticias destacadas, saludos navideños y trivia.

En su conferencia de desarrolladores de mayo, Google demostró su tecnología Live Relay para inteligencia artificial y reconocimiento de voz. Puede proporcionar soporte de llamadas basado en conversión de voz/texto en tiempo real para usuarios que no pueden contestar el teléfono. Esta es definitivamente una característica ú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 llamadas importantes pero no podemos dejar lo que estamos haciendo. Por el momento, Live Relay puede resultar útil en este momento. Puede responder llamadas importantes ingresando texto.

Lo más conveniente es que Live Relay también puede integrar funciones de traducción en tiempo real, lo que resulta muy útil a la hora de comunicarse con extranjeros. Se puede decir que es otra "función sin barreras".

Realidad aumentada AR

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

Mediante la combinación de la tecnología de realidad aumentada AR y las cámaras de los teléfonos inteligentes, ayuda Como ves, incluso puede simular los efectos de usar zapatillas como YEEZY BOOST 350 en tus propios pies en diferentes ambientes de luz.

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 el soporte de la plataforma de código abierto de aprendizaje automático TensorFlow de Google, L'Oréal Group ha desarrollado capacidades de prueba de maquillaje dinámicas AR. En comparación con el método de prueba de color anterior para cargar fotos, la prueba de maquillaje dinámico AR hace que la prueba de color sea más realista.

La RA se utiliza en el campo del diseño web o de aplicaciones. Puede combinar de forma natural la virtualidad y la realidad para brindar 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 y la ventana múltiple Aparecerá el modo de ventana. Puede alternar hacia adelante y hacia atrás, similar al modo de cambio de fondo de iOS. Al presionar prolongadamente en cualquier parte de la ventana de la sesión, también aparecerá el modo de ventanas múltiples.

Resumen

El desarrollo de la ciencia y la tecnología ha tenido un enorme impacto en el diseño, lo que me ha hecho ser más consciente de mi responsabilidad como diseñador. Intencionalmente o no, estas tendencias de diseño ayudarán a los usuarios a obtener una mejor experiencia con el producto.

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

Autor: Yang Ye