피그마 프로토타이핑

우측 Prototyoe - Flow starting point 클릭 하면 Flow1번이 된다.

Flow1번은 가정 첫번째로 시작되는 화면을 설정해 주는 것

프로토모드로 들어가게 되면 오브젝트 또는 프레임을 선택하면 원이 생김

그 원을 잡아끌면 원하는 위치로 옮길 수 있고 인터렉션이 연결됨

토글 팝업창에 사용자의 행동과 인터랙션 종류를 정해주면 특정 애니메이션이 연출됨

 

중간에 화면 또는 인터랙션이 끊어지게 되면 Flow2번,3번,4번...계속 늘어나게 됨

Flow1번 위치는 원하는 곳으로 옮겨질 수 있음

인터랙션: 어떤 버튼을 사용자가 누르면 그로인해 나타나는 작은 효과 상호작용 현상

on tap 무언가를 눌렀다가 떼는 행위

on drag 마우스 커서는 잡고 끌거나 손가락을 잡고 끄는 행위(스와이프)

while hovering 마우스 커서를 갖다대는 행위

while pressig 은 마우스 커서를 갖다대고 쭉누르고 있는 행위

key/gamepad 특정 키를 누르거나 게임 패드를 연결시키면 어떤 인터렉션이 나타나는 가정을 할 수 있음

mouse enter 마우스가 안쪽으로 들어오거나

mouse leave 마우스가 떠났을 때

touch down 터치를 아래쪽으로 하거나

touch up 터치를 위쪽으로 했을 때

After delay 사용자가 어떤 행동을 하지 않아도 특정한 시간이 지나면 인터렉션이 실행됨

사용자 행동이 정해짐

 

움직임을 정할 수 있음

Navigate to 가장 기본적인 움직임 1번화면에서 2번화면으로 이동

open overlay 네비게이션, 팝업창이 열리는 것, 추가값이 생김(가운데 열리게 할건지, 왼쪽, 밑, 위, 오른쪽에서 열리게 할건지 선택)

open overlay-> 하단에 Background 팝업창 바깥면을 어둡게 만들어줌 (딤 처리, 딤드 처리)

close when clicking outside  팝업창 바깥 면을 누르면 자동으로 닫히는 애니메이션

close overlay는 open overlay를 걸어 낸 팝업창에 클로즈 버튼이 있으면 open overlay와 반대대는 옵션이 적용됨 (서로 열고 닫는 옵션) 

swap overlay 2개의 화면을 서로 연결되면서 바뀌는 동작 연결된 동작을 할 때 (마우스 커서를 갖다대면 불이 들어온다거나, 화면에 가려져 있는 슬라이드 처리된 디자인을 드래그 하면 쪼르르 펼쳐질 때)

Back 뒤로 가기

scroll to 프레임 특정 좌푯값으로 이동하고 싶을 때 (다른화면으로 넘어가지 않고, 디자인 해놓은 프레임 안에서 특정 위치로 바로 이동시키고자 할 때 (지도에서 현재 위치 검색하기 기능, 긴 페이지에서 가장 밑으로 내려왔을 때 탑 버튼 누르면 가장 위로 올라가는 것, 링크를 여는 동작도 변할 수 있음)

---

 

2개의 화면이 펼쳐진 상태를 준비 한 후 디자인을 한 다음 복사한다.

회색 버튼을 모두 드래그 한 후 우측 다자인 패널에서 정렬을 포개주기 (왼쪽에서 5번째꺼 클릭)

드래그 해서 위치 통일시켜 주기

레이어 순서를 바꿔서 빨간 버튼이 위로 나오게 한다.

포갠 회색버튼을 전부 선택 후 혹시라도 보이지 않게끔 우측 Layer에서 투명도를 0% 낮춘다.

빨간 버튼을 프로토타입으로 설정하고 on click, navigate to, smart animate로 설정한다.

instant 순간 이동

dissolve 약간의 시간차를 두고 움직임, 서서히 움직이는 느낌

smart animate 1번 화면에서 2번 화면으로 연결되며 움직임

*dissolve와의 차이는 dissolve는 오버레이 처리된 느낌, smart animate는 연결되는 과정들이 연결되며 바뀜

음 약간 헷갈린다.!

그 밑에있는 것들은 슬라이드 액션!

move in은 A라는 요소가 있으면 B라는 요소가 등장하면서 덮이는 것 a는 가만히 있고 b가 덮음

move out는 뒤에있는 요소 가만히 있고 바깥에 있는 것이 없어짐
push는 기존의 것을 밀어내면서 등장

slide in 기존의 것이 없어지면서 등장 (move는 기존 것이 그대로 고정되어 덮이는 동작, slide는 기존 게 오버레이 처리되면서 없어지면서 등장

slide out 기존의 것이 슬라이드 처리돼서 기존의 것이 등장하는 개념으로 나타남

오른쪽것도 smart animate로 연결

(왼쪽 재생 버튼을 누르면 볼 수 있음) 버튼이 촤르르 펼쳐지고 촤르르 접혀진 동작이 완성된다.

---

 

보이지 않는 곳까지 디자인이 다 되어있어야 한다!

우측 Layout에 Clip content가 체크되어 있지 않으면 프레임 안에 있지만 바깥에 숨겨저 있는 것들 까지 같이 보인다.

Clip content가 체크되어 있으면 가려지게 된다.

commend+g 눌러서 그룹핑 해준다.

복제 후 2개의 화면을 만들어서 첫번째 화면은 첫 번째 지점에서, 두번째 화면은 마지막 지점을 연출해준다

둘다 on drag, swap overlay, smart animate로 설정

*인터랙션은 오브젝트에서 프레임으로 연결 가능

프레임에서 프레임으로만 연결 가능

프레임에서 특정 오브젝트로는 절대 연결될 수 없음

각자 프레임에 연결해주기

재생버튼 누르면 옆으로 움직인다.