|
|
(9 intermediate revisions by 2 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이다. 주로 시간적 흐름을 가진 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. | + | |
− | | + | |
− | Timeline을 표시 방식에 따라 구분이 가능한데, 주로 Slide bar 방식과 chronicle 방식이 사용된다.
| + | |
| | | |
| === With this pattern, we can solve... === | | === With this pattern, we can solve... === |
− | 시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다. | + | 시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다. |
| | | |
| * Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다. | | * Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다. |
| + | * SNS에서 사용하는 Timeline이나 연대기와 같이 시간 순서에 따라 목록을 제공하는 패턴은 본 패턴과 구분하기 위하여 [[Chronological Timeline]]으로 분류하였다. |
| | | |
| === Example : iOS_Ubersense Coach === | | === Example : iOS_Ubersense Coach === |
− | {{#Widget:Vimeo|id=93373411|width=300|height=400|start=4s}}
| + | [[File:IOS Ubersense Coach Timeline.png|395px]] |
| ---- | | ---- |
| + | === iOS_Ubersense Coach === |
| + | {{#Widget:Vimeo|id=93373411|width=399|height=533}} |
| | | |
− | == Timeline (Slide bar) ==
| |
− | <div id="sun-col">
| |
| === Android_LG G Pro 2 버스트샷 === | | === Android_LG G Pro 2 버스트샷 === |
− | * 단, 아래 영상의 10초 ~ 27초에 해당한다. | + | * #01:13-01:40 |
− | <videoflash>RlZzfnySXFk|665|374</videoflash>
| + | {{#Widget:Youtube|id=KeTJZj2RMjI|width=665|height=374}} |
− | | + | |
− | === Android_LG G Pro 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}} |
| | | |
− | </div>
| |
− |
| |
− | ----
| |
− |
| |
− | == Timeline (Chronicle) ==
| |
− | <div id="sun-col">
| |
− |
| |
− | === iOS_Facebook(1) ===
| |
− | {{#Widget:Vimeo|id=96699297|width=300|height=533}}
| |
− |
| |
− | ===iOS_Facebook(2)===
| |
− | {{#Widget:Vimeo|id=96783692|width=300|height=533}}
| |
− |
| |
− | === iOS_Path ===
| |
− | * 단, 아래 영상의 10초 ~ 23초에 해당한다.
| |
− | {{#Widget:Youtube|id=cEJvLh099vo|width=665|height=374|start=10}}
| |
− |
| |
− | ===Emerson olivia===
| |
− | [[File: Emerson_olivia.png|665.px]]
| |
− |
| |
− | ===iOS_Foto brio===
| |
− | {{#Widget:Vimeo|id=96783341|width=300|height=533}}
| |
− |
| |
− | ===iOS_Chronicle map===
| |
− | {{#Widget:Vimeo|id=96783400|width=300|height=533}}
| |
− |
| |
− | ===iOS_사진===
| |
− | {{#Widget:Vimeo|id=96783834|width=300|height=533}}
| |
− |
| |
− | ----
| |
− | == Timeline (Chronicle & Slide bar) ==
| |
− |
| |
− | === iOS 3D Album ===
| |
− | {{#Widget:Vimeo|id=96779667|width=300|height=533}}
| |
− |
| |
− | ===iOS_US History ===
| |
− | {{#Widget:Vimeo|id=96779668|width=300|height=533}}
| |
| | | |
− | </div>
| |
| | | |
− | [[Category:Move in same level]] | + | [[Category:Move through contents]] |
Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용하는 인터랙션 패턴이다. 주로 시간적 흐름을 가진 멀티미디어 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. 주로 Slide bar의 형태로 되어있다.
시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다.