Categorías destacadas
Artículo
|
Windows Phone 7 – 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
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
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
Pulsa una vez en el elemento.
Abre e inicia todo lo que pulsas.
Double tap
Pulsa dos veces seguidas en el elemento.
Acerca o aleja paso a paso.
Touch and Hold
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
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
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
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.
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
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
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
Pulsa una vez en el elemento.
Abre e inicia todo lo que pulsas.
Double tap
Pulsa dos veces seguidas en el elemento.
Acerca o aleja paso a paso.
Touch and Hold
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
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
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
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.
 |
Publicado por: Oscar Alvarez |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
