Difference between revisions of "Scroll"

Revision as of 16:47, 26 July 2014

Scroll은 한 화면 이상의 많은 분량의 컨텐츠나 목록를 둘러볼 때 사용하는 인터랙션 패턴이다. 상하로 slide해서 화면을 움직이며, 주로 현재 페이지 내에서 이용하기 위해 사용한다. 더 효율적인 정보 탐색을 위해 Fling to scroll, Index scroller, Scroll thumb와 같은 패턴을 함께 사용하고 있다.

현재 화면 내에서 이동하는 방식과 페이지 단위로의 이동을 포함한 방식으로 나누어 볼 수 있다.

With this pattern, we can solve...

한 화면 안에 들어가야 할 컨텐츠의 양이 많을 때, 페이지 이동 없이 다 둘러볼 수 있는 패턴이 필요하다. Scroll은 직관적으로 화면을 위아래로 움직여 볼 수 있도록 한다.

• Index scroller나 Scroll thumb과 같은 indicator를 제공하여 컨텐츠의 양과 현재위치에 대한 시각적 힌트를 주기도 한다.
• Fling to scroll과 Scroll thumb를 통해 더 빠르게 원하는 곳으로 움직일 수 있다.
• Scroll 이전에는 up/down button이나 이와 유사한 방식을 사용하였다.

Example : iOS_ Naver

Scroll in page

iOS_Overview

• 화면을 위아래로 drag하면 소실점에 맞춰 달력이 움직인다.

Leap motion_All the cooks

• 립모션에서 손바닥을 화면 방향으로 향하게 한 채로 상/하로 움직여 다음 화면으로 이동한다.

Soundwave_Using the doppler effect to sense gestures

• 손의 상/하 좌/우 움직임을 소리의 움직임으로 인식하여 스피커로 인지된 소리를 통해 스크롤 이동한다.

""

Android_NAVER tvcast

• 상단의 시청중인 영상은 고정 되어 있고, 아래의 화면을 상/하로 drag하여 화면을 이동시킨다.

Android_CNN

• 현재 보고 있는 화면을 slide 하여 화면 속 내용을 상하로 훑어본다.

Android_Facebook

• 현재 보고 있는 화면을 slide 하여 화면 속 내용을 상하로 훑어본다.

iPod 4th

• 터치휠이 위치한 부분을 시계반대방향 혹은 시계방향으로 drag하여 현재 화면 내에서 다음 화면 리스트 중 활성영역을 위아래로 이동하여 선택한다.

Scroll between pages

Isabella Stewart Gardner Museum - Touch Table Prototype

• 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다.
• #00:45-00:53

iOS_Newsify

• 위아래로 swipe해서 이전,다음 기사로 이동한다.