From Design pattern
Jump to: navigation, search
 
(2 intermediate revisions by one user not shown)
Line 9: Line 9:
 
* Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다.
 
* Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다.
  
=== Example : iOS_Flipboard ===
+
=== Example ===
 +
[[File:PaperFlip.PNG|310px]]
 +
 
 +
----
 +
===  iOS_Flipboard ===
 
{{#Widget:Vimeo|id=96773017|width=300|height=400}}
 
{{#Widget:Vimeo|id=96773017|width=300|height=400}}
  
Line 24: Line 28:
 
=== iOS_Real Diary ===
 
=== iOS_Real Diary ===
 
* 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다.
 
* 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다.
{{#Widget:Vimeo|id=93552097|width=300|height=533}}
+
{{#Widget:Vimeo|id=94908269|width=300|height=533}}
 
+
=== iOS_google===
+
* 불필요한 페이지(카드)를 좌우로 swipe하여 제거한다.
+
{{#Widget:Vimeo|id=94909158|width=300|height=533}}
+
  
 
=== Android_S Note ===
 
=== Android_S Note ===

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

""