모바일 앱 디자인의 미세한 상호 작용 이해하기

사용성은 다음의 주요 구성 요소 중 하나입니다. 모바일 UI 디자인. 훌륭한 유용성은 종종 미세 상호 작용 이들은 인터페이스에서 작은 응답 및 동작 UI를 사용해야하는 방법을 지정합니다. 이러한 미세 상호 작용은 행동을 정의하고 참여를 유도하며 사용자가 인터페이스의 작동 방식을 시각화하는 데 도움을줍니다..

디지털 인터페이스 사용자와 원하는 목표 사이의 중개자입니다. 인터페이스 디자이너는 사용자를 돕는 경험을 제공합니다. 특정 업무를 수행하다. 예를 들어 할 일 목록 응용 프로그램에는 사용자가 작업을 구성하는 데 도움이되는 인터페이스가 있습니다. 페이스 북 앱처럼 사용자는 페이스 북 계정과 상호 작용할 수있는 인터페이스를 제공한다..

이 가이드에서는 모바일 앱을위한 미세 상호 작용. 작은 상호 작용은 사소한 것처럼 보일 수 있지만 엄청난 충격 사용자 경험의 품질 마이크로 상호 작용은 제대로 완료되면 가장 중요한 모바일 사용자 경험의 진정한 부분이라고 느낍니다..

미세 상호 작용의 힘

대부분의 경우에 마이크로 상호 작용의 목표는 피드백을 제공하다 사용자의 작업에 따라 사용자에게 도움이 될 수 있습니다. 인터페이스가 움직이거나 움직이는 방식을 시각화한다., 순전히 평면 스크린에 디지털로 표시 되더라도.

미세 상호 작용은 힘이 있습니다. 환상적인 경험을 창조하다.. 켜기 / 끄기 슬라이더는 실제 스위치처럼 움직이지 않지만 애니메이션을 통해 이러한 방식으로 움직일 수 있습니다..

이 게시물에서 모바일 앱의 미세 상호 작용에 대한 엄청난 가치에 대해 논의한 놀라운 견적을 발견했습니다.

“최고의 제품은 기능과 세부 사항의 두 가지를 잘 수행합니다. 기능은 사람들을 제품으로 끌어들이는 것입니다. 세부 사항은 거기에 그들을 유지하는 것입니다. 그리고 세부 사항은 실제로 우리의 앱이 경쟁에서 눈에 띄는 것입니다..”

그만큼 작은 세부 사항들 개발 관점에서는 중요하지 않지만 사용자 경험 관점에서는 진정으로 변화를 만들다 OK 앱 UI와 특별한 앱 UI 간의 차이점.

훌륭한 상호 작용으로 사용자가 보상을 받다. 행동을 취하기 위해서. 이러한 행동은 반복 된 과 사용자 행동에 뿌리깊은. 이 작은 상호 작용을 기반으로 응용 프로그램을 사용하는 방법을 배울 수 있습니다. 사용자가 행동을 수행하면 이러한 작은 상호 작용이 "예, 나와 상호 작용할 수 있습니다!"라는 신호를 보냅니다.

Google의 소재 디자인 사양에있는 예를 살펴보십시오. 이 문서에는 실제로 재료 모션 전용 섹션이 있습니다.. 공간 관계 이 방정식의 큰 부분이지만 모션은 단순한 공간 관계 이상을 요구할 수 있습니다..

여기있다. 애니메이션과 모션의 가장 일반적인 용도 모바일 UI / UX 디자인 :

• 다른 페이지간에 사용자 안내
• 특정 행동을 가르치기 위해 인터페이스를 통해 사용자 안내
• 특정 페이지에서 취할 수있는 행동 / 행동 제안

모바일 앱 보유 훨씬 적은 화면 공간 웹 사이트보다. 이는 사용자에게 앱 사용 방법을 가르치는 데 어려움을 줄 수 있습니다. 그러나 마이크로 상호 작용을 올바르게 구현하는 방법을 알고 있다면 놀라 울 정도로 간단 할 수 있습니다..

미세 상호 작용의 작동 방식

단일 마이크로 인터랙션은 사용자가 인터페이스의 한 부분에 참여할 때마다 시작됩니다. 대부분의 미세 상호 작용은 사용자의 제스처에 대한 애니메이션 응답. 따라서 스 와이프 동작은 탭 또는 플릭과 다르게 반응합니다..

