마이크로 인터랙션에 대한 생각

어떤 사람들은 내가 멋진 애니메이션이나 프로토 타입을 제작할 어떻게 나에게 물었다? 직접 코딩하는 법을 배웠습니까? 학교에서 무엇을 공부 했습니까? 배우거나 구입할 도구 또는 소프트웨어는 무엇입니까? 초보자를 위한 최고의 도구는 무엇입니까?

사실, 가장 좋은 상호작용은 실제 "멋지다", "와" 애니메이션이나 그것이 실제로 어떻게 코딩되었는가 하는 것이 아니다. 예를 들어, 드리블은 항상 화려하고 멋진 작품들을 보여주지만, 어떤 상호작용과 애니메이션은 불필요하다. 

명심해야 할 가장 중요한 것은

“UI is not Disney movie; please STOP crazy animation.”

“UI는 디즈니 영화가 아닙니다. 미친 애니메이션을 중지하십시오.”

간단히 말해서, 복잡한 애니메이션은 좋은 상호 작용과 같지 않습니다. 엔지니어가 구현할 수 없는 복잡한 애니메이션을 만드는 경우 잘못된 디자인입니다. 우리는 "의미있는 상호 작용"이라는 것을 디자인하기 시작해야 합니다. 의미있는 상호 작용은 실제 도구를 만드는 데 사용되는 것이 아니라 어떤 사용자 경험을 제공하려고 하는지에 대한 것입니다. 그래서 저는 마이크로 인터랙션을 시작하기 전에 준비한 워크 플로와 마이크로 인터랙션 방법을 설명하기 위해 가장 단순하고 일반적인 인터랙션 중 하나를 예로 들어 보겠습니다. 아래의 예를 확인하고, 실제로 기본적인 드래그 앤 드롭 상호 작용이지만 개방형 프로토 타이핑 도구가 필요하기 전에 미리 준비하십시오.

Framer.js에 의해 만들어진 신용 카드 프로토 타입

https://design-nation.icons8.com/the-thinking-behind-micro-interaction-b6e9f7010491

 

구현 전의 생각

Framer.js 를 열기 전에 항상 명심해야 할 몇 가지 단계가 있습니다. 내가 좋아하는 첫 번째 일은 모든 기능의 배경과 이야기에 대해 생각하는 것입니다. 왜이 상호 작용이 필요할까요? 사용자에게 어떤 이점이 있습니까? 이 상호 작용이 사용자 경험을 기쁘게합니까? 불안한 적재 및 대기 경험을 줄일 수 있습니까? 이것들은 세부 설계 전에 지속적으로 나 자신에게 묻고 가능한 해결책을 모색하는 몇 가지 질문입니다. 좀 더 자세하게 설명하기 위해 몇 가지 포인터와 점검표를 작성하여 내 생각 과정을 이해하는 데 도움을 줍니다.

 

A. 손으로 스케치하고 상호 작용의 전환을 매핑하십시오.

먼저 노트북에 몇 가지 아이디어를 빠르게 스케치합니다. 이를 통해 화면의 주요 상호 작용, 애니메이션 및 요소를 결정하는 데 도움이됩니다. 상호 작용을 그리고 세 가지 다른 색을 사용하여 메모를합니다. 기본 및 정적 UI 요소의 경우 검은 색입니다. 주요 포인트의 경우 빨간색 속성이나 시간과 같은 것을 명심하고 싶습니다. 스와이프, 드래그 또는 긴 터치 동작과 같은 특수한 경우에는 노란색입니다.

 

일반적으로 상호 작용 가능성을 스케치

B. 스토리 

 비주얼 디자인을 시작하기 전에이 디자인의 핵심 개념, 사용자에게 어떤 종류의 스토리 또는 메시지를 전달하고자하는지 이해하는 것이 좋습니다. 다음 화면에서 유지하거나 사라질 수있는 요소를 파악할 수 있습니다. 이 디자인에서 공간 관계를 설명하는 데 있어 중요한 역할을하는 부분은 어느 것입니까?

신용 카드의 시각적 디자인

http://share.framerjs.com/neo05zn07em0/

C. 행동 / 상호 작용

복잡한 상호 작용보다는 단순하고 직관적 인 상호 작용을 사용하는 것이 좋습니다. 예를 들어 사용자가 드래그를 중지하면 화면의 선택 도구가 자동으로 사라집니다. 사용자는 임시 화면을 나가기 위해 닫기 버튼을 누를 필요가 없습니다.

 

드래그 앤 드롭 동작에 대한 미세 상호 작용 분석

D. 단일 화면에서 비틀 거리는 시간

 디자인의 배후에 생각하는 것 외에도 디스플레이 우선 순위를 고려할 것입니다. UI 요소와 구성 요소를 모두 한 번에 표시하지 않고 스토리 라인 순서로 표시해야합니다. 멋진 프로토 타입 도구를 사용하든 짧은 시간 내에 프로토 타입을 마무리하든 마이크로 상호 작용을 수행하는 가장 빠른 방법은 전체 UI 요소의 세부적인 시간을 추정하는 것입니다.

 

비틀 거리는 시간 계획

 

E. 화면 간 논리

상호 작용 자체 만 생각하지 마십시오. 화면에서 화면으로 전환하는 관점에서 생각하십시오. 두 UI 요소 / 컴포넌트가 동시에 또는 독립적으로 애니메이션됩니까? 사용자가 언제 다음 화면으로 스와이프하거나 시작 시간이 약간 엇갈리는가?

 

화면 사이의 논리에 대해 생각할 때

 

이 팁이 전반적인 상호 작용이 전반적인 사용자 경험에 어떻게 도움이 될 수 있는지의 중요성을 이해하는 데 도움이 되기를 바랍니다. 프로토 타이핑은 사용자 경험을 가능하게하는 프로세스이며, 프로토 타이핑 도구를 열기 전에 워크 플로를 개선하기 위한 사전 준비의 힘을 과소 평가하지 마십시오. 더 많이 계획할수록 도구 자체에 대한 노력이 줄어 듭니다.

 

 

출처: 아래에 링크를 통해 정확한 본문을 읽을 수 있습니다. 참고하시기 바랍니다.

https://design-nation.icons8.com/the-thinking-behind-micro-interaction-b6e9f7010491

The Thinking Behind Micro-interaction