From Design pattern
Jump to: navigation, search
 
(14 intermediate revisions by one user not shown)
Line 1: Line 1:
−
화면이 미끌어지듯 나타나거나 사라진다.
+
Sliding Layer는 기존화면 위로 최신 화면이 미끄러져 내려와 기존화면을 덮는 패턴이다. Sliding Layer의 구성방식을 통해 Carousel이나 Cover Flow로 구성된 내용도 변환이 가능하다.
 +
 
 +
===With this pattern, we can solve...===
 +
애니메이션 방향이나 스타일을 통해 기존의 activity개념이나 layer방식에서 나아가 각 layer 간의 계층 구조나 상하관계를 파악하게 할 수 있다.
  
 
* tap 을 하여 메뉴를 선택하면 선택한 메뉴의 화면이 빗장이 내려오듯 나타난다.
 
* tap 을 하여 메뉴를 선택하면 선택한 메뉴의 화면이 빗장이 내려오듯 나타난다.
 
* 메뉴를 tap 하면 선택한 메뉴의 화면이 11시 방향에서 sliding 하며 나타난다.
 
* 메뉴를 tap 하면 선택한 메뉴의 화면이 11시 방향에서 sliding 하며 나타난다.
 
* 메뉴를 나가는 버튼을 tap 하면 현재 화면이 3시 방향으로 slidign 하며 사라진다.
 
* 메뉴를 나가는 버튼을 tap 하면 현재 화면이 3시 방향으로 slidign 하며 사라진다.
 +
 +
=== Example ===
 +
[[File:SlidingLayer.png|310px]]
  
 
----
 
----
−
=== Example :iOS_Concept/ Eyal Zuri ===
+
=== iOS_Concept/ Eyal Zuri ===
 
{{#Widget:Vimeo|id=93531972|width=665||height=500}}
 
{{#Widget:Vimeo|id=93531972|width=665||height=500}}
  
Line 12: Line 18:
 
{{#Widget:Vimeo|id=93553251|width=300||height=533}}
 
{{#Widget:Vimeo|id=93553251|width=300||height=533}}
  
 +
=== iOS_Learnist ===
 +
{{#Widget:Vimeo|id=95779362|width=300|height=533}}
 +
 +
=== iOS_Paper ===
 +
* 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.
 +
{{#Widget:Vimeo|id=94902939|width=300|height=533}}
 +
 +
=== iOS_FoxNews ===
 +
{{#Widget:Vimeo|id=95773475|width=300|height=533}}
 +
 +
=== iOS_NPRNews ===
 +
{{#Widget:Vimeo|id=95773391|width=300|height=533}}
 +
 +
=== iOS_Yahoo ===
 +
{{#Widget:Vimeo|id=95772697|width=300|height=533}}
 +
 +
=== iOS_Gmail ===
 +
{{#Widget:Vimeo|id=95772388|width=300|height=533}}
 +
 +
=== iOS_Madesquare ===
 +
{{#Widget:Vimeo|id=95771188|width=300|height=533}}
 +
 +
=== iOS_Gogobot ===
 +
{{#Widget:Vimeo|id=95770948|width=300|height=533}}
 +
 +
=== iOS Calendars5 ===
 +
{{#Widget:Vimeo|id=95762433|width=300|height=533}}
 +
 +
=== iOS Ask for task ===
 +
{{#Widget:Vimeo|id=95762139|width=300|height=533}}
 +
 +
=== iOS_Yummly ===
 +
{{#Widget:Vimeo|id=95774503|width=300|height=533}}
  
−
<!--
+
=== iOS_Sleep genius ===
−
=== Android_Nike Store ===
+
{{#Widget:Vimeo|id=95771088|width=300|height=533}}
−
* 항목을 선택하면 하위항목을 화면 전체를 덮어 보여준다.
+
−
{{#Widget:Vimeo|id=95491273|width=300||height=541}}
+
  
−
=== Android_Pocket ===
+
=== iOS_Breeze ===
−
* 헤더 메뉴를 선택하면 기존 화면 위에 하위 메뉴를 펼쳐서 보여주며 다시 선택하면 사라진 화면을 보여준다.
+
{{#Widget:Vimeo|id=95777502|width=300|height=533}}
−
{{#Widget:Vimeo|id=95585571|width=300||height=541}}
+
{{#Widget:Vimeo|id=95777478|width=300|height=533}}
−
-->
+
  
 +
=== iOS_Amazon ===
 +
{{#Widget:Vimeo|id=95762048|width=300|height=533}}
  
 +
=== iOS_HuffPost ===
 +
{{#Widget:Vimeo|id=95773877|width=300|height=533}}
  
 
[[Category:Transition effect]]
 
[[Category:Transition effect]]

Latest revision as of 14:02, 25 July 2014

Sliding Layer는 기존화면 위로 최신 화면이 미끄러져 내려와 기존화면을 덮는 패턴이다. Sliding Layer의 구성방식을 통해 Carousel이나 Cover Flow로 구성된 내용도 변환이 가능하다.

With this pattern, we can solve...

애니메이션 방향이나 스타일을 통해 기존의 activity개념이나 layer방식에서 나아가 각 layer 간의 계층 구조나 상하관계를 파악하게 할 수 있다.

  • tap 을 하여 메뉴를 선택하면 선택한 메뉴의 화면이 빗장이 내려오듯 나타난다.
  • 메뉴를 tap 하면 선택한 메뉴의 화면이 11시 방향에서 sliding 하며 나타난다.
  • 메뉴를 나가는 버튼을 tap 하면 현재 화면이 3시 방향으로 slidign 하며 사라진다.

Example

SlidingLayer.png

iOS_Concept/ Eyal Zuri

iOS_Weather book

iOS_Learnist

iOS_Paper

  • 화면을 아래로 드래그 하여 자신의 정보에 관련된 페이지를 볼 수 있다.

iOS_FoxNews

iOS_NPRNews

iOS_Yahoo

iOS_Gmail

iOS_Madesquare

iOS_Gogobot

iOS Calendars5

iOS Ask for task

iOS_Yummly

iOS_Sleep genius

iOS_Breeze

iOS_Amazon

iOS_HuffPost

Retrieved from "http://www.ixpatterns.com/index.php?title=Sliding_layer&oldid=109145"