Introducción a Android y Material Design

Charla para la universidad San Antonio Abad del Cusco y Google Developer Group Cusco.
Se da una breve introducción al Diseño de Materiales en Android

Transcript

1. Introducción a Android y Material Design Expositor: Fahed Hermoza GDG Cusco
2. Un poco de mi Fahed Hermoza fahedhermoza.com fahedhermoza@gmail.com github.com/fahedhermoza
3. Visión General ¿Qué es Android? “Podríamos decir que android tiene su propia cultura y que esa cultura se expresa en el lenguaje Java y Xml. Para dominar android es necesario aprender muchas ideas y técnicas nuevas y contar con una guía de este territorio desconocido resulta de gran ayuda” Big Nerd Ranch - Programación con Android. ¿Objetivos de esta charla? Enfocado al Diseño.
4. Centrándonos en el Diseño - Primero, diseños para tamaños pequeños. - A cada dispositivo se asigna un cubo de densidad.
5. Clasificación de Recursos - Dentro de la carpeta “res” - Personalizar las imágenes - Ofrecer estilos - Personalizar el lenguaje - Personalizar los layout
6. Layouts - La UI es un árbol anidado llamado jerarquia de vistas. - Frame Layouts, Linear Layout,Relative Laout, Grid Layout, Scroll View, - Fundamentos Bajos: List View, Recycler View,View Pager.
7. Identificando Layouts
8. Identificando Layouts
9. Patrones de Diseño - Toolbar / App bar - Tabs - Navigation Drawer - Desplazamiento y paginación - Lista de detalles y otros. Patrón de diseño es la base para la búsqueda de soluciones a problemas comunes en el desarrollo de software
10. Temas y Estilos - Permite reutilizar un conjunto de atributos, para personalizar la UI. - Un estilo da la apariencia de un único elemento en la UI. - Un tema utiliza la misma sintaxis de un estilo, pero aplicando una colección de estilos a un elemento, una activity o toda la app. Tip: Temas y Estilos dan el carácter único del producto de su compañía en su app!
11. Material Design Material Design es un concepto que introduce la experiencia del mundo físico(luz, sombra, volúmenes) al diseño de una app : - Superficies Tangibles. - Diseño Gráfico Audaz. - Movimiento Significativo. - Diseño Adaptativo. Video: Material Design
12. Superficies Tangibles - Nosotros tenemos intuición sobre qué objetos se sentirán como, con solo mirarlos, a esto lo llamamos Affordances. - Tomamos los principios básicos de Affordances y tangibilidad para hacer nuestra UI más intuitivas. Ejemplo: MD-Ejemplo1
13. Superficies Tangibles - UI se compone de Piezas de Papel Digital (superficie). - Todo en pantalla esta en sobre una superficie. - Utilizamos sombras para transmitir elevación relativa. Elevación 4dp sombra sutil, 8 dp sombra notable, 16 dp sombra más notable. Tip: Trata de no tener más de 5 superficie en la pantalla a la vez !
14. Superficies Tangibles - Patrón distintivo de materiales. - Fácil acceso y comunica importancia - Cuenta con características de elevación y de interacción. - Algunas funciones como las ondas no son compatibles con todas las versiones. Floating Action Button
15. Superficies Tangibles - Efecto de Onda Sutil, basada en la ondulación de tinta, movimiento radial que va hasta los límites de la superficie. - La superficie en sí mismo puede elevarse, como si estuviera siendo atraída por él touch. Reacción de Superficie Ejemplo: MD-Ejemplo2
16. Superficies Tangibles - Scroll Event Demo - Dynamic Surface Demo (parallax) Eventos Scroll Ejemplo: MD-Ejemplo 3 y 4
17. Diseño Gráfico Audaz - Hay un conjunto de principios llamados la Leyes de Gestalt de la agrupación, los cuales son: - Ley de la experiencia pasada. - Ley de la proximidad - Ley de la similitud Tip: Las cosas pueden ser agrupadas juntas para comunicar relación !
18. Diseño Gráfico Audaz - La paleta de colores de material design incluye un conjunto primario y secundario de colores que pueden utilizar todos los dispositivos. - Se recomienda 3 tonalidades primarias y 1 color acento. - El color de acento tiene que ser un color resaltante, envolvente y completamente adaptable a su app Link: materialpalette.com
19. Diseño Gráfico Audaz - Tipografía Roboto es el tipo de letra estándar de Android. - El uso de Roboto nos asegura trabajar con una variedad de idiomas, es más claro y legible en cualquier pantalla, puede utilizarse en toda la app. - Establece una jerarquía clara en el contenido. Tip: Las unidades adecuadas para el texto es sp, no importa las densidades ni el tamaño de texto preferido
20. Diseño Gráfico Audaz - Limitar su paleta de fuente, con solo una fuente personalizada para el área de marca y roboto para lo demás. - Probar la fuente que está pensando en un par de dispositivos con diferente densidades de pantalla. - Tenga en cuidado con la disonancia cognitiva no deseado y asegúrese de que la fuente se ajuste al estado de ánimo que va a configurar la app. TIPS
21. Diseño Gráfico Audaz - Buenas imagenes nos hacen formar una conexión con el tema, simpatizar su alegría, dolor o placer Imágenes
22. Diseño Gráfico Audaz FOTOGRAFÍA ILUSTRACIÓN ICONOGRAFIA
23. Diseño Gráfico Audaz - Los avatares circulares, son una forma amigable para presentar la imagen. - La técnica de protección background sirve para mostrar contenido claro y legible en partes de una imagen, en particular iconos y textos, importante en el contenido dinámico. Ejemplo: MD-Ejemplo 5
24. Movimiento Significativo - Las animaciones en android han evolucionado desde sus humildes comienzos hasta las APIs de hoy en dia. - Las primeras versiones la animación solo permitía mover,escalar y desvanecer. - En la versiones 3.0 y 4.0 se hizo más simple y más fácil de usar. - En android 4.4 se introdujo escenas y transiciones. - En android 5.0 se añadió nuevas formas de coreografiar el movimiento. - Las API se ha vuelto más poderoso en cada versión, algunos efectos, es imposible o inviable lograr en dispositivos antiguos.
25. Movimiento Significativo - Ejemplo de transiciones: MD-Ejemplo6. - Ejemplo de cambio Continuo: MD-Ejemplo7.
26. Movimiento Significativo - Los detalles, puede ser una oportunidad para proporcionar placer y hacer una conexión con el usuario. - Esto ayuda a explicar que está cambiando y puede dirigir la atención. - Estos pequeños detalles hace que su app sea más agradable.
27. Movimiento Significativo
28. Diseño Adaptativo - El diseño adaptativo cambia la UI basado en el tamaño de la pantalla. - La UI se adapta a la orientación vertical y horizontal. - Veamos algunos ejemplos:
29. Diseño Adaptativo - Mal uso del espacio. - No es cómodo leer. - Calidad de imagen baja.
30. Diseño Adaptativo - El espacio no es razonable - Mantenimiento de Contexto. - Calidad de imagen baja.
31. Diseño Adaptativo - Contenido muy denso a lado izquierdo. - Estetica mala, disposición no uniforme. - Calidad de imagen baja.
32. Diseño Adaptativo - Content First: Primero se debe ver cuáles son las limitaciones de la UI. - Breakpoints: Son los puntos donde la UI cambia. - Podemos empezar a poner en práctica cambiando los calificadores de recursos, como: Width,Height,Orientation, SW(valores que siempre seran lo mismo vertical o horizontal)
33. Diseño Adaptativo Técnicas para administrar el espacio:
34. Diseño Adaptativo Técnicas para administrar el espacio:
35. Diseño Adaptativo Optimizando UIs
36. Diseño Adaptativo Optimizando UIs
37. Diseño Adaptativo Optimizando UIs
38. Gracias Ejemplos: github.com/FahedHermoza/GDG-Cusco-Materi alDesign Referencia: Udacity - Material Design for Android Developers