Diseño óptimo para desarrolladores Android

Charla para Flisol Cusco, enfocado en el diseño para aplicaciones Android.

Transcript

1. Diseño óptimo para desarrolladores Android
2. Hola! Soy Fahed Hermoza Fundador de la empresa DevArt Desarrollador Android Blogger novato
3. Fundamentos
4. Con +1 000 000 de aplicaciones en Google Play Store, el DISEÑO se vuelve una parte fundamental para que sus aplicaciones sobresalgan... “
5. ➤ Píxeles independientes de la densidad (dp o dpi) ➤ Píxeles de escala independiente(sp) ➤ Cubos de densidad ➤ Clasificación de recursos Fundamentos de Diseño
6. ¿Qué tienen en común todos los diseños? Todos los diseños son subclases de la clase ViewGroup. Estos tienen la oportunidad de declarar nuevos atributos(LayoutParams) y gracias a esto nosotros obtenemos diferentes comportamiento. Fundamentos de Diseño
7. Disposiciones Comunes LinearLayout FrameLayout RelativeLayout Fundamentos de Diseño
8. Disposiciones Comunes PercentFrameLayout y PercentRelativeLayout GridLayout CoordinatorLayout Existen muchos otros widgets (elementos de UI) mediante el cual podrás crear los diseños que requieras. Fundamentos de Diseño
9. Identificar Layouts Fundamentos de Diseño
10. Identificar Layouts Fundamentos de Diseño
11. Patrones de Diseño
12. Un patrón de diseño es la base para la búsqueda de soluciones a problemas comunes en el desarrollo de software. “
13. ➤ ToolBar / Barra de Herramientas ➤ App Bar ➤ Tabs ➤ Navigation Drawer ➤ Desplazamiento y Paginación ➤ Lista de Detalles Patrones Básicos
14. Un buen recurso a tener en cuenta es “Android Patterns”, donde encuentras conjuntos de patrones de interacción que pueden ayudarte a diseñar app Android. “
15. Android Patterns Diálogo de Alerta
16. Android Patterns Iniciar Sesión
17. Para tener una plantilla de diseño con los diferentes patrones, puede visitar “Material Up” “
18. Material Up Iniciar Sesion
19. Material Up Iniciar Sesion
20. Material Design
21. Material design es un sistema...no, es un framework...no, es una filosofía de diseño… Material Design es un lenguaje de diseño creado por Google para el branding de aplicación Android y Web. “
22. 4 Conceptos Fundamentales ➤ Superficies Tangibles ➤ Diseño Gráfico Audaz ➤ Movimiento Significativo ➤ Diseño Adaptativo Material Design
23. Superficies Tangibles Principios de Affordance La superficie o Piezas de Papel digital Sombras Elevación de superficies (onda sutil, elevación) Material Design
24. Diseño Gráfico Audaz Espacio Color Imágenes (Fotografía, ilustración, iconografía) Tipografía (Roboto) Material Design
25. Movimiento Significativo La evolución de la animación en Android trae bastantes beneficios ( Api 3.0 - 4.0, 4.4, 5.0 ) Los detalles son una oportunidad para proporcionar placer y hacer una conexión con el usuario Material Design
26. Hay más de 11 mil dispositivos android esto no significa que necesites construir otros 11 mil diseños para hacer una app de aspecto excelente. “
27. Diseño Adaptativo A mayor espacio, se generan problemas(contenido denso) Breakpoint Patrones responsive (adaptados al cambio) Material Design
28. BreakPoint Material Design
29. Revelar Consiste en revelar contenido oculto cuando se gana espacio adicional. Transformar No implica cambiar los elementos que se visualizan, implica cambiar el formato Dividir Al dividir la pantalla se utiliza espacio adicional para mostrar múltiples elemento. Material Design Patrones Responsive
30. Reflujo Se basa en la flexibilidad de las piezas fundamentales Expandir Amplía el espacio disponible para la UI Posición El cambio de la posición puede hacer la diferencia de una UI accesible Material Design Patrones Responsive
31. Conclusiones
32. La próxima vez que quiera hacer un diseño especial, considera la posibilidad de dar un paso atrás y ver si hay una manera más fácil de hacer ese diseño. “
33. Los patrones de diseño no son reglas estrictas, utilizarlos como guía no como ley. “
34. Material Design una filosofía de diseño eficiente. “
35. Referencias para investigar más a fondo.
36. Gracias Preguntas ? @FahedHermoza Fahed Hermoza - Developer FahedHermoza.com