Contenidos
Regiones y orientación de la UI
Esta sección se encarga de mostrar la estructura de alto nivel de nuestras apps, ya sea en móviles como en tablets y ordenadores. También contiene orientaciones.
Nota: Para las orientaciones en relación a la hora de ordenar los elementos en el espacio Z para conseguir un correcto comportamiento y sombras, observa las secciones de Entorno y Objetos en un Espacio 3D.
Las apps son muy diferentes en función de las necesidades que se encarguen de cubrir. Por ejemplo:
- Apps que se crean alrededor de una única actividad como puede ser una calculadora, cámara o muchos juegos.
- Apps cuyo propósito principal es desplazarse entre actividades diferentes sin llegar a tener una navegación excesivamente profunda como la aplicación del marcador del teléfono que solo ofrece “favoritos”, “recientes”, y contactos.
- Apps que combinan un amplio conjunto de vistas de datos con una navegación profunda como puede ser una alta cantidad de directorios diferentes de una aplicación de correo o categorías de productos en una app de compras.
La estructura de tu app dependerá tanto del contenido como de las tareas que tu quieres proporcionar a tus usuarios.
Empieza desde arriba
La pantalla de inicio requiere de una atención especial. Esta la primera pantalla que las personas ven tras lanzar tu app, así que debería ofrecer una experiencia gratificante para todos los usuarios, ya sean nuevos o frecuentes.
Pregúntate a ti mismo: ¿Qué querrán los usuarios habituales de mi app?, y estructura tu pantalla de inicio de acuerdo a dicha experiencia.
Presenta el contenido. Muchas apps se enfocan en mostrar el contenido. Evitar la navegación solo entre pantallas y en su lugar permite a los usuarios conseguir conseguir la experiencia de tu app de un modo correcto haciendo que el contenido sea la pieza fundamental de tu pantalla de inicio. Elige que provocaría una mayor satisfacción visualmente además de ser apropiada para los tipos de datos que vas a mostrar en función del tamaño de pantalla.
Navegación anclada y acciones. Como cualquier toolbar, la barra de la app puede organizar las acciones importantes. Su posición en la parte superior de la pantalla es ideal para presentar controles de navegación, incluyéndose los desplazamientos entre pestañas o el menú lateral de la izquierda. Si el usuario puede buscar dentro de tu contenido, incluye la acción Buscar en la barra de la app para que las personas puedan acortar a través de la jerarquía de navegación.
Se obstinado sobre las funciones. Cuando tu app tenga una gran cantidad de contenidos o de capacidades, enfoca al usuario a los aspectos más críticos de tu producto. Resalta la navegación hacía los elementos importantes dentro del área de contenido. Promociona las acciones más características como puede ser con un botón de acción flotante.
Estrategias de la vista de nivel superior
El nivel superior transmite las capacidades de tu app mostrando al usuario las áreas de mayor funcionalidad. Algunas apps estarán muy enfocadas y tendrán una necesidades de navegación modestas. Sin embargo en otras apps el nivel superior se constituirá de varias vistas, así que querrás asegurarte de que el usuario puede navegar eficientemente entre ellas.
Selecciona el método que mejor se adapte a las necesidades de navegación de tu app.
Mantén el enfoque en una única vista con una navegación integrada. Colocando toda la navegación necesaria directamente junto al resto de contenido de tu app, conseguirás que sea extremadamente visible al usuario. Esto puede ser apropiados para apps con un modelo muy simple de navegación. Sin embargo, presentar un gran número de rutas de navegación puede reducir el espacio disponible para mostrar el contenido principal. Esas vías podrían ser distribuidas por toda la pantalla en lugar de situarse en un sitio predecible.
Usa navegación en contexto si:
- Tu app tiene una vista principal muy solida, y no hay ninguna otra alternativa.
- Tus usuarios pueden completar la mayoría de las tareas habituales fácilmente dentro de la vista principal.
- Esperas que tus usuarios usarán tu app con poca frecuencia y apreciarán unas rutas bien expuestas.
Usa pestañas para desplazarse entre un número pequeño de vistas de igual importancia. Si tu app tiene unas cuantas áreas funcionales, y cada una de ellas con jerarquías poco profundas, utilizar pestañas incrementa coherencia de esas vistas de nivel superior. También acelerará el desplazamiento entre las mismas, trayendo la vista solo con un clic o un deslizamiento. Por otro lado, mostrar pestañas toma un espacio significativo en pantallas pequeñas, por lo que es eficiente solo para unas pocas vistas.
Usa pestañas si:
- Esperas que los usuarios de tu app se desplacen entre vistas frecuentemente.
- Tienes un número límite de vistas de nivel superior.
- Quieres que el usuario sea consciente de las alternativas existentes.
Administra la estructura más compleja a través de un navigation drawer. El menú lateral puede mostrar un gran número de elementos de navegación concurrente. Es realmente útil cuando tu app tiene una pantalla única y natural de “inicio”, y el cajón puede entonces actuar como un índice de menor frecuencia para los destinos menos visitados. Si tu app requiere una navegación cruzada entre pantallas de bajo nivel y otras secciones importantes, la habilidad de deslizar el menú lateral desde cualquier punto de tu app hará que los desplazamientos sean mas eficientes para el usuario. Sin embargo, es menos obvio, por lo que puede provocar que los usuarios tomen más tiempo para familiarizarse con los contenidos.
Usa un navigation drawer si:
- Tu app tiene un gran número de vistas de nivel superior.
- Tu app habilita una rápida navegación cruzada entre vistas que no están estrechamente relacionadas.
- Si tienes una navegación profunda y quieres acelerar que el usuario pueda regresar a la pantalla principal de tu app.
- Si quieres reducir la visibilidad de los elementos de navegación menos importantes y que se visitan con menor frecuencia.
Independientemente de la estrategia de la vista de nivel superior que elijas, la navegación en contexto es siempre una poderosa táctica para moverse entre conjuntos de datos relacionados. Algunos ejemplos son proporcionar enlaces directos entre una canción y otra del mismo artista, entre elementos recientes y un historial completo, o entre una entrada de un usuario y su perfil. Esas rutas directas son naturales ya que extienden una tarea principal con otra relacionada.
Estructura en una tablet
Esta estructura incluye una barra de la app permanente y un botón de acción flotante. La barra de la app absorbe los elementos de las barras inferiores de los móviles y las tablets.Un barra inferior opcional puede añadirse para añadir funciones o acciones adicionales. Los menús laterales superponen el resto de elementos estructurales. Estos pueden fijarse para así mostrarse permanentemente.
Estructura en un ordenador
Esta estructura incluye una barra de la app permanente y un botón de acción flotante. La barra de la app absorbe los elementos de las barras inferiores de los móviles y las tablets. Una barra inferior opcional puede añadirse para añadir funciones o acciones adicionales. Los menús laterales superponen el resto de elementos estructurales. Estos pueden fijarse para así mostrarse permanentemente. Los menús laterales también pueden tener tiras de contenido con sus propias toolbars secundarias para pestañas, paletas o otras acciones secundarias.
Regiones de la UI
Evita cortar la interfaz en demasiadas regiones lo cual puede causar formas en L. En su lugar, utiliza espacios en blanco para delimitar áreas secundarias.
Toolbars
Las toolbars son versátiles y pueden utilizarse de muchas formas. Aquí unos ejemplos.
Barra de la app
La barra de app, formalmente conocida como action bar en Android, es un tipo especial de toolbar que es utilizada para mostrar tu marca, navegar, buscar y realizar acciones.
Si tu app tiene un menú lateral, el icono de control para abrir y cerrar este menú se encuentra en la parte izquierda de la izquierda de la barra de la app. Este control también modifica su forma para mostrar una flecha hacia atrás para permitir volver a la actividad anterior. El título en esta barra refleja la página actual y puede ser el nombre de la app, el título de la página o un filtro de la página.
Los iconos en la parte derecha son acciones relacionadas con la app. El icono del menú abre el menú overflow, el cual contiene acciones secundarias y elementos del menú como ayuda, ajustes y retroalimentación (feedback).
Color del título
En una barra de la app, todos los iconos deberían tener el mismo color.
El título puede tener un color distinto de los iconos si es necesario diferenciar la jerarquía visual. Los colores del título diferentes a los iconos funcionan mejor sobre fondos con suficiente contraste tanto para glifos blancos como negros.
Métricas
Altura por defecto
- Móvil en modo horizontal: 48 dp
- Móvil en modo vertical: 56 dp
- Tablet u ordenador: 64 dp
- Para barras extendidas, la altura es igual a la altura por defecto más incrementos.
Menús
Un menú es una hoja de papel temporal que siempre se superpone sobre la Barra de la App, en lugar de comportarse como una extensión de la misma.
Barras del sistema
Barra de estado (status bar) y barra de la ventana
En Android, la estatus bar contiene iconos de notificaciones e iconos del sistema. En Chrome, la barra superior contiene los controles de la ventana: minimizar, pantalla completa y cerrar. En una app de Chrome, la barra superior no puede desaparecer, y los controles de la ventana siempre se colocan en la barra de la app.
Status bar en Android
Métricas:
- Altura de la barra de estado en Android: 25 dp
- Altura de la barra de la ventana en Chrome: 32 dp
Variantes de color
Por defecto, el color de la barra de estado o de la barra de la ventana tiene un tono oscuro encima del color de la barra de la app. Puede también hacer referencia a un elemento que se encuentra en la pantalla o puede ser translúcida.
Navigation bar de Android (barra de navegación)
La barra del sistema en Android que contiene los controles de navegación del dispositivo: Atrás, Inicio y Recientes. También muestra un menú para apps escritas para Android 2.3 o anterior.
Métricas
- Altura: 48 dp
Variantes de color
Por defecto, la barra de navegación es negra, aunque puede tomar el color de la barra de la app, ser translúcida o transparente.
Estante de Chrome OS
Whiteframes
Los whiteframes (marcos blancos) proporcionan una variedad de estructuras de layouts que permiten conseguir aproximaciones coherentes de superficies, capas y sombras.
Puedes ver más información sobre Estructura en la página oficial de Google en inglés pulsando aquí.