디자인 입문 강의 4주차 숙제(피그마 프로토타입 연습하기)

이번 숙제는 주어진 자료로 제시된 프로토타입을 구현해보는 숙제이다.

먼저 강의를 통해 배운 기능을 정리해보겠다.

프로토타입에는 여러 기능이 있지만 이번 강의에서는 버튼을 클릭했을 때 화면이 이동하는 기능만 다루었다.

 

Natigate to

A에서 B로 연결해둔 이미지로 넘어간다.

 

Back

A에서 B로 온 상태일때 Back 프로토타입 기능을 쓰면 A로 넘어간다.

다시 돌아가야 하는 A이미지에 직접 연결하지 않고 [B 선택 -> interaction + -> back 선택] 하면 전 화면으로 돌아간다.

이때 A에서 B로 갈때 설정 해둔 애니메이션의 종류가 자동으로 적용된다.

예시) A에서 B로 가는 인터렉션 추가 (dissolve 선택) -> B에서 X버튼 누르면 back되는 인터렉션 추가 (dissolve 자동 적용)

 

Prototype animations 종류 설명

• Instant: 애니메이션 없이 즉각 화면 전환
• Dissolve: 원본 화면 위에서 흐린 상태에서 진해지며 노출
• Smart Animate: 이름이 같은 레이어끼리 자연스러운 움직임 적용 (스마트 애니메이트 속에서도 더 많은 효과를 선택 할 수 있다.)
• Move In: 새로운 화면이 원본 화면 위로 밀어 들어오며 노출
• Move Out: 원본 화면이 밀려 나가며 아래로 새로운 화면 노출
• Push: 새로운 화면이 원본 화면을 밀면서 노출

 

 

숙제의 요구사항

1. “장바구니` 화면의 `Button/Menu` 버튼을 클릭하면 `메뉴` 화면으로 이동하게 만들기

    (`메뉴` 화면이 흐린 상태에서 진해지며 노출되도록)

 

2. `메뉴` 화면의 `Button/Close` 버튼을 클릭하면 `장바구니` 화면으로 이동하도록 만들기

    (`장바구니` 화면이 흐린 상태에서 진해지며 노출되도록)

 

3. `장바구니` 화면의 `List Item 3`을 클릭하면 `상세` 화면으로 이동하도록 만들기

    (`상세` 화면이 `장바구니` 화면 위로 밀어 들어오며 노출되도록)

 

4. `상세` 화면의 `Button/Back`을 클릭하면 `장바구니` 화면으로 이동하도록 만들기

    (`상세` 화면이 밀려 나가며 아래로 `장바구니` 화면이 노출되도록)