|
|
| 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;
| |
| − | -->
| |
| − | }
| |
| − |
| |
| − | }}
| |
| | Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | | Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. |
| | | | |
| Line 69: |
Line 11: |
| | === Example : iOS_Flipboard === | | === Example : iOS_Flipboard === |
| | {{#Widget:Vimeo|id=96773017|width=300|height=400}} | | {{#Widget:Vimeo|id=96773017|width=300|height=400}} |
| − | ----
| |
| − | <div id="sun-col">
| |
| | | | |
| | + | ---- |
| | === iOS_Hello HSK === | | === iOS_Hello HSK === |
| | * 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다. | | * 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다. |
| Line 98: |
Line 39: |
| | * 단, 아래 영상의 37초 ~ 50초에 해당한다. | | * 단, 아래 영상의 37초 ~ 50초에 해당한다. |
| | {{#Widget:Youtube|id=Hi6uzQ3Iv44|width=655|height=374}} | | {{#Widget:Youtube|id=Hi6uzQ3Iv44|width=655|height=374}} |
| − | </div>
| + | |
| | | | |
| | [[Category:Metaphoric interaction]] | | [[Category:Metaphoric interaction]] |
Revision as of 19:26, 23 June 2014
Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
Paper flip의 화면 간 이동은 현실에서 볼 수 있는 paper의 넘김을 메타포로 사용한 사례이다.
With this pattern, we can solve...
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Paper flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
- Paper flip은 각각의 컨텐츠가 paper의 각 장으로 구성된 듯한 인식을 준다.
- Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다.
Example : iOS_Flipboard
iOS_Hello HSK
- 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다.
- 해답 페이지에서 다시 같은 버튼을 tap하면 페이지가 다시 넘어오듯이 문제 화면으로 다시 돌아온다.
Android_Google Play Book
- drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
iOS_Real Diary
- 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다.
Android_S Note
- drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
Touch Table Prototype, Isabella Stewart Gardner Museum
- 터치테이블에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
- 단, 아래 영상의 1분 2초 ~ 1분 5초에 해당한다.
LG 전자 대형 터치 모니터
- 터치 kiosk에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
- 단, 아래 영상의 37초 ~ 50초에 해당한다.
""