Framer 튜토리얼: 프로토타입을 개선하기 위한 7가지 간단한 마이크로인터랙션

Framer 튜토리얼 시리즈의 두 번째 기사에 오신 것을 환영합니다. 지난 기사에서 우리는 디자인 모드에서 Framer를 사용하는 기본 사항과 디자인에 생명을 불어넣는 간단한 코드를 작성하는 방법에 대해 배웠습니다. 이 글에서는 Framer를 사용하여 마이크로인터랙션 및 애니메이션 전환을 만드는 데 중점을 둘 것입니다. 프로토타입을 위한 7가지 유용한 상호 작용을 만드는 방법을 살펴보겠습니다.

작은 상호작용을 프로토타입해야 하는 이유는 무엇입니까?

부드러운 움직임, 상태 변경 및 미묘한 전환은 특정 작업에 대한 피드백을 제공하여 사용자가 인터페이스 사용 방법을 이해하는 데 도움이 됩니다. 종종 이러한 전환은 실제 아날로그(예: 스위치 제어 슬라이딩)를 반영하거나 일반적인 장치 상호 작용 패턴(예: 탭하여 확장)을 활용합니다. 이 튜토리얼에서는 인터페이스에 마무리 터치를 추가하여 사용자의 이해를 돕고 즐거움을 주는 상호 작용에 중점을 둘 것입니다.

아래의 예를 살펴보십시오. 전 세계의 디자이너들은 다양한 제품에서 이러한 마이크로인터랙션을 만들고 있습니다.

7가지 프로토타입

이 튜토리얼에서는 각 마이크로인터랙션에 대한 개요와 일부 코드 조각을 제공합니다. 우리는 몇 가지 다른 기술을 사용할 것이므로 귀하의 제품에 가장 적합한 기술을 선택할 수 있습니다. Framer Studio 내에서 무엇이든 만드는 "올바른" 방법은 없습니다. 이전 기사에서 언급했듯이 Framer는 원하는 방식으로 만들 수 있는 많은 자유를 제공합니다.

이전에 이와 같은 상호 작용을 본 적이 있습니까? 물론입니다! 스마트폰에서 매일 볼 수 있습니다. 이제 나만의 콘텐츠를 만들 차례입니다.

1. 액션 버튼

작업 버튼은 종종 현재 화면의 주요 작업을 나타냅니다. 때로는 내부에 여러 작업이 포함되어 있습니다. 두 번째 경우에 대한 상호 작용을 생성합니다. 여기에서 작업 프로토타입을 다운로드하십시오: https://framer.cloud/ShBnH

1단계: 세 개의 원형 버튼 만들기

시작하려면 내부에 아이콘이 있는 하나의 기본 원 모양 버튼을 만들고 기본 버튼 아래에 두 개의 작은 버튼을 만듭니다. 디자인 모드에서 이러한 모든 레이어를 대화형으로 표시하는 것을 잊지 마십시오(대상 표시기 사용).

2단계: 모든 레이어에 대해 두 가지 상태 디자인

레이어에 대해 두 가지 다른 상태를 만듭니다. 아래 코드를 사용하여 작은 버튼을 기본 버튼 위로 이동하고 아이콘을 45° 회전합니다.

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

3단계: 이벤트 추가

이 프로토타입을 애니메이션으로 만들려면 이벤트를 추가해야 합니다. 작업 버튼을 탭한 후 모든 레이어의 상태를 변경합니다.

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

4단계: 봄 애니메이션

이 시점에서 애니메이션은 매우 기계적으로 보입니다. 사람의 손길을 더하기 위해 모든 레이어에 스프링 애니메이션을 추가합니다.

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

작업 버튼을 사용할 준비가 되었습니다!

2. 인터랙티브 스위치

아래 단계를 통해 고유한 스위치 상호 작용을 만들 수 있습니다. 여기에서 작업 프로토타입을 다운로드하십시오: https://framer.cloud/ieypV

1단계: 스위치 플레이그라운드 설계

최소한 두 개의 레이어(배경과 점)를 포함하는 스위치 자체와 스위치를 사용한 후 애니메이션할 레이어의 두 가지만 있으면 됩니다.

