인비전 invision 제스처 및 트랜지션 정리

인비전 invision에서 반응영역 hotspots 지정한 뒤 할 수 있는 것

반응영역 지정 후 Link To에서 목적지를 선택한다.

목적지는 추가해 놓은 화면 이미지 중에 하나가 될 수도 있고, 현재 화면의 다른 부분으로 이동이 될 수도 있고, 프로토타입 이미지 순서상에서 이전 화면이나 다음 화면이 될 수도 있다. 다음의 옵션 중에서 선택 가능하다. 

 

 

• Another point on this screen
  현재 화면의 다른 부분으로 이동
• Link Back / Close (last screen visited)
  현재 화면을 닫음(현재 화면이 열리기 직전 화면이 나타남)
• Screen as Overlay
  이미지를 선택해서 현재 화면 위에 겹침 (팝업이나 햄버거메뉴 등 화면의 일부만 가리며 등장하는 이미지를 화면 위에 띄울 때 사용하면 좋음)
• Previous Screen in Series
  프로토타입 화면 이미지 순서상에서 이전 이미지로 이동
• Next Screen in Series
  프로토타입 화면 이미지 순서상에서 다음 이미지로 이동
• External URL
  외부 사이트 열기
• Prototype Screens
  프로토타입에 추가된 화면 이미지로 이동 (추가해 놓은 이미지가 나열됨)
• 01 Car
• 02 List
• 03 Book
• 04 Menu

 

이 중 몇 가지는 아래에서 스크린샷과 함께 다시 소개한다.

 

 

제스처와 트랜지션

Link To에서 목적지를 선택하면 제스처 Gesture와 트랜지션 Transition이 나타난다.

 

 

제스처 Gesture 종류

 Tab, Double Tab, Swipe Right, Swipe Left, Swipe Up, Swipe Down

 

 

트랜지션 Transition 종류

Instant, Dissolve, Push Right, Push Left, Slide Right, Slide Left, Slide Up, Slide Down, Flip Right, Flip Left, Flow, Pop, Side Dissolve

  

• Push는 이전 화면을 밀면서 등장한다.
• Slide는 이전 화면 위를 덮으면서 등장한다.
• Flip는 이전 화면이 뒤집어지면서 등장한다.

 

 

Screen Transition 움직임

다음과 같이 화면1을 탭해서 화면2를 열 때 Slide, Push, Flip의 3가지 트랜지션을 비교해 봤다.

 

 

Slice Left

Push Left

Flip Left

 

이런 느낌이다.

 

 

 

Link To의 다른 옵션들

 

Another point on this screen

현재 화면의 다른 부분으로 이동한다. 

 

Set anchor position 버튼을 클릭하면 다음과 같은 화면이 나타난다.

 

이곳에서 탭했을 때 이동할 위치를 선택한다.

 

선택한 위치가 px로 표시된다. Anchor position 버튼을 다시 클릭하면 위치를 변경할 수 있다.
Smooth scrolling transition 옵션을 체크하면 이동할 때 부드럽게 움직인다.

 

 

Screen as Overlay

팝업이나 햄버거메뉴 등 화면의 일부만 가리며 등장하는 이미지를 화면 위에 띄울 때 사용하면 좋다. Screen as Overlay에는 앞서 소개한 트랜지션 외에 몇 가지 트랜지션이 더 있다. 

Transition

• Fade in
• Instant
• Fade in & Scale
• Slide in Left
• Slide in Right
• Slide in Bottom
• Slide in Top
• Fall
• Side Fall
• Sticky Up
• 3D Flip (Horizontal)
• 3D Flip (Vertical)
• 3D Sign
• Super Scaled
• 3D Rotate in Left
• 3D Rotate in Right
• 3D Rotate in Top
• 3D Rotate in Bottom

 

Position

• Custom
• Centered
• Top Left
• Top Center
• Top Right
• Bottom Left
• Bottom Center
• Bottom Right

 

 

Screen as Overlay를 이용해 iOS 액션시트 띄우기

 

Screen as Overlay를 선택하면 다른 옵션들과는 달리 항목들이 약간 복잡해 보인다.

 

Select a screen에서 띄우고자 하는 화면 이미지를 선택한다. 

 

그러고 나면 Position이 활성화 된다. 

 

액션시트는 화면 아래에 배치되므로 포지션을 Bottom Center로 선택하고, 트랜지션을 Slide in Bottom으로 선택했다. 

아래에서 반응영역으로 설정한 동그라미를 탭 해보자. 

 

 

 

External URL

다음과 같이 URL을 입력하여 외부 사이트를 열도록 설정할 수 있다. 

 

 

관련 글

인비전에서 프로토타입 만들기 – iPhone6 모바일앱 Case 1