InVision Studio: 개요 및 검토

InVision Studio는 유연한 레이어와 무한한 캔버스 덕분에 고급 벡터 기반 화면 디자인을 빠르게 만들 수 있는 프로토타입 및 애니메이션 도구입니다. 그것은 최고의 고충실도 프로토타이핑 도구 중 하나로 간주됩니다. InVision Studio를 사용하면 작업 속도를 높일 수 있습니다. 흥미롭고 인터랙티브한 프로토타입을 만듭니다. 팀과 고객에게 디자인을 전달합니다. 디자인을 테스트하십시오. 개발 단계 전에 질문, 우려 사항 및 설계 변경 사항을 해결하십시오.

InVision Studio는 전체 제품 디자인 워크플로를 연결, 저장 및 공유할 수 있는 InVision Cloud와 모든 제품 디자인 워크플로를 저장하고 제어할 수 있는 디자인 시스템 관리자 및 라이브러리인 InVision DSM을 포함하는 InVision 도구 제품군의 일부입니다. 브랜드 및 UX 구성 요소. InVision Studio는 Mac 및 Windows에서 사용할 수 있습니다. 스케치 파일도 가져올 수 있습니다.

InVision Studio의 기능

InVision Studio 앱을 다운로드하면 생성할 프로젝트를 선택할 수 있습니다. 디자인할 항목을 선택한 후에는 인터페이스를 둘러볼 수 있습니다.

레이어 또는 구성 요소를 추가하려면 상단의 더하기 기호를 클릭합니다. 구성 요소를 추가하면 모든 옵션이 오른쪽에 나타납니다.

InVision의 몇 가지 주목할만한 기능을 살펴보겠습니다.

마스크 없이 이미지 크기를 조정하고 자릅니다.

지능형 이미지 자르기라고 하는 이 기능은 크기가 변경되면 이미지를 자동으로 자릅니다. Sketch에서 이미지 채우기를 만든 다음 "채우기"로 설정하는 것과 비슷하지만 단계가 더 적고 직관적입니다. 지능형 이미지 자르기는 중심 근처에 초점이 있는 이미지를 위한 것입니다. 원, 직사각형 또는 둥근 직사각형으로 자르려는 경우에도 가장 좋습니다. 초점이 다르거나 더 흥미로운 모양이 있는 이미지의 경우 마스크를 만들어 더 많은 사용자 지정 옵션에 액세스할 수 있습니다.

출처: LearnInVisionStudio.com

스크롤할 때 요소를 수정합니다.

머리글과 바닥글을 수정하는 것은 InVision에 새로운 것이 아니지만 다른 요소를 수정하는 것은 새로운 작업입니다. 스크롤을 가로, 세로 또는 둘 다로 설정한 다음 오른쪽 상단에 있는 핀 아이콘을 클릭하여 수정할 요소를 선택합니다.

여러 대지를 하나의 애니메이션으로 연결합니다.

타이머를 사용하면 하나의 애니메이션으로 전환하려는 여러 아트보드를 제어할 수 있습니다. 마지막 아트보드가 첫 번째 아트보드를 가리키도록 애니메이션을 반복할 수도 있습니다. 또는 디자인의 다른 부분으로 직접 다단계 애니메이션을 만들 수 있습니다. 이와 같은 복잡한 애니메이션은 비디오 인트로 및 아웃트로에 이상적입니다.

시차 애니메이션에 대한 스와이프 트리거를 만듭니다.

스와이프 트리거는 스크롤 시 발생하는 시차 효과 및 기타 유형의 애니메이션을 생성할 수 있습니다.

코드를 작성하지 않고 반응형 프로토타입을 만듭니다.

반응형 프로토타입을 사용하면 모든 것을 백분율 기반으로 만들고 대지 크기에 따라 모든 요소의 크기를 조정할 수 있습니다. 그런 다음 모든 종류의 화면에 반응하는 프로토타입을 만들 수 있습니다. 이렇게 하면 다양한 크기의 모형을 더 쉽게 만들 수 있습니다. 또한 Studio에서 디자인을 "크기 조정 가능"으로 설정하면 브라우저에서 볼 때 크기가 자동으로 조정됩니다.

출처: LearnInVisionStudio.com

프로토타입을 휴대전화에 미러링합니다.

휴대전화에서 애니메이션이나 프로토타입을 테스트하려면 공유하고 "거울"을 선택한 다음 모바일 앱에서 QR 코드를 스캔하면 됩니다.

스케치와 유사한 단축키를 사용합니다.

현재 Sketch를 사용하고 있다면 InVision Studio에서 사용하는 바로 가기에 이미 익숙할 것입니다. 특히 인스펙터, 레이어 및 도구 모음과 관련하여 거의 모든 것이 동일합니다.

밝은 테마와 어두운 테마 사이를 전환합니다.

디자이너가 아닌 사용자는 이 기능이 얼마나 유용한지 모를 수 있습니다. 밝은 인터페이스를 디자인할 때 어두운 테마의 대비를 추가하면 도움이 될 수 있습니다(반대의 경우도 마찬가지).

팀과 실시간으로 협업하세요.

협업 및 워크플로가 간소화되고 팀원들이 실시간으로 디자인하고 댓글을 달 수 있습니다. 글로벌 동기화 및 실시간 업데이트를 통해 아무도 루프에서 벗어날 수 없습니다.

브라우저에서 InVision Studio로 디자인하기

