noticias

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Hace un mes, después de recibir el impulso del sistema Huawei Hongmeng NEXT, inmediatamente hicimos una experiencia práctica.

Los socios de la redacción de Aifaner también se turnaron para vivirlo. Aunque todos tienen diferentes marcas de teléfonos principales diarios, sus evaluaciones del pura sangre Hongmeng son generalmente las mismas:

Bastante sedoso.

Y puedes ver el tema "#红梦NEXT suave y sedoso" en casi todas las plataformas sociales. Tengo la misma sensación, pero todavía tengo algunas preguntas:

• El resultado es una suavidad sedosa, ¿qué tipo de proceso la causa?
• No hay mucha diferencia entre Hongmeng NEXT y el sistema de la generación anterior. Entonces, ¿cuáles son las diferencias en los detalles?

Después de un mes de experiencia en profundidad, descubrí algunos de los rincones del nuevo sistema de Huawei. Quizás estas optimizaciones, que son tan sutiles que apenas se notan, sean la raíz de la suavidad sedosa.

Así que hoy echaremos un vistazo a Hongmeng NEXT según la "frecuencia táctil" de cada diseño, de pequeño a grande, de punto a superficie, de estático a dinámico.

Los iconos son muy importantes

La pantalla es la ventana a Internet.

Creo que esta afirmación no es lo suficientemente precisa. Lo que realmente se puede llamar una "ventana/canal" en un teléfono móvil debería ser una aplicación.

WeChat, Weibo, Xiaohongshu y TikTok... se hace clic en uno o más de ellos casi cada hora. En comparación con otras partes del sistema, el ícono de la aplicación es el que se hace clic con mayor frecuencia.

El diseño de los íconos de las aplicaciones ha pasado por varias etapas de desarrollo: esqueuomorfismo - planitud - ajuste libre de esqueuomorfismo y planitud.

Para decirlo sin rodeos, salta entre simulación y estilo conciso, pero no son más que dos núcleos de diseño: transmitir información con precisión + estilo unificado.

Huawei ha ido finalizando gradualmente su propio estilo de ícono a través del sistema de tercera generación EMUI-HarmonyOS-HarmonyOS NEXT.

El nuevo estilo de ícono se llama "Simulación de luz" y tiene 4 características muy obvias:

①El esquema del ícono es conciso y fácil de entender, y puedes saber lo que hace de un vistazo;

② Utilice elementos semitransparentes y borrosos para apilar y presentar una sensación de capas, que tiene un peso visual más ligero que la cuasi materialización pura y más tridimensional que el estilo plano puro;

③ Fortalecer el procesamiento de resaltado en los bordes de los gráficos para mejorar la textura general y resaltar los elementos centrales de los gráficos para que el ojo pueda encontrar los puntos clave más rápidamente;

④El color del panel posterior del icono tiene un ligero degradado y los objetos representados con iluminación de arriba hacia abajo parecen más naturales al ojo humano, evitando el impacto y la brusquedad de los fuertes degradados de color.

El diseño de la aplicación de los cuatro puntos anteriores hace que los símbolos de los íconos en el escritorio parezcan más unificados. La sensación más intuitiva es que esto es algo diseñado por un equipo, no el resultado de discusiones grupales.

Por supuesto, el "cuasi-objeto ligero" es sólo una tendencia general. Siempre habrá gente a la que le guste un estilo más cercano a lo real y tridimensional, por lo que también puedes ajustarlo manualmente a otro: las sombras de los bordes. Son más pesados, los detalles son más específicos y las capas son más detalladas. Colores tridimensionales y más brillantes.

▲ La izquierda es un estilo esqueuomórfico ligero y la derecha es un estilo esqueuomórfico.

No es difícil descubrir que incluso los íconos esqueuomorfos siguen los principios de diseño anteriores. El tono unificado también se utiliza en los iconos del sistema.

El centro de control, la interfaz de configuración y la barra de navegación de aplicaciones del sistema tienen íconos del sistema, pero se pasan por alto fácilmente porque generalmente aparecen con texto.

Ésta es también la primera dificultad en el diseño de iconos del sistema: ¿cómo mantenerlos coherentes con el diseño del texto? La solución de Huawei es caracterizar imágenes para que puedan conectarse perfectamente con las fuentes del sistema.

Puede adaptarse de forma inteligente según los cambios en el grosor del texto, lo que garantiza que los iconos puedan adaptarse de manera flexible a diferentes grosores de texto y mantener la coherencia visual.

También descubrimos otro detalle durante la experiencia. Los iconos del sistema de Hongmeng NEXT tienen efectos más dinámicos: flash de estrella, linterna, uso compartido de Huawei, modo de protección ocular, modo de ahorro de energía... todos tienen efectos exclusivos.

El nuevo sistema establece 7 efectos dinámicos para los íconos, a través de una combinación de aparición, desaparición, rebote, escala, reemplazo, pulsación y colores variables.

Quizás estés pensando, ¿cuál es la relación entre el diseño de iconos y la fluidez del sistema?

