Definiendo La UI de Login

Una vez que tenía el flujo de login y logout funcionando con Facebook… y Android Studio (jeje), me puse a desinhibirme un poco y que mejor que pensar en un borrador de la Interfaz de Usuario (UI) para el Login, lo que el usuario va a ver la primera vez que entra en la app y no ha hecho Login todavía. Si entra en sucesivas veces y no ha cerrado sesión, la app guardará la sesión, para entrar directamente la siguiente vez sin necesidad de volver a loguearse.

Así que hice un borrador de UI siguiendo algunas pautas que siempre me gusta tener presentes a la hora de hacer una Splash Screen (Pantalla Inicia de la App). Esas sopn basicamente:

  • Algo llamativo pero minimalista.
  • Jugar con las transparencias para destacar elementos importantes.
  • Imagen FullScreen que haga pensar en el motivo de la app.
  • En caso de que sea una Screen de Login, que sea lo más fácil posible, vuelve a aparecer el termino minimalista.

Así que siguiendo estas pautas, de cosecha propia, que he ido aprendido a base de prueba y error y viendo como los autenticos diseñadores trabajan, pues lo plasme en esta screen totalmente funcional.

De manera que:

  • Una imagen de fondo de buena calidad y resolución con los elementos de Login perfectamenta mimetizados.
  • Para mimetizar los elementos de Login, un Layout Centrado que los englobe con un fondo de color oscuro pero con trasparencias.
  • La imagen que evoque a la amistad, en este caso dos niñas, a toda pantalla (ocultando el Action Bar, solo en este fragment).
  • Lo más fácil posible para loguearse es utilizando un servicio de terceros que se encargue del engorro de la privacidad y autenticidad de las claves (En este caso Facebook) y que el usuario con un sólo click en un botón pueda entrar, despreocupandose de meter usuario y contraseña cada vez que quiera acceder, o cualquier otros datos.

Considerando todo esto, finalmente la interfaz de usuario del screen de Login ha quedado como vemos a continuación:

UI de Login de Qdemos!

Y el commit correspondiente lo podemos ver en: Commit UI Login

Nota: El código está comentado lo justo, ya que no me gusta tener excesivos comentarios a lo largo del código. Creo que es vital definir bien el nombre de las funciones y las variables, así como la forma de estructurar el código, por lo que para alguien que entienda de Android, viendo el código y los comentarios que hay en aquellas partes que me gusta explicar, es más que suficiente para entender de simple vista lo que se hace en cada sitio.

Anuncios

Un pensamiento en “Definiendo La UI de Login

  1. bro me estas ayudando mucho con tus post… quizas puedas hacer un video del resultado para comprender a la par del codigo que es lo que haces..

    Gracias de antemano y Saludos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s