쉬운 프로토타입 – InVision Studio 튜토리얼

2018년 상반기 동안 잠들지 않았다면 InVision Studio 앱 출시를 앞둔 인터랙티브 디자인 커뮤니티의 뜨거운 기대를 잘 알고 있었을 것입니다. InVision은 Craft와 같은 Sketch 및 Photoshop 플러그인 제품군으로 가장 잘 알려져 있으며, 정적 인터페이스 디자인을 클릭 및 공유 가능한 프로토타입으로 빠르게 전환하기 위한 이동 플랫폼으로 잘 알려져 있습니다. 작년에 대담한 단계에서 그들은 Sketch 및 Figma와 같은 업계 인기 제품과 경쟁하기 위해 자체 디지털 디자인 소프트웨어 개발을 발표했습니다.

이 제품은 혁신적이라는 선전을 받았고 원활한 디자인-프로토타입 워크플로, 복잡한 상호 작용 기능, 숨막히는 전환 애니메이션에 대한 몇 가지 중요한 약속을 했습니다. 그리고 그것은 무료였습니다. InVision은 디자이너들의 흥미를 끌기 위해 꽤 흥미로운 티저 비디오와 데모를 공개했습니다. 초기 베타 릴리스가 연초에 몇 번 이상 뒤로 미뤄지면서 기대감이 더욱 높아졌습니다.

더 많은 디자이너가 소프트웨어를 가지고 놀기 시작하면서 앱 인터페이스 디자인 도구의 기본을 보여주기 위해 점점 더 많은 튜토리얼과 가이드가 등장하고 있습니다. InVision은 또한 사용자를 InVision Studio 기본 사항에 온보딩하기 위해 자체적으로 몇 가지를 만들었습니다.

얼리 액세스 릴리스가 엇갈린 평가를 받고 있지만 Studio에는 몇 가지 흥미로운 기능과 많은 잠재력이 있습니다. 이 튜토리얼은 얼리 어답터에게 InVision Studio 프로토타입 제작의 기본 사항을 안내하고 몇 가지 기본 프로토타입 애니메이션을 추가하는 것을 목표로 합니다.

이 InVision Studio 튜토리얼을 따라 하면 매끄러운 애니메이션 전환이 포함된 대화형 프로토타입을 즉시 제작할 수 있습니다!

InVision Studio 작업 공간의 니켈 투어

Studio의 대부분은 UI 디자이너와 Sketch와 같은 디지털 디자인 소프트웨어를 사용해 본 사람이라면 누구나 익숙할 것입니다. 작업 공간의 대부분은 페이지, 레이어 및 그룹을 수용하는 왼쪽 패널과 함께 Sketch의 UI에서 단서를 차용합니다. 검사관을 위한 오른쪽 패널; 및 상단을 따라 상황에 맞는 도구 모음이 있습니다.

또한 일부 기능의 이름이 다르게 지정되더라도 동일한 도구를 많이 찾을 수 있습니다. 예를 들어, Sketch "심볼"은 Studio에서 구성요소라고 합니다.

상호작용 패널

이 자습서의 목적을 위해 상호 작용 도구를 활용하여 화면 사이에 대화형 핫스팟을 만들고 화면 간에 부드러운 전환을 만드는 데 중점을 둘 것입니다. Studio 작업 공간의 오른쪽에 있는 "상호작용 패널"에서 많은 마술이 일어날 것입니다.

상호 작용을 만드는 간단한 방법은 트리거 레이어 또는 그룹을 선택하고 키보드에서 "c"를 누르는 것입니다(또는 상단 도구 모음에서 번개 모양 아이콘 클릭). 그러면 대상 화면을 선택하는 데 사용되는 파란색 뚝딱 도구가 시작됩니다. 그러면 Studio에서 디자이너에게 이벤트를 트리거하는 제스처 또는 사용자 입력을 선택하고 미리 설정된 전환 또는 "모션" 전환 중에서 선택하라는 메시지를 표시합니다.

인비전 스튜디오 애니메이션

훌륭한 인터랙션 디자인에는 많은 요소가 있지만 사용자 인터페이스에서 애니메이션 전환과 마이크로인터랙션을 올바르게 사용하는 것은 단순히 창을 꾸미는 것 이상입니다.

그들은 사용성을 향상시키고 사랑받는 제품과 혼란스러운 혼란 사이의 차이를 의미할 수 있습니다.

