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. 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?
  2. 8.
  3. 9.
  4. 10.
  5. 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
  6. 12.
  7. 13.
  8. 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:
  9. 15.
  10. 16.
  11. 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.
  12. 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.
  13. 20.
  14. 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.
 

  15. 22.
  16. 23.
  17. 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)
  18. 25.
  19. 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.
  20. 27.
  21. 29.

    iOS

  22. 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.
  23. 31.
  24. 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?
  25. 43.
  26. 45.

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

    ciertamente podemos hacer la espera mucho más placentera.
  27. 48.

    Cuándo usarlas: Micro Interacciones - Crear un hábito. - Seguir

    el tema general de la app. - Evitar interacciones indeseadas/innecesarias.
  28. 51.

    Cuándo usarlas: Transiciones - Transportar al usuario entre contextos de

    navegación. - Jerarquía visual y conexión entre elementos
  29. 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.
  30. 60.