it-swarm-ko.com

목록에서 항목을 주문하기위한 UI 디자인

목록에서 항목을 주문할 때 어떤 구성 요소/UI 디자인을 사용 하시겠습니까 (위/아래로 이동 단추가있는 테이블)?

6
padis

항목의 드래그 앤 드롭은 대부분의 UI에 가장 적합합니다. 불행히도이 기능을 검색하기 어렵습니다. 각 항목에 가까운 "그래버"영역이 도움이됩니다. 드래그 앤 드롭 정렬 UI를 제대로 사용하려면 드래그하는 동안 시각적 피드백과 항목을 Edge로 드래그 할 때 자동 스크롤이 필요합니다.

드래그 앤 드롭 외에도 move upmove down 버튼을 제공하는 것이 좋습니다. 보편적으로 즉시 인식되는 "그래버"아이콘/스타일은 없습니다. 자주 사용되지 않는 인터페이스의 경우 다소 어색한 버튼을 사용하는 데 소요되는 시간이 사용자가보다 효율적인 끌어서 놓기 기능을 발견하는 시간보다 짧을 수 있습니다.

또한 드래그 앤 드롭을 사용하면 올바르게 수행하지 않으면 사용자에게 실망스러운 미묘한 세부 사항이 많이 있습니다 (예 : 자동 스크롤). 버튼은 자주 사용하는 데 비효율적이지만 명확하고 사용하기 쉽고 코딩하기가 훨씬 쉽습니다.

5
dbkk

끌어서 놓기를 '직접 조작'으로 간주 할 수 있습니다. 목록에서 직접 클릭하면 효과가 있고, '간접 조작'은 별도의 단추 나 목록에서 적용되는 다른 동작이 있습니다.

목록에있는 내용에 따라 둘 다 적절할 수 있습니다.

무엇을 하든지 Jakob Nielsen의 10 가지 응용 프로그램 디자인 실수 :의 현인 조언을 명심하십시오.

드래그 앤 드롭 디자인은 무언가를 드래그 할 수 있거나 떨어 뜨릴 수있는 부분이 확실하지 않은 경우 가장 나쁜 범죄자입니다. (또는 끌어서 놓으면 어떻게됩니까?) 대조적으로, 간단한 확인란과 명령 단추를 사용하면 클릭 할 수있는 항목이 고통 스럽습니다.

따라서 목록에서 직접 조작 기능을 제공하는 경우 다음과 같은 시각적 신호를 제공하십시오.

  1. '잡기'를 제안하는 시각적 '잡기'영역 (일련의 점 또는 선)
  2. 커서 변경
  3. 움직일 때 피드백. 내 요점 (1)이 어떻게 지원되지 않는지 this demo 을 참조하십시오. 따라서 이러한 목록이 정렬 가능한지 확실하지 않습니다.
4
Julian H

요소를 직접 조작하는 것이 지금 선호 될 것입니다.

37 개의 신호가 오만한 부분이라는 비난에도 불구하고베이스 캠프는 널리 사용되는 애플리케이션입니다. 해당 앱 내의 거의 모든 목록은 드래그 앤 드롭을 통해 요소의 순서를 바꿀 수 있습니다.

먼저, 상단 모서리의 텍스트 링크를 통해 클릭하여 순서 변경 모드로 이동해야합니다. 그런 다음 클릭 한 채로 '움직임'을 명확하게 나타내는 작은 이미지가 있으며 항목을 이동하기 위해 조작합니다. 참조 부착.

alt text

2
jameswanless

위/아래 버튼은 정상이지만 추세는 데이터를 직접 조작하는 것입니다. 즉, 항목을 클릭 (또는 탭) 한 다음 이동할 수 있습니다. 대표적인 예로 Netflix 대기열이 있습니다. 목록에서 여러 항목을 선택할 때도 작동합니다.

0
Hisham

마우스 오버에 나타나는 명확한 드래그 선택기로 드래그 앤 드롭을 사용하는 것이 좋습니다. 우리의 응용 프로그램에서 우리는 항목을 재정렬 할 수 있음을 나타내는 이중 위쪽/아래쪽 화살표를 사용합니다.

커서를 바꾸는 것만으로도 기술에 정통한 사람들에게는 충분하지만 범용 앱의 경우 더 분명한 것을 원합니다.

0
Sam