InVision Studio의 브라우저 버전으로 작업하는 것이 어떤 것인지 빠르게 보여드리고 싶습니다. 보드 디자인, 프로토타입 생성 및 프리핸드 모드 사용에 대해 간단히 살펴보겠습니다.

보드 디자인

명령 센터는 화면 오른쪽 상단에 있습니다. 5개의 아이콘은 다음을 나타냅니다.

• 헤더 수정
• 레이아웃 유형 설정
• 설정
• 코멘트
• 공유하다

헤더 수정

나는 헤더를 조금 가지고 놀았다. "헤더 편집"을 클릭하면 다음 옵션이 나타납니다.

이미지와 텍스트를 교체하고 약간 흐리게 처리하고 약간의 오버레이를 추가하여 텍스트가 돋보이도록 했습니다. 특히 "크기" 옵션이 마음에 듭니다. 마우스를 위에 놓고 세 가지 크기 중에서 선택하기만 하면 됩니다.

레이아웃 유형 설정

그런 다음 레이아웃 유형을 "세심한"으로 변경했습니다. 이것은 헤더 아래의 콘텐츠 블록을 위한 것으로, 아래로 스크롤할 때 표시됩니다.

추가 섹션 편집

섹션 제목 오른쪽으로 마우스를 가져가면 세 개의 아이콘이 표시됩니다. 아래쪽 화살표는 "섹션 아래로 이동"이고 "X"는 "섹션 제목 제거"입니다. 삭제한 다음 마음이 바뀌면 같은 영역 위로 마우스를 가져가면 새 섹션 제목을 추가할 수 있습니다.

화살표 오른쪽에 있는 더하기 기호와 "X"를 클릭하면 새 메뉴가 표시됩니다. 왼쪽에서 오른쪽으로 아이콘은 다음을 나타냅니다.

• 색상 견본 추가
• 메모 추가
• 파일 업로드

콘텐츠 블록 위로 마우스를 가져가면 헤더와 같은 크기 조정 옵션이 다시 표시됩니다. 다른 크기를 선택하면 나머지 레이아웃이 블록에 맞게 자동으로 업데이트됩니다. 콘텐츠 블록을 클릭하면 오른쪽에 창이 열립니다.

막대의 색상 중 하나에 마우스를 가져가면 해당 색상 코드가 표시됩니다. 이 창은 팀 구성원이 이 특정 디자인 블록에 대한 의견을 남길 수 있는 곳이기도 합니다.

프로토타입 만들기

옵션이 무엇인지 보여주기 위해 프로토타입 데모도 가지고 놀았습니다.

여기에서 제어 센터는 아래쪽에 있습니다. 왼쪽에서 오른쪽으로 눈 모양 아이콘을 시작으로 아이콘은 다음과 같습니다.

• 미리보기 모드
• 빌드 모드
• 댓글 모드
• 검사 모드
• 히스토리 모드
• 소셜 공유
• 화면 업로드
• 구성
• 화면 상태

프리핸드 모드

프리핸드 모드는 대화식 데모로 시작하여 사용법을 빠르게 보여줍니다. 그런 다음 무한 캔버스로 작업하여 프로젝트를 합칩니다. 앱에서 작업하는 경우 "Freehand와 실시간으로 협업" 링크를 팀원에게 보낼 수 있으며 팀원은 실시간으로 프로젝트에 그림을 그리고 텍스트를 추가할 수 있습니다.

InVision Studio 가격

무료 플랜에는 무제한 공동 작업자와 화면이 포함된 하나의 프로토타입이 포함됩니다. 그것이 당신이 필요로 하는 전부라면, 당신은 결코 지불할 필요가 없습니다. 데모는 한도 계산에 포함되지 않습니다. 프로토타입을 두 개 이상 디자인하는 경우 프로토타입을 무제한으로 만들 수 있는 6일 동안 무료로 액세스할 수 있습니다. 그 후에 추가 프로토타입을 만들고 사용하려면 업그레이드해야 합니다. 업그레이드하려는 경우 계획은 다음과 같습니다.

마지막 생각들

다른 디자인 도구와 비교할 때 InVision Studio가 약간 느리고 때로는 버그가 있다는 것을 알 수 있습니다. 즉, 일반적으로 느리다는 의미가 아니라 Adobe XD, Figma 및 Sketch와 같은 다른 유사한 도구보다 느립니다(때로는). 나는 개인적으로 그 문제를 경험하지 않았지만 리뷰에서 많이 나타납니다. 또한 InVision Studio는 플러그인 지원을 제공하지 않으므로 이것이 중요한 것이라면 대신 Sketch를 고려하십시오.

그러나 프로토타이핑과 관련하여 InVision Studio는 특히 팀과 공동 작업해야 하는 경우 이길 수 없습니다. Adobe XD만큼 강력하지는 않지만 여전히 찾을 수 있는 최고의 프로토타이핑 도구 중 하나입니다.

InVision Studio의 인터페이스는 배우고 사용하기 쉽고 아이콘은 세련되고 현대적입니다. 자습서, 둘러보기 및 추가 지침에 대한 링크를 통해 많은 도움을 받을 수도 있습니다. (지금은 그 반대의 리뷰를 읽었으므로 취향의 문제라고 생각합니다.) InVision Studio에는 추측이 거의 없으며 현재 수행 중인 작업인 생성에 바로 도달할 수 있습니다.

디자인할 때 황금률은 황금 비율을 사용하는 것입니다. 황금 비율 사용 및 이해에 대한 나의 궁극적인 가이드를 확인하십시오.

Visual Generation/Shutterstock.com을 통한 추천 이미지