Materials
Estilos gráficos que realzan los elementos
Materials
En el diseño de productos digitales todo está creado en un solo plano, por esto es que existen materiales para añadir interés visual a la interfaz. El brillo, la transparencia, color o cualquier aplicación de material en el UI son para dar la sensación de capas y profundidad en las aplicaciones.
El sistema de diseño define varios materiales -cada uno destinado a un uso específico- que se adaptan automáticamente a los modos claro y oscuro (Light and Dark Mode). Además, proporciona varios efectos de transparencia y vibración que se aplican a los componentes de la interfaz de usuario para ayudar a integrarse bien con los materiales y conseguir que se distingan unos de otros. El uso de materiales y efectos definidos por el sistema puede dar a la aplicación una sensación de niveles o profundidad, ayudando a la buena experiencia del usuario.
Buenas prácticas
Materiales y efectos. Los materiales o efectos definidos en Harmonía tienen base en los colores de Elektra.mx, y son adaptados a su caso de uso específico. Por ejemplo, el fondo del menú, utiliza una variación del gris principal de la marca; los botones primarios utilizan el rojo “Elektra”. Puedes encontrar más información sobre Color y sobre la marca de Elektra en Branding.
Ayuda a la legibilidad utilizando solo los colores de harmonía sobre los materiales. Cuando utilizas colores definidos por el sistema de diseño, no tienes que preocuparte de que los colores parezcan demasiado oscuros, brillantes, saturados o de bajo contraste en diferentes contextos. Por ejemplo, Elektra.mx define colores dinámicos para el texto, los rellenos, los símbolos y los separadores, lo que hace que estos elementos sean completamente visibles. En Harmonía, todos los colores estándar del sistema tienen versiones vibrantes. Para más información, consulta el sistema colores.
Ten en cuenta el contraste y la separación visual a la hora de elegir un material para combinarlo con efectos de transparencia y brillo. Por ejemplo, ten en cuenta que:
- Los materiales más gruesos pueden ofrecer un mejor contraste para el texto y otros elementos con rasgos finos.
- El fondo no es completamente blanco, este ayuda al usuario a retener su contexto al proporcionar un recordatorio visible del contenido que está sobre el fondo.
- El sistema de diseño proporciona varios materiales para transmitir una sensación de profundidad y estructura jerárquica sin distraer del contenido. Algunos de los materiales, que van de ultrafinos a ultraespesos, se adaptan a los modos de aparición y otros son siempre claros u oscuros. Existen 4 niveles que puedes consultar en elevación.
Las etiquetas y los rellenos ofrecen varios niveles de intensidad(dentro del código); los separadores tienen un nivel. Los nombres de los niveles indican la cantidad relativa de contraste entre un elemento y el fondo: el nivel por defecto tiene el contraste más alto.
Se pueden utilizar los siguientes valores de brillo para las etiquetas de cualquier material. No se recomienda utilizar en materiales finos y ultrafinos, porque el contraste es demasiado bajo.
- label (por defecto)
- secondaryLabel
- tertiaryLabel
- relleno (por defecto)
- secondaryFill
- tertiaryFill
El sistema proporciona un único valor de brillo por defecto para un separador, que funciona bien en todos los materiales.
Nota: Se pueden utilizar los siguientes valores de vibración para rellenos en todos los materiales.
Tipos
En el sistema de diseño existen variaciones de tono de todos los colores establecidos y materiales que definen las cantidades de translucidez y vibración aplicadas a la interfaz. El estándar del sistema proporciona varios materiales, cada uno con un propósito determinado. Por ejemplo, puedes elegir un material para que coincida con el aspecto predeterminado de un combo box, menú, ventana emergente, barra lateral, barra de título, etc.
Elige cuándo permitir la vibración en las vistas y controles personalizados. Dependiendo de la configuración y de los ajustes del sistema, las vistas y los controles del sistema utilizan la intensidad para hacer que el contenido en primer plano destaque sobre cualquier fondo. Actualmente, no ocurre esta funcionalidad en web, ya que está solo aplicada en la aplicación de Elektra.
Overlay detrás de la ventana. En este modo, el contenido detrás de una ventana se muestra, ayudando al usuario a retener parte del contexto que rodea la aplicación. Componentes checkout, encuestas, ingresar usuario.
El overlay se utiliza en modales, específicamente en la aplicación Elektra.mx tanto en sistema Android como en iOS, se crea en color negro (hex: #000000) con una transparencia de 40%. Para conocer más sobre la forma de las modales y cards dentro del producto, consulta elevación y forma (Elevation & Shape)
También puedes consultar
Illustrations
Accesibility
A través de nuestro sistema de diseño establecemos prácticas que nos permitan el diseño de una interfaz más aceptable y que ayuden a mejorar la experiencia de nuestro usuario para el e-commerce de Elektra.mx
Aquí puedes encontrar el portal digital y las apps disponibles:
