Pro Yearly is on sale from $80 to $50! »

Patrones de navegación y animaciones - iOS y Android

2224b0579d95aafae306566b134fbebc?s=47 juanmnl
May 01, 2017

Patrones de navegación y animaciones - iOS y Android

A talk I gave with a good friend and an excellent iOS dev{signer} (Felipe Hernandez) in Santiago de Chile about iOS/Android navigation and animation patterns.

2224b0579d95aafae306566b134fbebc?s=128

juanmnl

May 01, 2017
Tweet

Transcript

  1. @FelipeDev Felipe Hernández R. iOS magician @_juanmnl Juan Manuel Cornejo

    Experience {Dev}signer
  2. Patrones de Navegación & Animaciones

  3. Patrones de Navegación iOS || Android

  4. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX

  5. INTERACCIÓN LAYOUT NAVEGACIÓN Core UX

  6. ¿Pára que nos sirve? • ¿Cómo navegar entre las diferentes

    secciones de nuestra app? • ¿Debo usar la navegación Drawer o la de Tabs? • Si uso Tabs, ¿deben ir abajo o arriba? • ¿Cómo regresar de la vista actual? • ¿Cómo mantener contexto?
  7. El medio

  8. None
  9. None
  10. Tabs

  11. iOS En iOS los “tabs” se encuentran en la parte

    inferior de la pantalla. Es un patrón de diseño de navegación bastante familiar, utilizado por muchos productos con una larga historia de éxito, como Facebook, Twitter e Instagram. Los “tabs” de iOS consisten –típicamente– de un icono con texto. Patrones comunes: • Tab de Inicio (contenido principal/home) • Tab de Búsqueda (si hay contenido buscable) • Tab de Composición / Creación • Tab de Notificaciones • Tab de Perfil/Usuario
  12. None
  13. None
  14. Android En Android, los Tabs se encuentran en la parte

    superior de nuestra pantalla y están –usualmente– representados por texto o ícono (a diferencia de iOS), a menos que se utilice la relativamente nueva Boston Navigation.
 
 Common Patterns:
  15. Tabs

  16. Swiping

  17. Bottom Navigation Bar Google says the following on Tabs vs.

    Bottom Navigation: Tabs make it easy to explore and switch between different views and Bottom Navigation bars make it easy to explore and switch between top-level views in a single tap.
  18. Side navigation/drawer

  19. iOS Navigation Drawers are not a native design pattern. They

    came to the platform as iOS design evolved but are still an important part of navigation in a lot of applications. *Since Apple does not provide an API to implement Navigation Drawers, developers typically use third party libraries.
  20. None
  21. Android Navigation Drawers are a native design pattern, so Google

    provides you with the APIs you need to build a navigation drawer, no need to search for a third party APIs.
 

  22. None
  23. Top Bars

  24. iOS On iOS the top bar is called the Navigation

    Bar. The Navigation Bar’s main purpose is to allow the user to navigation through a series of hierarchical app screens via usage of the back button. Navigation Bars typically include: • The title of the section the user is currently on • A back button on the left if there’s a screen to navigate back to • A content control element on the right if applicable (like Search)
  25. None
  26. Android On Android the top bar is called the Toolbar.


    Android’s Toolbar is more standardized than iOS and typically includes: Navigation Bars typically include: • The title of the section the user is currently on • An Up button on the left if there’s a screen to navigate back to • A Navigation Drawer button if there is no Up button • Menu buttons and overflow menu with more options The menu buttons and overflow menu can be used as an both alternative and a supplement to a Side Navigation Drawer. An overflow menu can potentially remove the need for a Side Navigation Drawer depending on how many different views your app needs to contain. Alternatively, you can let each section from your Side Navigation Drawer have it’s own overflow menu with further options that your user can interact with.
  27. None
  28. Back Buttons (y la Navigation Bar de Android)

  29. iOS

  30. Android Since Android has an onscreen navigation bar, the design

    documentation distinguishes between The Up Button and the Back Button.
 
 The back button is part of the Navigation Bar and “navigates in reverse chronological order through the history of recently viewed screens”. While the Up button won’t take users out of your app, the Back button can take the user from the current app to the one they were previously using.
  31. None
  32. INTERACCIÓN LAYOUT NAVEGACIÓN Core UX

  33. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX

  34. LAYOUT NAVEGACIÓN INTERACCIÓN Core UX

  35. Animaciones La percepción de la interacción

  36. ¿Que es una animación?

  37. ¿Por qué usarlas?

  38. “We’re no longer just designing static screens. We’re designing for

    how the user gets from those screens to actually view content.” Zurb Co. ¿Por qué usarlas?
  39. Por que el detalle importa. ¿Por qué usarlas?

  40. How do you feel today? Normal Fun El detalle importa

  41. How do you feel today? El detalle importa

  42. ¿Cuándo usarlas?

  43. On boarding (splash): Crear toda una experiencia el ingresar a

    una app. Cuándo usarlas: On Boarding
  44. Cuándo usarlas: On Boarding

  45. Cuándo usarlas: Loading Loading: No podemos controlar el tiempo, pero

    ciertamente podemos hacer la espera mucho más placentera.
  46. Cuándo usarlas: Loading

  47. Cuándo usarlas: Micro Interacciones MicroInteracciones: Objetos móviles captan inmediatamente la

    atención del usuario.
  48. Cuándo usarlas: Micro Interacciones - Crear un hábito. - Seguir

    el tema general de la app. - Evitar interacciones indeseadas/innecesarias.
  49. Cuándo usarlas: Micro Interacciones

  50. Cuándo usarlas: Transiciones Transiciones de pantalla: La animación más básica

    en cualquier ambiente
  51. Cuándo usarlas: Transiciones - Transportar al usuario entre contextos de

    navegación. - Jerarquía visual y conexión entre elementos
  52. Cuándo usarlas: Transiciones

  53. Cuándo usarlas: Transiciones

  54. Cuándo usarlas: Transiciones

  55. Cuándo usarlas: Reforzar una acción Visualizar el resultado de una

    acción. Animaciones pueden mejorar cada punto de interacción y reforzar la acción que un usuario está ejecutando.
  56. Cuándo usarlas: Transiciones

  57. Palabras finales

  58. ¿Preguntas?

  59. Gracias :D @felipeDev @_juanmnl

  60. None
  61. Recursos: - www.ramotion.com - www.uxplanet.org - www.zurb.com - www.raywenderlich.com -

    www.babich.biz - www.uxpin.com