현재 위치 - 인적 자원 플랫폼망 - APP 자료 - Axure 를 사용하여 APP 대화 형 프로토 타입을 신속하게 만드는 방법
Axure 를 사용하여 APP 대화 형 프로토 타입을 신속하게 만드는 방법
먼저 라이브러리 "녹색 파일" 을 만듭니다

Axure 를 열고 [구성 요소 라이브러리] 패널의 [세 개의 수평선] 버튼 드롭다운 옵션에서 [구성 요소 라이브러리 만들기] 기능을 찾습니다. 누르면 구성 요소 라이브러리 파일을 저장할 위치를 선택하고 구성 요소 라이브러리 이름을 입력할 수 있는 다른 이름으로 저장 대화 상자가 나타납니다.

이 시점에서 파일의 접미어는 다음과 같습니다. Rplib 는 구성 요소 라이브러리의 형식입니다. 대화형 프로토타입을 만들 때 일반 Axure 파일의 RP 형식입니다.

파일 이름과 저장 위치를 입력한 후 Save 를 클릭하면 Axure 가 구성 요소를 편집할 새 페이지를 다시 엽니다. 우리는 새 페이지가 우리가 일반적으로 만드는 페이지와 정확히 동일하다는 것을 알 수 있다. Rp 파일이지만 혼동하지 마십시오. 이 시점에서 페이지는 일반적인 상황에서 사용해야 하는 기본 구성 요소를 편집합니다. Rp 파일. 라이브러리 위치로 돌아가면 라이브러리 아이콘이 표시됩니다. Rplib 파일은 "녹색" 입니다. Rplib 파일입니다.

구성 요소 라이브러리의 "녹색 파일" 을 만든 후 기본 준비가 완료되었으며 다음은 제작 과정입니다.

둘째, 라이브러리 그룹

Axure 의 기본 구성 요소 라이브러리를 살펴보면 해당 구성 요소 라이브러리를 범주별로 그룹화할 수 있음을 알 수 있습니다. 예를 들어, 기본값은 공통, 양식, 흐름 등으로 나뉩니다. 이를 통해 대상 구성 요소의 위치를 ​​쉽게 찾을 수 있습니다.

마찬가지로, 우리가 어셈블리 라이브러리를 만들 때, 우리는 그것을 그룹화할 수 있다. 규칙은 페이지 탐색 패널에서 모든 폴더가 그룹화되고 해당 폴더 아래에 있지 않은 모든 페이지 (모든 하위 페이지 포함) 가 구성 요소 라이브러리로 명명된 그룹에 속한다는 것입니다.

그룹화 규칙을 이해한 후에는 먼저 구성 요소 라이브러리의 계획에 따라 합리적으로 그룹화할 수 있습니다. 예를 들어, APP 의 구성 요소 라이브러리를 만들려면 아이콘, 컨트롤, 프레임워크 등 세 가지 일반적인 그룹으로 나눌 수 있습니다. 그런 다음 특정 구성 요소의 제작 프로세스를 시작할 수 있습니다.

셋째, 구성 요소 편집 및 제작

예를 들어 "내" 아바타 아이콘을 만들어 봅시다. 먼저 아이콘 그룹화 아래에 페이지를 추가하고 이름을 "My" 로 지정합니다. 구성 요소 편집 페이지로 이동하려면 두 번 클릭합니다. 편집 작업은 일반 작업과 같습니다. Rp 파일. App 에서 자주 사용하는 "내" 아이콘 스타일을 참조한 다음 직사각형, 수평선, 원 등과 같은 Axure 기본 기본 기본 기본 모양 요소를 사용할 수 있습니다. , 조합해서 궁극적 인 이상을 만들 수 있습니다.

먼저 Axure 는 PS 의 부울 연산과 비슷하지 않다는 점을 분명히 해야 합니다. 즉, 병합, 교차, 최상위 수준 빼기 등과 같은 여러 모양을 자유롭게 편집할 수 있습니다. ), 그래서 그것은 우리의 구성 요소에 몇 가지 제한 사항, 특히 아이콘을 가져올 것입니다, 하지만 다행히도, 상호 작용 프로토 타입은 우리가 명확 하 게 제품 형태를 표현할 수 있고 상대적으로 전반적인 스타일을가지고 만큼 가혹한 세부 사항을 요구 하지 않습니다. 또한 Axure 의 기본 모양으로 그린 아이콘을 사용하면 색상 크기 등을 쉽게 조정할 수 있습니다. , 다양한 대화형 파일에 적용할 수 있습니다. 즉, 인터넷에서 바로 사용할 수 있는 비트맵 아이콘을 쉽게 찾을 수 없습니다.

내 아이콘 제작으로 돌아가서 그림과 같이 세 가지 기본 모양을 사용하여 조합한 다음, 마지막으로 우리가 자주 보는 아이콘 스타일로 조합하면 그 의미를 한눈에 이해할 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 구현할 세부 사항은 더 이상 없지만 대화식 프로토타입 초안에는 충분합니다. 관건은 색상 크기를 유연하게 수정할 수 있다는 것이다.

이 아이디어에 따르면 더 많은 아이콘을 만들 수 있습니다. 물론 버튼, appbar, 검색 표시줄, 아이콘 자리 표시자 등과 같은 일반적인 컨트롤도 만들 수 있습니다. 다음 그림은 매일 읽기 프로토타입을 그릴 때 만든 구성 요소 라이브러리입니다.

구성 요소 라이브러리 생성이 완료되면 마지막 단계로 이동합니다.

넷째, 직접 만든 구성 요소 라이브러리를 로드하여 사용합니다

