From Design pattern
Jump to: navigation, search
 
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
Paper flip의 화면 간 이동은 현실에서 볼 수 있는 paper의 넘김을 메타포로 사용한 사례이다.
font-weight: 600;
+
}
+
  
span.mw-editsection {
+
=== With this pattern, we can solve... ===
font-weight: 200;
+
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Paper flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
  
span.mw-editsection a {
+
* Paper flip은 각각의 컨텐츠가 paper의 각 장으로 구성된 듯한 인식을 준다.
font-weight: 200;
+
* Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다.
}
+
  
.art-subpage {
+
=== Example ===
background: #F7F7F7;
+
[[File:PaperFlip.PNG|310px]]
}
+
  
#mw-content-text p {
+
----
padding-top: 0px;
+
===  iOS_Flipboard ===
padding-bottom: 6px;
+
{{#Widget:Vimeo|id=96773017|width=300|height=400}}
}
+
  
.mw-content-ltr ul {
+
----
margin: 0.3em 0 0 42px;
+
=== iOS_Hello HSK ===
}
+
* 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다.
 +
* 해답 페이지에서 다시 같은 버튼을 tap하면 페이지가 다시 넘어오듯이 문제 화면으로 다시 돌아온다.
 +
{{#Widget:Vimeo|id=95741744|width=300|height=406}}
  
 +
=== Android_Google Play Book ===
 +
* drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
 +
{{#Widget:Vimeo|id=93362186|width=300|height=455}}
  
hr {
+
=== iOS_Real Diary ===
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 like Paper는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
+
 
+
Turn page like Paper의 패턴에서 화면 간 이동에서는 현실에서 볼 수 있는 Paper를 메타포로 사용한 사례이다.
+
 
+
=== What Problem Does This Solve? ===
+
* Turn page like Paper 패턴은 Scroll과 다르게 컨텐츠가 Paper의 각 장으로 구성된 듯한 인식을 준다.
+
 
+
* Turn page like Paper 패턴은 현재 페이지가 Paper의 한 장을 구성하고 있으며 다음 화면으로 전환되는 것을 현실의 Paper를 넘기는 것을 이용하여 시각적으로 표현해 준다.
+
 
+
=== Example : 213번 사례 ===
+
{{#Widget:Vimeo|id=93372596|width=300|height=405|start=4s}}
+
----
+
<div id="sun-col">
+
 
+
=== 251번 사례 ===
+
 
* 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다.
 
* 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다.
{{#Widget:Vimeo|id=93552097|width=300|height=533}}
+
{{#Widget:Vimeo|id=94908269|width=300|height=533}}
  
=== 318번 사례 ===
+
=== Android_S Note ===
* 터치 kiosk에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
+
* drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
* 단, 아래 영상의 37초 ~ 50초에 해당한다.
+
{{#Widget:Vimeo|id=94814136|width=300|height=455}}
<videoflash>Hi6uzQ3Iv44|665|374</videoflash>
+
 
+
=== 350번 사례 ===
+
* 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다.
+
* 해답 페이지에서 다시 같은 버튼을 tap하면 페이지가 다시 넘어오듯이 문제 화면으로 다시 돌아온다.
+
{{#Widget:Vimeo|id=95741744|width=300|height=406}}
+
  
===  455번 사례===
+
===  Touch Table Prototype, Isabella Stewart Gardner Museum===
 
* 터치테이블에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
 
* 터치테이블에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
 
* 단, 아래 영상의 1분 2초 ~ 1분 5초에 해당한다.
 
* 단, 아래 영상의 1분 2초 ~ 1분 5초에 해당한다.
 
{{#Widget:Vimeo|id=42073036|width=665|height=374}}
 
{{#Widget:Vimeo|id=42073036|width=665|height=374}}
  
=== 475번 사례 ===
+
=== LG 전자 대형 터치 모니터 ===
* drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
+
* 터치 kiosk에서 화면을 drag하면 책장을 넘기듯 이전/다음항목으로 이동한다.
{{#Widget:Vimeo|id=93362186|width=300|height=455}}
+
* 단, 아래 영상의 37초 ~ 50초에 해당한다.
 +
{{#Widget:Youtube|id=Hi6uzQ3Iv44|width=655|height=374}}
  
=== 628번 사례 ===
 
* drag하여 책장을 넘기듯이 이전이나 다음 페이지로 이동한다.
 
{{#Widget:Vimeo|id=94814136|width=300|height=455}}
 
</div>
 
  
 
[[Category:Metaphoric interaction]]
 
[[Category:Metaphoric interaction]]

Latest revision as of 11:28, 19 July 2014

Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.

Paper flip의 화면 간 이동은 현실에서 볼 수 있는 paper의 넘김을 메타포로 사용한 사례이다.

With this pattern, we can solve...

저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Paper flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.

  • Paper flip은 각각의 컨텐츠가 paper의 각 장으로 구성된 듯한 인식을 준다.
  • Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다.

Example

PaperFlip.PNG


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초에 해당한다.

""