Difference between revisions of "Screen zoom in/out"

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

iOS_직방

iOS_Naver Real Estate

iOS_Map

iOS_별자리표

Window 8

Android_Samsung Galaxy Note Gallery

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

Android_CamScanner

Android_Samsung Galaxy Note 인터넷