|
|
(27 intermediate revisions by 4 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;
| + | |
− | -->
| + | |
− | }
| + | |
− | | + | |
− | }}
| + | |
− | Tabs는 컨텐츠 간 이동 및 현재위치를 파악하는데 사용하는 pattern이다. 주로 현재 페이지와 유사한 성격의 컨텐츠 간을 이동하거나 위치를 파악하는데 사용된다.
| + | |
− | | + | |
− | Tabs는 주로 화면 상단에 위치하며 highlight를 이용하여 현재의 위치를 표시한다. 또한 Tabs를 이용하여 지정된 컨텐츠로 이동한다.
| + | |
| | | |
| === With this pattern, we can solve... === | | === With this pattern, we can solve... === |
− | 저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Tabs는 많은 양의 컨텐츠를 쉽게 둘러 볼 수 있으며, 현재 위치를 파악할 수 있는 기능을 제공한다.
| + | 시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다. |
| | | |
− | * Tabs은 현재의 컨텐츠를 표시해주며, 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 준다. | + | * Timeline은 line의 길이와 조절점의 위치를 통해서 시간의 흐름을 알 수 있도록 한다. |
− | | + | * SNS에서 사용하는 Timeline이나 연대기와 같이 시간 순서에 따라 목록을 제공하는 패턴은 본 패턴과 구분하기 위하여 [[Chronological Timeline]]으로 분류하였다. |
− | Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용 하는 pattern이다. 주로 시간적 흐름을 가진 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. | + | |
− | | + | |
− | 전후의 페이지를 이동하는 방식에 따라 구분이 가능한데, 주로 Paper flip 방식이 사용되며, Card flip, Cube flip, Slideshow 방식으로 분류할 수 있다. Page turn/ Page flip을 호출하는 방법은 주로 화면 좌우의 이동버튼이나 flick을 이용하여 동작시킨다.
| + | |
− | | + | |
− | === With this pattern, we can solve... ===
| + | |
− | 저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Page turn/ Page flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
| + | |
− | | + | |
− | * Timeline은 트랜지션 효과를 통해 전후의 컨텐츠로 이동을 하며, 전후에 다른 컨텐츠가 존재할 것이라는 기대를 주기 위해 시각적 힌트를 주기도 한다.
| + | |
− | * Timeline 이전에는 Previous/Next button이나 이와 유사한 방식을 사용하였다. | + | |
| | | |
| === Example : iOS_Ubersense Coach === | | === 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 ==
| |
− | <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}} |
− | | + | |
− | === 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=10}}
| |
| | | |
− | </div>
| |
| | | |
− | [[Category:Move in same level]] | + | [[Category:Move through contents]] |
Timeline은 컨텐츠 내에서 특정한 위치로 이동하거나, 현재위치를 파악하는데 사용하는 인터랙션 패턴이다. 주로 시간적 흐름을 가진 멀티미디어 컨텐츠 안에서 특정한 시간대로 이동 및 현재위치를 파악할 때 사용된다. 주로 Slide bar의 형태로 되어있다.
시간적 흐름을 가지고 있는 컨텐츠를 효과적으로 보기 위한 패턴이 필요하다. Timeline은 시간적 흐름을 가진 컨텐츠를 직관적이며 간편하게 둘러 볼 수 있는 기능을 제공한다.