Difference between revisions of "Screen zoom in/out"
Navigation menu
From Design pattern
(→Samsung TV) |
(→With this pattern, we can solve...) |
||
| (15 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 | + | Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다. |
| + | |||
| + | 확대를 위해 사용자는 double tap이나 spread하거나 , 돋보기 모양의 zoom button, 확대 축소를 조절할 수 있는 slider를 활용할 수 있다. Double tap을 할 경우, 화면 내의 이미지는 화면에 잘리지 않는 한 최대한 커지며, 다시 double tap을 할 경우 더 확대되거나, 혹은 본래 사이즈로 돌아간다. Spread하여 이미지를 확대하는 경우는, 사용자가 원하는만큼 자유자재로 확대가 가능하다. zoom button의 경우 버튼을 누를 때마다 지정된 배율만큼 이미지가 변화하며, slider를 활용할 경우 slider의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다. | ||
| + | |||
| + | === With this pattern, we can solve... === | ||
| + | 사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 내용이 전부 들어가기에는 화면이 너무 작거나 디테일을 볼 필요가 있는 경우 활용된다. | ||
| + | |||
| + | * Double tap이나 spread, zoom button, [[Slider]] 등의 조작방식은 모두 흔하게 활용되는 것으로 혼용하기도 한다. | ||
| + | * 지도와 같이 많은 정보를 포함하고 있는 경우, 해상도나 배율에 따라 이미지에 포함된 정보가 달라질 수 있다. 예를 들면, 길만 표기되던 지도를 확대하는 경우, 지하철이나 버스 정류장, 랜드마크와 같은 정보가 나타나고, 이에서 더 확대하는 경우 지하철 출구나 더 많은 랜드마크, 번지 등이 나타난다. 이 때 다시 축소를 할 경우, 다시 그 배율에 맞는 정보 형식으로 돌아간다. | ||
| + | * 확대나 축소된 정도에 따라 콘텐츠를 활용할 수 있는 기능이 달라지는 경우도 있다. | ||
| + | * 확대된 상태에서 이미지의 끝에 도달하였으나 계속하여 이동하려고 할 경우, [[Bounce back]]과 같이 페이지의 끝을 알리는 피드백을 제공하기도 한다. | ||
| + | * 화면 전체가 확대 및 축소되는 것이 아니라, 일부분만 확대하여 크게 보여지는 경우는 [[Magnifier]]에 해당한다. | ||
| + | * 화면의 일부분이 확대되는 것이 아니라, 개체 사이즈가 변화하여 저장되는 경우는 Object zoom in/out에 해당한다. | ||
| + | |||
| + | === Example : Window 8 === | ||
| + | [[File:Screen zoom inout.jpeg]] | ||
| + | |||
---- | ---- | ||
| − | + | ||
| − | + | ||
=== iOS_직방 === | === iOS_직방 === | ||
{{#Widget:Vimeo|id=95734888|width=300|height=449}} | {{#Widget:Vimeo|id=95734888|width=300|height=449}} | ||
| Line 15: | Line 30: | ||
{{#Widget:Vimeo|id=93044940|width=300|height=400}} | {{#Widget:Vimeo|id=93044940|width=300|height=400}} | ||
| − | === Window | + | === Window 8 === |
{{#Widget:Vimeo|id=95088708|width=665|height=374}} | {{#Widget:Vimeo|id=95088708|width=665|height=374}} | ||
| − | |||
| − | == | + | === Android_Samsung Galaxy Note Gallery === |
| − | + | * 좌측의 경우 double tap, 우측의 경우 spread를 통해 화면을 확대하고 있다. | |
| − | === | + | {{#Widget:Vimeo|id=94637000|width=300||height=480}} |
| − | + | {{#Widget:Vimeo|id=94637006|width=300||height=480}} | |
| − | {{#Widget:Vimeo|id= | + | |
| − | + | === Android_CamScanner === | |
| + | {{#Widget:Vimeo|id=94637002|width=300||height=455}} | ||
| + | === Android_Samsung Galaxy Note 인터넷 === | ||
| + | {{#Widget:Vimeo|id=94637003|width=300||height=480}} | ||
[[Category:Edit screen view]] | [[Category:Edit screen view]] | ||
Latest revision as of 01:34, 31 July 2014
Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다.
확대를 위해 사용자는 double tap이나 spread하거나 , 돋보기 모양의 zoom button, 확대 축소를 조절할 수 있는 slider를 활용할 수 있다. Double tap을 할 경우, 화면 내의 이미지는 화면에 잘리지 않는 한 최대한 커지며, 다시 double tap을 할 경우 더 확대되거나, 혹은 본래 사이즈로 돌아간다. Spread하여 이미지를 확대하는 경우는, 사용자가 원하는만큼 자유자재로 확대가 가능하다. zoom button의 경우 버튼을 누를 때마다 지정된 배율만큼 이미지가 변화하며, slider를 활용할 경우 slider의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다.
Contents
With this pattern, we can solve...
사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 내용이 전부 들어가기에는 화면이 너무 작거나 디테일을 볼 필요가 있는 경우 활용된다.
- Double tap이나 spread, zoom button, Slider 등의 조작방식은 모두 흔하게 활용되는 것으로 혼용하기도 한다.
- 지도와 같이 많은 정보를 포함하고 있는 경우, 해상도나 배율에 따라 이미지에 포함된 정보가 달라질 수 있다. 예를 들면, 길만 표기되던 지도를 확대하는 경우, 지하철이나 버스 정류장, 랜드마크와 같은 정보가 나타나고, 이에서 더 확대하는 경우 지하철 출구나 더 많은 랜드마크, 번지 등이 나타난다. 이 때 다시 축소를 할 경우, 다시 그 배율에 맞는 정보 형식으로 돌아간다.
- 확대나 축소된 정도에 따라 콘텐츠를 활용할 수 있는 기능이 달라지는 경우도 있다.
- 확대된 상태에서 이미지의 끝에 도달하였으나 계속하여 이동하려고 할 경우, Bounce back과 같이 페이지의 끝을 알리는 피드백을 제공하기도 한다.
- 화면 전체가 확대 및 축소되는 것이 아니라, 일부분만 확대하여 크게 보여지는 경우는 Magnifier에 해당한다.
- 화면의 일부분이 확대되는 것이 아니라, 개체 사이즈가 변화하여 저장되는 경우는 Object zoom in/out에 해당한다.
Example : Window 8
iOS_직방
iOS_Map
iOS_별자리표
Window 8
Android_Samsung Galaxy Note Gallery
- 좌측의 경우 double tap, 우측의 경우 spread를 통해 화면을 확대하고 있다.
Android_CamScanner
Android_Samsung Galaxy Note 인터넷