From Design pattern
Jump to: navigation, search
(→‎167번 사례)
(→‎With this pattern, we can solve...)
 
(37 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소한다.
+
Screen zoom in/out은 터치를 통해 화면에서 보여지는 이미지를 확대하거나 축소하는 패턴이다.
  
 +
확대를 위해 사용자는 double tap이나 spread하거나 , 돋보기 모양의 zoom button, 확대 축소를 조절할 수 있는 slider를 활용할 수 있다. Double tap을 할 경우, 화면 내의 이미지는 화면에 잘리지 않는 한 최대한 커지며, 다시 double tap을 할 경우 더 확대되거나, 혹은 본래 사이즈로 돌아간다. Spread하여 이미지를 확대하는 경우는, 사용자가 원하는만큼 자유자재로 확대가 가능하다. zoom button의 경우 버튼을 누를 때마다 지정된 배율만큼 이미지가 변화하며, slider를 활용할 경우 slider의 특징에 따라 불연속적인 확대 및 축소나 연속적인 확대 및 축소를 할 수 있다.
  
−
== Examples ==
+
=== With this pattern, we can solve... ===
−
=== 220번 사례 ===
+
사진, 이미지, 문서, 인터넷 화면, 지도와 같이 한 페이지에 내용이 전부 들어가기에는 화면이 너무 작거나 디테일을 볼 필요가 있는 경우 활용된다.  
−
* 지도를 Pinch로 축소하면 더 넓은 지역에 대한 대략적 정보가 보이고, spread해서 확대하면 더 좁은 지역의 자세한 정보가 보인다.
+
−
<videoflash type="vimeo">93044862|300|405</videoflash>
+
  
−
=== 167번 사례 ===
+
* Double tap이나 spread, zoom button, [[Slider]] 등의 조작방식은 모두 흔하게 활용되는 것으로 혼용하기도 한다.
−
* 모든 app이 있는 메인 페이지에서 엄지와 검지를 이용하여 화면을 축소시키는 행동을 통해 축소된 모든 app의 아이콘을 볼 수 있다.
+
* 지도와 같이 많은 정보를 포함하고 있는 경우, 해상도나 배율에 따라 이미지에 포함된 정보가 달라질 수 있다. 예를 들면, 길만 표기되던 지도를 확대하는 경우, 지하철이나 버스 정류장, 랜드마크와 같은 정보가 나타나고, 이에서 더 확대하는 경우 지하철 출구나 더 많은 랜드마크, 번지 등이 나타난다. 이 때 다시 축소를 할 경우, 다시 그 배율에 맞는 정보 형식으로 돌아간다.
−
<videoflash type="vimeo">95088708|665|374</videoflash>
+
* 확대나 축소된 정도에 따라 콘텐츠를 활용할 수 있는 기능이 달라지는 경우도 있다.
 +
* 확대된 상태에서 이미지의 끝에 도달하였으나 계속하여 이동하려고 할 경우, [[Bounce back]]과 같이 페이지의 끝을 알리는 피드백을 제공하기도 한다.
 +
* 화면 전체가 확대 및 축소되는 것이 아니라, 일부분만 확대하여 크게 보여지는 경우는 [[Magnifier]]에 해당한다.
 +
* 화면의 일부분이 확대되는 것이 아니라, 개체 사이즈가 변화하여 저장되는 경우는 Object zoom in/out에 해당한다.
  
−
=== 384번 사례 ===
+
=== Example : Window 8 ===
−
* 좁은 면적을 섬세하게 스케치하고 싶을 때 해당 위치에서 한 손으로 두 손가락을 벌린 상태에서(spread) 다른 손으로 스케치 작업을 한다.
+
[[File:Screen zoom inout.jpeg]]
−
<videoflash type="vimeo">93373878|533|395</videoflash>
+
 +
----
  
−
=== 438번 사례 ===
+
=== iOS_직방 ===
−
* 지도를 spread해서 확대할수록 더 좁은 영역에 대해 구체적인 정보가 나오며, pinch하면 다시 넓은 지역이 보이면서 세부 정보들이 합쳐진 대략적 정보가 나온다.
+
{{#Widget:Vimeo|id=95734888|width=300|height=449}}
−
<videoflash type="vimeo">93368793|300|405</videoflash>
+
  
−
=== 439번 사례 ===
+
=== iOS_Naver Real Estate ===
−
* 지도를 Pinch로 축소하면 더 넓은 지역의 대략적 정보가, spread해서 확대하면 더 좁은 지역의 자세한 정보가 나온다.
+
{{#Widget:Vimeo|id=93368793|width=300|height=449}}
−
<videoflash type="vimeo">93045220|300|405</videoflash>
+
  
−
=== 349번 사례 ===
+
=== iOS_Map ===
−
* 한 위치에서 사방의 별자리를 보는 화면에서, spread and pinch로 확대축소하여 본다.
+
{{#Widget:Vimeo|id=93045220|width=300|height=400}}
−
<videoflash type="vimeo">93044940|300|405</videoflash>
+
  
−
=== 500번 사례 ===
+
=== iOS_별자리표 ===
−
* 특정 기능을 tap하여 활성화시킴으로 페이지의 일부를 확대하여 더 정교하게 작업할 수 있다.
+
{{#Widget:Vimeo|id=93044940|width=300|height=400}}
−
<videoflash type="vimeo">93374931|300|405</videoflash>
+
  
−
=== 245번 사례 ===
+
=== Window 8 ===
−
* 터치테이블의 화면을 tap 하면 tap한 위치의 화면이 확대된다.
+
{{#Widget:Vimeo|id=95088708|width=665|height=374}}
−
<videoflash>cwMz4FrA8Ng|665|374</videoflash>
+
  
−
=== 584번 사례 ===
+
=== Android_Samsung Galaxy Note Gallery ===
 +
* 좌측의 경우 double tap, 우측의 경우 spread를 통해 화면을 확대하고 있다.
 +
{{#Widget:Vimeo|id=94637000|width=300||height=480}}
 +
{{#Widget:Vimeo|id=94637006|width=300||height=480}}
  
−
[[Category:Control screen image]]
+
=== 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"