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 full-size slide

  2. Patrones de Navegación & Animaciones

    View full-size slide

  3. Patrones de Navegación
    iOS || Android

    View full-size slide

  4. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View full-size slide

  5. INTERACCIÓN
    LAYOUT NAVEGACIÓN
    Core UX

    View full-size 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. Side navigation/drawer

    View full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. INTERACCIÓN
    LAYOUT NAVEGACIÓN
    Core UX

    View full-size slide

  18. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View full-size slide

  19. LAYOUT NAVEGACIÓN INTERACCIÓN
    Core UX

    View full-size slide

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

    View full-size slide

  21. ¿Que es una animación?

    View full-size slide

  22. ¿Por qué usarlas?

    View full-size slide

  23. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  26. How do you feel today?
    El detalle importa

    View full-size slide

  27. ¿Cuándo usarlas?

    View full-size slide

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

    View full-size slide

  29. Cuándo usarlas: On Boarding

    View full-size slide

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

    View full-size slide

  31. Cuándo usarlas: Loading

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Cuándo usarlas: Micro Interacciones

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Cuándo usarlas: Transiciones

    View full-size slide

  38. Cuándo usarlas: Transiciones

    View full-size slide

  39. Cuándo usarlas: Transiciones

    View full-size slide

  40. 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 full-size slide

  41. Cuándo usarlas: Transiciones

    View full-size slide

  42. Palabras finales

    View full-size slide

  43. ¿Preguntas?

    View full-size slide

  44. Gracias :D
    @felipeDev
    @_juanmnl

    View full-size slide

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

    View full-size slide