From Design pattern
Jump to: navigation, search
(→‎With this pattern, we can solve...)
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
화면에 이미지가 확대되어있는 상태에서 이미지의 가려진 부분을 보기 위해 이미지를 움직인다.  
+
Move enlarged screen은 화면에 이미지가 확대되어있는 상태에서 이미지의 가려진 부분을 보기 위해 이미지를 움직이는 패턴이다. 이미지가 화면 내에 다 보여질 경우에는 이미지가 움직이지 않는다.
  
 +
한 손가락으로 화면을 원하는 방향으로 drag하는 방식으로 조작할 수 있으며, 메모나 스케치 앱과 마찬가지로 한 손가락으로 drag하는 조작방식이 다른 기능을 가지고 있을 경우에는, 두 손가락으로 drag하거나 하듯이 다른 방식을 활용한다. 스마트 TV 등 제스처를 활용하여 조작하는 경우는, 기기에 따라 다른 명령 체계를 가지고 있다.
  
 +
=== With this pattern, we can solve... ===
 +
한 화면 내에 나타나기에는 콘텐츠가 많을 때, 화면 내에 모든 콘텐츠를 표현한다면, 콘텐츠의 크기가 너무 작아 인식하고 조작하는 것이 어렵거나  이 때 화면에서 보이지 않는 곳에도 콘텐츠를 위치시킨 후, 화면을 자유롭게 움직이는 방식으로 문제를 해결할 수 있다.
  
−
== Examples ==
+
* 한 화면 내에 모든 콘텐츠가 나타나지 않는 상황에서 이동하여 주변 콘텐츠를 보는 패턴으로, 콘텐츠를 확대하거나 축소하는 경우는 [[Screen zoom in/out]]에 해당한다.
−
=== 375번 사례 ===
+
* 콘텐츠가 화면에 나타날 때 새로운 애니메이션 효과나 콘텐츠 세부사항으로 이동하는 것과 같이 부가적인 기능을 발동할 수 있다.
−
* 큰 화면을 확대하여 보는 상황에서 두 손가락으로 상하좌우로 drag하면 해당 방향으로 화면이 이동된다.
+
* 확대된 사진을 보는 것처럼 이미 콘텐츠에 대해 로딩을 마친 후 자유롭게 확인하는 방식과, 지도에서 주변의 지형을 확인할 때처럼 화면이 이동할 때마다 콘텐츠가 로딩되는 [[Lazy loading]] 방식이 있다.
−
<videoflash type="vimeo">93373774|533|395</videoflash>
+
* 패턴의 개념을 고려하였을 때 [[Scroll]]도 Move enlarged screen의 일종이라고 볼 수 있으나, Move enlarged screen은 주로 한쪽 방향보다는 전방향으로 둘러본다.
  
−
=== 349번 사례 ===
+
=== Example : iOS_Tayasui Sketches ===
−
* 한 위치를 포인팅하여 주변의 별자리를 보는 화면에서, 특정 별자리로 이동하여 중심에 두면 그 별자리의 이미지를 같이 보여준다.
+
[[File:Move enlarged screen.jpeg]]
−
<videoflash type="vimeo">93044940|300|405</videoflash>
+
  
 +
----
 +
 +
== Move enlarged screen ==
 +
 +
=== iOS_별자리표 ===
 +
{{#Widget:Vimeo|id=93044940|width=300|height=400}}
 +
 +
=== iOS_Tayasui Sketches ===
 +
{{#Widget:Vimeo|id=93373774|width=533|height=395}}
 +
 +
== Move enlarged screen by gesture ==
 +
=== Samsung Smart TV ===
 +
{{#Widget:Vimeo|id=94916766|width=665|height=374}}
  
 
[[Category:Edit screen view]]
 
[[Category:Edit screen view]]

Latest revision as of 05:08, 31 July 2014

Move enlarged screen은 화면에 이미지가 확대되어있는 상태에서 이미지의 가려진 부분을 보기 위해 이미지를 움직이는 패턴이다. 이미지가 화면 내에 다 보여질 경우에는 이미지가 움직이지 않는다.

한 손가락으로 화면을 원하는 방향으로 drag하는 방식으로 조작할 수 있으며, 메모나 스케치 앱과 마찬가지로 한 손가락으로 drag하는 조작방식이 다른 기능을 가지고 있을 경우에는, 두 손가락으로 drag하거나 하듯이 다른 방식을 활용한다. 스마트 TV 등 제스처를 활용하여 조작하는 경우는, 기기에 따라 다른 명령 체계를 가지고 있다.

With this pattern, we can solve...

한 화면 내에 나타나기에는 콘텐츠가 많을 때, 화면 내에 모든 콘텐츠를 표현한다면, 콘텐츠의 크기가 너무 작아 인식하고 조작하는 것이 어렵거나 이 때 화면에서 보이지 않는 곳에도 콘텐츠를 위치시킨 후, 화면을 자유롭게 움직이는 방식으로 문제를 해결할 수 있다.

  • 한 화면 내에 모든 콘텐츠가 나타나지 않는 상황에서 이동하여 주변 콘텐츠를 보는 패턴으로, 콘텐츠를 확대하거나 축소하는 경우는 Screen zoom in/out에 해당한다.
  • 콘텐츠가 화면에 나타날 때 새로운 애니메이션 효과나 콘텐츠 세부사항으로 이동하는 것과 같이 부가적인 기능을 발동할 수 있다.
  • 확대된 사진을 보는 것처럼 이미 콘텐츠에 대해 로딩을 마친 후 자유롭게 확인하는 방식과, 지도에서 주변의 지형을 확인할 때처럼 화면이 이동할 때마다 콘텐츠가 로딩되는 Lazy loading 방식이 있다.
  • 패턴의 개념을 고려하였을 때 Scroll도 Move enlarged screen의 일종이라고 볼 수 있으나, Move enlarged screen은 주로 한쪽 방향보다는 전방향으로 둘러본다.

Example : iOS_Tayasui Sketches

Move enlarged screen.jpeg

Move enlarged screen

iOS_별자리표

iOS_Tayasui Sketches

Move enlarged screen by gesture

Samsung Smart TV

Retrieved from "http://www.ixpatterns.com/index.php?title=Move_enlarged_screen&oldid=109537"