From Design pattern
Jump to: navigation, search
Line 1: Line 1:
 
Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다.
 
Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다.
  
 +
=== Example : iOS ===
 +
{{#Widget:Vimeo|id=93550676|width=300|height=532}}
 
----
 
----
  
=== iOS ===
+
== Arrange ==
{{#Widget:Vimeo|id=93550676|width=300|height=532}}
+
  
 
=== iOS_Reminders ===
 
=== iOS_Reminders ===
 
{{#Widget:Vimeo|id=96598813|width=300|height=533}}
 
{{#Widget:Vimeo|id=96598813|width=300|height=533}}
 
=== iOS_Trello ===
 
{{#Widget:Vimeo|id=93045291|width=395|height=527}}
 
  
 
=== iOS_AccuWeather ===
 
=== iOS_AccuWeather ===
Line 17: Line 15:
 
=== Android_Melon ===
 
=== Android_Melon ===
 
{{#Widget:Vimeo|id=95087249|width=665|height=374}}
 
{{#Widget:Vimeo|id=95087249|width=665|height=374}}
 +
 +
== Grouping ==
 +
 +
=== iOS_Trello ===
 +
{{#Widget:Vimeo|id=93045291|width=395|height=527}}
  
 
=== iOS_Paper by FiftyThree ===
 
=== iOS_Paper by FiftyThree ===

Revision as of 20:26, 13 July 2014

Sort by drag-and-drop은 리스트의 항목을 drag하고, 사용자가 원하는 위치로 직접 drop하여 항목을 사용자의 편의에 맞게 배열하는 패턴이다.

Example : iOS


Arrange

iOS_Reminders

iOS_AccuWeather

Android_Melon

Grouping

iOS_Trello

iOS_Paper by FiftyThree


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

""


Windows_8

  • 왼쪽에서 오른쪽으로 화면을 swipe 하는 행동을 하여 실행되고 있는 다른 앱들의 창을 볼 수 있다.

Android_Samsung Galaxy Note

  • 화면의 앱아이콘을 long tap 하여 이동을 활성화 시킨 뒤 drag & drop을 통하여 이동한다.

iOS_별자리표

  • 한 위치에서 사방의 별자리를 보는 화면에서, 특정 별자리로 이동하여 중심에 두면 그 별자리의 이미지를 같이 보여준다.