Axure 는 웹 제품의 페이징 구성 요소를 어떻게 그릴까요?

웹 제품의 페이지 지정 구성 요소는 목록 페이지를 그리는 데 필수적인 기능이며, 제품 관리자는 다양한 상호 작용 및 해당 프로토타입을 심층적으로 이해하는 것이 중요합니다. 다음으로 이 문서에서는 참조 및 학습을 위해 몇 가지 일반적인 페이지 구성 요소의 스타일과 상호 작용 효과를 공유합니다. 자습을 준비하거나 Axure 를 독학하고 있는 작은 파트너의 경우 Axure 자습 비디오 수업을 0 기초부터 사례 실습에 이르기까지 전면적으로 공부하는 것이 좋습니다 ~

Axure 웹 제품 페이징 구성 요소를 그리는 방법:

0 1 일반 페이지 스타일 몇 가지 일반적인 페이지 구성 요소 스타일을 나열하며 PM 은 필요에 따라 적절한 스타일을 선택할 수 있습니다.

02 페이지 나누기의 공통 요소 페이지 지정 구성 요소에는 일반적으로 PM 이 자유롭게 조합할 수 있는 다음 요소가 포함되어 있습니다.

Total x 는 현재 목록이나 검색 목록의 총 수와 페이지당 표시되는 데이터 수를 계산합니다.

일반적으로 y 항목에는 10 또는 페이지당 20 개의 항목이 있습니다. 리스트 데이터가 특히 큰 경우 사용자가 선택할 수 있습니다.

숫자 페이지 번호는 페이지 번호 1, 2,3,4 를 표시합니다. 해당 n 페이지로 이동하여 목록 데이터를 로드하려면 클릭하십시오.

첫 페이지와 마지막 페이지는 위의 스타일 5 와 스타일 6 과 같이 텍스트 버튼이나 아이콘으로 표시할 수 있습니다.

이전 페이지로 돌아가거나 다음 페이지로 들어가면 아이콘을 사용할 수 있습니다. "

& lt 는 이전 페이지를 나타내고 아이콘 ">" 는 다음 페이지를 나타냅니다. N 페이지로 이동하여 숫자를 입력한 다음 Enter 또는 return 키를 눌러 해당 페이지로 이동합니다. 한 페이지만 있는 경우 [n 페이지로 이동] 이 표시되지 않습니다.

03 페이지 나누기의 일반적인 상태 초기 상태는 페이지 나누기의 초기 상태입니다. 목록을 로드할 때, 너는 그것이 번쩍이는 것을 볼 수 있을 것이다.

선택 상태는 페이지 나누기의 기본 상태이며, 현재 페이지 번호를 선택하고 적절한 상호 작용을 표시합니다.

롤오버 상태는 페이지 번호 위에 커서를 놓을 때 나타나는 상호 작용입니다.

클릭 상태는 페이지 번호를 클릭할 때 나타나는 상호 작용 효과입니다. 일반적으로 설정할 필요가 없습니다.

1. 초기 상태를 그리는 방법 기본 구성 요소 라이브러리에서 캔버스의 적절한 위치로' 직사각형 1' 을 드래그하여 크기를 25*25 로 변경하고 두 번 클릭하여' 1' 을 입력하는 방법. N 부를 복사한 다음 인접한 간격이 5px 로 설정된 해당 숫자로 수정합니다.

2. 어떻게 선택 상태를 그리고 동시에 선택합니까? 오른쪽 클릭 상호 작용 스타일은 팝업 상호 작용 스타일을 표시하고, 선택된 탭으로 전환하고, 채우기 색상을 파란색 #0000FF 로 설정하고, 선택 단어 색상을 #FFFFF 로 설정합니다.

첫 번째 구성 요소인 페이지 번호 1 을 클릭하면 오른쪽 사이드바가 "상호 작용" 버튼으로 전환되고, "새 상호 작용" 버튼을 클릭하고, 트리거 이벤트 "클릭시" 를 선택하고, "선택 설정" 동작을 추가하고, "현재 구성 요소" 를 그런 다음 이 이벤트를 다른 페이지 번호 요소에 복사합니다.

