[Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (II)

Hola a todos!

En el artículo anterior vimos una introducción rápida a Expression Blend 4 (Si no lo has visto, corre ¿A que esperas?) y lo fácil que resultaba con el mismo darle un aspecto personalizado a elementos de nuestra aplicación, unos botones más exactamente. En esta nueva entrega vamos a ver dos aspectos importantes: Por un lado veremos como controlar los estados visuales (y que son) de nuestros elementos.

Estados visuales

Los estados visuales de un elemento en Silverlight, son todos los posibles estados que dicho elemento puede tener. Por ejemplo, un botón puede estar presionado, normal, deshabilitado, con foco, sin foco… a estos diferentes estados es a lo que conocemos como estados visuales. Expression Blend nos permite al diseñar la plantilla de un elemento (como la que creamos para nuestros botones) indicar para cada estado del mismo que propiedades queremos alterar. Podemos ver esto mediante la pestaña “States” (Estados) que tenemos en la parte superior izquierda de la pantalla:

image

Por defecto al crear una nueva plantilla para un elemento (un botón, un textbox…) estos estados no realizan ninguna acción. ¿El resultado? Cuando usamos nuestro elemento, un botón por ejemplo, no responde de ninguna forma al usuario. no sabemos si está pulsado o no, si está activado o desactivado, en resumen: no da un feedback o respuesta visual a las acciones del usuario. Esto es algo muy desconcertante, pues estamos acostumbrados a obtener una respuesta inmediata a nuestras acciones, lo que en diseño se conoce como el patrón de gratificación instantánea. El no dar al usuario una respuesta rápida a sus acciones, de forma que pueda “saber” que la aplicación ha recibido su orden, puede ser muy frustrante.

Vamos a evitar esto de forma muy sencilla haciendo uso de los estados visuales. Partiremos de la base que dejamos terminada en el artículo anterior con nuestros botones. Si entramos a editar la plantilla del botón y seleccionamos la pestaña de States (Estados) veremos que al seleccionar cualquier estado, el punto que tiene a su izquierda se enciende en rojo y la pantalla central se rodea por un borde de este mismo color:

image

Esto significa que Blend está en modo “animación”, en este modo todos los cambios que hagamos a las propiedades de nuestra plantilla se quedarán guardados, de forma que cuando salgamos de este estado, por ejemplo al seleccionar el estado Normal, estos cambios se desharán y solo se aplicarán al volver al estado Pressed.

Para practicar un poco vamos a elegir el estado Pressed, seleccionar el ContentControl del árbol de objetos y vamos a incrementar su margen derecho hasta los 40 píxeles.

Veremos que además de modificar la propiedad y ver el efecto visual, en el árbol de objetos se ha marcado el ContentControl con un punto rojo y tenemos un desplegable que nos indica las propiedades que están siendo animadas:

image

Vamos a seleccionar ahora el estado Disabled, veremos que el punto rojo desaparece del ContentControl, pues todavía no hemos animado este estado. En este caso seleccionamos la Grid y cambiaremos sus colores a tonos grises, también seleccionaremos el ContentControl y estableceremos su opacidad al 20%. Si ahora establecemos un botón de los que teníamos en nuestra página inicial como deshabilitado obtendremos un resultado parecido a este:

image

El resultado hace que el usuario sepa fácilmente que botones puede usar y cuales no, además al pulsar un botón verá que el texto se desplaza levemente respondiendo a su pulsación.

Conclusión

Como hemos podido ver, usar los estados visuales nos permite dar más vida a nuestros elementos y nuestras plantillas, además de conseguir que la experiencia de nuestro usuario sea mucho mejor. En el siguiente artículo hablaremos más a fondo de las animaciones y como podemos, con sutiles detalles, mejorar el aspecto de nuestra aplicación y la experiencia global del usuario.

Por el camino, aquí tenéis el proyecto de ejemplo de este artículo, con la plantilla completa y los estados visuales definidos.

Un saludo y Happy Coding/Design

Un comentario sobre “[Windows Phone 7.5] Dale calidad a tus aplicaciones con Expression Blend (II)”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *