Difference between revisions of "Paper flip"
Navigation menu
From Design pattern
(→Example : iOS_Flipboard) |
|||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | ||
| Line 67: | Line 9: | ||
* Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다. | * Paper flip은 각각의 컨텐츠가 paper의 한 장을 구성하고 있으며, 다음 화면으로 전환 되는 것을 현실의 paper나 책을 넘기는 것을 이용하여 시각적으로 표현하였다. | ||
| − | === Example | + | === Example === |
| − | + | [[File:PaperFlip.PNG|310px]] | |
| + | |||
---- | ---- | ||
| − | + | === iOS_Flipboard === | |
| + | {{#Widget:Vimeo|id=96773017|width=300|height=400}} | ||
| + | ---- | ||
=== iOS_Hello HSK === | === iOS_Hello HSK === | ||
* 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다. | * 문제를 푸는 화면에서, 전구모양의 버튼을 tap하면 페이지가 넘어가듯이 뒤의 해답 페이지를 보여준다. | ||
| Line 83: | Line 28: | ||
=== iOS_Real Diary === | === iOS_Real Diary === | ||
* 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다. | * 화면에 표시된 달력을 가로 방향으로 swipe하여 종이를 넘기듯 이동한다. | ||
| − | {{#Widget:Vimeo|id= | + | {{#Widget:Vimeo|id=94908269|width=300|height=533}} |
=== Android_S Note === | === Android_S Note === | ||
| Line 98: | Line 43: | ||
* 단, 아래 영상의 37초 ~ 50초에 해당한다. | * 단, 아래 영상의 37초 ~ 50초에 해당한다. | ||
{{#Widget:Youtube|id=Hi6uzQ3Iv44|width=655|height=374}} | {{#Widget:Youtube|id=Hi6uzQ3Iv44|width=655|height=374}} | ||
| − | + | ||
[[Category:Metaphoric interaction]] | [[Category:Metaphoric interaction]] | ||
Latest revision as of 11:28, 19 July 2014
Paper flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
Paper flip의 화면 간 이동은 현실에서 볼 수 있는 paper의 넘김을 메타포로 사용한 사례이다.
Contents
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초에 해당한다.
""