Compartir a través de

Interacciones del mouse

Optimice el diseño de la aplicación de Windows para la entrada táctil y obtenga compatibilidad básica con el mouse de forma predeterminada. 

ratón

La entrada del mouse es más adecuada para las interacciones del usuario que requieren precisión al apuntar y hacer clic. Esta precisión inherente es naturalmente compatible con la interfaz de usuario de Windows, que está optimizada para la naturaleza imprecisa del tacto.

Donde el ratón y la entrada táctil divergen es en la capacidad del táctil para emular más de cerca la manipulación directa de los elementos de la interfaz de usuario a través de gestos físicos realizados directamente sobre esos objetos (como pasar, deslizar, arrastrar, girar, etc.). Las manipulaciones con un ratón normalmente requieren algún otro elemento de la interfaz de usuario, como el uso de mangos para redimensionar o girar un objeto.

En este tema se describen las consideraciones de diseño para las interacciones del mouse.

Idioma del ratón de la aplicación UWP

Un conjunto conciso de interacciones del mouse se usa de forma coherente en todo el sistema.

Término Description

Pase el ratón para aprender

Mantenga el puntero sobre un elemento para mostrar información más detallada o objetos visuales de enseñanza (como una información sobre herramientas) sin compromiso con una acción.

Haga clic con el botón izquierdo para la acción principal.

Haga clic con el botón izquierdo en un elemento para invocar su acción principal (por ejemplo, iniciar una aplicación o ejecutar un comando).

Desplazarse para cambiar la vista

Mostrar barras de desplazamiento para subir, bajar, izquierda y derecha dentro de un área de contenido. Los usuarios pueden desplazarse haciendo clic en barras de desplazamiento o girando la rueda del mouse. Las barras de desplazamiento pueden indicar la ubicación de la vista actual dentro del área de contenido (al realizar un movimiento panorámico con entrada táctil se muestra una interfaz de usuario similar).

Haga clic con el botón derecho para seleccionar y comandar

Haga clic con el botón derecho para mostrar la barra de navegación (si está disponible) y la barra de aplicaciones con comandos globales. Haga clic con el botón derecho en un elemento para seleccionarlo y mostrar la barra de aplicaciones con comandos contextuales para el elemento seleccionado.

Nota Haga clic con el botón derecho para mostrar un menú contextual si los comandos de selección o barra de aplicaciones no son comportamientos adecuados de la interfaz de usuario. Pero se recomienda encarecidamente usar la barra de aplicaciones para todos los comportamientos de comandos.
 

Comandos de interfaz de usuario para acercar

Muestra los comandos de la interfaz de usuario en la barra de aplicaciones (como + y -), o presiona Ctrl y gira la rueda del mouse, para emular los gestos de pellizcar y estirar para acercar.

Comandos de interfaz de usuario para girar

Muestra los comandos de la interfaz de usuario en la barra de la aplicación o presiona Ctrl+Shift y gira la rueda del ratón para simular el gesto de rotación. Gire el propio dispositivo para girar toda la pantalla.

Haga clic con el botón izquierdo y arrástrelo para reorganizar

Haga clic con el botón izquierdo y arrastre un elemento para moverlo.

Haga clic con el botón izquierdo y arrástrelo para seleccionar texto

Haga clic con el botón izquierdo en texto seleccionable y arrástrelo para seleccionarlo. Haga doble clic para seleccionar una palabra.

Eventos de entrada del mouse

La mayoría de las entradas del mouse se pueden controlar a través de los eventos de entrada enrutados comunes admitidos por todos los objetos UIElement . Estos incluyen:

Sin embargo, usted puede aprovechar las capacidades específicas de cada dispositivo (como eventos de la rueda del ratón) mediante los eventos de puntero, gesto y manipulación en Windows.UI.Input.

Muestras: Consulte nuestro ejemplo BasicInput para .

Directrices para comentarios visuales

  • Cuando se detecta un mouse (a través de eventos de movimiento o de desplazamiento), muestre la interfaz de usuario específica del mouse para indicar la funcionalidad expuesta por el elemento. Si el mouse no se mueve durante una determinada cantidad de tiempo, o si el usuario inicia una interacción táctil, haga que la interfaz de usuario del mouse desaparezca gradualmente. Esto mantiene la interfaz de usuario limpia y desordenada.
  • No use el cursor para la retroalimentación de desplazamiento, la retroalimentación proporcionada por el elemento es suficiente (consulte Cursores a continuación).
  • No muestre comentarios visuales si un elemento no admite la interacción (por ejemplo, texto estático).
  • No use rectángulos de foco con interacciones del mouse. Reserve estos para interacciones con el teclado.
  • Mostrar comentarios visuales simultáneamente para todos los elementos que representan el mismo destino de entrada.
  • Proporcione botones (como + y -) para simular manipulaciones táctiles, como movimiento panorámico, rotación, zoom, etc.

Para obtener instrucciones más generales sobre los comentarios visuales, consulte Directrices para comentarios visuales.

Cursors

Hay disponible un conjunto de cursores estándar para un puntero del mouse. Se usan para indicar la acción principal de un elemento.

Cada cursor estándar tiene asociada una imagen predeterminada correspondiente. El usuario o una aplicación pueden reemplazar la imagen predeterminada asociada a cualquier cursor estándar en cualquier momento. Especifique una imagen de cursor a través de la función PointerCursor .

Si necesita personalizar el cursor del mouse:

  • Use siempre el cursor de flecha (cursor de flecha) para los elementos que se pueden hacer clic. no use el cursor de mano que señala (cursor de mano apuntando) para vínculos u otros elementos interactivos. En su lugar, use efectos hover (descritos anteriormente).
  • Usar el cursor (cursor de texto) para el texto seleccionable.
  • Utilice el cursor de mover (cursor de mover) cuando mover sea la acción principal (como arrastrar o recortar). No use el cursor de movimiento para los elementos en los que la acción principal es la navegación (por ejemplo, iconos de inicio).
  • Utilice los cursores de cambio de tamaño horizontal, vertical y diagonal (cursor de cambio de tamaño vertical, cursor de cambio horizontal, cursor de cambio de tamaño diagonal (inferior izquierda, superior derecha),cursor de cambio de tamaño diagonal (superior izquierda, inferior derecha)), cuando se puede cambiar el tamaño de un objeto.
  • Usen los cursores de mano agarradora (cursor de mano agarradora (abierto) y cursor de mano agarradora (cerrado)) al mover el contenido dentro de una superficie fija (como un mapa).

Samples

  • Last updated on