it-swarm-ko.com

드래그 앤 드롭의 가능성을 시각화하는 방법?

내 웹 응용 프로그램에는 요소 목록이 포함되어 있으며 드래그 앤 드롭으로 정렬 할 수 있습니다. 이 기능을 사용자에게 어떻게 시각적으로 표현해야합니까?

56
Witek

드래그 할 수 있음을 보여주기 위해 물건에 약간의 "그립 가능"텍스처를 사용했습니다. Gmail의 질감은 다음과 같습니다.

enter image description here

37
Ken Mohnkern

몇 년 전에 Sean Kane에서 Netflix 의 프레젠테이션을 보았는데 DVD 대기열의 작동 방식을 설명했습니다. 가능하면 (계정이 있거나 누군가를 아는 경우) 공부해야합니다.

주목해야 할 몇 가지 사항 :

  • 그는 기본 이동 커서가 제대로 테스트되지 않았기 때문에 GoodEnough 에서 제안한대로 grab cursor로 전환했습니다.

  • 드래그 앤 드롭은 점진적 향상입니다. 목록 순서 열의 텍스트 상자를 채워서 정렬 할 수 있습니다. 많은 사용자가 끌어서 놓기 기능을 사용할 수 있다는 것을 결코 알지 못합니다.

  • 드래그 핸들이 없습니다. 링크와 같은 다른 객체가 포 그라운드에있는 경우를 제외하고 행의 아무 곳이나 마우스 다운으로 드래그를 시작할 수 있습니다.

27
Patrick McElhaney

항목을 끌어서 놓을 수 있음을 의미하는 세 개의 수평선의 표준 아이콘이 하나 있습니다.

"마찰"또는 "손잡이"를 의미하며 창 오른쪽 하단 모서리의 대각선이나 크기를 조정할 수있는 텍스트 상자와 비슷합니다.

14
Dan Barak

이동 커서는 일반적으로 웹 앱에서 드래그 가능한 항목과 함께 사용됩니다.

cSS :

cursor:move;
11
Sruly

작은 손잡이를 사용하는 것이 좋습니다 (호버링 할 때 열림, 드래그하는 동안 닫힘). 잡을 수있는 모양의 그립 핑 아이콘 (핸들)이 있습니다 (Gmail에서는 한 쌍의 도트 열 (열당 4 개의 점) 임).

또한 새로운 사용자 (또는 새로운 기능 인 경우 기존 사용자)에게 동작을 보여주는 작은 애니메이션을 추가하고 사용자가 앱에있을 때마다 애니메이션을 지속적으로 표시하지 않는 것이 좋습니다.

6
mbillard

드래그는 드래그입니다. 최근에 몇 가지 끌어서 놓기 UI를 수정 한 후에는 다음에이를 "클릭 앤 드롭"으로 변경할 것이라고 결론을 내 렸습니다. 클릭 할 각 항목에 위젯을 두어 이동하도록 선택하십시오. 그런 다음 원하는 곳을 클릭하십시오. 이것은 지금까지 테스트에서 잘 가고있는 것 같습니다.

5
Robert Fisher

드래그 가능한 객체 위로 커서를 움직일 때는 손바닥으로 바꿔야합니다. 물건을 잡을 때는 잡는 손으로 바꿔야합니다. 물체를 잡는 동안 허용되는 드롭 존은 다른 배경 (예 : 음영 또는 채색)에서 강조 될 수 있습니다.

1
txwikinger

유니버설 월풀 기호는?입니다.

내가 사용하는 데스크톱 응용 프로그램을 사용하면 응용 프로그램 외부의 파일을 드래그 할 수 있습니다. 끌어서 놓기를 허용하는 특정 응용 프로그램에는 일반적으로 놓기 영역 또는 내용 창이 있습니다. 음악 플레이어의 재생 목록처럼 드래그 앤 드롭 사용성은 점진적인 공개이지만 일부 사용자는 직관적으로 공개하지 않습니다. 이러한 경우 드롭 영역을 광고 할 때 생각할 수있는 최선의 방법은 소용돌이 기호 배경을 사용하는 것입니다.

0
Vishnu Prasanth

데스크톱 응용 프로그램 으로이 문제를 겪고 있습니다. 내가 지금 당장 올릴 수있는 가장 좋은 해결책은 마우스를 가져갈 수있는 화살표를 사용하는 것입니다. 이는 단순히 드래그 앤 드롭 또는 이와 유사한 텍스트가있는 객체를 드래그 할 수있는 곳을 가리 킵니다.

0
James Ludlow