From Design pattern
Jump to: navigation, search
(→‎210번 사례)
Line 116: Line 116:
 
{{#Widget:Vimeo|id=96695268|width=300|height=480}}
 
{{#Widget:Vimeo|id=96695268|width=300|height=480}}
  
 +
== 아래 629, 630 사례는 screen interaction 의 fling to scroll 에 있어서 복사해왔어요 ==
 +
 +
=== 629번 사례 ===
 +
* 전화번호를 검색하는 화면에서 slide 하여 콘텐트의 내용을 훑어본다.
 +
* slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다.
 +
 +
<videoflash type="vimeo">94636892|300|455</videoflash>
 +
 +
=== 630번 사례 ===
 +
* 사진의 썸네일 화면에서 slide 하여 콘텐트의 내용을 훑어본다.
 +
*slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다 .
 +
<videoflash type="vimeo">94636893|300|455</videoflash>
 
</div>
 
</div>
  
 
[[Category:Move in same level]]
 
[[Category:Move in same level]]

Revision as of 09:58, 29 May 2014

Scroll은 컨텐츠 화면 내에서 컨텐츠를 둘러볼 때 사용하는 pattern이다. 주로 현재 페이지 내를 이동할 때 사용된다.

페이지 화면을 이동하는 방식에 따라 구분이 가능한데, 주로 Slide to scroll 방식이 사용되며, Fling to scroll, Scroll thumb 방식으로 분류할 수 있다.

With this pattern, we can solve...

한 화면이 많은 양의 컨텐츠를 가지고 있을 때, 이것을 효과적으로 보기 위한 pattern이 필요하다. Scroll은 많은 양의 컨텐츠를 쉽게 둘러 볼 수 있는 기능을 제공한다.

  • Scroll은 화면을 위아래로 이동 하며 컨텐츠를 둘러 볼 수 있으며, Scroll bar indicator를 통하여 컨텐츠의 양과 현재위치에 대한 시각적 힌트를 주기도 한다.
  • Scroll 이전에는 Up/Down button이나 이와 유사한 방식을 사용하였다.

Example : iOS_ Naver

Scroll

248번 사례

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

430번 사례

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

443번 사례

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

Android_NAVER tvcast

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

iPod 4th

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

82번 사례

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

Page단위 Scroll

Isabella Stewart Gardner Museum - Touch Table Prototype

  • 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다.
  • 단, 아래 영상의 45 ~ 53초에 해당한다.

Fling to scroll

iOS_Facetime

iOS_Facetime

아래 629, 630 사례는 screen interaction 의 fling to scroll 에 있어서 복사해왔어요

629번 사례

  • 전화번호를 검색하는 화면에서 slide 하여 콘텐트의 내용을 훑어본다.
  • slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다.

630번 사례

  • 사진의 썸네일 화면에서 slide 하여 콘텐트의 내용을 훑어본다.
  • slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다 .
Retrieved from "http://www.ixpatterns.com/index.php?title=Scroll&oldid=103479"