| Line 1: | Line 1: | ||
| − | + | Scroll은 컨텐츠 화면 내에서 컨텐츠를 둘러볼 때 사용하는 패턴이다. 주로 현재 페이지 내를 이동할 때 사용된다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | Scroll은 컨텐츠 화면 내에서 컨텐츠를 둘러볼 때 사용하는 | + | |
페이지 화면을 이동하는 방식에 따라 구분이 가능한데, 주로 Slide to scroll 방식이 사용되며, Fling to scroll, Scroll thumb 방식으로 분류할 수 있다. | 페이지 화면을 이동하는 방식에 따라 구분이 가능한데, 주로 Slide to scroll 방식이 사용되며, Fling to scroll, Scroll thumb 방식으로 분류할 수 있다. | ||
=== With this pattern, we can solve... === | === With this pattern, we can solve... === | ||
| − | 한 화면이 많은 양의 컨텐츠를 가지고 있을 때, 이것을 효과적으로 보기 위한 | + | 한 화면이 많은 양의 컨텐츠를 가지고 있을 때, 이것을 효과적으로 보기 위한 패턴이 필요하다. Scroll은 많은 양의 컨텐츠를 쉽게 둘러 볼 수 있는 기능을 제공한다. |
* Scroll은 화면을 위아래로 이동 하며 컨텐츠를 둘러 볼 수 있으며, Scroll bar indicator를 통하여 컨텐츠의 양과 현재위치에 대한 시각적 힌트를 주기도 한다. | * Scroll은 화면을 위아래로 이동 하며 컨텐츠를 둘러 볼 수 있으며, Scroll bar indicator를 통하여 컨텐츠의 양과 현재위치에 대한 시각적 힌트를 주기도 한다. | ||
| Line 68: | Line 10: | ||
=== Example : iOS_ Naver=== | === Example : iOS_ Naver=== | ||
| − | {{#Widget:Vimeo|id=96709270|width=300|height=533 | + | {{#Widget:Vimeo|id=96709270|width=300|height=533}} |
---- | ---- | ||
== Scroll == | == Scroll == | ||
| − | |||
=== iOS Overview === | === iOS Overview === | ||
| Line 96: | Line 37: | ||
=== Soundwave_Using the doppler effect to sense gestures === | === Soundwave_Using the doppler effect to sense gestures === | ||
* 손의 상/하 좌/우 움직임을 소리의 움직임으로 인식하여 스피커로 인지된 소리를 통해 스크롤 이동한다. | * 손의 상/하 좌/우 움직임을 소리의 움직임으로 인식하여 스피커로 인지된 소리를 통해 스크롤 이동한다. | ||
| − | + | {{#Widget:Youtube|id=rFM59B3tYI4|width=665|height=374}} | |
| − | + | ||
---- | ---- | ||
== Page단위 Scroll == | == Page단위 Scroll == | ||
| − | + | ||
=== Isabella Stewart Gardner Museum - Touch Table Prototype === | === Isabella Stewart Gardner Museum - Touch Table Prototype === | ||
* 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다. | * 터치테이블에서 화면을 drag하여 세로로 화면을 이동한다. | ||
| − | * | + | * #00:45-#00:53 |
{{#Widget:Vimeo|id=42073036|width=665|height=374}} | {{#Widget:Vimeo|id=42073036|width=665|height=374}} | ||
| − | + | ||
---- | ---- | ||
== Fling to scroll == | == Fling to scroll == | ||
| − | |||
===iOS_Facetime === | ===iOS_Facetime === | ||
{{#Widget:Vimeo|id=96695265|width=300|height=480}} | {{#Widget:Vimeo|id=96695265|width=300|height=480}} | ||
| Line 117: | Line 57: | ||
{{#Widget:Vimeo|id=96695268|width=300|height=480}} | {{#Widget:Vimeo|id=96695268|width=300|height=480}} | ||
| − | == 아래 | + | <!--== 아래 두 사례는 screen interaction 의 fling to scroll 에 있어서 복사해왔어요 ==--> |
===Android_연락처 === | ===Android_연락처 === | ||
* 전화번호를 검색하는 화면에서 slide 하여 콘텐트의 내용을 훑어본다. | * 전화번호를 검색하는 화면에서 slide 하여 콘텐트의 내용을 훑어본다. | ||
* slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다. | * slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다. | ||
| − | |||
{{#Widget:Vimeo|id=94636892|width=300|height=455}} | {{#Widget:Vimeo|id=94636892|width=300|height=455}} | ||
| Line 128: | Line 67: | ||
=== Android_Album === | === Android_Album === | ||
* 사진의 썸네일 화면에서 slide 하여 콘텐트의 내용을 훑어본다. | * 사진의 썸네일 화면에서 slide 하여 콘텐트의 내용을 훑어본다. | ||
| − | *slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다 . | + | * slide 동작이 끝난 시점에서 속도가 점차감소하여 정지화면이 될 때 까지 내용을 스크롤링 한다 . |
{{#Widget:Vimeo|id=94636893|width=300|height=455}} | {{#Widget:Vimeo|id=94636893|width=300|height=455}} | ||
| − | |||
[[Category:Move in same level]] | [[Category:Move in same level]] | ||
Scroll은 컨텐츠 화면 내에서 컨텐츠를 둘러볼 때 사용하는 패턴이다. 주로 현재 페이지 내를 이동할 때 사용된다.
페이지 화면을 이동하는 방식에 따라 구분이 가능한데, 주로 Slide to scroll 방식이 사용되며, Fling to scroll, Scroll thumb 방식으로 분류할 수 있다.
한 화면이 많은 양의 컨텐츠를 가지고 있을 때, 이것을 효과적으로 보기 위한 패턴이 필요하다. Scroll은 많은 양의 컨텐츠를 쉽게 둘러 볼 수 있는 기능을 제공한다.
""