Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Patrones de navegación y animaciones - iOS y Android

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.

juanmnl

May 01, 2017
Tweet

More Decks by juanmnl

Other Decks in Design

Transcript

  1. @FelipeDev
    Felipe Hernández R.
    iOS magician
    @_juanmnl
    Juan Manuel Cornejo
    Experience {Dev}signer

    View Slide

  2. Patrones de Navegación & Animaciones

    View Slide

  3. Patrones de Navegación
    iOS || Android

    View Slide

  4. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View Slide

  5. INTERACCIÓN
    LAYOUT NAVEGACIÓN
    Core UX

    View Slide

  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?

    View Slide

  7. El medio

    View Slide

  8. View Slide

  9. View Slide

  10. Tabs

    View Slide

  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

    View Slide

  12. View Slide

  13. View Slide

  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:

    View Slide

  15. Tabs

    View Slide

  16. Swiping

    View Slide

  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.

    View Slide

  18. Side navigation/drawer

    View Slide

  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.

    View Slide

  20. View Slide

  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.


    View Slide

  22. View Slide

  23. Top Bars

    View Slide

  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)

    View Slide

  25. View Slide

  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.

    View Slide

  27. View Slide

  28. Back Buttons
    (y la Navigation Bar de Android)

    View Slide

  29. iOS

    View Slide

  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.

    View Slide

  31. View Slide

  32. INTERACCIÓN
    LAYOUT NAVEGACIÓN
    Core UX

    View Slide

  33. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View Slide

  34. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View Slide

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

    View Slide

  36. ¿Que es una animación?

    View Slide

  37. ¿Por qué usarlas?

    View Slide

  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?

    View Slide

  39. Por que el detalle importa.
    ¿Por qué usarlas?

    View Slide

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

    View Slide

  41. How do you feel today?
    El detalle importa

    View Slide

  42. ¿Cuándo usarlas?

    View Slide

  43. On boarding (splash):
    Crear toda una experiencia el ingresar a una app.
    Cuándo usarlas: On Boarding

    View Slide

  44. Cuándo usarlas: On Boarding

    View Slide

  45. Cuándo usarlas: Loading
    Loading:
    No podemos controlar el tiempo, pero ciertamente
    podemos hacer la espera mucho más placentera.

    View Slide

  46. Cuándo usarlas: Loading

    View Slide

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

    View Slide

  48. Cuándo usarlas: Micro Interacciones
    - Crear un hábito.
    - Seguir el tema general de la app.
    - Evitar interacciones indeseadas/innecesarias.

    View Slide

  49. Cuándo usarlas: Micro Interacciones

    View Slide

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

    View Slide

  51. Cuándo usarlas: Transiciones
    - Transportar al usuario entre contextos de navegación.
    - Jerarquía visual y conexión entre elementos

    View Slide

  52. Cuándo usarlas: Transiciones

    View Slide

  53. Cuándo usarlas: Transiciones

    View Slide

  54. Cuándo usarlas: Transiciones

    View Slide

  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.

    View Slide

  56. Cuándo usarlas: Transiciones

    View Slide

  57. Palabras finales

    View Slide

  58. ¿Preguntas?

    View Slide

  59. Gracias :D
    @felipeDev
    @_juanmnl

    View Slide

  60. View Slide

  61. Recursos:
    - www.ramotion.com
    - www.uxplanet.org
    - www.zurb.com
    - www.raywenderlich.com
    - www.babich.biz
    - www.uxpin.com

    View Slide