From Design pattern
Jump to: navigation, search
(→‎With this pattern, we can solve...)
 
(19 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
화면에 이미지가 확대되어있는 상태에서 이미지의 가려진 부분을 보기 위해 이미지를 움직인다. 이미지의 보이는 면을 이동하는 것이 아니라 이미지의 절대적인 위치값이 변화하는 경우 Dealing with data의 Move object에 해당한다. 이미지가 한쪽 방향으로만 움직여 한 페이지의 스크롤을 이동하는 행위를 의미할 경우 Navigation의 Scrolling에 해당한다.
+
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>
+
  
 +
----
  
−
[[Category:Control screen image]]
+
== 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]]

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"