From Design pattern
Jump to: navigation, search
 
(31 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{#css:
+
Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용하는 인터랙션 패턴이다. 주로 시간적 흐름을 가진 멀티미디어 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. 주로 [[Slide bar]]의 형태로 되어있다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
 
+
.mw-headline {
+
font-weight: 600;
+
}
+
 
+
span.mw-editsection {
+
font-weight: 200;
+
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
 
+
span.mw-editsection a {
+
font-weight: 200;
+
}
+
 
+
.art-subpage {
+
background: #F7F7F7;
+
}
+
 
+
#mw-content-text p {
+
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
 
+
.mw-content-ltr ul {
+
margin: 0.3em 0 0 42px;
+
}
+
 
+
 
+
hr {
+
margin-top: 0px;
+
margin-bottom: 0px;
+
margin-left: -31px;
+
width: 720px;
+
border-bottom: 1px solid #E0E0DD;
+
border-left: 0px;
+
border-right: 0px;
+
border-top: 30px solid #F7F7F7;
+
}
+
<!--
+
#sun-col {
+
-webkit-column-count:2; /* Chrome, Safari, Opera */
+
-moz-column-count:2; /* Firefox */
+
column-count:2;
+
}
+
 
+
#sun-col p {
+
padding-left: 0px;
+
-->
+
}
+
 
+
}}
+
Timeline은 컨텐츠 화면 간 이동할 때 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동할 때 사용된다.
+
 
+
전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다.
+
  
 
=== With this pattern, we can solve... ===
 
=== With this pattern, we can solve... ===
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Page turn/ Page flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
+
시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다.
  
* Timeline은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다.
+
* Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다.
* Timeline 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다.
+
* SNS에서 사용하는 Timeline이나 연대기와 같이 시간 순서에 따라 목록을 제공하는 패턴은 본 패턴과 구분하기 위하여 [[Chronological Timeline]]으로 분류하였다.
  
=== Example : 263번 사례 ===
+
=== Example : iOS_Ubersense Coach ===
{{#Widget:Vimeo|id=93373411|width=300|height=405|start=4s}}
+
[[File:IOS Ubersense Coach Timeline.png|395px]]
 
----
 
----
 +
=== iOS_Ubersense Coach ===
 +
{{#Widget:Vimeo|id=93373411|width=399|height=533}}
  
== Timeline ==
+
=== Android_LG G Pro 2 버스트샷 ===
<div id="sun-col">
+
* #01:13-01:40
=== 192번 사례 ===
+
{{#Widget:Youtube|id=KeTJZj2RMjI|width=665|height=374}}
* 단, 아래 영상의 10초 ~ 27초에 해당한다.
+
<videoflash>RlZzfnySXFk|665|374</videoflash>
+
 
+
=== 192_2번 사례 ===
+
* 단, 아래 영상의 1분 13초 ~ 1분 40초에 해당한다.
+
<videoflash>KeTJZj2RMjI|665|374</videoflash>
+
  
 
=== Wang Theatre Touch Screen Information Kiosk ===
 
=== Wang Theatre Touch Screen Information Kiosk ===
* 단, 아래 영상의 50초 ~ 58초에 해당한다.
+
* #00:50-00:58
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
  
=== iOS_Facebook ===
 
{{#Widget:Vimeo|id=96699297|width=300|height=533}}
 
 
=== iOS_Google schorlar===
 
{{#Widget:Vimeo|id=96701050|width=300|height=533}}
 
 
=== iOS_Path ===
 
* 단, 아래 영상의 10초 ~ 23초에 해당한다.
 
{{#Widget:Youtube|id=cEJvLh099vo|width=665|height=374|start=32}}
 
  
</div>
 
  
[[Category:Move in same 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