m (Admin1 moved page Turn page cube to Turn page like cube without leaving a redirect) |
|||
| Line 1: | Line 1: | ||
| − | + | {{#css: | |
| + | #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; | ||
| + | --> | ||
| + | } | ||
| + | |||
| + | }} | ||
| + | Turn page는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | ||
| + | |||
| + | Turn page의 패턴에서 화면 간 이동에서는 현실에서 볼 수 있는 다양한 사물을 이용한 메타포를 사용한 사례가 많이 보인다. | ||
| + | |||
| + | === What Problem Does This Solve? === | ||
| + | * Turn page 패턴은 Scroll과 다르게 컨텐츠가 여러개의 page로 구성된 듯한 인식을 준다. | ||
| + | |||
| + | * Turn page 패턴은 현재 페이지가 하나의 완성된 화면을 구성하고 있으며 다음 화면으로 전환되는 것을 시각적으로 표현해 준다. | ||
| + | |||
| + | === Example : 355번 사례 === | ||
| + | {{#Widget:Vimeo|id=93044941|width=300|height=405|start=4s}} | ||
| + | ---- | ||
| + | |||
| + | == Turn page like Card == | ||
| + | <div id="sun-col"> | ||
| + | === 405번 사례 === | ||
| + | * 좌우로 swipe 하면 카드를 넘기듯 화면이 전환된다. | ||
| + | * 아래는 시계의 스타일을 변경하는 화면 전환에 적용된 사례이다. | ||
| + | <!-- {{#Widget:Vimeo|id=93552411|width=300|height=533|start=4s}} --> | ||
| + | {{#Widget:Vimeo|id=93552411|width=300|height=533}} | ||
| + | </div> | ||
| + | ---- | ||
| + | |||
| + | <div id="sun-col"> | ||
=== 407번 사례 === | === 407번 사례 === | ||
* 화면의 윗부분을 double tab하면 큐브가 돌아가듯 상위 메뉴의 화면을 보여준다. | * 화면의 윗부분을 double tab하면 큐브가 돌아가듯 상위 메뉴의 화면을 보여준다. | ||
* 화면의 아랫부분을 double tab하면 큐브가 돌아가듯 하위 메뉴의 화면을 보여준다. | * 화면의 아랫부분을 double tab하면 큐브가 돌아가듯 하위 메뉴의 화면을 보여준다. | ||
| − | + | {{#Widget:Vimeo|id=93552800|width=300|height=533}} | |
=== 410번 사례 === | === 410번 사례 === | ||
* tap 을 통해 메뉴를 선택하면 큐브가 돌아가듯 화면이 전환된다. | * tap 을 통해 메뉴를 선택하면 큐브가 돌아가듯 화면이 전환된다. | ||
| − | + | {{#Widget:Vimeo|id=93552802|width=300|height=533}} | |
| − | + | ||
=== 356번 사례 === | === 356번 사례 === | ||
* 하나의 칸을 tap하면 그 칸이 큐브가 반시계방향으로 돌아가듯 움직이면서 다음 정보를 보여준다. | * 하나의 칸을 tap하면 그 칸이 큐브가 반시계방향으로 돌아가듯 움직이면서 다음 정보를 보여준다. | ||
* 일정 시간이 지나면 반대방향으로 돌아가듯 움직이면서 처음 정보로 돌아온다. | * 일정 시간이 지나면 반대방향으로 돌아가듯 움직이면서 처음 정보로 돌아온다. | ||
| − | + | {{#Widget:Vimeo|id=93368792|width=300|height=405}} | |
| − | + | </div> | |
[[Category:Move in same level]] | [[Category:Move in same level]] | ||
Turn page는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
Turn page의 패턴에서 화면 간 이동에서는 현실에서 볼 수 있는 다양한 사물을 이용한 메타포를 사용한 사례가 많이 보인다.