2단계: 상태 만들기

첫 번째 기사에서 Framer Studio에서 직접 상태를 디자인하는 방법을 기억하십니까? 원하는 대로 상태를 디자인하거나 내 설정을 사용하세요.

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

3단계: 이벤트 추가

프로토타입이 작동하도록 하려면 스위치에 이벤트를 추가해야 합니다. 스위치를 탭한 후 모든 레이어의 상태를 변경합니다.

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

4단계: 타이밍 조정

모든 것을 더 자연스럽게 만들려면 모든 상태의 시간과 지연을 조정하십시오.

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

이제 프로토타입이 완성되었습니다!

3. 목록 항목 스와이프 동작

이것은 목록에서 항목을 제거, 보관 또는 저장하기 위한 일반적인 상호 작용입니다. 왼쪽이나 오른쪽으로 스와이프하면 항목이 지워집니다. 여기에서 프로토타입을 다운로드하십시오: https://framer.cloud/rzMWP

1단계: 디자인 모드에서 프로토타입 만들기

원하는 경우 자신의 디자인을 사용할 수 있습니다. 동일한 레이어 구조를 유지하기만 하면 됩니다. 위의 이미지에서 볼 수 있듯이 모든 목록 항목 아래에는 "실행 취소" 버튼이 있습니다.

2단계: 항목을 드래그 가능하게 만들기

간단하게 유지하기 위해 첫 번째 목록 항목에 대해서만 상호 작용을 만듭니다. 먼저 목록 항목을 드래그 가능하게 만듭니다. item.draggable = true .

그런 다음 세로 축을 잠급니다. item.draggable.vertical = false .

드래그 가능한 영역의 제약 조건 설정: item.draggable.constraints

마지막으로 크기를 항목 size: size: item 으로 설정합니다.

전체 코드는 다음과 같습니다.

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

이제 왼쪽과 오른쪽으로 스와이프하면 항목이 항상 원래 위치로 돌아갑니다.

3단계: 상태 생성

다음으로 목록 항목이 제거될 때 상태를 만듭니다. 나는 단순히 x축을 사용하여 화면 밖으로 옮겼습니다.

 item.states.a = x: -360

4단계: 스와이프 후 상태 변경

마지막으로 상호 작용을 시작하기 위한 트리거를 생성해야 합니다. 항목을 화면 왼쪽으로 끌면 제거되어야 합니다. 코드는 다음과 같습니다.

 item.onMove -> if item.x < -70 item.stateCycle("a")

이 경우 "if" 문을 사용합니다. 위의 코드는 기본적으로 아이템 레이어를 70px 이상 이동할 때 아이템 상태를 'a' 상태로 변경한다고 말합니다. Framer Studio 설명서에서 if 문에 대해 읽을 수 있습니다. https://framer.com/getstarted/programming/#conditional

5단계: 탭한 후 작업 실행 취소

이 상호 작용이 거의 완료되었습니다. 남은 것은 이 작업을 실행 취소하는 것뿐입니다.

 item_bg.onTap -> item.stateCycle("default")

이전 튜토리얼의 이 코드에 익숙해야 합니다.

6단계(선택 사항): 애니메이션 타이밍 조정

원하는 경우 애니메이션의 타이밍을 조정할 수 있습니다.

 item.animationOptions = time: 0.75 curve: Spring

4. 버튼 로더

이는 사용자의 로딩 또는 대기 시간이 필요한 작업에 매우 유용한 상호 작용입니다. 이 상호 작용을 만들 때 하나씩 발생하는 많은 애니메이션을 관리하는 방법을 배우게 됩니다. 여기에서 프로토타입을 다운로드하십시오: https://framer.cloud/FxmHN

1단계: 디자인 모드에서 프로토타입 만들기

4개의 하위 레이어(진행률 표시줄 및 다른 상태에 대한 3개의 아이콘)가 있는 간단한 버튼을 만듭니다. 업로드 아이콘이 표시되는 버튼, 너비가 0인 하단의 진행률 표시줄, 숨겨진 아이콘 두 개를 추가로 디자인했습니다.