Desde una perspectiva pequeña, la animación de los íconos también es parte del sistema, y ​​la coherencia y consistencia de los movimientos afectarán la percepción del usuario sobre la fluidez del sistema. Desde una perspectiva amplia, los íconos aparecen con mucha frecuencia en el sistema; El número de veces que los usuarios los tocan también es muy elevado.

Un diseño unificado y armonioso le permite ver la sombra de un sistema en las páginas que pasa de un lado a otro, evitando el "desorden".

Por lo tanto, el diseño consistente de elementos estáticos es la base para que el sistema se vuelva fluido.

como el agua

Con los íconos de aplicaciones y sistemas dispuestos, veamos los escenarios de uso específicos.

La adaptación de la interfaz de usuario del sistema y las aplicaciones de los teléfonos móviles de pantalla completa siempre ha sido criticada por ser demasiado "violenta". Simplemente hacen que las aplicaciones con una relación de pantalla estándar sean cada vez más grandes y no aprovechan al máximo la pantalla grande para mostrar más información. el doble de superficie, al igual que la estrategia perezosa de las tabletas en los primeros años.

Una interfaz cómoda debe ser como agua, que siempre llena perfectamente el recipiente sin importar su apariencia.

Huawei llama a esta solución de adaptación "similar al agua" "diseño responsivo".

Cuando cambia el tamaño del contenedor de la ventana, los elementos de la interfaz pueden cambiar automáticamente para adaptarse al cambio en el tamaño del contenedor.

Huawei logra una transición fluida y una adaptación de la interfaz al estirar simultáneamente el fondo de la página, el texto, los íconos, los componentes y otros elementos.

Se pueden escalar diferentes componentes según una proporción fija en diferentes páginas.

Cuando la página cambia, el diseño de la interfaz de usuario también cambiará en consecuencia. Memo es un buen ejemplo.

En modo horizontal, la interfaz se divide en dos, con la barra de directorio a la izquierda y el menú secundario a la derecha. Esto no sólo evita la extensión excesiva y el espacio en blanco excesivo en la visualización de un único directorio, sino que también aprovecha al máximo el espacio horizontal de la pantalla.

En cuanto a la adaptación de componentes pequeños más específicos, Hongmeng NEXT se adapta a diferentes tamaños cambiando su propia forma y densidad de información.

Esto es muy similar a la idea de diseño de los widgets de escritorio: cambie el tamaño de la carpeta y use tarjetas de servicio de diferentes tamaños para que quepan en el espacio vacío del escritorio.

Existen muchas soluciones de diseño responsivo, pero la lógica subyacente es exactamente la misma:

• Adaptarse como agua estancada
• transición como agua que fluye

Estas soluciones de adaptación escondidas en los rincones también facilitan la integración de software y hardware.

La pantalla dividida de Hongmeng NEXT es muy buena. En la solución tradicional, siempre que se puedan separar dos pantallas, la tarea estará completa.

Pero sobre esta base, el nuevo sistema también recorta las esquinas de la ventana pequeña a la misma curvatura que la esquina R de la pantalla.

Para ser honesto, el diseño de ventanas y pantallas debería ser así, pero debido a que hay demasiadas marcas y modelos a los que el sistema Android necesita adaptarse, la adaptación perfecta se ha convertido en un gran problema.

Y esta también es una ventaja adicional que aporta el sistema Hongmeng de sangre pura: el sistema nativo está diseñado para servir a esta marca de modelos y no hay necesidad de considerar otras.

Reproduce arte 3D en una pantalla 2D

Hace un mes, si me preguntaras "¿Qué actualizaciones ha habido en la interfaz de usuario de Hongmeng NEXT?"

Solo puedo decirles que la capa de efectos especiales de "vidrio esmerilado" se ha agregado en muchos lugares, pero agregar un solo elemento es difícil mejorar un nivel la suavidad del sistema.

Si desea lograrlo y ser percibido como "sedoso" por los usuarios, en realidad es un proyecto sistemático y debe considerarlo todo. Después de un mes de experiencia, clasifiqué el buen funcionamiento del Hongmeng de sangre pura en dos partes:

• Sentido de capas
• jugar con fuerza

Veamos primero las capas. El efecto de vidrio esmerilado (borroso) es parte de él. Generalmente aparece en escenas como abrir y cerrar aplicaciones, una pantalla negativa, búsqueda desplegable, cerrar el fondo, dividir la pantalla y dividir en movimiento. pauta.

En comparación con el sistema anterior, hay muchos más efectos de desenfoque, pero al mismo tiempo, se agregan los efectos dinámicos y la escala de los íconos del escritorio, que pueden simular el proceso de enfoque y desenfoque del ojo humano. llamar realidad durante la interacción El sentimiento es el resultado del efecto combinado de ambos.

El efecto de elevación del escritorio se simula mediante el escalado, que también refleja intuitivamente la relación jerárquica en el sistema.

Abrir aplicaciones, crear nuevas tareas, desbloquear la pantalla, etc. pertenecen a los niveles superior e inferior. Hongmeng NEXT ha establecido varios efectos de animación para este tipo de cambio:

Además, también hay cambios entre niveles cruzados y el mismo nivel, y hay animaciones correspondientes.

Al subdividir la relación jerárquica y aplicar diferentes efectos especiales, uno es mejorar el sentido tridimensional del sistema a través de capas y hacer que la transición sea menos rígida. El otro es integrar animación no lineal en cada transición y la operación será más fácil. Más suave, o eso parece.

El vídeo de demostración en el sitio web oficial ilustra bien el efecto de la animación no lineal en la fluidez.

La optimización de las relaciones jerárquicas de Huawei no se limita a grandes transiciones de páginas, sino que también se centra en iconos pequeños.

Podemos ver las siguientes animaciones únicas en todas partes del nuevo sistema:

Ya sea resaltando el cuadro de búsqueda, haciendo zoom en el ícono de la aplicación o activando y desactivando las teclas de función, es difícil ver transiciones forzadas en este sistema. Siempre puede utilizar una serie de métodos como forma, color, desplazamiento y escala. hacer la transición más interesante. El proceso se vuelve más natural.

Según estadísticas oficiales, las transiciones son el tipo de efecto dinámico con mayor proporción en el sistema, alcanzando más del 60%. Esta es también una de las razones fundamentales por las que muchas personas se sentirán más tranquilas después de comenzar con Hongmeng NEXT; se puede ver en todas partes.

El omnipresente "manantial vacío"

Recuerdo que un colega compartió conmigo un ejemplo:

La primera reacción de los niños de hoy al ver una pantalla no es buscar el mando a distancia, sino pulsarlo o deslizarlo con los dedos.

En la era de la pantalla completa, la forma de interacción de la nueva generación con los productos digitales se ha repetido por completo (deslizar y tocar se han convertido en los métodos de entrada para la mayoría de los productos electrónicos de consumo) y la prensa del eje Z está muriendo.

Mucha gente extrañará los botones de los teléfonos básicos porque se sienten mejor en la mano y tienen una confirmación táctil física obvia.

Esta es también la razón por la que se critican las pantallas táctiles: una respuesta insuficiente. Los principales fabricantes también utilizan diversos métodos, como la vibración motora (táctil) y los efectos de sonido (auditivos), para restablecer movimientos físicos tranquilizadores en una pantalla plana.

La animación en el ícono del sistema es una mejora de confirmación visual.

El "sistema de efectos dinámicos de gravedad" de Hongmeng NEXT simula la "fuerza" de los objetos durante el movimiento a través de varios efectos dinámicos para hacer que las operaciones interactivas cobren vida.

Huawei ha encarnado fuerza en resortes inexistentes, llenando cada rincón de Hongmeng NEXT.

Por ejemplo, al deslizar la página, habrá "resortes" en los límites superior, inferior, izquierdo y derecho. Después de alcanzar el límite, habrá un efecto de rebote muy natural que le indicará que ha llegado al final.

Dejar una cierta cantidad de espacio elástico también puede evitar toques accidentales y evitar que el sistema sea demasiado sensible, lo que nos obliga a usar fuerza y ​​​​ser cautelosos en operaciones a nivel milimétrico.

Además, los resortes virtuales en todas partes también pueden promover una amplia gama de funcionamiento suave hasta cierto punto: todo el cuerpo se vinculará con un solo movimiento, lo que se acerca al efecto de rebote real.

Restaurar los efectos del movimiento del mundo físico puede reducir los costos de aprendizaje de los usuarios, y pueden comenzar rápidamente con nuevos dispositivos y sistemas operando de acuerdo con los hábitos de la vida de "así es como es".

Para aquellos que ya están familiarizados con el funcionamiento por gestos o el sistema Hongmeng, la interacción con las manos es la más importante.

Hay esta frase en el sitio web oficial para desarrolladores de Huawei:

Los efectos de animación siempre deben centrarse en las operaciones y ajustarse a las expectativas psicológicas de los usuarios, y los movimientos de los objetos deben ajustarse al mundo real.

Los ingenieros de producto hacen todo lo posible para comprimir todo lo que hay en el mundo tridimensional en una pantalla bidimensional, mientras que los gerentes de producto se devanan los sesos para imitar el mundo real en una pantalla bidimensional.

▲ Imagen de: rauno.com

En el análisis final, el estudio en profundidad del diseño de interacción es en realidad una comprensión más profunda de nosotros mismos: ¿qué escenarios requieren deslizamiento? ¿Cómo organizar los efectos especiales durante la transición? ¿Cómo cubrir el 99% de las operaciones con un dedo?

Si usted es como yo y ha pasado paso a paso de las máquinas de botones a las pantallas completas, no es difícil descubrir que el sistema interactivo de los teléfonos móviles es en realidad más adecuado para nosotros: casi no requiere pensar ni aprender, y puede simplemente úsalo.

Cuando no eres consciente de la existencia de interacción del sistema, es el mayor cumplido para un sistema, porque todas las consideraciones anteriores en detalle han hecho del producto una extensión natural de nuestro cuerpo.