구성 요소를 선택하고 [옵션 그룹] 을 마우스 오른쪽 단추로 클릭한 다음 팝업 창에서 그룹 이름 "페이지 번호" 를 설정하고 [확인] 을 클릭합니다.

페이지 번호가 1 인 구성 요소를 클릭하고 "선택" 을 마우스 오른쪽 단추로 클릭하면 프로토타입을 볼 때 기본적으로 목록의 첫 페이지로 이동합니다.

3. 호버링 상태는 첫 번째 구성 요소인 페이지 번호 1 을 그리는 방법을 그립니다. "인터랙티브 스타일" 을 마우스 오른쪽 단추로 클릭하여 팝업 창을 표시하고 "롤오버" 로 전환하고, 단어 색상을 선택한 후 파란색 # 000ff 로 변경하고, 세그먼트 색상을 선택한 후 파란색 # 000ff 로 설정합니다 그런 다음 상호 작용 스타일을 다른 페이지 번호 요소로 복사합니다.

4. 클릭 상태를 그리는 방법은 선택 상태와 같습니다. 자세한 내용은 위를 참조하십시오.

페이지 지정 상호 작용 페이지 지정 구성 요소의 상호 작용은 실제로 개별 요소를 그리는 상호 작용입니다.

1. 총 효과 표시 1. [텍스트 레이블] 을 기본 구성 요소 라이브러리에서 캔버스의 적절한 위치로 드래그하고 두 번 클릭하여 초기 값을 나타내는 텍스트 "합계 x" 를 수정합니다. 글자색을 #7F7F7F 로 바꾸다.

2. 페이지의 빈 영역을 클릭하면 오른쪽 사이드바가' 인터랙티브' 로 전환됩니다. "새 상호 작용" 버튼을 클릭하고 트리거 조건 "페이지가 로드될 때" 를 선택하고 동작 "텍스트 설정" 을 추가하고 "Total X" 의 요소를 대상으로 선택하고, 값 후 FX 를 눌러 팝업 창 "텍스트 편집" 으로 이동하고, 아래의 "로컬 변수 추가" 의 텍스트 버튼을 클릭합니다 변수 또는 함수 삽입 텍스트 버튼 뒤의 드롭다운 상자에서 최종 함수를 계산하고 "확인" 을 클릭합니다.

3. 미리보기 버튼을 클릭하고 네비게이터에서 프로토타입 효과를 확인합니다.

2. 페이지당 문장 수 조정 효과는 1 입니다. 기본 구성 요소 라이브러리에서 캔버스의 적절한 위치로 드롭다운 목록 상자를 드래그하여 크기를 80*25px 로 변경합니다. 팝업 창에서 "편집 드롭다운 목록" 을 두 번 클릭하고 "다중 편집" 을 클릭한 다음 해당 팝업 창의 입력 상자에 여러 값을 입력합니다. 마지막으로 "확인" 을 클릭하여 저장하십시오. 물론 "추가" 버튼을 클릭하여 하나씩 추가할 수도 있습니다.

2. 드롭다운 목록 상자를 클릭하면 오른쪽 사이드바가 대화형으로 전환됩니다. "새 상호 작용" 버튼을 클릭하고 트리거 조건 "옵션이 변경될 때" 를 선택하고, "페이지당 항목 수 설정" 동작을 추가하고, 목록 값의 repeater 요소를 대상으로 선택하고, 두 번째 목록 항목을 선택합니다. 값 후 FX 를 눌러 팝업 "텍스트 편집" 으로 이동하고 아래의 "로컬 변수 추가" 텍스트 버튼을 클릭합니다.

그런 다음 위의 "변수 또는 함수 삽입" 텍스트 버튼을 클릭하고 드롭다운 상자에서 substr(start, length) 을 선택하고 입력 상자에 자동으로 채우고 변수 LVAR 를 LVAR 1 으로 변경하고 길이를 2 로 변경하여 마지막 함수를 얻습니다

