Windows Phone 7 – Tutorial XXI–Touch Input I

Desde que salió el iphone, ha quedado muy claro que los usuarios queremos teléfonos multitactiles con una buena respuesta y aplicaciones que estén diseñadas a las respuestas de nuestros gestos con los dedos. Windows Phone 7 tiene como requisito de hardware que los teléfonos deben de ser diseñados para tener esta característica y nosotros como programadores no debemos de obviarla.

Debemos de tener en cuenta UI Design and Interaction Guide for Windows Phone 7 para nuestros diseños, por ejemplo debemos de saber que el área mínima de un objeto visual para que el usuario interactúe con el “dedo” es de 26 pixels o 7mm y que el area de interacción de este objeto es de 9mm o 34 pixels.

Para que veáis dos objetos que el usuario va interactuar con ellos deberían de tener este tamaño

 

image

El objeto visual y un espacio alrededor de ellos ya que nuestro dedo no es tan preciso como una stylus y si los ponemos muy juntos el usuario tendría que ser muy preciso y lo que queremos es que sea fácil manejar la aplicación. Estos son los tamaños que Microsoft recomienda y que deberemos de tener en cuenta. Si nos fijamos en el teclado vemos claramente la separación entre los botones

 

image

 

Una vez que tenemos claro como debe de ser el tamaño de nuestros objetos, lo siguiente que tenemos que aprender son los gestos que son permitidos, estos gestos están ya definidos y son los siguientes.

 

Single-touch:

 

• Tap
• Double Tap
• Pan
• Flick
• Touch and Hold

Multi-touch:


• Pinch and Stretch

En la siguiente tabla podemos ver

Gesto

Descripción

Resultado en Windows phone

tap

clip_image001

Pulsa una vez en el elemento.

Abre e inicia todo lo que pulsas.

Double tap

clip_image002

Pulsa dos veces seguidas en el elemento.

Acerca o aleja paso a paso.

Touch and Hold

clip_image003

Pulsa y mantén pulsado el elemento durante unos segundos.

Abre un menú específico del contexto (como hacer clic con el botón secundario de un mouse).

Pan

clip_image004

Coloca el dedo en la pantalla y mantén el contacto mientras lo vas desplazando.

Se mueve por las pantallas o los menús a una velocidad controlada.

Flick

clip_image005

Desplaza el dedo rápidamente en la dirección en la que desees que se mueva la pantalla.

Te podrás desplazar rápidamente por menús o páginas, o moverte lateralmente en los hubs.

Pinch And Strech

clip_image006

Mueve los dedos pulgar e índice para juntarlos o separarlos sobre una pantalla.

Acerca o aleja paulatinamente un sitio web, un mapa o una imagen.

 

Una vez que ya sabemos como debemos diseñar nuestros objetos y los gestos que el usuario puede realizar, ahora solo debemos de capturarlos y realizar las acciones que diseñemos. Esto lo veremos en el siguiente post.

3 comentarios en “Windows Phone 7 – Tutorial XXI–Touch Input I”

  1. Saludos, Oskar.
    El asunto es que tengo uno desde hace un mes y no doy “pie con bola” en el tema de las apps. He instalado varias a traves del marketplace pero no me aparecen en el telf. Y he buscado
    por todas partes y nada. Incluyendo dentro de Games y de HTC Hub. Alguna idea ?

Deja un comentario

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