Touch Gesture Reference Guide (터치 제스쳐 가이드)

2010. 5. 24. 01:20UI 가벼운 이야기
전성진

by Luke Wroblewski

누군가 했더니 Site Seeing : A Visual Approach to Web Usability 의 저자였군요.

터치 인터페이스를 가진 화면기획서를 만들때 항상 문서 앞 부분에 정리하던 터치 제스쳐 관련한 정리입니다. 제스쳐 UI의 역사가 짧아 제스처의 이름이 조직마다 달라 곤란한 적이 있었는데 Core Gesture라는 표현으로 핵심적인 제스쳐를 분류했네요. 또 감동적인 것은 플랫폼에 따라 어떤 제스쳐의 이름이 있고 설명이 있는지, 그리고 이것이 어떤 core gesture와 매칭되는지를 한눈에 보기좋게 정리했습니다. 일단 정리가 잘 됐으니 잘 읽어보구요 실무를 하면서 고쳐야 할 것이 있다면 이 분에게 의견을 드려도 좋겠습니다. ^^


The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures


PlatformPlatform GesturePlatform DescriptionCore Gesture
iPhone OS Tap A user gesture used to press or select a control or link (analogous to a singleclick in a desktop application). To tap, users make a quick up-and-down motion with a finger, lightly striking the screen. Tap
iPhone OS Double Tap A user gesture used to zoom in or out of content or an image. A double tap consists of two quick taps. Double Tap
iPhone OS Flick A user gesture used to scroll or pan quickly. To flick, users place a finger on the screen and quickly swipe it in the desired direction. Fling
iPhone OS Drag A user gesture used to scroll,move the viewport, or pan. To drag, users place a finger on the screen and move it in the desired direction without lifting it from the screen. Drag
iPhone OS Pinch Open A two-finger user gesture used to zoom in. To pinch open, users place the thumb and a finger (or two fingers) close together on the screen and move them apart without lifting them from the screen. Spread
iPhone OS Pinch Close A two-finger user gesture used to zoom out. To pinch close, users place the thumb and a finger (or two fingers) a little distance apart on the screen and move them toward each other without lifting them from the screen. Pinch
iPhone OS Touch and hold A user gesture used to display an information bubble, magnify content under the finger, or to perform specificactions in built-in applications and features. To touch and hold, users touch the screen, leaving their finger motionless until the information is displayed or the action occurs. Press
iPhone OS Two-finger scroll A user gesture used to scroll content in an element with overflow capability or a scrollable inline frame element. A two-finger scroll is a drag performed with two fingers moving together in the same direction. Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Windows Phone 7 Tap Actions on an item in a two step process. Stop a list from scrolling. Single touch on the screen. Tap
Windows Phone 7 Double Tap Toggle between "in" and "out" zoom states of a control or application. Double Tap
Windows Phone 7 Touch and hold Shows options (context menu) for an item Press
Windows Phone 7 Pan Moves content via direct manipulation (content sticks to finger and follows). A pan can reorder or move a specific item. Drag
Windows Phone 7 Flick Moves content Fling
Windows Phone 7 Pinch Continous zoom Pinch
Windows Phone 7 Pinch Continous zoom Spread
PlatformPlatform GesturePlatform DescriptionCore Gesture
Palm webOS Tap invokes an action or opens an item. Position the insertion cursor Tap
Palm webOS Double Tap to perform actions like zoom in/out Double Tap
Palm webOS Flick to scroll through lists, or quit an application Fling
Palm webOS Swipe to the right in lists, to delete items Drag
Palm webOS Touch & Drag to scroll Drag
Palm webOS Touch & Hold to enter "reorder" mode. Then drag items to move them. Press
Palm webOS Spread using 2 fingers, to zoom in/out on a web page or a picture Spread
Palm webOS Pinch using 2 fingers, to zoom in/out on a web page or a picture Pinch
Palm webOS Rotate Touch with 2 fingers and rotate - to rotate content Rotate
PlatformPlatform GesturePlatform DescriptionCore Gesture
Android Tap None provided Tap
Android Double Tap None provided Double Tap
Android Flick None provided Fling
Android Drag None provided Drag
Android (only 2.1) Pinch None provided Spread
Android (only 2.1) Pinch None provided Pinch
Android Touch and hold None provided Press
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (trackpad) Scroll Scroll up and down a page Drag
(Two-finger)
OSX (trackpad) Swipe Flip through your photo libraries Drag
(Three-finger)
OSX (trackpad) Swipe Show your desktop, view all open windows, or switch applications Drag
(Four-finger)
OSX (trackpad) Pinch Zoom in and out Pinch
OSX (trackpad) Expand Zoom in and out Spread
OSX (trackpad) Two-finger rotating Rotate photos, pages, and more. Rotate
OSX (trackpad) Tap Press or select a control or link Tap
OSX (trackpad) Click & Drag Move content. Drag
OSX (trackpad) Secondary Click A Right-click Tap
(Two-finger)
OSX (trackpad) Secondary Click B Right-click Tap
(on specific area on trackpad)
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (Magic Mouse) 360° scroll Brush one finger along the surface to scroll in any direction and to pan a full 360 degrees. Fling
OSX (Magic Mouse) Screen zoom Hold down the Control key on your keyboard and scroll with one finger on surface to enlarge items on your screen. Drag
OSX (Magic Mouse) Two-finger swipe Using two fingers, swipe left and right along the surface to advance through pages in Safari or browse photos in iPhoto. Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Microsoft Windows 7 Drag Touch and slide your finger on screen. Like dragging with a mouse, this moves icons around the desktop, moves windows,selects text (by dragging left or right), etc. Drag
Microsoft Windows 7 Scroll Drag up or down on the content (not the scrollbar!) of scrollable window to scroll. Scrolling is available with one or more fingers. Drag
Microsoft Windows 7 Zoom Pinch two fingers together or apart to zoom in or out on a document. Spread
Microsoft Windows 7 Zoom Pinch two fingers together or apart to zoom in or out on a document. Pinch
Microsoft Windows 7 Two-Finger Tap Tapping with two fingers simultaneously zooms in about the center of the gesture or restores to the default zoom – great for zooming in on hyperlinks. Tap
(Two-finger)
Microsoft Windows 7 Rotate Touch two spots on a digital photo and twist to rotate it just like a real photo. Rotate
Microsoft Windows 7 Flicks Flick left or right to navigate back and forward in a browser and other apps. Fling
Microsoft Windows 7 Press-and-hold Hold your finger on screen for a moment and release after the animation to get a right-click. Press
Microsoft Windows 7 Press-and-tap with a second finger To get right-click, just like you would click the right button on a mouse or trackpad. Press and Tap
Microsoft Windows 7 Tap Touch and release to click. This is the most basic touch action. Tap
Microsoft Windows 7 Double Tap To open files and folders. Double Tap

이 외에도 Wacom Bamboo, MS Surface 등의 OS도 정리해 놓았군요.
자세한 것은 사이트에 들어가서 확인하시기 바랍니다.

http://www.lukew.com/ff/entry.asp?1071

2013.02.26 그 사이에 카드 등 여러 가지가 추가되었네요. 꼭 원 사이트에 들어가셔서 확인해 보세요! 
[참고##제스쳐##]