원리와 스케치를 사용한 UI 애니메이션에 대한 단계별 가이드

애니메이션과 전환을 염두에 두고 UI 인터페이스를 디자인하는 것은 다음 앱을 위한 더 나은 사용자 경험(UX)을 계획하는 좋은 방법입니다. 애니메이션 마이크로 인터랙션은 집중 시간이 짧은 세계에서 사용자 참여를 자극하는 완벽한 방법입니다. 이것이 에어비앤비가 최근 "네이티브 앱에 애니메이션을 추가할 수 있는 새로운 오픈 소스 도구"인 Lottie를 소개한 이유입니다.

Lottie와 같은 프로젝트는 앱과 웹사이트 모두를 위한 향상된 UX를 만들기 위한 새로운 요소로 모션을 추가하는 것이 점점 더 중요하다는 것을 보여줍니다.

이 튜토리얼에서는 Principle for Mac을 사용하여 효과적인 UI 애니메이션 기법을 배우게 됩니다. 이 가이드를 통해 작업을 더 잘 보여줄 수 있도록 둔하고 정적인 모형을 대화형 프로토타입으로 변환할 수 있습니다. 여기에서 배운 내용을 적용하여 다음 UI 피치와 드리블 샷을 개선할 수 있습니다.

시작하자.

따라할 수 있는 이 무료 리소스를 다운로드하십시오.

따라하려면 Principle 및 Sketch 앱만 있으면 됩니다. 아직 없는 경우 아래 링크를 사용하여 무료 평가판을 다운로드할 수 있습니다.

• 여기에서 무료 Principle 평가판을 다운로드하십시오.

• 여기에서 무료 Sketch 평가판을 다운로드하십시오.

• 여기에서 무료 튜토리얼 소스 파일을 다운로드하십시오.

기본 인터페이스 개요

Mac OS에 익숙하다면 Principle의 인터페이스가 매우 친숙하게 보일 것입니다. 여기에는 사이드바, 대지를 표시하는 디자인 영역, 크기를 조정하고 이동할 수 있는 미리보기 창의 세 가지 주요 섹션이 있습니다.

기본 애니메이션 개념의 원리 이해

Principle을 사용하여 애니메이션하는 것은 비교적 간단합니다. 시작하기 위해 애니메이션 배경이 필요하지 않습니다. 사실, 대부분의 무거운 작업은 Principle에 의해 자동화되며 애니메이션을 시작하는 항목(예: 버튼, 링크, 스크롤 이벤트), 애니메이션 시작 방법 및 종료 방법에만 집중하면 됩니다.

이해를 돕기 위해 가이드 전체에서 볼 수 있는 용어의 간략한 사전이 있습니다.

• 구성 요소: 구성 요소는 요소와 애니메이션을 포함하는 데 도움이 되는 일종의 그룹화입니다. Photoshop의 "스마트 개체" 또는 Illustrator의 "심볼"에 해당합니다.
• 트리거: 탭핑, 스크롤링, 호버링 등으로 애니메이션을 시작하는 방법입니다. 원칙적으로 트리거는 Principle 내부의 요소를 선택하고 오른쪽에 번개 모양 아이콘이 표시되는 아이콘을 클릭하여 정의할 수 있습니다.
• 전환: 한 아트보드에서 다른 아트보드로의 상태 변경(예: 왼쪽 또는 오른쪽으로 슬라이딩).
• 이징 효과: 애니메이션 시작 및 종료 방식을 기반으로 한 전환의 부드러움 수준입니다.

A. 트리거 및 전환

Principle을 사용하여 애니메이션을 적용하는 첫 번째 단계는 요소(예: 버튼 또는 링크)에 트리거(애니메이션을 시작하는 동작 또는 동작)를 설정하고 초기 및/또는 최종 상태(예: 위치 또는 배율)를 변경하는 것입니다. 애니메이션의 처음부터 끝까지).

1. 초기 상태 정의: 애니메이션이 발생하기 전에 UI 요소가 처음에 어떻게 보이는지 정의합니다.
2. 트리거 정의: 상호 작용 요소를 선택하고 애니메이션을 활성화하는 작업을 선택합니다.
3. 최종 상태를 정의합니다 . 애니메이션이 끝날 때 요소가 표시되는 방식입니다.

애니메이션 세트가 있으면 미리보기 창에서 미리 볼 수 있습니다.

B. 애니메이션 길이 및 이징 효과

기본적으로 Principle은 0.5초 애니메이션을 만듭니다. 때때로 전환 ​​효과를 자세히 보기에는 충분하지 않습니다. 다음 세 단계에 따라 애니메이션 패널에서 지속 시간과 "이징" 효과를 변경할 수 있습니다.

1. 애니메이션 패널 열기: 두 아트보드 사이의 검은색 화살표를 선택하고 상단 표시줄에 있는 "애니메이션" 버튼을 클릭합니다.
2. 애니메이션 길이 확장: 파란색 선의 끝점을 이동합니다.
3. 이징 적용: 다이아몬드 모양의 점을 모두 선택하고 드롭다운에서 "둘 다 부드럽게"를 선택하여 전환을 부드럽게 합니다.

당신이 얻을 것

이 비디오는 이 튜토리얼을 통해 무엇을 만들 수 있는지 보여줍니다. 데모 앱은 Google의 Material Design 색상 팔레트를 보여주고 색상을 선택하면 더 자세한 정보를 제공합니다. 로딩 애니메이션, 부드러운 시차 효과가 있는 일부 페이지 전환 및 메뉴 슬라이더를 만듭니다.

여기에서 무료 튜토리얼 소스 파일을 다운로드했는지 확인하십시오.

시작하자.

스케치 파일에서 원리로 이동

1. 대지를 이동하여 대지 간의 자연스러운 전환을 준비합니다. 예를 들어 오른쪽에서 미끄러지는 화면은 애니메이션 위에서 대체할 화면의 오른쪽 가장자리를 터치해야 합니다.
2. 스케치 파일이 모두 설정되면 Principle로 이동하여 360x640 비율과 일치하는 빈 문서를 만들고 "가져오기" 버튼을 클릭합니다.

원활한 스크롤을 위해 화면 헤더 제거

페이지 간에 원활한 전환을 생성하려면 첫 번째 헤더를 제외한 각 헤더를 제거할 수 있습니다. 헤더는 처음에 앱의 모양과 느낌을 보여주기 위해 추가되었습니다. 헤더는 "환영" 화면에만 유지되며 메뉴 및 앱 제목이 있는 고정 막대 역할을 합니다.

로딩 애니메이션 만들기 - 모양

1. 로딩 모양 그룹을 선택하고 로딩 모양과 텍스트가 포함된 "구성 요소 만들기"를 클릭합니다. 첫 번째 기호 내의 텍스트에 대한 구성 요소를 만듭니다. 우리는 직후에 텍스트를 따로따로 움직일 것입니다.
2. 그룹화된 모양을 선택합니다. "탭" 트리거를 선택하고 동일한 아트보드 위에 드래그 앤 드롭하여 복제본을 만듭니다.
3. 두 번째 아트보드는 애니메이션의 최종 상태를 나타내며 angle 속성을 사용하여 그룹을 회전할 수 있습니다. "채우기"와 "윤곽선"에 다른 각도 값을 지정하여 더 흥미로운 효과를 만듭니다.
4. 완료하려면 대지 사이의 화살표를 선택하고 "애니메이션"을 클릭하여 "애니메이션 패널"을 연 다음 끝점을 약 1.00초로 밀어 지속 시간을 변경합니다.

로딩 애니메이션 만들기 - 텍스트

1. 먼저 슬라이드업 애니메이션을 만듭니다. 버튼 모양을 선택하고 "Tap" 트리거 이벤트를 적용합니다. 새 아트보드에서 모든 화면을 640px 위로 이동합니다(현재 아트보드 높이와 동일).
2. 이제 시차를 만들어 보겠습니다. 이전 아트보드로 이동하여 시작 화면에서 기하학적 모양과 텍스트를 다른 Y 값에서 아래로 이동합니다.
3. 마지막으로 애니메이션 패널 내에서 타임라인을 1초로 확장합니다. 타임라인에 "둘 다 부드럽게" 효과를 적용합니다(다이아몬드 모양의 점을 모두 선택했는지 확인하고 파란색 선을 클릭하여 효과를 모두 적용합니다).
4. 애니메이션을 미리 보고 시차 효과가 좋아 보일 때까지 모양을 이동합니다.

시차 효과 만들기 - 시작 페이지

1. 로드 구성 요소를 선택하고 아트보드의 아무 곳에서나 해당 구성 요소에서 화살표를 끌어 "탭" 트리거를 적용합니다.
2. 모든 화면(마스터 그룹에서)을 선택하고 640px 위로 이동합니다. 이 단계는 시작 화면을 표시합니다.
3. 이전 아트보드로 돌아가서 "Welcome" 화면의 모양을 아래쪽으로 이동합니다. 이것은 시차라는 비동기 슬라이딩 효과를 만듭니다.
4. 애니메이션 패널 내부의 전환에 시간을 추가하여 애니메이션 조정: 대지 사이의 화살표를 선택한 다음 파란색 선의 끝점을 약 1초로 드래그합니다.

시차 효과 만들기 - 정보 페이지

1. 아래쪽 화살표 버튼을 선택하고(전체 그룹을 선택해야 함) 아트보드의 아무 곳에서나 화살표를 끌어 "탭" 트리거를 적용합니다.
2. 모든 화면(마스터 그룹에서)을 선택하고 모든 것을 640px 위로 이동합니다. 이 단계는 정보 화면을 표시합니다.
3. 이전 대지로 돌아가 "정보" 화면에서 모양을 아래쪽으로 이동합니다. 이것은 시차라는 비동기 슬라이딩 효과를 만듭니다.

시차 효과 만들기 - 색상 페이지

1. 아래쪽 화살표 버튼에 "Tap" 트리거를 적용하면(전체 그룹을 선택해야 함) 새 아트보드가 생성됩니다.
2. 새 대지에서 모든 화면을 선택하고 640px 위로 이동합니다.
3. 이전 대지에서 색상과 텍스트를 아래쪽으로 이동합니다. 개체를 아래로 이동할수록 다시 위로 슬라이드하는 데 시간이 더 오래 걸리므로 다른 배치를 사용하여 보다 역동적인 효과를 생성해야 합니다.
4. 마지막으로 애니메이션을 확장하고 애니메이션 패널 내부의 모든 파란색 타임라인에 "둘 다 부드럽게"를 적용합니다.

측면에서 페이지 밀기 - 색상 선택 페이지

1. "색상" 화면의 "더 로드" 버튼에 "탭" 트리거를 적용합니다.
2. 새 대지에서 "색상" 및 "선택" 콘텐츠를 360px(대지 너비)만큼 왼쪽으로 이동합니다.
3. 이전 대지로 돌아가서 화면 내용을 반대 방향(오른쪽)으로 이동합니다.
4. 0%에서 100%로 슬라이딩하는 화면의 불투명도를 애니메이션할 수도 있습니다.
5. 전환 효과를 조정하려면 애니메이션 지속 시간 및 여유 효과를 사용하여 재생합니다.

메뉴 아이콘 애니메이션

1. Sketch 원본 파일에서 효과(예: 그림자)가 있는 레이어와 모양은 Principle에 이미지로 가져옵니다. Principle 내에서 모양을 편집해야 하는 경우 가져오기 전까지 특수 효과를 추가하지 마십시오.
2. 즉, 기존 아이콘을 기준으로 세 개의 얇은 직사각형을 그리고 그룹화하여 햄버거 메뉴 아이콘을 만듭니다. 이제 이전 메뉴 아이콘을 삭제하거나 숨길 수 있습니다.
3. 새로 생성된 아이콘을 선택하고 "탭" 트리거를 적용합니다.
4. 새 아트보드에서 메뉴 아이콘의 위쪽 및 아래쪽 사각형을 회전하고 가운데 정렬되어 있는지 확인하고 중간에 불투명도를 0%로 지정합니다.
5. 방금 만든 애니메이션을 보려면 "탭" 트리거를 사용하여 변경된 메뉴 아이콘을 미리 보기 아트보드에 다시 연결하고 테스트합니다.

메뉴 슬라이더 효과 만들기

1. 최종 상태 아트보드에서 메뉴 링크가 닫는 메뉴 아이콘의 왼쪽에 정렬될 때까지 화면을 오른쪽으로 이동합니다.
2. 메뉴 내용과 밝은 회색 배경을 제외하고 "Colors" 폴더 안의 모든 것을 선택하고 불투명도를 25%로 줄이십시오. 애니메이션은 메뉴에 초점을 맞추기 위해 페이지 내용을 페이드 아웃합니다.
3. 애니메이션 지속 시간을 늘리고 이전 아트보드로 이동하여 메뉴 내용을 약간 이동하여 부드러운 효과를 만듭니다.

연락처 화면으로 이동

1. 열린 메뉴에서 "문의하기" 버튼에 "탭" 트리거를 적용합니다.
2. 새로 만든 대지에서 모든 화면을 640픽셀 위로 이동합니다.
3. 그런 다음 미리 보기 아트보드로 돌아가 "양식" 페이지에서 요소를 아래로 이동합니다.
4. 다른 Y 값에서 요소를 이동하여 시차 효과를 만듭니다.
5. 마지막으로 아트보드 사이의 화살표를 선택하고 애니메이션 길이를 확장한 다음 파란색 타임라인에 "Ease Both"를 적용합니다.

감사 페이지로 종료

1. "메시지 보내기" 버튼에 "탭" 트리거를 적용합니다.
2. 새 대지에서 모든 화면을 640픽셀 위로 이동합니다.
3. 그런 다음 미리 보기 아트보드로 돌아가 "확인" 페이지에서 요소를 아래로 이동합니다.
4. 색상이 지정된 아이콘의 크기와 회전을 사용하여 보다 역동적인 효과를 만드십시오.
5. 전환 효과를 더 잘 인식하려면 애니메이션 길이에 추가해야 합니다.

원리로 애니메이션을 추가하는 단순성.

Principle은 UI 상호 작용 아이디어를 현실로 만드는 환상적인 도구입니다.

인터페이스는 Mac 친화적이며 Sketch 파일과 원활하게 작동하도록 제작되었습니다.

Principle은 대부분의 애니메이션 및 전환 효과를 자동화합니다. 한 아트보드의 모양에 트리거를 적용하고 최종 아트보드에서 애니메이션을 적용할 요소의 속성을 변경하기만 하면 됩니다.

아래 댓글에 질문을 남겨주세요. 답변을 드리게 되어 기쁩니다.