구성 요소 라이브러리가 제작되어 자주 사용하는 에셋 폴더에 저장됩니다. 정상적인 것을 열다. Rp 파일. 마찬가지로 라이브러리 패널의 가로 막대 버튼 드롭다운 옵션에서 부품 라이브러리 로드 기능을 찾은 다음 로드할 최종 품목 라이브러리 파일의 녹색 아이콘을 찾습니다.

로드 후 "구성 요소 라이브러리 선택" 드롭다운 옵션에서 새로 로드된 구성 요소 라이브러리를 찾아 선택할 수 있습니다. 그러면 소프트웨어와 함께 제공된 구성 요소처럼 직접 만든 구성 요소 라이브러리를 사용할 수 있습니다.

어쨌든, 너는 이미 스스로 구성 요소 라이브러리를 만드는 방법을 배웠을 것이다. 나는 네가 시간을 내서 하나 만들 수 있기를 바란다. 물론 Axure 는 구성 요소 라이브러리를 만드는 것 외에도 마스터의 기능과 같은 많은 기술을 익혀야 합니다.

주인을 잘 이용하는 법을 배우다

제품 설계 과정에서 기본 탐색은 app 아래쪽에 있는 탭 표시줄과 같은 여러 페이지에 자주 나타납니다. 물론 내비게이션만은 아닙니다. 우리가 어떤 컨트롤 세트를 자주 사용할 때, 나는 네가 항상 복사하여 붙이지 않기를 바란다. 마스터 플레이트를 만드는 것이 더 좋은 선택일 수 있다는 점을 항상 기억하십시오.

대사의 편리함을 이용하는 것은 단지 당신이 지금 신속하게 컨트롤 세트를 사용할 수 있다는 점뿐만 아니라, 특히 디자인 후기에, 우리가 몇 가지 기본 컨트롤을 수정해야 할 때, 대사가 가져온 수정의 효율성은 확실히 당신을 이 기능에 깊이 빠지게 할 것입니다.

우리는 대사들을 사용하는 법을 배워야 할 뿐만 아니라, 대사들을 잘 활용하는 법도 배워야 한다. 또한, 나는 너무 큰 조합 대상을 모판으로 바꾸지 않는 것을 기억하고 싶다. 합성 오브젝트가 클수록 모판의 여러 곳에서 수정해야 할 가능성이 높기 때문이다. 이 시점에서 일부 마스터를 다른 마스터와 결합하는 것이 더 좋은 방법이므로 마스터의 수정이 더욱 유연해집니다. 예를 들어, 다음 그림에서는 제품의 기본 정보와 가능한 구매 상태가 두 개의 홈 페이지로 분리되어 두 개의 홈 페이지가 결합되어 제품의 전체 페이지를 형성합니다.

나만의 대화형 스타일 개발

나만의 구성 요소 라이브러리를 만드는 방법, 마스터 활용 방법, 그리고 물론 Axure 소프트웨어를 사용하는 다른 많은 기술들을 배웠습니다. 대화형 프로토타입 초안을 빠르게 완성할 수 있어야 하는데, 제공된 초안이 통일된 스타일을 가지고 높은 목표 수준을 달성할 수 있도록 어떻게 보장할 수 있습니까?

먼저 APP 의 설계 사양을 숙지하고 안드로이드 또는 iOS 의 설계 철학을 준수하며 몇 가지 일반적인 제어 설계 규칙에 대해 어느 정도 이해해야 합니다. 이렇게 설계된 제품은 이 플랫폼의 특징을 만족시킬 수 있으며, 관련 플랫폼의 고유 지식을 바탕으로 * * * 지식을 쉽게 얻을 수 있습니다. 이는 interactive prototype 이 커뮤니케이션 인도물로 달성해야 하는 목표이기도 합니다.

APP 의 설계 사양을 숙지한 결과 제작 과정에서 사용 장면과 자신의 습관에 따라 상호 작용 스타일을 개발해야 합니다. 예를 들어 APP 원형에서 텍스트 글꼴은 Microsoft ya heicolor # 33333313 이고 프롬프트 텍스트는 Microsoft ya heicolor # 999999/kloc-0 으로 정의할 수 있습니다 .....

물론 글꼴과 같은 일부 사양은 직접 만든 구성 요소 라이브러리에 글꼴 구성 요소로 넣을 수도 있습니다. 요컨대 자신의 상황에 따라 유연하게 운용해야 한다. 스타일 세트와 함께 만든 구성 요소 라이브러리가 색상 크기를 자유롭게 수정할 수 있기 때문에 제작된 상호 작용 프로토타입은 반드시 조화를 이루는 전체여야 한다고 생각합니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)

일간지의 원형을 읽다

이론적 방법을 익히려면 실천이 있어야만 더 잘 흡수하고 깨달을 수 있다. 나는' 데일리 독서' 의 iOS 버전을 참고해서 일부 메인 페이지에 대한 상호 작용 원형을 그렸다. 기본 과정과 생각은 이 글에서 설명한 내용과 일치한다.

좀 더 생생한 느낌을 주기 위해 인터넷에서 아이폰 테두리를 찾아 나만의 구성요소 라이브러리를 만들어 자주 사용하는 아이콘과 컨트롤을 그렸다. 그런 다음 전체적인 스타일을 설정하고 제작 과정에서 몇 가지 모판을 사용하여 효율성을 높입니다. 또한 안내선을 사용하면 어셈블리의 정렬 및 균일 분포를 보장함으로써 레이아웃의 아름다움을 높일 수 있습니다.

t 2024인적 자원 플랫폼망 All rights reserved