이 튜토리얼 전체에서 사전 설정 전환과 모션 전환의 조합을 사용하여 앱 프로토타입을 만듭니다. 사전 설정 전환은 매우 간단하며 InVision 온라인 프로토타입 플랫폼 사용자에게 친숙할 것입니다.

화면 간 모션 전환이 작동하는 방식을 제어하는 ​​규칙은 조금 더 신비합니다. 예를 들어 화면 간의 요소 자동 연결과 같이 도구를 구축할 때 디자이너가 분명히 고려해야 할 사항이 많이 있지만 전환에 모션을 추가할 때 특정 효과를 얻으려면 시행착오를 거쳐야 합니다. 바라건대, 이 튜토리얼은 디자이너가 InVision Studio가 제공하는 것을 실험하는 데 조금 더 익숙해지는 데 도움이 될 것입니다.

염두에 두어야 할 사항

Studio는 애니메이션과 관련된 많은 스마트 기능을 약속합니다. 예를 들어 인터랙션을 통해 연결된 경우 한 아트보드에서 다른 아트보드로 복제된 개체 간에 모션 전환을 만들 수 있습니다. 그런 다음 디자이너는 이러한 애니메이션을 원하는 대로 조정하여 아름다운 이징 및 기타 모션 효과를 얻을 수 있습니다. 특정 순서로 객체 스택을 전환하려고 할 때 이것이 어떻게 작동하는지에 대한 기이함을 배우려면 인내심과 약간의 연습이 필요할 수 있습니다.

모션 전환은 서로 복제된 아트보드의 개체에서 가장 잘 작동합니다. 애니메이션 기능은 동일한 레이어 이름을 가진 복제된 개체를 인식한다는 점에서 "스마트"하므로 화면 간에 주요 레이어를 제거하거나 이름을 바꾸지 않도록 주의하십시오(이는 훌륭한 애니메이션을 망치는 실망스러울 정도로 쉬운 방법입니다).

Studio는 아직 초기 단계이므로 디자이너는 상당한 양의 버그에 직면할 준비가 되어 있어야 합니다. 예를 들어, "미리보기" 버튼은 프로토타입의 대화식 미리보기를 시작하지만 때때로 상호작용이 전혀 실행되지 않는 경우가 있습니다. 이 경우 파일을 저장하고 다시 열어야 합니다.

소프트웨어를 배우는 동안 이상하게 스스로 손상된 파일이 두 개 이상 있었습니다. 모든 대지를 삭제하고 모든 도구 패널에 액세스할 수 없게 되었습니다. 버그를 보고했고 작업을 너무 많이 잃지 않도록 여러 버전의 파일을 저장하는 방법을 배웠습니다.

마지막으로, 항상 조직화하는 데 도움이 됩니다. Studio, Sketch, Marvel 등 모든 플랫폼에서 프로토타입을 만들 때 개체와 레이어 레이블을 추적하면 시간과 좌절을 줄일 수 있습니다. 특히 팀과 함께 작업하거나 특정 시점에서 파일을 넘겨주는 경우에 그렇습니다. 상호 작용을 구축할 때 레이어 및 레이어 그룹의 순서를 기록해 두십시오. 이것은 종종 원하는 애니메이션 효과를 얻는 데 큰 차이를 만듭니다.

튜토리얼!

의 시작하자! 아직 다운로드하지 않았다면 InVision Studio로 이동하여 Studio 앱의 사전 체험판 버전을 다운로드하십시오. 컴퓨터에 InVision Studio가 있으면 여기에서 튜토리얼 파일을 다운로드하십시오. Studio 소프트웨어를 실행하면 파일을 저장한 위치에서 파일을 열도록 선택합니다.

1단계: 파일을 열고 살펴보기

이 대화형 프로토타입은 19세기 후반부터 20세기 초반까지 현대 예술가에 대한 모바일 앱용입니다. 모든 화면은 모션 전환 기능을 올바르게 사용하는 데 필요한 신중한 아트보드 복제를 사용하여 사전에 생성되었습니다.

계층 구조에는 "홈"에서 시작하여 각 개별 아티스트의 약력, 마지막으로 아티스트 작업의 네 가지 예가 있는 캐러셀까지 3단계의 깊이가 있습니다. "홈" 아트보드에는 프로토타입의 시작 아트보드를 지정하는 작은 집 아이콘이 있습니다.

이 자습서에서는 이러한 세 가지 깊이 수준을 연결하는 간단한 탐색 경로를 만드는 데 중점을 둡니다. Studio의 상호 작용 및 전환 도구를 사용하여 프로토타입이 제대로 상호 작용하는 앱처럼 느껴지도록 만들 것입니다.

2단계: 아티스트 타일을 아티스트 바이오에 연결

첫 번째 대지로 이동합니다. 잠시 시간을 내어 "아티스트 타일 1" 레이어 그룹을 확장합니다. 아티스트 이름을 위한 그룹, 추천 이미지를 위한 그룹, "Bio Text"가 포함된 세 번째 레이어의 세 개의 중첩 그룹이 있습니다.

대지 화면을 보면 Studio가 모션 전환을 처리하는 방식 때문에 세 번째 레이어 그룹이 즉시 표시되지 않습니다. 일단 메모해 두십시오.

"아티스트 타일 1" 요소가 모두 포함된 레이어 그룹을 선택합니다. 이 그룹을 선택한 상태에서 키보드에서 "c"를 누르거나 상단 도구 모음에서 번개 모양 아이콘을 클릭하여 상호 작용 도구를 시작합니다. 커서 다음에는 상호 작용의 대상 화면을 선택하기 위한 파란색 뚝딱 도구가 표시됩니다.

"Artist Bio 1"이라는 제목의 오른쪽 아트보드를 바로 선택하면 트리거와 전환 유형을 선택하라는 메시지가 표시됩니다. 트리거의 경우 "Tap"을 선택한 다음 전환으로 "Motion"을 선택합니다. 그런 다음 전환 기간을 선택할 수 있습니다. 이 전환을 2초로 설정하고 "저장"을 누르십시오.

재생 버튼을 클릭하여 프로토타입을 미리 봅니다. 화면을 따라 움직이는 방식과 바이오 레이어가 이미지 아래에서 어떻게 아래로 미끄러지는지 보셨습니까? 축하합니다. 매우 매끄러운 상호 작용 전환을 만들었습니다!

3단계: 뒤로 버튼을 홈 화면에 연결

이제 사용자에게 홈 화면으로 돌아갈 수 있는 방법을 제공해야 합니다. "Artist Bio 1" 아트보드로 이동하여 왼쪽 상단 모서리에 있는 "btn_back" 구성 요소를 선택합니다. 여기에서 "c"를 누르고 "홈" 아트보드를 선택하여 트리거를 만듭니다.

다시 트리거를 "Tap"으로, 상호 작용을 "Motion"으로, 지속 시간을 2초로 설정하겠습니다. 미리보기를 클릭하고 방금 만든 매끄러운 열기 및 닫기 전환을 보고 기뻐하십시오. 타일을 닫음으로써 트리거된 애니메이션이 어떻게 타일을 열 때 재생되는 애니메이션의 반전인지 주목하십시오.

4단계: 갤러리 연결

첫 번째 아트보드와 두 번째 아트보드의 레이어 이름을 기록해 두면 동일하다는 것을 알 수 있습니다. 이전에 언급했듯이 Studio 애니메이션은 이름을 공유하는 경우 한 아트보드에서 다음 아트보드로 복제된 레이어를 자동으로 연결하기 때문입니다. 이러한 레이어의 이름을 변경하면 애니메이션 링크가 끊어지고 전환은 기본적으로 단순한 페이드로 설정됩니다. 특히 의미 있는 레이어 레이블에 집착하는 사람들에게는 더욱 어렵습니다.

우리는 이미지의 회전 목마 갤러리를 여는 데 깔끔한 모션 전환을 하나 더 적용하려고 합니다. "아티스트 1 - 이미지 1"이라는 아트보드에는 "아티스트 약력 1" 아트보드에서 복제된 요소가 포함되어 있으며 더 많은 예시 이미지를 표시하기 위해 크기가 조정되었습니다.

"Artist Bio 1" 레이어를 클릭하여 "Featured Image" 그룹을 선택하는 것으로 시작합니다. 이것은 갤러리를 여는 방아쇠가 될 것입니다. 갤러리의 첫 번째 아트보드에 연결하는 "탭" 인터랙션을 만들고 "모션"을 선택합니다. 이번에는 지속 시간을 조금 더 빠르게 1초로 설정합니다.

갤러리 닫기를 위한 멋진 전환을 만들려면 "아티스트 1 - 이미지 1" 아트보드에서 닫기 버튼 레이어를 선택하고 이전과 동일한 설정으로 "아티스트 바이오 1" 아트보드에 다시 연결하기만 하면 됩니다.

이 애니메이션을 미리 보고 프로토타입이 아티스트 약력 화면에서 이미지 회전 목마로 얼마나 멋지게 전환되는지 감탄하십시오. 이제 앱 계층 구조의 세 가지 수준을 통해 탐색을 연결했습니다!

