it-swarm-es.com

¿Cuáles son los modismos comunes para la porción de soltar de una operación de arrastrar y soltar?

Aquí solo me preocupa la otra mitad de una operación D% D, la caída. ¿Cuáles son los modismos comunes para comunicar a un usuario que pueden abandonar? ¿Y cuáles son los "mejores" y en qué situaciones?

En particular, me gustaría saber cuáles comunican algo al usuario antes de que ocurra el arrastre y después de que ocurra el arrastre. Estos pueden ser visuales o 'táctiles' (cambios del cursor del mouse).

12
shemnon
  • Indicar posibles objetivos de caída
  • Mostrar una vista previa en vivo de los resultados
  • Muestra lo que se arrastra en tiempo real

alt text

  • Si no puede soltar algo en alguna parte, explique por qué a los usuarios en una ventana emergente cerca del cursor:

alt text

  • ¡Mantenga sus objetivos de caída grandes! Arrastrar y soltar ya es una violación atroz de la ley de Fritz; No hay necesidad de empeorarlo.
5
Robert Fraser

He visto aplicaciones que muestran un esquema donde puedes soltar.

Esto es de la página de widget wordpress)

Wordpress widget page
(fuente: srulytaber.com )

10
Sruly

Un enfoque común es convertir el cursor en un cursor "no se puede soltar" cuando se supera todo lo demás.

La lógica sería:

  1. Comience a arrastrar.
  2. Convierte el cursor en "no se puede soltar".
  3. Mientras arrastra, verifique si está sobre algo que puede aceptar la caída y luego gire el cursor hacia "puede caer".
  4. Soltar y reiniciar el cursor.

NOTA: No estoy abogando necesariamente por esto, pero sí muestra al usuario que está en medio de una operación de arrastrar/soltar, además de indicar dónde es válida la caída.

7
ChrisF

Puede resaltar ligeramente las ubicaciones de colocación tan pronto como el usuario esté arrastrando un elemento. De esta manera, puede llamar la atención sobre las ubicaciones de colocación.

El requisito previo para esto es, por supuesto, que muestres lo que se puede arrastrar en primer lugar. Hay estas preguntas con respuesta para eso

5
Gamlor

A veces, el objetivo de colocación está dentro de un conjunto de dispuestos linealmente objetos. Después de que se suelta el elemento, los objetos que siguen al objetivo se moverán para hacer espacio para el nuevo objeto. En ese caso, el punto de inserción generalmente se indica mediante una línea delgada entre los dos objetos que se separarán para hacer espacio.

Por ejemplo, en casi cualquier GUI que use un mouse, el texto se puede seleccionar y arrastrar de una parte de un documento a otra. El punto de inserción se indica mediante una línea delgada entre dos caracteres.

Ese también es el caso con el cola de Netflix discutido anteriormente. Además de una línea delgada, Netflix usa una flecha negra para indicar a dónde irá la película.

 Thundercats: Season 1: Vol. 1: Disc 3     
 .....................................     
 Thundercats: Season 1: Vol. 1: Disc 4
>------------------------------------- 
 Thundercats: Season 1: Vol. 1: Disc 5
 .....................................
 Thundercats: Season 1: Vol. 1: Disc 6

(No puedo entender cómo tomar una captura de pantalla mientras arrastro).

3
Patrick McElhaney

El flujo de trabajo típico para soltar es:

repeat while mouse is down

    dragEnter -> mouse pointer has moved into some new area.
                 Highlight the area if the dragged data is valid for dropping into it,
                 adjust cursor (forbidden, copy, symlink, or move)
                 adjust the drag image (e.g. when dragging from icon view in file picker
                 to list view in another file picker, now's the time to animate the
                 drag image to look like the list view items would when dropped.

    dragLeave -> Undo any previous highlight.

end repeat

if we were over a valid drop location
    drop
else
    show an animation of the drag image snapping back to its
         point of Origin to make it clear the drag was canceled.
end if

Undo any previous highlight.

Los tipos típicos de resaltado de caída son:

  • Contornee alrededor de un contenedor (por ejemplo, vista de desplazamiento) para indicar que algo es un objetivo de caída válido
  • Marcas de inserción para indicar qué elementos de la lista o caracteres de texto se colocarán entre ellos o después
  • La variante seleccionada de un ícono (o la variante "plegada abierta" de, por ejemplo, un ícono de carpeta) para indicar que una gota terminará dentro un elemento, no antes o después.

Tenga en cuenta que las marcas de inserción no solo son útiles para listas donde puede reorganizar libremente el orden de los artículos, sino también para listas ordenadas, donde p. una caída entre dos archivos en una lista ordenada es perfectamente válida, pero desea indicar que, después de ordenar, el archivo se mostrará más abajo.

Solo por completar, el flujo de trabajo típico para arrastrar es:

detect whether a click-and-hold or click-and-move is really intended to be a drag:
 - Is it obvious? (e.g. dragging a file by its icon -- there is nothing else you can do
 - Or: Wait for a while, has the mouse moved by at least 4 pixels in some direction
       and has the mouse still not been released? (Accounts for most peoples' less-than-pefect motor skills
 - Or: Is the drag in a certain direction that doesn't make sense for anything else?
       (E.g. dragging sideways over text may be an attempt at a new selection,
       OTOH a vertical drag > 4px on a selection is pretty guaranteed to be a drag attempt.

Set up a drag image that is attached to the mouse. This image usually looks exactly
    like a 70% opaque version of the selection (giving the illusion you're moving
    the selection) and if you haven't moved the mouse yet, should invisibly overlay
    the actual selection. (I.e. move it relative to the mouse, don't center it
    under the mouse)

Start the drag! (following this we do the workflow for dropping)

(Al menos así es como suele ocurrir arrastrar y soltar en las aplicaciones modernas de Mac OS X, aunque actualizar la imagen de arrastrar durante una caída es algo bastante nuevo)

2
uliwitness