Difference between revisions of "Screen zoom in/out"
Navigation menu
From Design pattern
(→Example) |
(→With this pattern, we can solve...) |
||
| (5 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다. | Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다. | ||
| − | 확대를 위해 사용자는 double | + | 확대를 위해 사용자는 double tap이나 spread하거나 , 돋보기 모양의 zoom button, 확대 축소를 조절할 수 있는 slider를 활용할 수 있다. Double tap을 할 경우, 화면 내의 이미지는 화면에 잘리지 않는 한 최대한 커지며, 다시 double tap을 할 경우 더 확대되거나, 혹은 본래 사이즈로 돌아간다. Spread하여 이미지를 확대하는 경우는, 사용자가 원하는만큼 자유자재로 확대가 가능하다. zoom button의 경우 버튼을 누를 때마다 지정된 배율만큼 이미지가 변화하며, slider를 활용할 경우 slider의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다. |
| − | + | ||
=== With this pattern, we can solve... === | === With this pattern, we can solve... === | ||
| − | 사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 | + | 사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 내용이 전부 들어가기에는 화면이 너무 작거나 디테일을 볼 필요가 있는 경우 활용된다. |
| − | * | + | * Double tap이나 spread, zoom button, [[Slider]] 등의 조작방식은 모두 흔하게 활용되는 것으로 혼용하기도 한다. |
| − | * | + | * 지도와 같이 많은 정보를 포함하고 있는 경우, 해상도나 배율에 따라 이미지에 포함된 정보가 달라질 수 있다. 예를 들면, 길만 표기되던 지도를 확대하는 경우, 지하철이나 버스 정류장, 랜드마크와 같은 정보가 나타나고, 이에서 더 확대하는 경우 지하철 출구나 더 많은 랜드마크, 번지 등이 나타난다. 이 때 다시 축소를 할 경우, 다시 그 배율에 맞는 정보 형식으로 돌아간다. |
| + | * 확대나 축소된 정도에 따라 콘텐츠를 활용할 수 있는 기능이 달라지는 경우도 있다. | ||
| + | * 확대된 상태에서 이미지의 끝에 도달하였으나 계속하여 이동하려고 할 경우, [[Bounce back]]과 같이 페이지의 끝을 알리는 피드백을 제공하기도 한다. | ||
| + | * 화면 전체가 확대 및 축소되는 것이 아니라, 일부분만 확대하여 크게 보여지는 경우는 [[Magnifier]]에 해당한다. | ||
| + | * 화면의 일부분이 확대되는 것이 아니라, 개체 사이즈가 변화하여 저장되는 경우는 Object zoom in/out에 해당한다. | ||
=== Example : Window 8 === | === Example : Window 8 === | ||
| − | [[File:Screen zoom | + | [[File:Screen zoom inout.jpeg]] |
---- | ---- | ||
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 인터넷