Menú Navegación Páginas

El blog de Antonio Leiva sobre diseño y desarrollo de interfaces en Android

Rediseñando la App de idealista.com

Rediseñando la App de idealista.com
  • Twitter
  • Facebook
  • Google Plus
  • LinkedIn

Este mes he estado buscando piso para alquilar y me han venido increíblemente bien las aplicaciones para móviles de las Webs más posicionadas en el tema. Una de las que más he utilizado ha sido la de idealista, que si bien su funcionalidad es bastante buena, la apariencia y experiencia de usuario se ha quedado unas cuantas versiones de Android por detrás.

Como ya hice en su momento con la App de ONLAE, he rediseñado algunas de sus pantallas. Te muestro el resultado para que te inspires en tus Apps y comentes qué más mejorarías o qué harías de otro modo.

Lo primero que he modificado drásticamente es la organización. En la App original nos encontramos con un gran número de funciones sin un orden aparente, así que lo que he hecho ha sido valerme de las pestañas y un menú lateral para organizarla.

En la principal puedes realizar las búsquedas habituales, o cambiar de pestaña para realizar búsquedas por número de teléfono. La última pestaña nos muestra un historial de las últimas búsquedas.

Home de la aplicación

Para movernos al resto de secciones, se desplegaría un menú lateral al pulsar el botón de Home o hacer un bezel swipe (arrastrar desde el borde de la pantalla). He añadido una pequeña muesca para dar a entender al usuario que ahí hay un menú escondido. Este patrón aún no está estandarizado, así que hay muchas combinaciones, pero esta es una de las que más me gustan.

Menú lateral

El listado del resultado de búsqueda sería algo así:

Y aquí tienes la vista de detalle. Le he dado una especial importancia a la parte inicial, mostrando una imagen que ocupe todo el ancho del dispositivo y toda la información autocontenida en ella:

Vista de detalle

¿Qué te parece? Se te ocurre alguna posible mejora?

¿Te ha gustado? Compártelo

8 Comentarios

  1. Sigo pensando como con la renovación de la app de onlae. Diseño limpísimo, útil, y una muy buena adaptación de la interfaz de ICS. Felicidades!!! Lo único es que veo extraño que el slide lateral del menú sólo sea hasta la mitad de la pantalla y no casi entera (como en FB). Todo lo demás simplemente genial.

    • Gracias! Me alegro de que te guste. El menú lateral es mejor que ocupe lo necesario. En Facebook ocupa más porque la información es más grande, pero prueba a rotar el móvil, verás que se queda a la mitad. En el caso de esta app, con lo que ocupan los títulos quedaría mucho espacio libre y se vería raro.

  2. me gusta mucho el diseño muy bonito sobretodo la idea del menu lateral te felicito sigue asi

    • Muchas gracias! Un saludo :)

  3. El diseño estilo FB siempre me ha gustado, aunque no sé como implementarlo…Sería mucho pedir que me dijeras si usas alguna libreria (y cual) para lograr ese diseño.

    • Hola! Hay varios artículos en el blog al respecto. Aquí tienes una implementación: http://goo.gl/9jFUw. En su época le faltaba la opción de desplegar el menú arrastrando, no sé si se lo habrán añadido ya a la librería.

  4. Hola desde México y muchas gracias por valiosos tutos. Mi pregunta es la siguiente: En la última imagen, donde aparece la foto, el anunciante y la descrición, ¿cómo consigues, que se vean tres secciones, es mediente fragments? Ya he revisado tus tutos de programación y no tengo idea de cual me puede ayudar. Gracias anticipadas. Saludos.

    • Hola! En realidad esto es un diseño, así que no he usado nada en particular. Pero probablemente lo haría con un Linear Layout. La parte de la imagen a su vez sería un RelativeLayout, para colocar los textos encima de la imagen.

Trackbacks/Pingbacks

  1. La Action Bar no es un panel publicitario [Diseño Android] | LiME Creative Labs | LiME Creative Labs - [...] lateral es añadir un icono de menú que se está adoptando como estándar, y que puedes ver en mi …

Deja tus comentarios