2단계: 이벤트 추가

이 전체 프로토타입은 Framer의 자동 코드 기능을 사용하여 코드를 한 줄도 작성하지 않고 만들 수 있습니다.

먼저 이벤트를 추가합니다. 버튼 레이어를 탭하여 전체 상호 작용을 트리거합니다.

이것은 Framer가 당신을 위해 작성한 코드입니다:

 button.onTap (event, layer) ->

3단계: 애니메이션 디자인

Framer의 자동 코드 기능을 사용하여 모든 애니메이션을 디자인합니다.

저는 타이밍이 다른 4개의 애니메이션을 디자인했습니다.

• 첫 번째 애니메이션은 진행률 표시줄의 너비를 변경하는 것입니다.
• 두 번째는 업로드 아이콘을 불투명하게 숨기는 것입니다.
• 세 번째는 로더 아이콘을 회전하고 표시하는 것입니다.
• 마지막은 확인 아이콘을 표시하고 크기를 조정하는 것입니다.

Framer가 각 애니메이션에 대해 작성한 코드는 다음과 같습니다.

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

4단계: 로딩 애니메이션 재설정

눈치채셨겠지만 애니메이션이 끝난 후 로더 아이콘을 숨기지 않았습니다. 이 프로토타입을 완료하려면 이 이벤트를 사용하여 다른 애니메이션을 트리거하십시오. load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. 당겨서 새로 고침

내부에 목록이 있는 거의 모든 단일 제품은 이러한 유형의 상호 작용을 사용합니다. 사용자는 전체 목록을 풀다운하여 새로 고칩니다. 만들기는 매우 쉽습니다. 여기에서 프로토타입을 다운로드하십시오: https://framer.cloud/DgMDw

1단계: 새로 고침 아이콘이 있는 간단한 목록 디자인

디자인 모드로 바로 이동할 수 있습니다. 목록과 새로 고침 아이콘의 두 가지가 필요합니다. 여기서 중요한 것은 새로 고침 아이콘을 불투명하게 숨기고 목록에 넣는 것입니다.

2단계: 스크롤 구성 요소 만들기

우리는 목록을 스크롤 가능하게 만들고 싶습니다. 이렇게 하려면 스크롤 구성 요소를 사용하고 여기에 목록 레이어를 추가합니다.

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

3단계: 새로 고침 아이콘을 표시하도록 설정

아이콘에 대한 간단한 상태를 만듭니다.

 icon.states.a = opacity: 1

4단계: 풀다운 후 이벤트 추가

현재 목록을 스크롤할 수 있습니다. 즉, 위 또는 아래로 스크롤할 때 전체 스크롤 내용이 'y'축에서 이동합니다. 이 지식을 바탕으로 이벤트를 만들 수 있습니다.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

다시 우리는 "if" 문을 사용하고 있습니다. 목록이 180px 이상 아래로 당겨지면(y축에서 이동) 작업이 트리거됩니다. 이 경우 목록과 새로 고침 아이콘의 두 레이어에 애니메이션을 적용합니다.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

"animate"를 사용하여 목록을 210px 아래로 이동하고 새로 고침 아이콘을 360° 회전합니다.

5단계: 모든 상태 재설정

프로토타입은 거의 작동하지만 애니메이션 새로 고침 후에 모든 레이어를 재설정해야 합니다. 이를 위해 애니메이션이 끝난 후 이벤트를 사용합니다.

 icon.onAnimationEnd ->

새로 고침 아이콘의 회전을 원래 위치로 다시 애니메이션화하고 상태 주기를 사용하여 목록 및 아이콘 배경 상태를 재설정합니다.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

그게 다야!

6. 드래그 인터랙션

앱 내에서 항목을 드래그하는 동안 항상 항목 자체에 문제가 발생한다는 사실을 알아차린 적이 있습니까? 때로는 항목이 줄어들거나 다른 항목이 흐려지거나 불투명도가 변경될 수 있습니다. 이러한 종류의 상호 작용을 만드는 방법을 알아보겠습니다. 여기에서 작업 프로토타입을 다운로드하십시오: https://framer.cloud/YstiW

