Axure에서 수평 또는 수직 이동 효과를 만드는 방법은 무엇입니까?

PC측 프로토타입 디자인 경험이 있는 제품 스태프로서, 모바일측 제품 프로토타입을 디자인할 때 가장 먼저 맞닥뜨리는 문제는 PC측 제품을 디자인할 때 페이지 드래그 효과일 수 있습니다. 전체 페이지를 표시하려면 마우스 휠을 사용하고, 모바일에서는 손가락을 사용하여 드래그하고 슬라이드하여 전체 페이지를 표시합니다.

axure가 모바일 제품 프로토타입을 만들 때, 물론, axure는 모바일 단말기 상호 작용을 완벽하게 구현할 수 있지만 동적 템플릿을 사용해야 합니다. 유연하게 목표를 달성하기 위해 위치 조정 등을 조정합니다.

다음으로 주제를 입력하고 axure를 사용하여 모바일 페이지의 드래그 표시 효과를 구현하는 방법을 친구들과 공유합니다.

전 axure를 열면 작업을 수행하는 방법을 상상할 수 있습니다.

1. 모바일 단말기에 표시되는 페이지는 고정된 크기를 가지며 내부의 전체 페이지는 고정된 크기 범위를 초과할 수 있으므로 다음이 필요합니다. 동적 템플릿을 만들어 고정 크기 페이지로 만들고, 너무 긴 페이지를 교체하려면 전체 페이지를 넣으세요.

2. 전체 페이지는 드래그가 가능해야 하므로 전체 페이지가 드래그 가능해야 합니다. 페이지도 동적 패널입니다

3. 모바일 제품을 사용할 때 페이지에 들어갑니다. 마지막으로 아래로 드래그하면 페이지가 일반적으로 풀다운되고 상단에 새로 고침을 해제하라는 메시지가 나타납니다. ; 마찬가지로 손가락을 위로 밀면 페이지가 아래쪽으로 드래그되고, 계속 위로 밀면 페이지가 위로 당겨져 페이지가 원래 위치로 이동합니다. Axure의 전체 페이지 중 상단 또는 하단을 떠날 때 자동으로 원래 위치로 돌아가도록 상호 작용을 설정해야 합니다.

이 세 가지 구현 방법이 우리가 구현하는 드래그 상호 작용의 주요 아이디어입니다. axure에서 어떻게 목표를 달성할 수 있는지 자세히 살펴보겠습니다.

1. 준비: axure를 열고 새 문서를 생성한 후 iPhone 배경 자료를 추가하고 상단에 Wi-Fi와 배터리 정보를 추가하고, 상단 네비게이션 바(이러한 자료는 Baidu, ios8 UIkit에서 찾을 수 있음)뿐만 아니라 준비가 완료되었습니다.

2. 동적 패널을 추가합니다. 이 패널은 우리 화면과 동일하므로 이름은 다음과 같습니다. "고정 페이지"의 경우 호출됨

3. 동적 패널에 또 다른 동적 패널을 추가합니다. 이 두 번째 패널은 표시하려는 콘텐츠와 동일하며 전체 콘텐츠를 표시하려면 드래그해야 합니다. 당연히 "고정 페이지"보다 길어야 합니다. "페이지"는 길어야 하며 이를 "긴 콘텐츠"라고 부를 수 있습니다.

4. 긴 콘텐츠 패널에 텍스트 콘텐츠를 추가합니다. 여기에 그림을 추가했습니다. p>

5. 다음 긴 패널의 드래그 기능을 구현하고 고정 페이지의 긴 콘텐츠 패널에 onDrag 상호 작용을 추가합니다. 대화형 콘텐츠는 y로 이동합니다. 즉, 긴 표면만 이동할 수 있습니다. Y축을 따라 드래그됨

6. 드래그 기능이 구현되었습니다. 먼저 완성된 효과를 미리 보고(액셔 작업 표시줄의 미리보기 버튼 클릭) 이미지를 위아래로 드래그해 보세요. 결과는 예상대로입니다. 그러나 드래그한 후에는 이미지를 재설정할 수 없습니다. 그러면 다음 단계는 재설정 기능을 구현하는 것입니다.

