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.
¿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?
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
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.
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.
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.
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.
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)
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.
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.
“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?
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.
juanmnl
netprotections
ozontech
kiyoshifuwa
fujiiitakarin
excitejp
freee
greensmile
uxaustralia
mkasumi
rena0525
solmetts
davidbonilla
orderedlist
dougneiner
tammielis
geeforr
malarkey
lauravandoore
paigeccino
moore
maltzj
bermonpainter
maggiecrowley