From Design pattern
Jump to: navigation, search
(→‎Android_Samsung Galaxy Note)
(→‎iOS)
 
(9 intermediate revisions by one user not shown)
Line 1: Line 1:
−
Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다.
+
Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다. 기능에 따라 항목 간 위치를 변경하는 것 뿐 아니라, 특정 항목끼리 묶어 그루핑을 하거나, 그루핑 내부의 항목을 그룹 밖이나 다른 그룹으로 옮길 수 있는 기능을 포함하기도 한다.
 +
 
 +
항목 전체를 long tap하여 선택한 후 drag and drop하는 경우와 편집 모드를 활성화시킨 후 항목을 drag and drop하는 경우, 항목 내부에서 이동을 의미하는 버튼을 tap하여 drag and drop하는 경우로 나뉘어진다.
 +
 
 +
===With this pattern, we can solve...===
 +
사용자의 자율적인 컨텐츠의 배열, 그룹핑이 필요한 앱, 음악, 사진, 문서 등의 항목에서 Sort by drag-and-drop이 이루어진다.
 +
 
 +
* 항목을 합치거나 배열을 정리하여 원하는 배열 형태를 구성할 수 있다.
 +
* tap, long tap, 편집 모드 활성화가 되었을 때 항목의 배열과 더불어 삭제 등의 특정한 기능이 함께 활성화되는 경우도 있다.
 +
* 항목이 기존 위치에서 벗어나 자유로운 상태가 될 때, 자유롭게 이동할 수 있음을 알려주는 단서를 제공해야 한다.
 +
* 그루핑이나 그룹 간 항목 이동의 경우 기능과 필요에 따라 Sort by drag-and-drop으로 이루어지는 대신 기능 옵션을 통해 이루어지기도 한다.
 +
* Drag and drop을 하였더라도 삭제나 업로드 등 특정 기능만을 수행하기 위한 것으로, 항목의 배열과 무관할 경우 Sort by drag-and-drop에 속하지 않는다.
 +
* 배열이 특정 기준에 따라 순서대로 되는 경우는 [[Sort by condition]]에 속한다.
  
 
=== Example : iOS ===
 
=== Example : iOS ===
−
{{#Widget:Vimeo|id=93550676|width=300|height=532}}
+
[[File:Sort by drag-and-drop.jpeg]]
 +
 
 
----
 
----
  
 
== Arrange ==
 
== Arrange ==
 +
 +
=== iOS ===
 +
{{#Widget:Vimeo|id=103217727|width=395|height=524}}
 +
 +
=== Android_Samsung Galaxy Note ===
 +
{{#Widget:Vimeo|id=94636808|width=300||height=480}}
  
 
=== iOS_Reminders ===
 
=== iOS_Reminders ===
Line 15: Line 34:
 
=== Android_Melon ===
 
=== Android_Melon ===
 
{{#Widget:Vimeo|id=95087249|width=665|height=374}}
 
{{#Widget:Vimeo|id=95087249|width=665|height=374}}
 +
 +
----
  
 
== Grouping ==
 
== Grouping ==
Line 24: Line 45:
 
{{#Widget:Vimeo|id=93374135|width=533|height=395}}
 
{{#Widget:Vimeo|id=93374135|width=533|height=395}}
  
−
----
+
[[Category:Sort&Group data]]
−
 
+
−
Drag to move는 하나의 컨텐츠를 tap 또는 long tap하여 선택한 후  drag를 통해 원하는 곳으로 이동하는 패턴이다. 이동 후 컨텐츠를 놓는 위치에 따라서 삭제를 하거나 정렬을 하는 등 특정한 기능을 수행하도록 하기도 한다.
+
−
 
+
−
===With this pattern, we can solve...===
+
−
사용자의 자율적인 컨텐츠의 배치, 배열을 바꾸거나 삭제가 가능할 수 있도록 Drag to move을 수행하여 해결할 수 있다.
+
−
 
+
−
* 런처에 배치된 아이콘을 합치거나 배열을 정리하여 원하는 모양으로 수정한다.
+
−
* 이미지를 Drag and drop하여 원하는 위치로 옮기거나 삭제한다.
+
−
 
+
−
----
+
−
=== Example: Fix drag and drop for ios iPad ===
+
−
{{#Widget:Youtube|id=ntSOCv_4eWE|width=665||height=374}}
+
−
 
+
−
----
+
−
=== Android_Samsung Galaxy Note ===
+
−
* 화면의 앱아이콘을 long tap 하여 이동을 활성화 시킨 뒤 drag & drop을 통하여 이동한다.
+
−
{{#Widget:Vimeo|id=94636808|width=300||height=480}}
+
−
 
+
−
=== iOS_별자리표 ===
+
−
* 한 위치에서 사방의 별자리를 보는 화면에서, 특정 별자리로 이동하여 중심에 두면 그 별자리의 이미지를 같이 보여준다.
+
−
{{#Widget:Vimeo|id=93044940|width=300|height=400}}
+
−
 
+
−
 
+
−
[[Category:Sort data]]
+

Latest revision as of 17:54, 12 August 2014

Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다. 기능에 따라 항목 간 위치를 변경하는 것 뿐 아니라, 특정 항목끼리 묶어 그루핑을 하거나, 그루핑 내부의 항목을 그룹 밖이나 다른 그룹으로 옮길 수 있는 기능을 포함하기도 한다.

항목 전체를 long tap하여 선택한 후 drag and drop하는 경우와 편집 모드를 활성화시킨 후 항목을 drag and drop하는 경우, 항목 내부에서 이동을 의미하는 버튼을 tap하여 drag and drop하는 경우로 나뉘어진다.

With this pattern, we can solve...

사용자의 자율적인 컨텐츠의 배열, 그룹핑이 필요한 앱, 음악, 사진, 문서 등의 항목에서 Sort by drag-and-drop이 이루어진다.

  • 항목을 합치거나 배열을 정리하여 원하는 배열 형태를 구성할 수 있다.
  • tap, long tap, 편집 모드 활성화가 되었을 때 항목의 배열과 더불어 삭제 등의 특정한 기능이 함께 활성화되는 경우도 있다.
  • 항목이 기존 위치에서 벗어나 자유로운 상태가 될 때, 자유롭게 이동할 수 있음을 알려주는 단서를 제공해야 한다.
  • 그루핑이나 그룹 간 항목 이동의 경우 기능과 필요에 따라 Sort by drag-and-drop으로 이루어지는 대신 기능 옵션을 통해 이루어지기도 한다.
  • Drag and drop을 하였더라도 삭제나 업로드 등 특정 기능만을 수행하기 위한 것으로, 항목의 배열과 무관할 경우 Sort by drag-and-drop에 속하지 않는다.
  • 배열이 특정 기준에 따라 순서대로 되는 경우는 Sort by condition에 속한다.

Example : iOS

Sort by drag-and-drop.jpeg

Arrange

iOS

Android_Samsung Galaxy Note

iOS_Reminders

iOS_AccuWeather

Android_Melon

Grouping

iOS_Trello

iOS_Paper by FiftyThree

Retrieved from "http://www.ixpatterns.com/index.php?title=Sort_by_drag-and-drop&oldid=109621"