모바일 앱에서 매끄러운 사용자 경험 디자인은 매우 중요한 요소입니다. Cynthia Fong은 Zhenya Rynzhuk의 디자인 에셋을 활용하여 밀어 넘기기 제스처를 프로토타이핑하고, 앱을 라이브하기 전에 회전식 사진 보기와 같은 핵심 요소가 제대로 작동하는지 확인합니다. 이 튜토리얼에서는 Fong이 Adobe XD에서 밀어 넘기기 제스처를 사용하여 사용자 경험을 극대화하는 방법을 소개합니다.

Zhenya Rynzhuk는 고객 경험 향상을 위한 디자인 개념을 추구하여 클라이언트의 비즈니스 성장을 지원하는 디지털 디자인 전문가로, 처음부터 프로젝트를 진행하거나 다른 사람과의 공동 작업을 통해 디자인을 완성하기도 합니다.

1단계: 대상 설정

원본 아트보드를 복제합니다. XD에서 아트보드를 복제하면 레이어 이름이 동일하게 유지되며, 이는 이후 단계에서 애니메이션이 제대로 작동하는 데 중요합니다.

모바일 앱 디자인의 회전식 이미지 보기가 Adobe XD의 두 개 아트보드에 표시되어 있고 한 개의 아트보드 이름이 주황색으로 강조 표시되어 있음

2단계: 포커스 변경

새 아트보드에서 회전식 보기 사진 그룹을 그대로 유지합니다. 그런 다음 사용자가 회전식 보기에 포함된 사진을 밀어 넘길 때 이미지가 하나씩 들어오고 나가도록 시뮬레이션하기 위해 각 이미지를 두 번 클릭하고 속성 관리자에서 이미지의 크기와 위치를 수정합니다. 또한 Group 1에 있던 텍스트 레이어를 Group 2로 옮기고 텍스트를 변경합니다.

레이어 패널에는 텍스트 요소가 새 그룹으로 이동되는 설명선이 있고, 회전식 사진 보기에는 중앙에 새로운 이미지가 표시되어 있음

3단계: 와이어 연결 및 애니메이트

유저 인터랙션을 지정하기 위해 프로토타입 모드로 전환합니다. 첫 번째 아트보드에서 가운데 이미지를 두 번 클릭한 다음 와이어를 두 번째 아트보드로 드래그합니다. 그런 다음 트리거를 드래그로 설정하여 액션이 자동 애니메이트로 자동 설정되도록 합니다. 마지막으로 두 번째 아트보드에서 가운데 이미지의 와이어를 첫 번째 아트보드로 다시 드래그합니다. XD는 이전 설정을 기억하므로 이전과 동일하게 트리거가 드래그로 설정됩니다. 마지막으로 데스크탑 미리보기에서 인터랙션을 테스트합니다.

파란색 선으로 회전식 사진 보기의 가운데 사진이 두 번째 아트보드와 연결되어 있고, 트리거는 드래그로, 액션은 자동 애니메이트로 설정되어 있음

밀어 넘기기

이와 같이 밀어 넘기기 제스처를 만들어 모바일 앱에서 실제와 같은 사용자 인터랙션을 시뮬레이션할 수 있습니다.

손에 들려 있는 스마트폰 화면에는 뮤직 검색 앱의 디자인이 표시되어 있음

참고: 이 튜토리얼에 포함된 프로젝트 파일은 실습용으로만 사용합니다.

09/02/2020

아티스트: Zhenya Rynzhuk

Adobe Stock 컨트리뷰터: visualbricks

이 페이지가 도움이 되었습니까?