From Design pattern
Jump to: navigation, search
(Created page with "==Screen zoom in/out by touch== Screen zoom in/out by touch<br>Control screen image")
 
(→‎With this pattern, we can solve...)
 
(41 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
==Screen zoom in/out by touch==
+
Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다.
  
 +
확대를 위해 사용자는 double tap이나 spread하거나 , 돋보기 모양의 zoom button, 확대 축소를 조절할 수 있는 slider를 활용할 수 있다. Double tap을 할 경우, 화면 내의 이미지는 화면에 잘리지 않는 한 최대한 커지며, 다시 double tap을 할 경우 더 확대되거나, 혹은 본래 사이즈로 돌아간다. Spread하여 이미지를 확대하는 경우는, 사용자가 원하는만큼 자유자재로 확대가 가능하다. zoom button의 경우 버튼을 누를 때마다 지정된 배율만큼 이미지가 변화하며, slider를 활용할 경우 slider의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다.
  
−
Screen zoom in/out by touch<br>[[Category:Control screen image]]
+
=== 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_직방 ===
 +
{{#Widget:Vimeo|id=95734888|width=300|height=449}}
 +
 
 +
=== iOS_Naver Real Estate ===
 +
{{#Widget:Vimeo|id=93368793|width=300|height=449}}
 +
 
 +
=== iOS_Map ===
 +
{{#Widget:Vimeo|id=93045220|width=300|height=400}}
 +
 
 +
=== iOS_별자리표 ===
 +
{{#Widget:Vimeo|id=93044940|width=300|height=400}}
 +
 
 +
=== Window 8 ===
 +
{{#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}}
 +
 
 +
=== 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]]

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의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다.

With this pattern, we can solve...

사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 내용이 전부 들어가기에는 화면이 너무 작거나 디테일을 볼 필요가 있는 경우 활용된다.

  • Double tap이나 spread, zoom button, Slider 등의 조작방식은 모두 흔하게 활용되는 것으로 혼용하기도 한다.
  • 지도와 같이 많은 정보를 포함하고 있는 경우, 해상도나 배율에 따라 이미지에 포함된 정보가 달라질 수 있다. 예를 들면, 길만 표기되던 지도를 확대하는 경우, 지하철이나 버스 정류장, 랜드마크와 같은 정보가 나타나고, 이에서 더 확대하는 경우 지하철 출구나 더 많은 랜드마크, 번지 등이 나타난다. 이 때 다시 축소를 할 경우, 다시 그 배율에 맞는 정보 형식으로 돌아간다.
  • 확대나 축소된 정도에 따라 콘텐츠를 활용할 수 있는 기능이 달라지는 경우도 있다.
  • 확대된 상태에서 이미지의 끝에 도달하였으나 계속하여 이동하려고 할 경우, Bounce back과 같이 페이지의 끝을 알리는 피드백을 제공하기도 한다.
  • 화면 전체가 확대 및 축소되는 것이 아니라, 일부분만 확대하여 크게 보여지는 경우는 Magnifier에 해당한다.
  • 화면의 일부분이 확대되는 것이 아니라, 개체 사이즈가 변화하여 저장되는 경우는 Object zoom in/out에 해당한다.

Example : Window 8

Screen zoom inout.jpeg

iOS_직방

iOS_Naver Real Estate

iOS_Map

iOS_별자리표

Window 8

Android_Samsung Galaxy Note Gallery

  • 좌측의 경우 double tap, 우측의 경우 spread를 통해 화면을 확대하고 있다.

Android_CamScanner

Android_Samsung Galaxy Note 인터넷

Retrieved from "http://www.ixpatterns.com/index.php?title=Screen_zoom_in/out&oldid=109526"