Difference between revisions of "Scroll thumb"
Navigation menu
From Design pattern
| Line 1: | Line 1: | ||
| − | Scroll thumb은 많은 양의 컨텐츠를 빠르고 효율적으로 스크롤 할 수 있도록 스크린 가장자리에 scroll | + | Scroll thumb은 많은 양의 컨텐츠를 빠르고 효율적으로 스크롤 할 수 있도록 스크린 가장자리에 scroll box나 scroll box 기능을 하는 [[Index scroller]]을 배치한 인터랙션 패턴이다. 기존 PC에서는 Scroll thumb와 scroll box가 동일한 개념으로 쓰였으나, 모바일에서 화면이 작아지면서 scroll box를 따로 배치하기 어려워져 Index scroller와 같은 방식(invisible scroll thumb)을 함께 사용하게 되었다. |
===With this pattern, we can solve...=== | ===With this pattern, we can solve...=== | ||
| Line 5: | Line 5: | ||
* Scroll box의 길이는 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다. | * Scroll box의 길이는 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다. | ||
| − | * [[Index scroller]]와 함께 사용하는 경우, 컨텐츠 이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다. | + | * [[Index scroller]]와 함께 사용하는 경우, 컨텐츠 이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다. 이 때 scroll box가 시각적으로 보이지는 않지만, 같은 동작과 기능을 갖추고 있다. |
=== Example: iOS_CGV === | === Example: iOS_CGV === | ||
Revision as of 12:47, 6 August 2014
Scroll thumb은 많은 양의 컨텐츠를 빠르고 효율적으로 스크롤 할 수 있도록 스크린 가장자리에 scroll box나 scroll box 기능을 하는 Index scroller을 배치한 인터랙션 패턴이다. 기존 PC에서는 Scroll thumb와 scroll box가 동일한 개념으로 쓰였으나, 모바일에서 화면이 작아지면서 scroll box를 따로 배치하기 어려워져 Index scroller와 같은 방식(invisible scroll thumb)을 함께 사용하게 되었다.
Contents
With this pattern, we can solve...
스크린에 한번에 표현할 수 없는 많은 양의 정보 컨텐츠가 주어졌을 때, 그 중에서 원하는 정보에 빠르게 도달할 수 있는 인터랙션 패턴이 필요하다. Scroll thumb은 Scroll을 통한 이동 및 탐색을 더 빠르게 할 수 있도록 보조한다.
- Scroll box의 길이는 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다.
- Index scroller와 함께 사용하는 경우, 컨텐츠 이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다. 이 때 scroll box가 시각적으로 보이지는 않지만, 같은 동작과 기능을 갖추고 있다.
Example: iOS_CGV
Scroll bar
iOS_CGV
- 하단의 scroll bar을 좌우로 움직이면 현재 스크롤 위치에 해당하는 항목에 대한 간략한 정보가 보인다.
- Scroll bar를 움직이는 중에는 화면 변화가 없다가, 손을 뗀 후에 그 지점으로 화면이 빠르게 이동한다.
Android Peeks_fast scroll
- #00:07-00:26
""
Scrollbar style when fastscrool is enabled
""
Invisible scroll thumb
Android_Samsung Galaxy Note Music Player
Contact list app for the Blackberry storm
""