[UXUI입문과정 챕터 4] 프로토 타입 만들기

오늘의 과제는 프로토 타입만들기다

 

프로토 타입에 적용해야 할 기법을 서술 하겠다.

 

1.장바구니 화면의 Button/Menu 버튼을 클릭하면 메뉴 화면으로 이동하도록 제작하는데

메뉴 화면이 흐린 상태에서 진해지며 노출되도록 연출 해야 한다.

 

예사 1

 

 

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

장바구니 화면이 흐린 상태에서 진해지며 노출되도록 해야한다.

 

예시 2

 

 

3. 장바구니 화면의 List Item 3(바이올렛색상 창)을 클릭하면 상세 화면으로 이동하도록 만드는데

상세 화면이 장바구니 화면 위로 밀어 들어오며 노출되도록 해야한다.

 

예시 3

 

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

상세 화면이 밀려 나가며 아래로 장바구니 화면이 노출되도록 해야한다.

예시 4

각 요구 조건의 해답은 이렇다.

 

1.  Button/Menu 를 클릭하고 메뉴화면으로 연결 후  Action을 ->Negative to로 설정하고 

Animation에 Disslove 를 적용하면 흐린 상태에서 진해지며 노출되도록 연출된다.

 

2.  1번과 동일하다. Button/Close  버튼을 클릭하고 장바구니 화면으로 연결 후 Action을 ->Negative to로 설정하고 Animation에 Disslove 를 적용하면 흐린 상태에서 진해지며 노출되도록 연출된다.

 

3. 장바구니 화면의 List Item 3(바이올렛색상 창)을 클릭하고 상세화면에 연결 후 Action을 ->Negative to로 설정하고

Animation에 Move in로 설정하면상세 화면이 장바구니 화면 위로 밀어 들어오며 노출된다.

 

4. 상세화면의 Button/Back을 클릭하고 메뉴화면으로 연결 후  Action을 ->Negative to로 설정하고 

Animation에 Push로 설정하면 상세 화면이 밀려 나가며 아래로 장바구니 화면이 노출된다

해당 기법을 사용한 프로토 타입 을 보여주겠다.

 

간단하지만 프로토 타입 제작하면서 화면을 넘길 때 어떻게 연출을 해야 하는지 생각할 수 있는 시간이 되었다.