From Design pattern
Jump to: navigation, search
(→‎Android Peeks_fast scroll)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
Scroll thumb은 많은 양의 컨텐츠를 빠르고 효율적으로 스크롤 할 수 있도록 스크린 가장자리에 scroll box나 thumb을 배치한 패턴이다.
+
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...===
−
스크린에 한번에 표현할 수 없는 많은 양의 정보에서 원하는 정보를 검색하는 것이 용이하도록 한다.
+
스크린에 한번에 표현할 수 없는 많은 양의 정보 컨텐츠가 주어졌을 때, 그 중에서 원하는 정보에 빠르게 도달할 수 있는 인터랙션 패턴이 필요하다. Scroll thumb은 [[Scroll]]을 통한 이동 및 탐색을 더 빠르게 할 수 있도록 보조한다.
  
−
* scroll box를 사용하여 빠른 탐색이 가능하도록하며 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다.
+
* Scroll box의 길이는 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다.
−
* thumb을 사용하여 컨텐츠이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다.
+
* [[Index scroller]]와 함께 사용하는 경우, 컨텐츠 이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다. 이 때 scroll box가 시각적으로 보이지는 않지만, 같은 동작과 기능을 갖추고 있다.
  
 +
=== Example: iOS_CGV ===
 +
[[File:Scroll thumb.PNG]]
 
----
 
----
−
=== Example: Android_Samsung Galaxy Note Music Player ===
+
== Scroll bar ==
−
* 음악이 모여 있는 화면에서 스크롤바의 scroll thumb을 움직여 음악 목록의 내용을 훑어본다.
+
=== iOS_CGV ===
−
{{#Widget:Vimeo|id=94814137|width=300||height=455}}
+
* 하단의 scroll bar을 좌우로 움직이면 현재 스크롤 위치에 해당하는 항목에 대한 간략한 정보가 보인다.
 +
* Scroll bar를 움직이는 중에는 화면 변화가 없다가, 손을 뗀 후에 그 지점으로 화면이 빠르게 이동한다.
 +
{{#Widget:Vimeo|id=93045495|width=399|height=533}}
  
−
----
 
−
== Thumb ==
 
 
=== Android Peeks_fast scroll ===
 
=== Android Peeks_fast scroll ===
 
* #00:07-00:26
 
* #00:07-00:26
 
{{#Widget:Youtube|id=rcPIvGRwrxA|width=665||height=374}}
 
{{#Widget:Youtube|id=rcPIvGRwrxA|width=665||height=374}}
  
−
=== Contact list app for the Blackberry storm ===
 
−
{{#Widget:Youtube|id=bC4fRGcagRw|width=665||height=374}}
 
−
 
−
----
 
−
== Scroll box ==
 
 
=== Scrollbar style when fastscrool is enabled ===
 
=== Scrollbar style when fastscrool is enabled ===
 
{{#Widget:Youtube|id=V99ZB95D7T4|width=665||height=374}}
 
{{#Widget:Youtube|id=V99ZB95D7T4|width=665||height=374}}
  
  
 +
----
 +
== Invisible scroll thumb ==
 +
=== Android_Samsung Galaxy Note Music Player ===
 +
{{#Widget:Vimeo|id=94814137|width=300||height=455}}
 +
 +
=== Contact list app for the Blackberry storm ===
 +
{{#Widget:Youtube|id=bC4fRGcagRw|width=665||height=374}}
  
−
[[Category:Scroll through content]]
+
[[Category:Move through contents]]

Latest revision as of 21:41, 17 September 2014

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...

스크린에 한번에 표현할 수 없는 많은 양의 정보 컨텐츠가 주어졌을 때, 그 중에서 원하는 정보에 빠르게 도달할 수 있는 인터랙션 패턴이 필요하다. Scroll thumb은 Scroll을 통한 이동 및 탐색을 더 빠르게 할 수 있도록 보조한다.

  • Scroll box의 길이는 컨텐츠가 많을 수록 작아지고 적을 수록 커지게 된다.
  • Index scroller와 함께 사용하는 경우, 컨텐츠 이름의 첫글자 순으로 정리된 자료를 쉽게 찾을 수 있도록 한다. 이 때 scroll box가 시각적으로 보이지는 않지만, 같은 동작과 기능을 갖추고 있다.

Example: iOS_CGV

Scroll thumb.PNG

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

""

Retrieved from "http://www.ixpatterns.com/index.php?title=Scroll_thumb&oldid=109670"