Blink UX는 미세 상호 작용에 대한 사소한 세부 사항을 논의하는 훌륭한 글을 올렸습니다. 이러한 작은 애니메이션은 예측 가능한 프로세스 사용자가 배울 수있는 애플리케이션의 모든 상호 작용에 대해.

Microinteraction은 사용자 인터페이스를 통해 사용자를 안내합니다. 행동에 대한 응답 제공. 사용자가 on / off 슬라이더를 움직일 수 있다는 것을 알게되면 대화식임을 알게됩니다. 응답을 바탕으로 설정이 켜지거나 꺼져 있는지 여부도 알 수 있습니다. 단추를 클릭하면 사용자를 클릭 할 수있는 것처럼 보입니다. 본능적으로 알고있다. 그들은 그것과 상호 작용할 수있다..

UXPin에 따르면, 모든 기본적인 상호 작용은 네 단계로 나눌 수 있지만, 3 단계.

1. 동작 - 그만큼 사용자가 뭔가를한다. 톡, 스 와이프, 탭 앤 홀드 또는 다른 상호 작용.
2. 반응 - 그만큼 인터페이스가 응답 함 일어날 필요가있는 것을 기반으로합니다. 화면을 스 와이프하면 브라우저 기록에서 뒤로 이동하거나 켜기 / 끄기 슬라이더를 두드리면 설정이 꺼질 수 있습니다..
3. 피드백 - 이것이 바로 사용자가 실제로 본 상호 작용의 결과로 사용자가 모바일 브라우저에서 다시 스 와이프하면 이전 페이지가 화면의 맨 위에 표시 될 수 있습니다. 화면에 압력이 가해지면 켜기 / 끄기 슬라이더가 부드럽게 미끄러지거나 커질 수 있습니다..

이러한 매우 작은 동작은 애니메이션없이 수행 할 수 있지만 큰 미세 상호 작용은 현실감 평평한 디지털 인터페이스로, 대부분은 현실적인 애니메이션 효과. 이것들은 인터페이스에 생명을 불어 넣어 사용자 상호 작용을 촉진합니다..

세부 사항을 찾으십시오.

디자인의 더 작은 부분을 보면 앱이 특정 행동에 어떻게 반응해야 하는지를 이해할 수 있습니다.

당겨 새로 고침 지금 인기있는 미세 상호 작용의 좋은 예입니다. iOS를 처음 시작했을 때 iOS의 필수 요소는 아니었지만 많은 앱이이 아이디어를 취하여이를 사용하기 시작했습니다. 이제 새로 고침은 대부분의 사용자가 피드 UI를 탐색 할 때 사용하는 것으로 잘 알려진 동작입니다. 격렬하게 인기를 얻은 모바일 햄버거 메뉴에 대해서도 마찬가지입니다..

모든 미세한 상호 작용 만들기 현실적이고 단순한. 할 수 있기 때문에 애니메이션을 과장하지 마십시오. 지루해지다. 너무 상세해서 자주 사용하면됩니다. 사용자가 메뉴 아이콘을 누를 때마다 반짝임이 나타나기를 원하지 않습니다.. 균형을 무너 뜨려 의사 소통을위한 진정한 가치 인터페이스가 작동하는 방법 선외에 가지 않고.

몇 가지 예보기

나는 뭔가를 배우는 가장 좋은 방법은 그것을하는 것이라고 생각하며, 차선책은 다른 사람들의 연구를 연구하는 것입니다. 나는 소수의 UI / UX 미세 상호 작용 애니메이션 재능있는 Dribbble 사용자가 실제 모형에서 어떻게 보이는지 보여줍니다..

모든 응용 프로그램은 응용 프로그램이 무엇을 기반으로 다른 다를 필요가 있습니다. 결국 대부분의 사용자는 같은 것을 원합니다. 직관적 인 과 양질의 사용자 경험을 제공합니다. 사용자 행동과 관련된 미세 상호 작용.

1. 애니메이션 이벤트 앱 UI

첫 번째 예제는 Ivan Martynenko가 만든 멋진 카드 애니메이션 기능입니다. 너 알게 되겠지. 소수의 미세 상호 작용 이 디자인에서는 특히 카드를 스 와이프하여 세부 정보를 이동합니다..

카드를 두 드릴 때 크기가 커집니다. 구독 단추를 누르면 사용자의 프로필 사진이 구독자 목록으로 슬라이드됩니다. 모든 것이 매우 직관적이며 인터페이스에 자연 스럽습니다..

2. 인터랙티브 운동 화면

