From Design pattern
Jump to: navigation, search
Line 84: Line 84:
 
* 단, 아래 영상의 50초 ~ 58초에 해당한다.
 
* 단, 아래 영상의 50초 ~ 58초에 해당한다.
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 +
</div>
 +
 +
----
 +
 +
== Timeline (numbers) ==
 +
<div id="sun-col">
  
 
=== iOS_Facebook ===
 
=== iOS_Facebook ===

Revision as of 06:49, 29 May 2014

Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용 하는 pattern이다. 주로 시간적 흐름을 가진 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다.

Timeline을 표시 방식에 따라 구분이 가능한데, 주로 Slide bar 방식과 시간흐름을 숫자로 표현한 방식이 사용된다.

With this pattern, we can solve...

시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다.

  • Timeline은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다.
  • Timeline 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다.

Example : iOS_Ubersense Coach


Timeline (slide bar)

Android_LG G Pro 2 버스트샷

  • 단, 아래 영상의 10초 ~ 27초에 해당한다.

Android_LG G Pro 2 버스트샷

  • 단, 아래 영상의 1분 13초 ~ 1분 40초에 해당한다.

Wang Theatre Touch Screen Information Kiosk

  • 단, 아래 영상의 50초 ~ 58초에 해당한다.


Timeline (numbers)

iOS_Facebook

iOS_Path

  • 단, 아래 영상의 10초 ~ 23초에 해당한다.

"10"