종이 접기 스튜디오가있는 모바일 앱을 프로토 타입하는 방법

Sep 11, 2025

어떻게

사용자가 웹 및 모바일, 프로토 타이핑 및 사용자 평가에 대한 경험에 대한 기대치가 높은 세계에서는 핵심입니다. 이제는 점점 더 높은 충실도와 번성하는 프로토 타입을 점진적으로 반복하는 것이 일반적입니다. [삼] 사용자 경험

산업은이 중요한 활동을 중심으로 자랐습니다. 궁극적으로 프로토 타이핑 단계에서 소프트웨어를 오른쪽으로 얻는 것은 나중에 시간 및 / 또는 돈을 절약합니다.

[삼] 10 상단 프로토 타이핑 도구

프로토 타이핑을 위해 취할 수있는 많은 접근 방식이 있으며 돕기 위해 수많은 도구가 있습니다. 블록에서 가장 최신 중 하나입니다 종이 접기 스튜디오 , 페이스 북이 개발 한, 매크로를 위해 무료로 제공됩니다.

독립형 도구가되기 전에 Quartz Composer (MacOS의 Xcode 개발 환경의 시각적 프로그래밍 언어)를위한 플러그인으로 실제로 생명을 시작한 종이 접기 스튜디오는 작년에 많은 주목을 받았습니다.

이것은 Big-Name Developer에 의해 지어 졌을뿐만 아니라 전력과 단순성의 조합으로 인해 높은 충실도, 대화 형 프로토 타입을 개발하기 위해 제공됩니다.

다음 단계에 따라 종이 접기 스튜디오를 사용하여 프로토 타입을 빌드 할 수있는 방법을 검색하십시오.

01. 새로운 프로토 타입

Start by creating a new iPhone 8 prototype — 새로운 iPhone 8 프로토 타입을 만들어 시작하십시오

우리는 고양이의 그림과 '처럼'그 중 일부를 통해 스 와이프 할 수있는 모바일 앱을위한 프로토 타입을 만들 것입니다. 종이 접기 스튜디오를 설치하면 스플래시 화면에서 새로운 iPhone 8 프로토 타입을 만들 것입니다.

02. 레이어 추가

우리는 프로토 타입을 곧바로 우리의 표정을 추가 할 수 있습니다. 이 경우 화면 상단에 위치한 로고를 추가합니다. 오른쪽 상단의 + 버튼을 사용하여 레이어를 추가하고 '이미지 레이어'를 선택합니다. 그런 다음 레이어의 속성을 강조하고 수정하여 적절하게 크기를 조정하고 위치를 조정할 수 있습니다. 우리 브랜드가 끝나면 화면 하단에 심장 이미지를 추가하여 '같은'버튼으로 사용됩니다.

03. 상호 작용 생성

For interactions you'll need to create a patch — 상호 작용을 위해 패치를 만들어야합니다

우리는 우리의 심장 단추가 사용자 상호 작용에 응답해야합니다. 미리보기 창에서 커서가 모바일 장치에서 터치를 나타내려면 커서가 변경됩니다. 이에 응답하기 위해서는 입력을 취하고 출력을 생성하는 종이 접기의 기능 인 '패치'를 만들어야합니다. 빈 회색 영역을 두 번 클릭하여 새 패치 목록을 표시하고 'Interaction'을 검색하십시오. 패치를 배치하고 화면에 나타납니다.

04. 레이어에 상호 작용을 연결합니다

Change the patch properties so that it only responds when you click in the right place — 올바른 위치를 클릭 할 때만 응답 할 수 있도록 패치 속성을 변경하십시오.

현재 패치가 프로토 타입의 어느 곳에서나 택시에 응답합니다. 클릭하면 테스트를 클릭하면 '다운'및 '탭'속성이 실시간으로 변경됩니다. 패치에서 '레이어'속성을 선택하면 심장 이미지가 포함 된 레이어에 연결할 수 있으며 해당 특정 영역의 클릭에만 응답합니다.

05. 애니메이션

A pop animation will give users a bit of visual feedback — POP 애니메이션은 사용자에게 비용서의 피드백을 제공합니다.

이제 우리는 상호 작용이 트리거 될 때 일어나고 싶습니다. 이번에 다른 패치를 만들어서 '팝 애니메이션'을 만듭니다. 이것은 스프링이 많은 효과를 만드는 데 사용됩니다. 현재 속성을 지금 당장하지만 이전에 생성 한 상호 작용의 탭 출력과 새 POP 애니메이션의 숫자 입력 사이의 링크를 만듭니다. 우리는 각각 옆에있는 작은 원 사이를 클릭하고 끌어서이 작업을 수행합니다. 이제 심장을 클릭하면 상호 작용이 팝 애니메이션의 '진행률'출력의 변경을 트리거합니다.

06. 전환

You can change the extent to which objects change size when they're clicked — 클릭 할 때 객체가 크기를 변경하는 범위를 변경할 수 있습니다.

우리가 필요로하는 다음 일은 전환 패치입니다. 이렇게하면 POP 애니메이션의 진행 출력이 변경되면서 이동할 수 있도록 낮은 값과 높은 값을 지정할 수 있습니다. 그런 다음 우리는 전환의 출력 값을 심장 이미지 레이어의 스케일 속성에 연결하여 종이 접기를 링크 할 때 크기를 조정할 수 있습니다. 이제 심장을 클릭하면 크기가 짧은 변화를 일으킬 수 있습니다. 그러나 그것은 곧바로 정상으로 되돌아 가게되기 때문에 옳지 않습니다.

