Difference between revisions of "Sliding layer"
Navigation menu
From Design pattern
| (49 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | Sliding Layer는 기존화면 위로 최신 화면이 미끄러져 내려와 기존화면을 덮는 패턴이다. Sliding Layer의 구성방식을 통해 Carousel이나 Cover Flow로 구성된 내용도 변환이 가능하다. | |
| − | == | + | ===With this pattern, we can solve...=== |
| − | = | + | 애니메이션 방향이나 스타일을 통해 기존의 activity개념이나 layer방식에서 나아가 각 layer 간의 계층 구조나 상하관계를 파악하게 할 수 있다. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | * tap 을 하여 메뉴를 선택하면 선택한 메뉴의 화면이 빗장이 내려오듯 나타난다. | |
| − | * | + | * 메뉴를 tap 하면 선택한 메뉴의 화면이 11시 방향에서 sliding 하며 나타난다. |
| − | + | * 메뉴를 나가는 버튼을 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}} | |
| − | + | ||
| − | === | + | === 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}} | ||
| − | [[Category: | + | === 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]] | ||
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