Elevation & Shape
Estilos gráficos que realzan los elementos
Elevation
La elevación se mide como la distancia entre componentes a lo largo del eje z en píxeles independientes de la densidad (dps).
Como llevar la elevación
· Todas las superficies y componentes tienen valores de elevación.
· La historia de la elevación debe ser sencilla.
· Mientras que el color de fondo permanece constante, el color de la superficie cambia con la elevación.
Sombras: En lugar de aplicar sombras por defecto a todos los niveles, utilice sombras solo cuando sea necesario para crear una protección adicional contra un fondo o para fomentar la interacción.
Color: Nuevas asignaciones de color y compatibilidad con el color dinámico.
Niveles: La elevación se describe ahora en términos de niveles.
Todas las superficies y componentes tienen valores de elevación
Las superficies a diferentes elevaciones hacen lo siguiente:
1. Permitir que las superficies se muevan delante y detrás de otras superficies, como el desplazamiento de contenido detrás de las barras de aplicaciones.
2. Reflejan relaciones espaciales, como la sombra de un botón de acción flotante que indica que está separado de una colección de tarjetas.
3. Centrar la atención en la elevación más alta, como un cuadro de diálogo que aparece temporalmente delante de otras superficies.
Las elevaciones en reposo son valores de elevación iniciales que se dan a los componentes por defecto.
Cambio de elevación
Los componentes pueden cambiar de elevación en respuesta a la interacción del usuario o a eventos del sistema. Cuando esto ocurre, los componentes se mueven a desplazamientos de elevación dinámicos preestablecidos, que son las elevaciones predeterminadas a las que se mueven los componentes cuando no están en reposo.
El sistema de elevación se limita deliberadamente a un puñado de niveles. Harmonía utiliza seis niveles de elevación, cada uno con su correspondiente valor dp. Estos valores se denominan por su distancia relativa sobre la superficie de la interfaz de usuario: 0, +1, +2, +3, +4 y +5.
El estado de reposo de un elemento puede estar en los niveles 0 a +3, mientras que los niveles +4 y +5 se reservan para estados de interacción con el usuario como hover y arrastrado.
El diagrama muestra los cinco niveles de elevación y sus respectivos valores dp.
Representación de la elevación
La elevación puede representarse utilizando sombras u otras señales visuales, como rellenos de superficie con una diferencia de tono o mallas.
Para representar correctamente la elevación, una superficie debe mostrar:
· Bordes de la superficie, que la diferencien de su entorno.
· Superposición con otras superficies, en reposo o en movimiento.
· Distancia respecto a otras superficies
Diferencia tonal
La diferencia tonal entre superficies ayuda a expresar la calidad táctil de las superficies de material. Muestran dónde acaba una superficie y empieza otra, separando las distintas partes de una interfaz de usuario en componentes identificables. Por ejemplo, los bordes de una barra de aplicaciones muestran que está separada de una lista de cuadrícula, comunicando al usuario que la lista de cuadrícula se desplaza independientemente de la barra de aplicaciones.
Otros métodos para indicar los bordes, como:
- Dar a las superficies una sombra paralela
- Colocando una malla detrás de una superficie
- Interfaz de usuario móvil con una barra de aplicaciones superior ligeramente más oscura que la superficie que se desplaza bajo ella
En el caso de los componentes interactivos, los bordes deben crear un contraste suficiente entre las superficies (cumpliendo o superando las relaciones de contraste accesibles) para que se vean separadas entre sí.
Papel del color de la superficie en la elevación
Aunque la mayoría de los colores mantienen un tono constante, el color de las superficies no es estático, las superficies en los niveles de elevación +1 a +5 se matizan mediante superposiciones de color basadas en el color primario, como las barras de aplicaciones o los menús. La adición de un grado de +1 a +5 introduce una variación tonal en la línea de base de la superficie.
Sombras
Las sombras pueden expresar el grado de elevación entre superficies de formas que otras técnicas no pueden, tanto el tamaño de una sombra como la cantidad de suavidad o difusión expresan el grado de distancia entre dos superficies. Por ejemplo, una superficie con una sombra pequeña y nítida indica la proximidad de una superficie a la que está detrás. Las sombras más grandes y suaves expresan más distancia.
Los siguientes parámetros son los sugeridos para aplicar el efecto de elevación y sombra en los elementos de elektra.mx:
Componentes por capas
Shape
Las superficies utilizadas en Harmonía tienen una forma rectangular por defecto, con esquinas redondeadas a 8 dp., el tamaño de la forma puede ser sutil o más significativo. En Harmonía las formas únicas destacan y estas pueden dirigir la atención a distintas partes de la pantalla, según sea necesario.
Los siguientes parámetros son los sugeridos para hacer uso de las esquinas redondeadas de manera correcta, de acuerdo al tipo de componente o tamaño no de este.
No se pueden aplicar medidas especificas en puntos o pixeles para determinar las esquinas redondeadas, ya que estos dependen del tamaño del componente, por lo que la forma se deberá generar visualmente con la medida que se requiera.
Identidad
Las diferentes formas permiten a los usuarios reconocer los componentes e identificar las distintas superficies, es el caso de los chips o botones que pueden identificarse por su uso.
Estado
Se puede comunicar el cambio de estado de un elemento utilizando una forma diferente del resto de elementos o superficies de ese grupo. Cuando se utilice la forma para indicar un cambio de estado, se debe utilizar de forma coherente con ese estado y en todos los casos en que se produzca.
Visualizar
Las diferentes formas se hacen visibles cuando los bordes de las superficies tienen suficiente contraste con su fondo. Harmonía hace visibles las formas utilizando sombras para mostrar los bordes de las superficies. Se utilizan otros métodos para mostrar los bordes de las superficies y las formas en combinación con las sombras, o por sí solos, como los rellenos de color y la opacidad dependiendo el caso.
Dar forma a los componentes
La forma ayuda a los usuarios a identificar los componentes y afecta a su utilidad. El grado en que los componentes pueden cambiar su forma depende de:
- Si un componente se identifica por su forma.
- Sí, tiene requisitos ergonómicos, como un tamaño mínimo de objetivo táctil.
Contraste de componentes sobre capas
También puedes consultar
Iconography
About
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:
