Interpretación integral del nuevo lenguaje de diseño de Microsoft: sistema de diseño fluido
Microsoft lanzó un nuevo lenguaje de diseño: Fluent Design System en la Conferencia de desarrolladores Build 2017, cambiando por completo la interfaz de usuario plana y rectangular que se ha utilizado durante muchos años. El nuevo lenguaje de diseño no se trata sólo de imágenes, sino también de interacción, espacio y la forma en que se integran elementos completamente nuevos. Microsoft ha resumido muy bien las tres transformaciones que logrará FDS:
1. Transformación de un lenguaje de diseño plano a un lenguaje de diseño multidimensional inmersivo;
2. al diseño multiplataforma Plataforma y transformación de insumos;
3. Transformar del consumo y la comunicación a la creación y la autocuración.
Al presentar FDS en la conferencia de desarrolladores Build 2017, Joe Belfiore, vicepresidente de la división de sistemas operativos de Microsoft, dijo: "Es hora de decir adiós al rectángulo que se limita a una superficie plana. Nuevo lenguaje de diseño no sólo está relacionado con la visión, sino que también enfatiza la integración de modos de interacción, espacios y nuevos elementos”.
En los materiales promocionales de FDS, el equipo de Microsoft presentó el concepto de diseño con 13 adjetivos, que interpreté como los siguientes 10. Tipos: diseño adaptativo, diseño a nivel de imagen, diseño creativo, diseño simple, diseño de simulación, diseño atractivo, diseño universal, diseño inclusivo, diseño expresivo y diseño coherente. Al mismo tiempo, Microsoft resume altamente FDS en una frase: "Un sistema de diseño elocuente para un mundo complejo". Lo describo como: "En un mundo complejo, no hay otro mundo".
Completo explicación | Bloques de construcción (componentes)
Componentes Los elementos centrales del lenguaje de diseño FDS garantizan que los usuarios sobresalgan en experiencias multiplataforma en diferentes tamaños y diferentes dispositivos de entrada, construyendo la próxima era de Windows.
Los cinco elementos que componen un componente son: luz, profundidad, movimiento, materia y escala.
Interpretación integral | Luz (efecto de luz)
De hecho, en Windows 10 RS2 y sistemas anteriores, hay retroalimentación sobre los cambios de brillo, mientras que en FDS enfatiza la luz en el ser humano. -aspecto de la máquina. En algunos programas de dispositivos bidimensionales, se generan efectos de retroalimentación de luz en el elemento mismo y en los elementos circundantes a medida que se mueve el mouse. Esto resalta el estado del control con el que interactúa el usuario.
Cuando se utiliza un dispositivo de resonancia magnética, el usuario coloca el puntero sobre la pantalla y la luz proporciona retroalimentación al usuario en forma de un pequeño círculo brillante, lo que ayuda al usuario a separar los elementos de la interfaz de usuario del entorno virtual. .
Interpretación integral | Material (Material)
El equipo de Microsoft utiliza los conceptos de textura física y profundidad espacial en el sistema de diseño Fluent para distinguir varios elementos de los componentes de la interfaz de usuario y colocarlos visualmente en el jerarquía. La clave es adaptar los elementos constituyentes del material para lograr su apariencia y rendimiento únicos y brindar a los usuarios una experiencia preferida y personalizada. Esta es una mejora importante en la experiencia de estilo de la aplicación UWP.
La transparencia del fondo, el desenfoque gaussiano y las texturas de las capas añaden profundidad visual y dimensionalidad a la interfaz de usuario, estableciendo una jerarquía visual. El estilo Excluir mezcla se utiliza para garantizar un alto contraste y legibilidad de los elementos colocados sobre un fondo acrílico. Las superposiciones de colores brindan a los usuarios la oportunidad de personalizar el color, creando una experiencia accesible.
La superposición de estos cinco elementos forma un material fresco, transparente y eficiente, al que Microsoft llama acrílico.
Interpretación integral | Especificaciones para el uso de materiales acrílicos
1. Si desea crear diferentes efectos visuales en la aplicación, puede utilizar materiales acrílicos en toda el área de la aplicación.
2. Para aplicaciones de navegación vertical, se deben aplicar materiales acrílicos al panel auxiliar que contiene los elementos de navegación.
Microsoft estipula oficialmente las especificaciones de diseño de tres materiales acrílicos, que son 60% claro/oscuro, 70% claro/oscuro y 80% claro/oscuro. Aquí hay una demostración del algoritmo específico para material acrílico brillante al 60%.
4. Para aplicaciones con tres paneles verticales diferentes, el contenido no principal debe utilizar materiales acrílicos.
Para el panel auxiliar más cercano al contenido principal, se debe utilizar un 80% de material acrílico claro (oscuro).
Para un segundo panel secundario alejado del contenido principal, utilice un 60 % de material acrílico claro (oscuro).
4. Para aplicaciones con tres paneles verticales diferentes, el contenido no principal debe utilizar materiales acrílicos.
Para el panel secundario más cercano al contenido principal, se debe utilizar un 80 % de material acrílico claro (oscuro). Para un segundo panel secundario alejado del contenido principal, utilice 60 % de material acrílico claro (oscuro).
Utilice materiales acrílicos multicapa con precaución al diseñar. En la experiencia, no se debe permitir a los usuarios simular mentalmente la perspectiva del eje Z en una situación tridimensional cuando utilizan la aplicación. Esto también puede provocar ilusiones visuales inesperadas.
Explicación completa | Profundidad (efecto de paralaje)
El paralaje es un efecto visual que puede crear una estructura jerárquica en la interfaz de usuario. Los objetos más cercanos al observador se mueven más rápido que los objetos del fondo. Parallax crea una sensación de profundidad, perspectiva y movimiento.
Como se mencionó anteriormente, el paralaje de la lista y la imagen de fondo cambia y la lista se coloca encima de la imagen de fondo. Para lograr el efecto de paralaje, queremos que los objetos más cercanos al usuario se muevan más rápido que los objetos más alejados del usuario. Por lo tanto, cuando el usuario se desplaza por la interfaz, la lista se mueve más rápido que la imagen de fondo, creando la ilusión de un cambio de profundidad, lo que mejora en gran medida la preferencia y la permanencia del usuario.
Interpretación integral | Movimiento (animación)
1. Animación de conexión (animación de conexión)
La animación cohesiva se utiliza para realizar la transición entre dos o más vistas diferentes. Los elementos entre vistas ayudan a mantener la continuidad entre las vistas cuando los usuarios exploran contenido relacionado, logrando una experiencia de usuario dinámica, natural, rápida, interesante y atractiva que puede atraer rápidamente la atención de los usuarios y aumentar considerablemente la participación de los usuarios.
Observa la animación de arriba. En el prototipo, se utiliza una animación cohesiva para expandir dinámicamente la imagen del proyecto. Cuando el usuario interactúa con este elemento de imagen, se convierte en el siguiente nivel de contenido del encabezado horizontal, manteniendo la continuidad entre las vistas mientras el usuario navega por el contenido relacionado.
2. Animación coordinada (animación coordinada)
La animación coordinada es un tipo especial de animación de entrada y su forma principal es el "movimiento". El elemento seleccionado por el usuario se desplaza en una dirección determinada mediante una animación coordinada y se muestra en una dirección determinada en el siguiente nivel.
Por ejemplo, en la animación anterior, el control de la interfaz de usuario utiliza una animación coordinada. Las animaciones coordinadas pueden agregar más interés visual a la transición entre elementos y llamar aún más la atención del usuario sobre los cambios entre las vistas de origen y de destino.
Belfiore compara una aplicación con elementos de acción con un actor que utiliza el movimiento para guiar a la audiencia hacia una historia. "El elemento del movimiento tiene una magia especial que hace que nuestra experiencia sea dinámica", afirmó. "Al mismo tiempo, puede guiar fácilmente a los usuarios en la transición de una tarea a la siguiente". Los elementos de movimiento también encarnan los conceptos de diseño de creatividad, realismo, relajación, atracción, expresión, coherencia y coherencia.
Explicación completa | Escala (zoom)
La función clave de Scale es remodelar y renderizar aplicaciones en diferentes dispositivos. Los objetos que se ven bien en el monitor de una computadora pueden parecer demasiado grandes o demasiado pequeños cuando se ven con un visor AR o VR. Por lo tanto, el escalamiento del tamaño del objeto virtual es uno de los factores clave en la experiencia de la interfaz de usuario en primera persona.
En cuanto a la escala, en esta conferencia de desarrolladores, Microsoft también propuso la dirección general para el desarrollo futuro basado en productos existentes. La expansión de los objetos digitales inmersivos también es una característica esencial en la era de las interfaces interactivas 3D y la VR/AR. Con el desarrollo de la realidad virtual, la tecnología de escala se aplicará más a los productos.
Interpretación completa | Herramienta de creación de vídeos Windows Story Remix
La característica más importante de Story Remix es su simplicidad y facilidad de uso. Entre ellos, la función Remix 3D puede proporcionar automáticamente una historia que los usuarios pueden volver a personalizar según la lógica y el contenido que quieran expresar, atrayendo a creadores de todos los niveles. La función Ver 3D puede llamar directamente objetos 3D para crear obras de realidad virtual.
La función Story Builder permite a los usuarios crear rápidamente una historia de aspecto casi profesional utilizando fotos, vídeos y música. Windows Story Remix permite a los usuarios cargar fotos, videos y "agregar objetos 3D" para crear interesantes escenas de realidad mixta. Además de editar y crear fotos y vídeos, Story Remix también permite mezclar música directamente, al igual que Paint 3D.
También cuenta con soporte integrado para la comunidad Remix 3D.
Con el apoyo de la tecnología de aprendizaje profundo de Microsoft, Story Remix puede identificar personas y objetos en fotografías, y puede agregar directamente anotaciones o grafitis a fotografías y vídeos basándose en casi cualquier atributo, como personas, objetos, tiempo, etc., y también admite el funcionamiento con lápiz y tinta capacitivos.
Microsoft hizo a FDS una presentación de menos de una hora en la conferencia de desarrolladores Build 2017, que incluyó demostraciones de algunas características existentes, incluido Windows 10.
Algunos conceptos abstractos sobre el futuro. "Fluido" no es sólo una ventaja de Windows 10 y puede impregnar todo el sistema UMP, al igual que Material Design de Google. En el futuro, es posible que veamos la marca de Microsoft evolucionar desde un diseño completamente plano a algo con más variedad y comportamiento. Vale la pena señalar que el sistema de diseño Fluent de Microsoft no lleva el nombre de Windows, lo que también refleja la ambición de Microsoft de convertirse en pionero en interfaces de usuario 3D.