프로토타입 이벤트 설정

전체 프로토타입 이벤트는 트리거, 작동, 대상 및 애니메이션을 결합합니다.

다음은  각 요소의 의미입니다.

• 트리거: 어떤 상황에서 이벤트가 발생합니다.

• 작업: 이벤트 후에 일어날 일입니다.

• 대상: 액션의 대상은 누구입니까?

• 애니메이션: 전체 프로세스를 풍부하게 만듭니다.

트리거

트리거는 핫 존이 활성화되는 시기를 결정하여 시연될 프로토타입을 가져옵니다.

• 한 번 클릭 및 두 번 클릭: 이름에서 알 수 있듯이 레이어를 한 번 클릭하거나 두 번 클릭합니다.
• 팁: 링크를 열거나 버튼을 클릭하는 것과 같은 일반적인 용도로 항상 사용됩니다.

• 호버링: 핫 존 에서 마우스를 호버링할 때 작업을 트리거합니다.
• 팁: 버튼의 기능 프롬프트를 표시하는 데 항상 사용됩니다. 또한 호버링 시 상태 변경을 통해 영역이 대화형임을 사용자에게 알리는 데 사용할 수 있습니다.

• 누르기: 사용자가 핫 존을 클릭하고 누를 때 작업을 트리거합니다.
• 팁: 예를 들어 iOS 기기에서 3D Touch를 사용하는 등 모바일 기기의 경우 항상 사용됩니다.

• 마우스 오버: 마우스가 핫 존에 들어갈 때 작업을 트리거합니다.
• 팁: 이 핫존이 대화식임을 사용자에게 알리는 데 항상 사용됩니다. 클릭하지 않고 정보를 전환하는 데도 사용할 수 있습니다. 예를 들어 날짜를 확인할 때 마우스 이동할 때 각 날짜에 대한 세부 정보가 실시간으로 표시됩니다.

• 마우스 아웃: 마우스가 핫 존을 벗어날 때 작업을 트리거합니다.
• 팁: 사용 상황은  마우스와 비슷합니다. .

• 누르기: 핫 포인트/존을 누를 때 작업을 트리거합니다.
• 팁: 항상 변경 가능한 핫 존에 사용됩니다.예를 들어 Windows 컴퓨터에서 앱 아이콘을 클릭하면 선택 모드로 들어갑니다.

• 해제: 마우스를 해제할 때 작업을 트리거합니다.
• 팁: 항상 프레스와 함께 사용됩니다. 예를 들어, 사용자는 특정 목적을 위해 스크롤 막대를 끌어야 할 수도 있습니다. 그런 다음 선택 모드를 종료하려면 마우스를 해제해야 합니다.

작업

작업은 이벤트가 트리거될 때 수행할 동작을 결정합니다.

• 리디렉션: 이벤트를 트리거할 때 특정 프레임으로 리디렉션합니다.

• 팝업창 열기: 특정 프레임이 현재 페이지 에서 팝업 창으로 열립니다.

• 팝업창으로 전환: 팝업 1에서 팝업 2로 전환합니다. 일반적으로 창을 열 때 사용합니다.

• 팝업창 닫기: 현재 창을 닫습니다.

• 반환: 이전 프레임으로 돌아갑니다.

대상

이벤트의 최종 대상을 결정합니다.

팁: 현재 페이지의 프레임만 표시될 수 있고 페이지 간에 전환할 수 없습니다.

애니메이션

애니메이션은 기본적으로 즉시효과 설정됩니다. 그러나 Pixso는 다양한 애니메이션 효과를 지원하며 이 효과를 결합하여 더 나은 대화형 성능을 얻을 수 있습니다.

팁: 각 애니메이션 효과를  미리볼 수 있어 실제 효과를 더 잘 알 수 있습니다.

대상 프레임 상태 초기화하기

지원하는 동작과 대상 레이어 유형에서는 상호작용이 대상에 도달할 때 다음 상태를 초기화할 수 있습니다.

• 스크롤 위치: 대상 프레임을 처음 스크롤 위치로 되돌립니다.
• 컴포넌트 상태: 대상 프레임 안의 컴포넌트를 초기 상태로 되돌립니다.
• 동영상 상태: 대상 프레임의 동영상을 초기 재생 상태와 위치로 되돌립니다.

의도한 사용자 흐름에 맞게 초기화할 항목을 선택합니다. 페이지 처음으로 돌아오는 경우와 떠났던 위치로 돌아오는 경우에는 다른 설정이 필요합니다. 사용할 수 있는 초기화 옵션은 선택한 동작과 대상에 따라 달라집니다.

하나의 트리거에 여러 동작 추가하기

1. 상호작용을 만들고 첫 번째 트리거, 동작과 대상을 설정합니다.
2. 해당 상호작용의 설정을 엽니다.
3. 기존 동작 위의 +를 눌러 동작을 추가합니다.
4. 일반 프로토타입 동작과 같은 방식으로 추가 동작을 설정합니다.
5. 프로토타입을 재생하고 트리거를 실행하여 전체 결과를 확인합니다.

여러 동작을 사용하면 하나의 트리거로 두 가지 이상의 반응을 만들 수 있습니다. 모든 대상과 초기화 설정을 함께 검토하여 의도한 흐름으로 동작하는지 확인합니다.

프로토타입의 대상은 현재 페이지에 있는 프레임입니다. 연결할 대상 프레임을 같은 페이지에 배치합니다.