Difference between revisions of "Sliding layer"
Navigation menu
From Design pattern
| (22 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]] | ||
| + | |||
| + | ---- | ||
| + | === iOS_Concept/ Eyal Zuri === | ||
| + | {{#Widget:Vimeo|id=93531972|width=665||height=500}} | ||
| + | |||
| + | === iOS_Weather book === | ||
{{#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 === | ||
| + | {{#Widget:Vimeo|id=95771088|width=300|height=533}} | ||
| + | === iOS_Breeze === | ||
| + | {{#Widget:Vimeo|id=95777502|width=300|height=533}} | ||
| + | {{#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로 구성된 내용도 변환이 가능하다.
Contents
- 1 With this pattern, we can solve...
- 2 Example
- 3 iOS_Concept/ Eyal Zuri
- 4 iOS_Weather book
- 5 iOS_Learnist
- 6 iOS_Paper
- 7 iOS_FoxNews
- 8 iOS_NPRNews
- 9 iOS_Yahoo
- 10 iOS_Gmail
- 11 iOS_Madesquare
- 12 iOS_Gogobot
- 13 iOS Calendars5
- 14 iOS Ask for task
- 15 iOS_Yummly
- 16 iOS_Sleep genius
- 17 iOS_Breeze
- 18 iOS_Amazon
- 19 iOS_HuffPost
With this pattern, we can solve...
애니메이션 방향이나 스타일을 통해 기존의 activity개념이나 layer방식에서 나아가 각 layer 간의 계층 구조나 상하관계를 파악하게 할 수 있다.
- tap 을 하여 메뉴를 선택하면 선택한 메뉴의 화면이 빗장이 내려오듯 나타난다.
- 메뉴를 tap 하면 선택한 메뉴의 화면이 11시 방향에서 sliding 하며 나타난다.
- 메뉴를 나가는 버튼을 tap 하면 현재 화면이 3시 방향으로 slidign 하며 사라진다.
Example
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