From Design pattern
Jump to: navigation, search
(Created page with "항목이 회전목마처럼 돌아가며 보여진다. == Examples A (horizontal) == 항목이 회전목마처럼 가로로 돌아가며 보여진다. === 565번 사례 ===...")
 
 
(44 intermediate revisions by 5 users not shown)
Line 1: Line 1:
항목이 회전목마처럼 돌아가며 보여진다.
+
Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용하는 인터랙션 패턴이다. 주로 시간적 흐름을 가진 멀티미디어 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. 주로 [[Slide bar]]의 형태로 되어있다.
  
== Examples A (horizontal) ==
+
=== With this pattern, we can solve... ===
항목이 회전목마처럼 가로로 돌아가며 보여진다.
+
시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다.
  
=== 565번 사례 ===
+
* Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다.
* 화면을 드래그하여 캐로셀 형태로 그림을 돌려본다.
+
* SNS에서 사용하는 Timeline이나 연대기와 같이 시간 순서에 따라 목록을 제공하는 패턴은 본 패턴과 구분하기 위하여 [[Chronological Timeline]]으로 분류하였다.
<videoflash type="vimeo">93933788|533|395</videoflash>
+
  
=== 389번 사례 ===
+
=== Example : iOS_Ubersense Coach ===
* 대형 터치스크린에서 화면을 drag 하여 가로로 나열된 항목을 둘러본다.
+
[[File:IOS Ubersense Coach Timeline.png|395px]]
* 단, 아래 영상의 15초 ~ 18초에 해당한다.
+
----
<videoflash type="vimeo">36790650|665|374</videoflash>
+
=== iOS_Ubersense Coach ===
 +
{{#Widget:Vimeo|id=93373411|width=399|height=533}}
  
== Examples B (vertical) ==
+
=== Android_LG G Pro 2 버스트샷 ===
항목이 회전목마처럼 세로로 돌아가며 보여진다.
+
* #01:13-01:40
 +
{{#Widget:Youtube|id=KeTJZj2RMjI|width=665|height=374}}
  
== Examples C (ferris wheel) ==
+
=== Wang Theatre Touch Screen Information Kiosk ===
항목이 대관람차처럼 돌아가며 보여진다.
+
* #00:50-00:58
 +
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
  
=== 415번 사례 ===
 
* 메뉴를 swipe 하면 관람차가 돌듯이 메뉴를 회전시켜 둘러 볼 수 있다.
 
<videoflash type="vimeo">93552806|300|533</videoflash>
 
  
=== 347번 사례 ===
 
* 1부터 25까지의 목록이 큰 원 모양으로 배열되어 가로에 비슷하게 목록을 움직이며, 한바퀴 돌면 다시 반복된다.
 
<videoflash type="vimeo">93045993|533|395</videoflash>
 
  
[[Category:Move in current level]]
+
[[Category:Move through contents]]

Latest revision as of 21:40, 17 September 2014

Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용하는 인터랙션 패턴이다. 주로 시간적 흐름을 가진 멀티미디어 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. 주로 Slide bar의 형태로 되어있다.

With this pattern, we can solve...

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

  • Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다.
  • SNS에서 사용하는 Timeline이나 연대기와 같이 시간 순서에 따라 목록을 제공하는 패턴은 본 패턴과 구분하기 위하여 Chronological Timeline으로 분류하였다.

Example : iOS_Ubersense Coach

IOS Ubersense Coach Timeline.png


iOS_Ubersense Coach

Android_LG G Pro 2 버스트샷

  • #01:13-01:40

""

Wang Theatre Touch Screen Information Kiosk

  • #00:50-00:58