3. 페이지당 항목 수를 전환하면 목록 내용이 확장되어 해당 내용을 차단하므로 몇 가지 처리가 필요합니다. 목록 항목 repeater 를 마우스 오른쪽 버튼으로 클릭하여 동적 패널로 변환한 다음 이름을 list 로 지정합니다. 그런 다음 드롭다운 목록 상자를 계속 클릭하고, 원래 동작 앞에 표시/숨기기 동작을 추가하고, 대상의 목록 동적 패널을 선택하고, 숨기기를 클릭하고, 더 많은 옵션을 전환하여 구성요소를 당기고, 원래 동작 뒤에 표시/숨기기 동작을 추가하고, 대상의 목록 동적 패널을 선택하고, 클릭합니다.

4. 미리보기 버튼을 클릭하여 네비게이터에서 프로토타입 효과를 확인합니다.

3. 클릭하여 페이지 번호 효과를 지정합니다. 이전 상호 작용 스타일을 바탕으로,+를 눌러 "현재 표시 페이지 설정" 동작을 계속 추가하고, "목록 값" repeater 를 대상으로 선택하고, 페이지 번호 뒤의 FX 를 클릭하여 팝업 "값 편집" 으로 이동하고, 텍스트 버튼 "로컬 변수 추가" 를 클릭하여 변수를 자동으로 만들어 현재 구성 요소의 텍스트를 가져온 다음 텍스트 버튼을 클릭합니다 그런 다음 이 이벤트를 다른 페이지 번호 요소에 복사합니다.

미리보기 버튼을 클릭하여 검색기에서 원형 효과를 확인합니다.

4. 이전 및 다음 효과 페이지를 클릭합니다. 클릭 지정 페이지 번호 효과를 기준으로 기본 구성 요소 라이브러리에서 "직사각형 1" 을 페이지 번호 앞 위치로 드래그하여 크기를 25*25px 로 변경하고 캐리지 리턴 ""을 두 번 클릭하여 다음 페이지를 나타냅니다.

클릭 "

"| |" 구성 요소를 클릭, 오른쪽 사이드바를 상호 작용으로 전환, 새 상호 작용 버튼을 클릭, 트리거 이벤트 "클릭 시" 선택, 동작 추가 "현재 표시 페이지 설정", 목록 값 repeater 를 대상으로 선택, 페이지를 마지막 페이지로 전환, 완료 버튼을 클릭합니다. 미리보기 버튼을 클릭하여 검색기에서 원형 효과를 확인합니다. 6. 지정된 페이지 번호 효과로 이동합니다. 기본 구성 요소 라이브러리에서 [텍스트 상자] 를 앞 적절한 위치로 드래그하고, 크기를 40*25px 의 적절한 크기로 변경하고 "페이지 번호 입력" 이라는 이름을 지정한 다음 상자에 "페이지 번호" 를 입력하라는 메시지를 표시합니다. 그런 다음 기본 구성 요소 라이브러리에서 텍스트 레이블을 캔버스의 적절한 위치로 드래그하고 입력 텍스트를 두 번 클릭하여 "점프" 합니다.

"점프" 버튼을 클릭하면 오른쪽 사이드바가 "상호 작용" 으로 전환되고, "새 상호 작용" 버튼을 클릭하고, "+"를 클릭하여 "현재 표시된 페이지 설정" 동작을 계속 추가하고, "목록 값" repeater 를 대상으로 선택하고, 페이지 번호 뒤의 FX 를 클릭합니다 미리보기 버튼을 클릭하여 검색기에서 원형 효과를 확인합니다.

위의 내용은 "Axure 는 웹 제품의 페이지 구성 요소를 어떻게 그릴까요?" 입니다. 나는 이미 모든 멋진 내용을 공유했으니, 네가 그로부터 얻을 수 있기를 바란다. 만약 당신이 문장 한 편이 즐겁지 않다고 생각한다면, Axure 관련 문장 놓치지 마세요! 요컨대, 학습 길과 단일 지식은 전면적인 자기 발전을 이루기 어렵다! 만약 네가 한 가지 기술에 완전히 정통하고 싶다면, 너는 반드시 전면적으로 공부해야 한다! 힘내세요, Axure 를 전면적으로 배우고, 지식점을 전면적으로 습득하고, 빠르고 효과적으로 자율적인 프로토타입 디자인을 추진합니다 ~