7. 재설정을 구현하려면 판단을 위해 두 개의 직사각형을 추가해야 합니다. 고정 페이지의 상단과 하단에 있는 긴 콘텐츠 패널을 아래로 드래그하여 "판단 영역에서 위쪽으로" 왼쪽으로 이동하면 이름에서 알 수 있듯이 상단 사각형을 임시로 "상위 판단 영역"이라고 부릅니다. , 긴 콘텐츠는 원래 "0,0" 좌표로 이동해야 합니다. 이 상호 작용을 "풀다운 재설정"이라고 합니다. 판단 영역은 긴 콘텐츠와 동일한 너비와 기호 높이로 투명하게 설정할 수 있습니다. 2px

8. 긴 콘텐츠 패널을 선택하고 onDrag 작업에 새로운 상호 작용 "풀다운하여 재설정"을 추가하고 트리거 조건을 추가합니다. 위젯의 긴 콘텐츠 영역이 끝나지 않은 경우 그런 다음 먼저 400ms를 기다린 후 긴 콘텐츠를 이동하면 편집 결과가 X:0 Y:0으로 이동합니다.

참고: 편집 후 풀- 아래로 재설정, 여기에는 매우 중요한 변경 사항이 있습니다. 상호 작용 막대에서 "풀다운하여 재설정"의 else if 조건을 if로 변경하려면 이 작업을 수행해야 합니다. 그렇지 않으면 재설정을 위한 풀다운 작업을 수행할 수 없습니다. 그 이유는 여러분에게 맡기겠습니다. 여러분, 생각해 보세요.

9. 풀업 재설정 작업이 완료된 후에도 여전히 풀업을 구현해야 합니다. down Reset 먼저 판단 상자를 추가하고 테두리와 채우기가 모두 투명하며 크기는 긴 내용의 너비입니다. 기호 2px로 고정 페이지 하단에 배치됩니다.

10. 풀다운 재설정을 구현할 때 긴 콘텐츠의 재설정 위치를 X: 0, Y: 0으로 설정합니다. 이는 긴 패널이 위로 재설정되면 반드시 위치(0)로 이동한다는 것을 이해하기 쉽습니다. ,0) 그런데 이제 풀업 재설정을 구현하려면 긴 패널의 높이를 계산해야 합니다. 이는 긴 패널을 아래쪽으로 드래그한 후 고정된 페이지에 긴 패널의 아래쪽 부분이 표시되기 때문입니다. 내용 중 일부입니다. 제 스크린샷을 보시면 이해하시는데 도움이 될 것 같습니다.

11. 이전 단계에서 전체 긴 내용이 하단에 표시될 때 위치 지정이 전체 긴 콘텐츠 중 (0,-295)인 경우 다음 단계는 풀다운 재설정을 구현하는 것과 동일합니다. 대화형 막대의 onDrag 작업에 대화형 "풀업 재설정"을 추가하고 트리거 조건을 추가합니다. 위젯의 긴 콘텐츠 영역이 위젯의 ​​영역을 벗어나지 않으면 판단 영역을 벗어납니다. 그런 다음 먼저 400ms를 기다린 다음 긴 콘텐츠를 이동하고 편집 결과는 Else if 조건이 if로 변경됩니다.

12. 모든 조건을 편집한 후 상호작용 막대의 onDrag 액션에서 모든 상호작용을 확인합니다

13. 완료되었으면 빠르게 실행하여 효과를 관찰합니다

p>

요약:

모바일 측에서 가장 기본적인 풀업 및 풀다운 동작을 구현하기 위해 axure를 사용하는 것은 너무 복잡하므로 여전히 다른 프로토타이핑 도구를 사용하는 것이 좋습니다. 하지만 그럼에도 불구하고 axure에는 다른 프로토타이핑 도구보다 정적 페이지를 구현하는 것이 더 편리한 장점이 있습니다.

?