한 번 적용 가능
개별 오브젝트에서 여러 인터랙션 프로토타입을 만들기 위해 트리거를 사용하여 작업할 수 있는 가장 좋은 방법에 대해 알아봅니다.
실제 경험을 프로토타이핑하려면 동일한 오브젝트나 요소에서 여러 인터랙션이 필요합니다. 예를 들어 휴대폰에서 사진을 검색하면서 스와이프 동작을 통해 검색하거나 탭하여 선택 또는 편집하고 길게 눌러 컨텍스트 작업을 표시합니다.
여러 개의 트리거를 사용하여 프로토타입의 동일한 오브젝트에서 여러 인터랙션(와이어)을 정의할 수 있습니다. 이를 통해 탭과 드래그를 정의하거나, 여러 개의 음성 명령 또는 키와 게임패드 트리거를 추가하여 스와이프 효과를 생성하거나 컨텍스트 작업을 간편하게 수행할 수 있습니다.
오브젝트에서 여러 인터랙션을 정의하기 앞서 다음과 같은 간단한 규칙을 통해 해당 트리거를 혼합하고 일치시킬 수 있습니다.
|
여러 번 적용 가능 |
---|---|
탭,드래그, 호버 및 시간 |
음성, 키 및 게임패드 |
여러 개의 트리거로 애니메이션이 적용된 프로토타입을 만들려면 다음 단계를 수행하십시오.
-
오브젝트에서 여러 와이어를 드래그하려면 기존 인터랙션을 사용하여 오브젝트를 선택하고 속성 관리자에서 + 버튼을 클릭하거나 인터랙션 추가 + 아이콘을 클릭합니다.
-
속성 관리자에서 다음 인터랙션을 정의합니다.
- 트리거: 애니메이션을 트리거할 옵션을 선택합니다. 예를 들어 카드 태핑 경험을 시뮬레이트하려면 탭을 선택합니다.
- 액션: 인터랙티브 액션을 선택합니다. 예를 들어 애니메이션 효과를 만들려면 자동 애니메이트를 선택합니다.
- 대상: 애니메이션을 전환할 대상 아트보드를 선택하거나 수정합니다.
- 애니메이션: 애니메이션 효과를 선택합니다. 예를 들어 슬라이드 효과를 시뮬레이션하려면 모든 슬라이드 옵션을 선택합니다.
- 이징: 이징 효과를 시뮬레이트할 옵션을 선택합니다. 예를 들어 프로토타입에서 애니메이션이 서서히 끝나도록 하려면 서서히 끝내기를 선택합니다.
연결된 아트보드의 일부 트리거를 변경하고자 하십니까? 와이어를 선택하여 편집하거나 삭제합니다. 속성 관리자에서 단일 인터랙션을 선택하고 해당 인터랙션을 편집할 수도 있습니다.
내 디자인에 사용된 트리거에 대한 힌트가 필요하십니까? CMD+C 단축키를 사용하여 트리거를 롤오버하고 툴 팁을 봅니다.
-
더 많은 와이어를 다른 오브젝트로 드래그하고 여러 트리거를 정의합니다. 마스터 구성 요소에 정의된 인터랙션이 인스턴스로 전파된다는 점을 참고하십시오.
-
프로토타입을 미리 보려면 디바이스 미리보기 를 클릭합니다.
예제 및 샘플 파일
<<<이 설명은 Dani의 비디오에서 발췌되었습니다.>>>
스와이프 효과를 구현하기 위해 오브젝트에서 여러 트리거를 사용하고자 하십니까?
아트보드를 와이어 연결하고 속성 관리자에서 다음 옵션을 선택합니다.
- 트리거: 드래그, 탭, 음성 및 클릭을 선택합니다.
- 액션: 자동 애니메이트를 선택합니다.
- 대상: 애니메이션을 전환할 대상 아트보드를 선택합니다.
- 이징: 이징 효과를 만들 옵션을 선택합니다. 예를 들어 프로토타입에서 애니메이션이 서서히 시작하고 끝나도록 하려면 서서히 시작-끝내기를 선택합니다.
샘플 파일을 다운로드하여 직접 테스트해 보거나 다음 비디오를 통해 자세한 내용을 살펴보십시오.
<< Dani의 비디오 삽입 >>>
모범 사례
다양한 트리거 옵션을 사용하여 애니메이션이 적용된 프로토타입의 사용자 경험을 바꿀 수 있다는 것을 알고 계십니까? 몇 가지 모범 사례를 통해 여러 개의 트리거 사용 요령을 살펴보십시오.
<< Howard Pinsky의 비디오 삽입 >>>
질문이나 아이디어가 있습니까?
지금까지 Adobe XD에서 여러 인터랙션을 프로토타이핑하기 위한 트리거 사용에 대해 설명했습니다. 한 단계 뒤로 돌아가 검토 목적으로 디자인을 공유하는 방법이나 인터랙티비티를 추가하기 전에 에셋을 가져와 편집하는 방법을 살펴볼 수 있습니다.
질문이 있거나 아이디어를 공유하고 싶다면 Adobe XD 커뮤니티에 참여하십시오. 여러분의 소중한 의견과 다양한 작품 활동을 기대하겠습니다.