이 창조적 인 운동 운동 애니메이션은 디자이너 Vitaly Rubtsov가 제작했습니다. 그것은 한 세트의 스쿼트에 대한 운동을 저장하는 사용자를 데모합니다..

각 애니메이션이 같음을 알림 탄성 바운스 효과 메뉴가 열리면 닫힙니다. 활동이 '완료'로 선택되어있는 경우에도 마찬가지입니다.. 일관성 모두가 느껴야하기 때문에 상호 작용이 중요합니다. 동일한 인터페이스에 연결됨.

3. 앱 상호 작용 검색

짧고, 달콤하고, 요점. 필자는 Lukas Horak이 디자인 한 이러한 검색 앱 미세 상호 작용에 대해 가장 잘 설명한다고 생각합니다. 모든 애니메이션은 빠르지 만 여전히 눈에 띄는.

이것은 상호 작용을 디자인하는 방법입니다. 지나친 복잡성을 피한다.. 인터페이스가 애니메이션없이 더 빨리로드되는 경우 왜 추가해야합니까?? 빠른 애니메이션 경험을 망치지 않고 계속 움직 이도록한다..

4. 피트니스 목표 미세 상호 작용

내 생각에 Jakub Antalá? ÂÂÂÂ-k는 그의 피트 니스 목표 인 microinteraction을 가진 공원에서 실제로 이걸 쳤다. 화면에는 모두 jiggly jell-o라는 느낌이 들었습니다. 모양이 너무 유동적으로 움직입니다..

그러나 인터페이스도 느낀다. 견고하고 사용하기 쉬운. 그것은 목적으로 만들어진 미세 상호 작용이 여전히 재미 있고 재미 있지만 기능적이며 실용적 일 수 있음을 보여줍니다.

5. 당겨 애니메이션 새로 고침

Ramotion에서 팀이 제작 한 절대적으로 가장 좋아하는 애니메이션입니다. 이것은뿐만 아니라 유체를 모방하다 끌어 오기 동작이 있지만 응답 애니메이션은 부드럽게 연결하다 액체의 스플래시에서 적재 원으로.

이 세부 사항에 많은 관심 모바일 앱 미세 상호 작용에서 진정한 아름다움을 이끌어내는 것은 무엇입니까?.

6. 탭 미세 상호 작용

탭 위젯 화면이 작기 때문에 모바일 앱의 경우 매우 일반적입니다. John Noussis가 만든이 미세 상호 작용이 정말 마음에 듭니다. 더 빠른 속도에서 더 효과적 일 것이라고 생각하지만 애니메이션 자체는 영광스럽고 잘 고안되었습니다..

탭 앵커 화살표는 새 콘텐츠가 오른쪽에서 튀어 오르는 것처럼 오른쪽으로 글라이딩됩니다. 그것은 환상의 환상을 준다. 물리적으로 움직이는 전체 화면 오른쪽으로. 애니메이션은 절묘하지만, 너무 느리기 때문에 대부분의 사용자는 며칠 후 짜증이 날 것입니다..

7. 애니메이션 미리로드

나는별로 말하지 않았다. 로딩 바 이 글에서는 전반적인 경험과 마찬가지로 가치가 있습니다. 대부분의 사용자는 데이터가로드 될 때까지 기다릴 필요가 없지만로드되는 동안 빈 화면을 응시하고 싶지는 않습니다..

Bret Kurtz는 재미 있고 유익한이 놀라운 미리로드 된 화면을 만들었습니다. 사용자는 실제로있을 수 있습니다. 즐겁게 한 이 작은 애니메이션을 반복해서 보면서. 그들은 또한 안심시키다 신청서가 여전히 데이터를로드 중입니다. 그리고 추락하지 않았다..

마무리

이 모든 사례는 미세 상호 작용의 가치를 훌륭하게 입증합니다. 모바일 응용 프로그램은 사용자가 물리적으로 화면을 터치 그들의 손가락으로. 사용자는 데스크톱 모니터 나 랩톱 화면을 탭하지 않지만 모두가 스마트 폰을 사용합니다. 상호 작용의 기본 상태.

그것은 훨씬 더 개인적인 경험, 이것이 모바일 앱 디자인이 그러한 이유 일 수있는 이유입니다. 뉘앙스가있는 과정. 제대로 실행되면 훌륭한 모바일 상호 작용이 추가되어 강력한 환상적인 사용자 경험 픽셀과 움직임 만 빼고.