어도비 XD에서 팝업 오버레이를 만드는 방법

디자인앱 및 웹 디자인

앱의 성패는 사용자 경험의 최적화 여부에 좌우되곤 합니다. 아티스트 에리카 라슨(Erica Larson)은 프로토타입에서 재사용 가능한 이미지와 메뉴의 오버레이를 만들어 디자인을 테스트합니다. 이 튜토리얼에서는 라슨이 어도비 XD(Adobe XD) 을 통해 모바일 앱에 대한 아이디어를 실현하는 방법을 소개합니다.

 

그래픽 아티스트 에리카 라슨은 어도비 스튜디오 팀원으로서 영감을 주는 디자인 제작에 매일 최선을 다하고 있으며 그녀의 디자인을 본 사람이 무언가를 만들고자 하는 마음을 갖게 하는 그런 디자인 제작을 목표로 하고 있습니다.

 

 

라슨의 작업 과정을 간략하게 소개하는 1분 분량의 동영상을 시청할 수 있습니다. 작업 과정은 아래에 설명되어 있습니다.

 

시작하기 전에

라슨이 제공하는 XD 파일에는 최종본의 아트보드와 디자인 요소가 포함되어 있으니 아래 과정을 따라 해 보시기 바랍니다. 이 샘플 파일을 활용하거나 여러분이 직접 만든 파일을 이용해 연습해 보세요.

 

1단계: 스테이지 설정

먼저 기본 아트보드를 복제합니다. 아트보드 이름을 클릭한 다음 Alt(Windows) 또는 Option(macOS) 키를 누른 상태에서 해당 아트보드를 오른쪽으로 드래그합니다.

2단계: 표시 및 숨기기

아트보드의 일부 요소를 처음에는 표시되지 않도록 설정해 두고 사용자가 앱을 탐색하거나 터치할 때 화면에 표시되고 사라지는 디자인을 만들고자 합니다. Shift 키를 누른 상태에서 아트보드에서 해당 요소를 모두 선택한 다음 속성 관리자에서 불투명도 슬라이더를 0%로 설정합니다.

3단계: 메뉴 연결

프로토타입 탭을 클릭하여 인터랙션을 정의합니다. 첫 번째 iPhone 아트보드에 있는 햄버거 메뉴 아이콘을 선택하고 와이어를 Menu 아트보드로 드래그한 다음 액션을 오버레이로 설정하고, 메뉴가 아트보드 위로 미끄러지듯 표시되도록 애니메이션을 오른쪽으로 슬라이드로 선택합니다. 그런 다음 오버레이의 녹색 원을 드래그하여 메뉴를 표시할 위치에 배치합니다. 두 번째 iPhone 아트보드의 햄버거 메뉴에도 동일한 절차를 반복합니다.

4단계: 숨겨진 요소 표시

Info 아이콘에서 두 번째 iPhone 아트보드로 와이어를 드래그합니다. 이번에는 숨겨진 요소가 서서히 표시되도록 하기 위해 액션을 전환으로 설정하고 애니메이션을 디졸브로 지정합니다.

 

5단계: 재사용

마지막으로 모델의 볼에 있는 핫스팟을 제품 오버레이로 연결합니다. 점을 선택하고 와이어를 Product overlay 아트보드로 드래그하여 인터랙션을 정의한 다음 해당 오버레이를 두 번째 아트보드에 표시할 위치에 배치합니다. 완료되면 데스크탑 미리보기를 클릭하여 모든 인터랙션을 테스트합니다.

실제와 같은 경험 구현

모바일 앱에서 재사용 가능한 이미지와 메뉴 오버레이를 디자인해 보시기 바랍니다.

 

 

참고: 이 튜토리얼에 포함된 프로젝트 파일은 실습 용도로만 사용하시기 바랍니다.

 

 

 

 

 


디자인, 앱 및 웹 디자인

Posted on 01-17-2020


토론에 참여