기술나눔

[PM]프로토타이핑 및 인터랙션 디자인

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

원형 분류

1. 프로토타입 스케치

기획 초기 단계에서 아이디어 정리에 사용되는 손으로 그린 ​​그림

2. 저충실도 프로토타입

간단한 상호 작용, 색상 매칭이 필요 없음, 주로 검정색, 흰색, 회색으로 제품 기획 및 검토 단계에서 사용됨

표준화된 저충실도 프로토타입은 고충실도 프로토타입의 기초입니다.

3. 충실도가 높은 프로토타입

일반적으로 공개 시연에 사용되는 복잡한 상호 작용,

제품은 먼저 정확도가 낮은 프로토타입을 제작하고, 디자이너는 프로토타입을 기반으로 디자인 초안을 제작합니다.

저충실도 프로토타입 + 디자인 초안 = 고충실도 프로토타입

악슈어

1. 운영 인터페이스

①메뉴 영역 ②레이어 영역 ③컴포넌트 영역 ④그리기 영역 ⑤스타일 영역

2. 일반적인 작업
  1. 새 파일 만들기: 파일->새로 만들기
  2. 파일 열기: 파일->열기
  3. 파일 저장: 파일->저장
  4. 주요 파일 형식
  • .rp: 프로토타입 파일
  • .rplib: 구성요소 라이브러리 파일
  • .rpteam 팀 프로젝트 파일
  • .html 웹페이지 파일
  1. 자동 저장: 기본 설정->백업 활성화
  2. 조합: Ctrl+G
  3. 게시: 프로토타입을 HTML 파일로 생성 -> 먼저 새 폴더를 만드는 것이 좋습니다.
  4. 도움말: Axure 정보 ->버전 보기
  5. 도움말: 인증 관리 -> 소프트웨어 크랙
  6. 원본 라이브러리 추가: 구성 요소 라이브러리 + 번호
  7. 구성 요소 라이브러리 제거: 구성 요소 라이브러리 열기->추가->구성 요소 라이브러리 제거
3. 스타일 디자인

구성 요소를 캔버스로 드래그하고 스타일을 수정합니다.

4.인터랙션 디자인

인터랙션은 인간과 컴퓨터의 상호작용 과정이고, 인터랙션 디자인은 상호작용 규칙과 성능을 디자인하는 것입니다.

Axure에서는 인터랙션을 인터랙션 스타일과 인터랙션 로직으로 구분합니다.

1. 대화형 스타일에는 공통 스타일 변경 사항이 내장되어 있어 사용하기 쉽지만 논리를 설정할 수 없습니다.

2. 상호 작용 논리 설정이 더욱 유연해졌습니다. 요소에 이벤트와 작업을 추가하여 개인화된 스타일과 논리적 상호 작용을 완료할 수 있습니다.

3. 설정된 인터랙티브 효과를 미리보기에서 확인해야 합니다.

5. 리피터

반복기의 역할은 항상 복사하여 붙여넣을 필요 없이 구조를 재사용하는 것입니다.

  1. 반복 레이아웃을 생성하고 반복 레이아웃을 두 번 클릭하여 편집 모드로 들어갑니다.
  2. 후속 데이터 바인딩을 용이하게 하기 위해 모든 구성 요소의 이름을 지정합니다.
  3. 편집을 종료하고 테이블 데이터를 입력합니다. (열 이름은 영어만 지원합니다.)
  4. 보기->마스크->리피터 마스크 끄기

6. 동적 패널

동적 패널을 사용하여 콘텐츠 전환 효과 달성

  1. 왼쪽 탐색 메뉴 추가
  2. 오른쪽에 동적 패널 추가
  3. 동적 패널을 두 번 클릭하여 편집 모드로 들어갑니다.
  4. 다양한 상태의 다양한 요소 설정

  1. 탐색에 클릭 이벤트를 추가하고 동적 패널 상태를 설정합니다.

  1. 미리보기 효과

프로토타입 사양

휴대폰 앱과 컴퓨터 앱의 차이점:

  1. 화면 적응(화면 크기, 해상도)
  2. 상호작용 방식(손가락 컨트롤보다 마우스가 더 정확함)
PC 버전

1. 버전 하트

현재 주류 해상도는 1920*1080이므로 버전 센터에서는 일반적으로 960~1200 사이이고 일반 권장 사항은 1200입니다.

2012년 이전에는 주류 해상도가 1024*768이었기 때문에 버전 센터는 760이었습니다.

2.내비게이션

3. 양식

4. 목록

M엔드

모바일 단말기의 경우 고정된 크기 사양이 없습니다. 적응 모델의 크기에 따라 프로토타입이 만들어집니다. 예를 들어 iPhone 6의 크기는 375 * 667입니다.

1. 고정 요소 크기

2. 공용 공간

3. 일반적인 표시 형태