Adobe XD : 자동 애니메이션 기능 사용 방법

Oct 1, 2023

어떻게

(이미지 크레디트 : Adobe)

Adobe XD는 프로토 타이핑 게임에 대한 늦은 항목에도 불구하고 최상의 와이어 프레임 및 프로토 타이핑 도구 중 하나입니다. 프로토 타이핑은 설계 수명주기의 핵심 프로세스이지만 워크 플로우 유지 관리를 통해 설계자와 Dev 팀을 돕는 데있어 중요한 역할을합니다.

디자이너로서 우리는 종종 사용자 경험 워크 플로우의 다양한 단계를 설계 할 수있는 많은 도구가 필요합니다. Adobe는 설계 테스트, 와이어 프레임 생성, Dev 팀에 사양을 끄고 공동 설계에 사용할 수있는 크로스 플랫폼 도구를 적극적으로 혁신하고 있습니다 (우리의 목록 와이어 프레임 도구 더 많은 옵션을 위해).

자동 애니메이션 기능은 Adobe XD를 사용하여 원칙과 같은 도구와 같은 완벽한 마이크로 상호 작용 및 애니메이션을 만드는 데 사용할 수 있습니다. 이렇게하면 디자이너가 풍부한 프로토 타입 경험, 온 보딩 플로우, 모바일 회전 목마 애니메이션, 진행 지표 등을 공사하는 데 도움이됩니다. 이 기능에 대한 가장 중요한 부분은 배우고 실행하는 것이 간단하다는 것입니다.

이 기사에서는 자동 애니메이션 기능을 사용하여 간단한 마이크로 애니메이션을 만드는 방법을 설명합니다. 우리는 제스처 기반 및 탭 기반 상호 작용을 모두보고 있습니다.

아직 Adobe XD가없는 경우 우리의 방법을 참조하십시오. Adobe XD를 다운로드하십시오 게시물을 누른 다음 우리 즐겨 찾기를 확인하십시오 Adobe XD 플러그인 ...에

01. FAV 또는 DELETE에 추가 할 제스처를 스 와이프합니다

스 와이프 상호 작용은 모바일 앱에서 가장 일반적으로 사용되는 마이크로 상호 작용 중 하나입니다. 이 예제에서는 음악 재생 목록을 살펴 보겠습니다. 첫 번째 아트 보드의 경우 5 개의 노래가있는 재생 목록 화면을 만들 것입니다. 각 노래는 개별 카드이며 기본적으로 각 카드가 왼쪽으로 스 와이프 된 경우 재생 목록에서 노래를 제거해야합니다. 카드를 오른쪽으로 스 와이프 한 경우 큐에 노래를 추가해야합니다.

시작하여 첫 번째 카드를 만드십시오. 노래 이름, 아티스트의 이름, 노래의 길이 및 등급과 같은 기본 세부 정보를 추가 할 수 있습니다. 이제 모든 요소를 단일 레이어로 그룹화하십시오. 유사한 카드 중 5 개가 이루어질 때까지 복제하십시오. 당신은 당신의 취향에 따라 그들을 편집 할 수 있습니다.

첫 번째 카드의 경우 - C1 - 삭제 작업을 위해 왼쪽 스 와이프를 추가 할 것입니다. 따라서 빨간색 배경으로 작은 사각형을 만들고 아래 스크린 샷과 같이 텍스트 삭제 및 아이콘을 추가하십시오. 이 모든 항목을 A1이라는 계층으로 그룹화하십시오. 이제 C1과 A1을 레이어 L을 결합하여 A1이 C1의 오른쪽에 있도록합니다.

02. 두 번째 카드를 만듭니다

두 번째 카드 - C2 - 우리는 유사한 방식으로 큐 오른쪽 스 와이프 작업에 추가를 추가 할 것입니다. 아이콘, 텍스트 및 녹색 배경으로 그룹 a2를 만듭니다. 그룹 C2의 왼쪽에 추가하고 L2라는 결합 된 레이어를 만듭니다. 이제 첫 번째 아트 보드 (S1)가 완료되었습니다. 전체 아트 보드를 두 번 두 개의 상태 - S2 및 S3로 두 번 복제합시다. 대기열 스 와이프에 추가하려면 S2를 삭제하고 S3 용 S2를 사용할 것입니다. 이를 위해 우리는 이러한 각 대지에 대해 약간의 변경을해야합니다. 두 스 와이프 모두에 대한 설정은 다음과 같습니다.

● S1 - A1과 A2의 불투명도를 변경하고 L1, L2를 정렬하여 중앙 정렬합니다.

● S2 - L1의 오른쪽 가장자리가 다른 카드와 정렬되도록 L1 카드를 정렬하십시오. A2에서 0 %의 불투명도를 변경하십시오.

● S3 - L2 카드를 정렬하여 L2의 왼쪽 가장자리가 다른 카드와 정렬됩니다. A1에서 0 %의 불투명도를 변경하십시오.

03. 아트 보드에 애니메이션을 해제합니다

이제 당기가 완전히 설정되도록 다음 단계는 애니메이션을 만드는 것입니다. 도구의 왼쪽 위면에서 프로토 타입 모드로 이동 하여이 작업을 수행 할 수 있습니다. 이제 S1 아트 보드에서 레이어 L1을 클릭하고 트리거를 드래그로 설정하여 도구의 오른쪽에 상호 작용을 추가하여 끌어서 자동 애니메이션 및 대상을 대지 S2로 대상으로 설정합니다. 기본 설정에 따라 Easing을 추가 할 수도 있습니다. 도구의 오른쪽 상단의 재생 버튼을 클릭 하여이 상호 작용을 테스트하십시오. S1 artboard에서 Layer L2를 클릭하고 동일한 설정을 사용하여 유사한 상호 작용을 추가하지만이 경우 대상을 S3로 설정하십시오. 이 상호 작용은 왼쪽 스 와이프를 만듭니다.

04. 카드를 확장하십시오

우리가보고있을 두 번째 상호 작용은 대부분의 앱 및 웹 사이트에서 목록 또는 제품 카탈로그를 통해 볼 수 있으며 해당 제품 중 하나를 클릭하면 제품에 대한 자세한 내용이있는 새 페이지로 이동합니다. ...에 자동 애니메이션으로 인해 이러한 종류의 상호 작용을 애니메이션으로 간단하게 만듭니다. 이 예제에서는 제품 카탈로그 페이지를 만들어 시작하겠습니다. 첫 번째 아트 보드 (S1)의 의류 등, 예를 들어 휴대 전화 (예 : 예제가 될 것인가)와 같은 제품을 선택할 수 있습니다. 햄버거 메뉴와 프로파일 아이콘이있는 헤더 바를 만듭니다.

05. 이미지 및 세부 사항에 대한 작업

이제 카탈로그 항목 수가있는 헤더 텍스트 요소를 만듭니다. 각 제품 카드에 대해 우리는 하나의 이미지, 전화 이름, 가격 및 등급을 갖게 될 것입니다. 이 카드를 C1에서 C6이라고 부를 수 있습니다. 이를 수행하는 가장 좋은 방법은 첫 번째 카드 (C1)를 만들고 공구 패널의 오른쪽 상단 모서리에있는 반복망이라는 XD의 놀라운 기능을 사용하는 것입니다. 이렇게하면 쉽게 항목을 복제하여 정렬 및 간격이 손상되지 않습니다. 이 아트 보드의 설정이 완료되었습니다. 우리는 두 번째 카드에 애니메이션을 해제 할 것이므로 해당 카드의 요소를 그룹 해제하는 것이 중요합니다. 그래서 XD는 자동 애니메이션을 수행 할 수 있습니다.

06. 두 번째 아트 보드를 디자인하십시오

이제 두 번째 아트 보드에서 일하게됩니다. 첫 번째 아트 보드를 복제하고 카드를 삭제하십시오 C1, C3-C6. 우리는 기존 카드 C2를 사용 하여이 페이지를 빌드하므로 레이어의 이름은 동일합니다. 먼저 헤더 막대 아래의 전체 페이지를 덮도록 카드의 배경을 확장하십시오. 우리는 이제 우리가 원하는 어떤 방식 으로든 다른 아이템을 준비 할 수 있습니다. 기본 아이디어는 카드가 아트 보드 S1에있는 방식과 다르어야합니다. 왜냐하면 전환을 볼 수있는 경우가 있습니다. 그 이유로 모바일의 이름을 25px로 부딪 히고 그것을 굵게 표시하십시오. 마찬가지로 가격의 크기를 늘리고 모바일 이름 아래에 놓습니다. 다음은 중요한 부분입니다. 휴대 전화의 이미지입니다. 크기를 크게 늘리고 센터에도 정렬해야합니다.

07. 마무리 곡을 적용하십시오

모든 것을 정리하고 디자인을 완성하고 모든 것을 왼쪽 아래로 정리하고 등급과 별을 정리하십시오. 이 아트 보드는 제품의 자세한 버전을 나타내었기 때문에 메모리, 휴대 전화의 사용 가능한 색상, 전화기가 제공된 액세서리, 환경 설정을 기반으로 전화기와 함께 제공됩니다. 아트 보드를 스크롤하면 다른 모든 것들이 따라옵니다. 햄버거의 헤더 아이콘을 변경하여 사용자가 이전 Artboard S1로 돌아갈 수 있습니다. 첫 번째 아트 보드의 아이콘 이름과 일치하도록 아이콘의 이름을 변경하는 것을 잊지 마십시오.

08. 마이크로 상호 작용을 만듭니다

이제 프로토 타입 모드로 가서 마이크로 상호 작용을 만드겠습니다. 이렇게하려면 Artboard S1에서 카드 C2를 선택하고 파란색 화살표를 대지 S2로 드래그하십시오. 오른쪽에있는 상호 작용 패널에서 트리거를 탭, Auto-Animate 및 대상으로 자동 애니메이션으로 설정하십시오. 더 부드러운 상호 작용을 위해, 완화시켜 0.4 또는 0.6 초의 시간을 쉽게 할 수 있습니다. Artboard S2의 뒷면 화살표 아이콘을 클릭하고 화살표를 S1로 드래그하십시오. 이를 위해 동일한 설정을 사용하여 일관되게 만듭니다. 이제 S1을 클릭하고 프로토 타입을 재생하여 마법을보십시오. 카드 C2가 두드리면 부드러운 애니메이션을 관찰합니다. 애니메이션을 더 부드럽게 만들기 위해 완화 설정을 조정하십시오.

09. 기초를 뛰어 넘습니다

이제 간단한 상호 작용을 만드는 방법에 대한 기본적인 아이디어가 있습니다. 또한 여러 개의 대지리 간의 부드러운 전환을 보려면 요소, 크기 및 모양의 색상을 변경하여 자동 애니메이팅을 시도 할 수 있습니다. 트리거를 탭하고 드래그하는 것 외에도 디자이너가 키보드 키 및 게임 패드 키를 사용하여 특정 키 탭에서 프로토 타입을 트리거하는 것과 같이 설계자가 실험 할 수있는 다른 트리거가 있습니다. 또한 Alexa, Siri 등의 음성 프로토 타입을 만들고 디자인 할 수있는 모드가 있으며, 여기서 문장을 지정하고 특정 응답을 얻도록 말하십시오.

자세히보기 :

그만큼 최고의 웹 사이트 빌더
당신이 알아야 할 Adobe XD 바로 가기 (그러나 아마도 그렇지 않음)
Adobe XD로 프로토 타입을 구축하십시오