1단계: 타일이 있는 간단한 그리드 디자인

타일 ​​그리드를 만들고 상위 요소 내부에 있는지 확인합니다.

2단계: "for" 루프를 사용하여 모든 타일을 대상으로 지정

" for 루프"는 무섭게 들릴지 모르지만 실제로는 간단합니다. for 루프에 익숙하지 않다면 먼저 약간의 배경 지식을 읽을 수 있습니다: https://framer.com/getstarted/programming/#loops-and-arrays

for 루프를 사용하여 그리드 내부의 모든 타일을 대상으로 지정합니다.

 for item in grid.subLayers

이 간단한 코드 줄을 사용하여 그리드 레이어 내부의 모든 레이어를 대상으로 했습니다.

3단계: 타일을 드래그 가능하게 만들기

그리드 안의 각 항목을 드래그 가능하게 만드세요.

 for item in grid.subLayers item.draggable = true

4단계: 드래그 상태 디자인

모든 항목은 드래그되는 동안 상태를 가져야 합니다. 코드에서 시작해야 하지만 나중에 레이어 편집기에서 이 상태를 편집할 수 있습니다.

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

5단계: 이벤트 드래그

항목이 드래그되는 동안 다른 상태를 트리거하는 이벤트를 만들어야 합니다. 드래그를 시작하는 동안 첫 번째 이벤트가 작업을 트리거합니다.

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

항목이 항상 다른 레이어 위에 있는지 확인하기 위해 this.bringToFront() 를 사용했습니다.

두 번째 트리거는 항목의 상태를 재설정합니다.

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

이 시점에서 작동하는 프로토타입이 있습니다.

6단계(선택 사항): 타이밍으로 재생

상호 작용은 항상 타임라인을 따라 발생합니다. 완벽한 효과를 얻으려면 타임라인을 조정하는 것이 좋습니다.

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. 여러 개의 "좋아요" 버튼(고급)

이 프로토타입에서는 보다 고급 기술을 사용하여 Framer Studio에서 레이어를 대상으로 지정하는 다른 방법을 보여줍니다. 이 방법은 더 짧은 시간에 더 반응이 빠른 상호 작용을 구축합니다. 기본 코딩에 익숙하지 않은 경우 먼저 이 기사를 읽는 것이 좋습니다. https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

이 상호 작용을 위해 디자인 부분을 건너뛰고 이 기사를 위해 특별히 만든 프로토타입을 사용합니다: https://framer.cloud/SZMCH

1단계: 어레이 생성

Framer Studio 내부의 레이어 구조를 살펴보십시오.

"목록" 그룹의 "행" 안에 "버튼"이 있습니다. 버튼 레이어에 대한 상호 작용을 만들 것이므로 대상을 지정해야 합니다. 하지만 먼저 모든 행 레이어를 찾아 배열 안에 넣어야 합니다.

 rows = list.children buttons = []

또한 모든 "버튼" 레이어에 대해 빈 배열을 만들었습니다: buttons = [] .

2단계: 배열에 하위 계층 추가

"for 루프"부터 시작하겠습니다.

 for i in rows buttons.push(i.children[0])

배열에 레이어를 추가하려면 다음을 사용합니다. buttons.push() . 이것은 배열 내부에 각 "행" 그룹의 첫 번째 레이어를 배치한다는 것을 의미합니다.

3단계: 상태 및 이벤트 생성

이제 "좋아요" 버튼에 대한 상태를 만들고 탭하는 동안 이벤트를 추가합니다.

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

이 기술을 사용하여 이전의 모든 프로토타입을 다시 만들고 더 복잡하게 만들 수 있습니다.

최종 메모

마이크로 인터랙션을 만들 때 가장 작은 세부 사항에 중점을 둡니다. 모든 유형의 동작에 의해 트리거되는 애니메이션을 만들고 완벽하게 만들 수 있습니다. 동일한 프로토타입을 만드는 방법은 수백 가지가 있으며 자신의 기술과 제품 디자인의 요구 사항에 맞는 방법을 사용해야 합니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법