Difference between revisions of "Cover flow"
Navigation menu
From Design pattern
(→iOS_Photo protector) |
|||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
===With this pattern, we can solve...=== | ===With this pattern, we can solve...=== | ||
| − | 문서, 웹 사이트 북마크, 앨범 아트 워크, 또는 사진 등으로 이루어진 목록에서, 자세한 시각적 정보를 | + | 문서, 웹 사이트 북마크, 앨범 아트 워크, 또는 사진 등으로 이루어진 목록에서, 자세한 시각적 정보를 제공하는 인터랙션 패턴이 필요하다. Cover flow 제한된 정보를 정교하게 표현하거나 해당그림에 대한 정보를 상세히 표현하려고 할 떄 사용한다. |
* 원근감을 통한 시각적 차이를 통해 중앙에 위치한 그림과 주변에 위치한 이미지들 간의 구별이 명확하게 한다. | * 원근감을 통한 시각적 차이를 통해 중앙에 위치한 그림과 주변에 위치한 이미지들 간의 구별이 명확하게 한다. | ||
| − | |||
* 정보량이 많은 경우 정보에 대한 리스트 보기 옵션을 제공해야 한다. | * 정보량이 많은 경우 정보에 대한 리스트 보기 옵션을 제공해야 한다. | ||
| + | * 현재 보고있는 목록을 강조한다는 점에서 [[Slide project tray]]와 다르며, 목록의 처음과 끝이 이어지지 않는다는 점에서 [[Carousel]]과 구분된다. | ||
=== Example : iOS_Music === | === Example : iOS_Music === | ||
| − | + | [[File:IOS Music Cover flow.png|665px]] | |
---- | ---- | ||
| + | === Example : iOS_Music === | ||
| + | {{#Widget:Youtube|id=jpcvER7tzR0|width=665|height=374}} | ||
| + | |||
=== iOS_Photo protector === | === iOS_Photo protector === | ||
{{#Widget:Vimeo|id=99897591|width=665|height=374}} | {{#Widget:Vimeo|id=99897591|width=665|height=374}} | ||
| Line 19: | Line 22: | ||
=== Window phone_Album flow === | === Window phone_Album flow === | ||
| − | “#00:50- | + | “#00:50-01:10” |
{{#Widget:Youtube|id=QQ0RkGhVqsk|width=665|height=374}} | {{#Widget:Youtube|id=QQ0RkGhVqsk|width=665|height=374}} | ||
| + | |||
| + | ---- | ||
| + | ===iSense Music-3D Music player === | ||
| + | * #00:06-#00:27 -> 원래 적혀있던 시간 | ||
| + | * #06:35-#07:00 -> 아래 대표사진에 해당하는 시간 | ||
| + | {{#Widget:Youtube|id=NW_ilRHpK0A|width=665|height=374}} | ||
=== Android_Google music === | === Android_Google music === | ||
| Line 27: | Line 36: | ||
| − | [[Category:Move | + | |
| + | [[Category:Move through contents]] | ||
Latest revision as of 21:38, 17 September 2014
Cover Flow는 스냅 샷으로 이루어진 목록에서 안쪽을 향하던 이미지가 화면 중앙에 오면 정면을 향하면서 해당 이미지에 대한 정보가 나타나는 인터랙션 패턴이다. 주로 아이팟과 아이폰 장치에서 사용자가 click wheel을 사용하거나 화면을 좌우로 swipe해서 목록을 움직인다.
Contents
With this pattern, we can solve...
문서, 웹 사이트 북마크, 앨범 아트 워크, 또는 사진 등으로 이루어진 목록에서, 자세한 시각적 정보를 제공하는 인터랙션 패턴이 필요하다. Cover flow 제한된 정보를 정교하게 표현하거나 해당그림에 대한 정보를 상세히 표현하려고 할 떄 사용한다.
- 원근감을 통한 시각적 차이를 통해 중앙에 위치한 그림과 주변에 위치한 이미지들 간의 구별이 명확하게 한다.
- 정보량이 많은 경우 정보에 대한 리스트 보기 옵션을 제공해야 한다.
- 현재 보고있는 목록을 강조한다는 점에서 Slide project tray와 다르며, 목록의 처음과 끝이 이어지지 않는다는 점에서 Carousel과 구분된다.
Example : iOS_Music
Example : iOS_Music
""
iOS_Photo protector
iOS_iCarousel
Window phone_Album flow
“#00:50-01:10” ""
iSense Music-3D Music player
- #00:06-#00:27 -> 원래 적혀있던 시간
- #06:35-#07:00 -> 아래 대표사진에 해당하는 시간
""
Android_Google music
""