Difference between revisions of "Card flip"
Navigation menu
From Design pattern
(→Card Flip iOS Demo) |
|||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Card flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | Card flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다. | ||
| Line 68: | Line 9: | ||
* Card flip은 각각의 컨텐츠가 하나의 card를 구성하고 있으며, 다음 화면으로 전환되는 것을 현실의 card를 넘기는 것을 이용하여 시각적으로 표현해 준다. | * Card flip은 각각의 컨텐츠가 하나의 card를 구성하고 있으며, 다음 화면으로 전환되는 것을 현실의 card를 넘기는 것을 이용하여 시각적으로 표현해 준다. | ||
| − | === Example : iOS_Clocks === | + | === Example === |
| + | [[File:CardFlip.PNG|310px]] | ||
| + | |||
| + | ---- | ||
| + | === iOS_Clocks === | ||
{{#Widget:Vimeo|id=93552411|width=300|height=533|start=4s}} | {{#Widget:Vimeo|id=93552411|width=300|height=533|start=4s}} | ||
| + | |||
---- | ---- | ||
| − | === | + | === iOS_USAToday === |
| − | {{#Widget: | + | {{#Widget:Vimeo|id=95773708|width=300|height=533}} |
| − | === | + | === iOS_oflow === |
| − | + | {{#Widget:Vimeo|id=95776888|width=300|height=533}} | |
| − | === | + | === iOS_Unforget === |
| − | + | * 화면속 영어로 적힌 단어카드를 tap하면 카드가 뒤집어지면서 그 의미가 나온다. | |
| + | {{#Widget:Vimeo|id=93367653|width=300|height=405}} | ||
| + | |||
| + | ===iOS_Jelly === | ||
| + | {{#Widget:Vimeo|id=95779093|width=300|height=533}} | ||
| + | {{#Widget:Vimeo|id=95779122|width=300|height=533}} | ||
| + | |||
| + | === iOS_Card flip demo === | ||
| + | {{#Widget:Youtube|id=gl3IfsWChTE|width=665||height=374}} | ||
| + | {{#Widget:Youtube|id=uUrqgbIefd4|width=665||height=374}} | ||
| + | |||
| + | |||
| + | === Android_3D Pexeso === | ||
| + | {{#Widget:Youtube|id=X7hDUblDGbg|width=665||height=374}} | ||
| − | |||
| − | |||
=== Android_Flip! Flip! === | === Android_Flip! Flip! === | ||
| − | + | {{#Widget:Youtube|id=5fcR3BmnR5s|width=665||height=374}} | |
| + | |||
[[Category:Metaphoric interaction]] | [[Category:Metaphoric interaction]] | ||
Latest revision as of 16:59, 19 July 2014
Card flip는 컨텐츠 화면 간 이동할때 사용되는 패턴이다. 주로 현재 페이지와 동일한 레벨의 컨텐츠 간의 이동에서 사용된다.
Card flip의 화면 간 이동은 현실에서 볼 수 있는 Card를 넘겨보는 메타포를 사용하였다.
Contents
With this pattern, we can solve...
저장 공간이 충분해 지면서 디지털기기의 컨텐츠 양이 기하급수적으로 증가하여, 많은 양의 컨텐츠를 효과적으로 보기 위한 pattern이 필요하다. Card flip은 많은 양의 컨텐츠를 쉽게 볼 수 있는 기능을 제공한다.
- Card flip은 컨텐츠가 여러개의 card로 구성된 듯한 인식을 준다.
- Card flip은 각각의 컨텐츠가 하나의 card를 구성하고 있으며, 다음 화면으로 전환되는 것을 현실의 card를 넘기는 것을 이용하여 시각적으로 표현해 준다.
Example
iOS_Clocks
iOS_USAToday
iOS_oflow
iOS_Unforget
- 화면속 영어로 적힌 단어카드를 tap하면 카드가 뒤집어지면서 그 의미가 나온다.
iOS_Jelly
iOS_Card flip demo
"" ""
Android_3D Pexeso
""
Android_Flip! Flip!
""