07. 스위치

Use switch patches to toggle objects between different states — 스위치 패치를 사용하여 다른 상태간에 객체를 전환합니다

스위치 패치는 종이 접기의 두 가지 상태를 토글하는 방법입니다. 이것은 우리가 우리의 '같은'버튼을 원하는 것입니다. 스위치 패치에 전달 된 입력은 'ON'과 'OFF'상태 사이에서 플립 할 수 있으며, 이는 후속 패치로 출력으로 전달 될 수 있습니다. 새 스위치를 만들고 상호 작용과 팝 애니메이션 사이에 배치하십시오. 그런 다음 작은 상태와 큰 상태 사이에서 전환하려면 심장을 클릭 할 수 있어야합니다.

08. 더 복잡한 행동

By experimenting with patches you can add more complex behaviour to your prototype — 패치를 실험함으로써 프로토 타입에 더 복잡한 동작을 추가 할 수 있습니다.

축하합니다! 이제 시간과 시간을 다시 사용하는 가장 일반적인 패치를 사용하여 첫 번째 대화 형 기능을 만들었습니다. 우리는 더 복잡한 동작을 생성하기 위해 더 많은 패치를 추가 할 수 있습니다. 현재의 컬러 심장 층을 전달한 것으로 만들고 동시에 확장 할 수 있도록 새 패치를 추가하고 원래 레이어의 불투명도를 수정하여 표시됩니다. 자, 심장을 탭하면 더 크고 작고 더 작게 전환 할 것이지만 색상을 변경하는 것처럼 보입니다.

09. 회전 목마

It's time to bring on all the cats — 모든 고양이를 가져올 시간입니다

우리의 프로토 타입을 끝내려면 사용자가 '좋아요'를 허용하고자하는 고양이와 함께 이미지 회전 목마를 추가합시다. 이렇게하려면 먼저 레이어 그룹을 추가해야합니다. 각 이미지는 점점 더 분리되는 분리 된 레이어가되므로 하나의 항목에서 화면에 하나씩 표시되는 행의 나란히 크기로 좌우로 묶여 있습니다.

10. 왼쪽과 오른쪽을 스 와이프하십시오

Follow these steps to add a classic swiping action to your carousel — 이 단계를 수행하여 회전식 스 와이프 액션을 추가하십시오.

우리가 일하기 위해해야 할 마지막 일은 회전 목마를 스크롤하기 위해 왼쪽과 오른쪽 스 와이프가 가능합니다. 우리는 회전 목사 레이어 그룹 (개별 이미지가 아님)에 연결하기 위해 스크롤 상호 작용을 생성 하여이 작업을 수행합니다. 상호 작용은 우리가 좌표로 링크하여 회전 목마의 X 속성에 링크 할 수있는 x의 좌표를 출력합니다. 간 사이에서, 우리가 캐 러셀의 가장자리 외부의 좌표를 위해 스크롤하기 위해 가치를 제한하는지 확인하는 데 사용할 수있는 클립 패치를 추가합니다.

11. 다음 단계

Now you've learned the basics you can add more advanced features — 이제 더 고급 기능을 추가 할 수있는 기본 사항을 배웠습니다.

그게 다야 해. 당신은 매우 기본적인 앱을 만들었습니다. 종이 접기 스튜디오의 '프레임'을 사용하여 장치 배경에 배치하여 전문적인 마무리를 제공 할 수 있습니다. 이제 패치를 사용하는 기본 사항에 익숙해지면 더 많은 고급 비헤이비어를 만들 수 있습니다. 종이 접기 스튜디오 웹 사이트에는 충분한 가이드가 있습니다. 이는 앱에서 일반적으로 볼 수있는 인기 기능을 구현하는 방법을 설명합니다.

이 기사는 원래 Creative Web Design Magazine Web Designer의 Issage 270에서 출판되었습니다. 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

[삼] 2018 년에 앱 디자인을 형성 할 추세

[삼] 웹 사이트 프로토 타입을 구축하는 3 가지 톱 방법

[삼] 모형, 와이어 프레임 및 프로토 타입에 대해 알아야 할 모든 것

종이 접기 스튜디오가있는 모바일 앱을 프로토 타입하는 방법

01. 새로운 프로토 타입

02. 레이어 추가

03. 상호 작용 생성

04. 레이어에 상호 작용을 연결합니다

05. 애니메이션

06. 전환

07. 스위치

08. 더 복잡한 행동

09. 회전 목마

10. 왼쪽과 오른쪽을 스 와이프하십시오

11. 다음 단계

어떻게 - 가장 인기있는 기사

만화 페이지를 만드는 방법

자신의 캐릭터 성경을 만드는 방법

VR에서 캐릭터를 조각하는 방법

Houdini에서 식물을 재배하십시오

신랑은 불가사의 할 수 없을 정도로 모피 생물

그림이있는 반응 형 대시 보드 만들기

WordPress 웹 사이트를 다국어로 만드는 방법

10 톱 Houdini 자습서

카테고리