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

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

Download

Touch Gesture Reference Guide

For wireframes and mock-ups:
Visuals only (PDF)
Visuals only (EPS)
Visuals only (OmniGraffle Stencil)

Platform	Platform Gesture	Platform Description	Core 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)
Platform	Platform Gesture	Platform Description	Core 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
Platform	Platform Gesture	Platform Description	Core 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
Platform	Platform Gesture	Platform Description	Core 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
Platform	Platform Gesture	Platform Description	Core 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)
Platform	Platform Gesture	Platform Description	Core 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)
Platform	Platform Gesture	Platform Description	Core 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 그 사이에 카드 등 여러 가지가 추가되었네요. 꼭 원 사이트에 들어가셔서 확인해 보세요! 
[참고##제스쳐##]