gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
12ef1b792524f53ee1f45947e49b7bc46f954786
freeCodeCamp/guide/spanish/android-development/material-design/index.md
Fahed 35da096e42 Added articles: Material Design and User interface design for the English and Spanish language (#32779) 
* Added article Material Design

* Spanish translation of Material Design article.

* Added article User interface design

* Spanish translation of User interface design.

* Fixed more information and courses of the article material design (guide english and spanish)

* Fixed more information and courses of the article user interface design (guide english and spanish)

* Fixed localTitle of the article material design (guide spanish)

* Fixed localTitle of the article user interface design (guide spanish)

* fix/suggested-changes

* fix/suggested-changes
2019-07-01 18:57:53 -05:00

4.7 KiB
Raw Blame History

title, localeTitle
title localeTitle
Material Design Diseño de Materiales

Diseño de Materiales

Material Design es un sistema de diseño para construir productos digitales audaces y hermosos. Creado por un equipo de ingenieros y diseñadores de UX en Google. Google agrego el concepto material design en Android 5.0 - Lollipop. Actualmente utilizado en Android, IOS, Flutter y Web.

Emplea las experiencias del mundo físico para hacer interfaces de usuario (UI) mas intuitivos, utilizando los siguientes conceptos: La luz, la sombra y volúmenes de renderizados. Material Design se centra en 4 conceptos principales:

  • Superficies tangibles.
  • Diseño grafico audaz.
  • Movimiento significativo.
  • Diseño adaptativo.

Superficies Tangibles

Tu tienes intuición sobre que objetos se sentirán como, con solo mirarlos, a estos los llamamos Affordances. Material design toma los principios básicos de Affordances para hacer nuestra UI mas intuitiva.

En material design la UI tiene de piezas de papel digital llamados superficies, por lo tanto todo en pantalla esta sobre una superficie. Las sombras transmiten elevación relativa.

Floating Action Button es un patrón distintivo del Material Design. Es de fácil acceso y comunica importancia, cuenta con características de elevación y de interacción.

Existen dos formas de retroalimentación visual en respuesta al tacto:

  • Efecto de Onda Sutil, basada en la ondulación de tinta, un movimiento radial que va hasta los limites de la superficie.
  • Elevación de Superficie, sensación como si el toque atrae la superficie.

Diseño Grafico Audaz

Material Design usa el color con un propósito audaz, no solo por estética sino para hacer apps mas fáciles de usar. La paleta de colores de Material Design recomienda 2 tonalidades y un color de acento.

  • Color primario : Usualmente usado para el fondo de la barra de acción.
  • Color oscuro primario : Usualmente usado para el fondo de la barra de estado.
  • Color de acento : Color resaltante, envolvente y completamente adaptable a su app.

La tipografía Roboto es el tipo de letra estándar en Android. El uso de Roboto nos asegura trabajar con una variedad de idiomas, es mas claro y legible en cualquier pantalla.

Buenas imágenes nos hacen formar una conexión con el tema, simpatizar su alegría, dolor o placer, para ello usted utiliza la fotografía para transmitir un significado audaz y dinámico,la ilustración para transmitir un significado lúdico y elegante, la iconografía transmite un significado elegante y refinado. Todo ello ayuda a crear una experiencia de inmersión.

Movimiento Significativo

Las animaciones en Android han evolucionado desde sus inicios. En las primeras versiones la animación solo permitía mover, escalar y desvanecer. En la versión de Android 3.0 y 4.0 se hizo mas simple y fácil de usar. En Android 4.4 comenzamos a hablar sobre las escenas y transiciones generando un nuevo paradigma para la animación de objetos en la UI. En Android 5.0 se agrego nuevas formas de coreografiar el movimiento.

La animación en Android se volvió muy poderoso en cada versión, en la actualidad existen muchos efectos de animación, con el propósito de proporcionar continuidad entre diferentes estados de UI para crear experiencias más comprensibles.

Diseño Adaptativo

El diseño adaptativo cambia la UI basado en el tamaño de la pantalla, ya sea que se encuentre en un teléfono Nexus 4 (4.7 pulgads), Pixel XL (5.5 pulgadas), Nexus 6 (6.0 pulgadas) o una tablet Nexus 10 (10.1 pulgadas).

Los breakpoints son puntos donde la UI cambia. Al encontrar un breakpoint debe empezar a cambiar la UI. Usted puede empezar por los archivos drawables, string, layout, orientación. Para adaptaciones especificas usted puede variar el numero de columnas, alturas y anchura de márgenes, espacio.

Más Información

Cursos