5단계: 모든 갤러리 이미지 연결

수행해야 할 대부분의 모션 전환을 완료했으며 이제 갤러리의 나머지 부분에 대해 일부 애니메이션 사전 설정을 사용하기 시작합니다.

사용자가 이 회전식 이미지를 넘기는 상호작용 패턴은 익숙한 스와이프 제스처가 될 것입니다. 좋은 소식은 이 마지막 부분이 매우 간단하고 Studio의 애니메이션 사전 설정을 사용하는 데 전혀 시간이 걸리지 않는다는 것입니다.

"아티스트 1 - 이미지 1" 아트 보드를 선택하고 다음 아트보드인 "아티스트 1 - 이미지 2"로 연결되는 상호 작용을 만듭니다. 이번에는 트리거를 "왼쪽으로 스와이프"로 설정합니다. 전환의 경우 "사전 설정"을 선택하고 드롭다운에서 "왼쪽으로 밀기"를 선택합니다.

역 상호 작용을 만들려면 "아티스트 1 - 이미지 2" 아트보드를 선택하고 이전 아트보드에 연결합니다. 이번에는 "오른쪽으로 스와이프" 제스처와 "오른쪽으로 밀기" 전환만 사용합니다.

다음 몇 개의 대지에 이 패턴을 반복하여 이미지 2의 대지를 이미지 3에 연결하고 이미지 3의 대지를 이미지 4에 연결합니다. 쉽게!

이를 더욱 사실적으로 만들기 위해 이미지 1과 이미지 4 사이의 루프를 닫습니다. 이미지 4의 대지를 선택하고 이미지 1에 연결합니다. "왼쪽으로 밀기" 트리거와 "왼쪽으로 밀기" 전환을 선택합니다. 시리즈의 다음 이미지. 이미지 1 아트보드를 이미지 4에 연결하고 반대 방향으로 연결하면 반복 갤러리가 생성되었습니다!

마지막으로 이미지 갤러리 아트보드에서 각 "btn_close" 구성 요소를 선택하고 바이오 아트보드에 다시 연결합니다. 여기에서 원하는 전환을 선택할 수 있지만 저는 "오른쪽으로 밀기"를 선택했습니다.

이제 과시할 꽤 잘 배열된 탐색 경로가 있습니다. 미리보기를 클릭하고 사용해 보세요. 프로토타입은 이 튜토리얼의 시작 부분에 있는 gif와 매우 유사하게 작동해야 합니다. 잘 번 돈으로 등을 두드려 주세요.

6단계: 반복

첫 번째 아티스트 예제의 모든 화면을 매끄러운 상호 작용으로 연결했으므로 자습서 파일의 다른 두 화면 세트에 대해 단계를 반복합니다. 그것들은 비슷한 방식으로 구성되어 있으며 Studio 작동 방식에 익숙해지는 데 좋은 습관이 될 것입니다.

다음 단계

이 튜토리얼이 InVision Studio 프로토타이핑의 멋진 기능에 대한 소개를 제공했기를 바랍니다. Studio를 사용하는 동안 고급 애니메이션 도구를 사용하여 전환을 조정해야 합니다. 작업 공간에서 다른 도구를 실험하고 다른 InVision Studio 자습서를 따라 보십시오. 연습을 통해 최고의 InVision Studio 디자인 전문가가 될 수 있습니다.

도중에 몇 가지 버그나 예기치 않은 동작이 발생했을 수 있지만 이것이 새로운 소프트웨어를 시도하는 특성입니다. InVision의 직원들은 피드백에 매우 민감하게 반응했으며 Studio를 계속 개선하여 더욱 안정적이고 유용하게 만들 것입니다.

Studio는 사용해 볼 수 있는 재미있는 도구입니다. 무료 앱 프로토타이핑 도구로 실험하지 않을 이유가 없습니다. 오늘날 디자인 커뮤니티에서 Sketch와 같은 이동 소프트웨어를 대체할 가능성은 없지만 많은 잠재력이 있습니다.

Toptal Design 블로그에 대한 추가 정보:

• 완벽한 UX 디자인 프로세스 – 프로토타입 디자인 가이드
• 디자인 도구로서의 Figma의 힘
• 실제 데이터를 사용한 프로토타이핑 - Framer Tutorial
• 모바일 사용성을 위한 기본 가이드
• 모바일 앱 디자인 모범 사례 및 실수