마이크로 인터랙션: 15가지 예시와 디자인 방법
마이크로 상호작용 설명: 정의, Dan Saffer의 네 부분, 유형별로 그룹화된 15개의 실제 사례, 설계 규칙 및 CSS, Framer Motion, GSAP 또는 ExodeUI에서 구축하는 방법.
핵심 포인트
마이크로 상호작용은 게시물 좋아요, 설정 전환, 양식 확인, 동작 완료 등 한 가지 작업을 수행하는 인터페이스의 작고 포함된 순간입니다. 이 용어와 그 해부학은 네 부분을 정의하는 Dan Saffer에서 나왔습니다. 트리거는 트리거를 시작하고, 규칙은 발생하는 작업을 결정하고, 피드백은 결과를 보여주고, 루프 또는 모드는 시간이 지남에 따라 수행되는 작업을 제어합니다. 좋은 마이크로 인터랙션은 짧고, 사용자의 입력에 응답하며, 방해받지 않는 상태를 유지합니다.
마이크로 인터랙션이란 무엇입니까?
마이크로 인터랙션은 제품에서 가장 작고 완전한 상호 작용으로, 시작, 변경, 끝이 있는 단일 작업입니다. 전체적인 흐름은 아닙니다. 게시물에 좋아요를 누르는 것은 미세한 상호작용입니다. 댓글을 작성하고 게시하는 것은 흐름입니다. 아이디어와 그 구조는 Dan Saffer의 저서 Microinteractions에서 나왔는데, 이 책은 모든 부분을 네 부분으로 나눕니다.
마이크로 인터랙션의 네 가지 부분
Dan Saffer의 프레임워크는 마이크로 상호 작용을 네 가지 구성 요소로 나눕니다. 대부분의 버그와 대부분의 잘못된 동작은 전체가 아닌 네 가지 중 하나에 존재하므로 이름을 지정하는 것이 유용합니다.
방아쇠
시작하는 이벤트입니다. 사용자 시작(탭, 마우스 오버, 길게 누르기, 끌기) 또는 시스템 시작(다운로드 완료, 네트워크 오류 발생). 신용: Dan Saffer.
규칙
시작되면 어떤 일이 발생합니까? 유효한 상태, 드래그 경계 또는 최소값 및 최대값과 같은 제약 조건, 이벤트 순서. 신용: Dan Saffer.
피드백
제품이 사용자에게 무슨 일이 일어났는지 알려주는 방법: 스프링 정착, 색상 변경, 아이콘 변형, 텍스트 업데이트. 이곳은 대부분의 모션 디자인이 존재하는 곳입니다. 신용: Dan Saffer.
루프 및 모드
시간이 지남에 따라 상호 작용이 수행되는 작업과 모드가 이를 어떻게 변경하는지입니다. 동일한 토글은 로직을 변경하지 않고도 다크 모드나 컴팩트 레이아웃에서 다르게 동작할 수 있습니다. 신용: Dan Saffer.
마이크로 상호작용이 중요한 이유
마이크로 인터랙션은 인터페이스가 텍스트 단락 없이 사용자에게 응답하는 방식입니다. 이는 조치가 수신되었음을 확인하고, 무언가가 여전히 작동 중임을 표시하거나, 방금 변경된 사항을 설명합니다. 제품이 없으면 동일한 제품이 더 무겁게 느껴집니다. 사용자는 첫 번째 탭이 도착했다는 사실을 알려주지 않았기 때문에 두 번 탭하거나 진행 상황이 전혀 표시되지 않는 화면에서 기다리게 됩니다. 좋은 것은 눈에 띄는 것보다 더 많이 느껴지는 것이 포인트입니다.
15가지 마이크로 인터랙션 예시
이들은 통신 내용에 따라 그룹화됩니다. ExodeUI가 일치하는 예제를 제공하는 경우 이름이 제공되므로 열고 편집할 수 있습니다.
버튼 및 토글(누름 및 상태)
1. 버튼 누름: 포인터를 아래로 내릴 때 약 0.92로 크기가 조정되고 놓을 때 다시 돌아옵니다(ExodeUI 예: Jelly Button). 2. 토글 스위치: 커밋 시 색상이 변경되는 스프링 기반 번역(Gooey Toggle). 3. 모드 스위치: 표시기를 슬라이드하고 활성 레이블을 변형하는 분할된 컨트롤입니다(모션 스위치).
양식 피드백(검증 및 제출)
4. 잘못된 입력 흔들림: 대화상자 없이 "이 필드를 확인하세요"라고 말하는 짧은 수평 이동(흔들기 텍스트 입력). 5. 제출 진행 중: 버튼이 진행률 표시기가 되므로 사용자는 자신의 위치를 잃지 않습니다(애니메이션 보내기 버튼). 6. 성공 확인: 작업이 시작되면 버튼에 작은 축하 메시지가 표시됩니다(로켓 발사 버튼).
로딩 및 진행
7. 순환 진행: 실제 값을 채우고 스프링(방사형 게이지)으로 고정되는 링입니다. 8. 레벨 또는 활동 측정기: 오디오 레벨(음파)과 같은 수신 데이터에 실시간으로 반응하는 막대입니다.
항해
9. 메뉴 토글: 두 상태 사이를 전환하고 해당 메뉴를 표시하는 아이콘입니다(Morph Nav). 10. 도크 확대: 커서 근처의 항목이 올라가서 커진 다음 고정됩니다(마그네틱 도크). 11. 탭 선택: 깜박이지 않고 탭 사이를 슬라이드하는 표시기(액체 탭 바).
비어 있음 및 성공 상태
12. 빈 상태: 빈 화면을 부드럽게 만들기 위해 한 번에 애니메이션이 나타나는 작은 그림입니다. 13. 보상 공개: 목표 달성 시 기대감을 가지고 열리는 선물 또는 배지(서프라이즈 선물 상자).
당겨서 새로고침
14. 당겨서 새로 고침: 드래그를 추적한 다음 튀어 나와 놓을 때 고정되는 탄성 오버스크롤. 피드백은 스피너가 아니라 스트레칭입니다.
햅틱 스타일 피드백
15. 확인 펄스: 모바일의 햅틱 탭을 미러링하는 요소의 간단한 눈금과 빛으로, 진동 모터가 없는 장치에서도 동일한 동작이 동일하게 느껴집니다.
좋은 상태를 유지하는 설계 규칙
몇 가지 규칙은 도움이 되는 마이크로 상호작용과 짜증나는 상호작용을 구분합니다.
- 짧게 유지하십시오. 대략 200-400ms 내에 가장 완료됩니다. 작은 요소의 긴 동작이 느리게 느껴집니다.
- 입력과 동일한 프레임에서 시작합니다. 지연된 시작은 원인과 결과의 감각을 깨뜨립니다.
- 중단 가능하게 유지: 사용자가 동작 중에 동작을 되돌리면 0에서 다시 시작하는 대신 속도로 리디렉션합니다.
- Respect Prefers-Reduced-Motion: 변경 사항을 계속 전달하는 정적 또는 크로스 페이드 폴백을 제공합니다.
- 하나의 작업을 제공합니다. 상호 작용에 둘 이상의 결정이 필요한 경우 흐름입니다.
마이크로 인터랙션을 구축하는 방법
올바른 도구는 동일한 상호 작용을 실행해야 하는 플랫폼 수에 따라 달라집니다.
CSS 전용
:checked 또는 클래스 변경에 의해 구동되는 호버 리프트, 포커스 링 및 토글과 같은 간단하고 독립적인 경우에 적합합니다. 전환과 @keyframes만으로 충분하며 스타일시트 외에는 제공할 것이 없습니다.
Framer Motion 또는 GSAP(웹)
모션에 스프링, 제스처 또는 오케스트레이션이 필요하고 웹에서만 실행되어야 하는 경우에 적합합니다. 둘 다 중단 가능한 스프링을 제공하며 React 상태로 구동될 수 있습니다.
ExodeUI(하나의 파일에서 웹, iOS 및 Android)
React 앱, SwiftUI 앱 및 Flutter에서 동일한 상호 작용이 동일하게 작동해야 하는 경우 이 기능을 사용하세요. .exode 파일에서 한 번 작성하면 런타임이 각 플랫폼에서 이를 재생하므로 플랫폼별로 다시 작성할 필요가 없습니다.
프로덕션 구현 예시
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}기억할 핵심 원칙
- 마이크로 상호작용은 트리거, 규칙, 피드백, 루프 또는 모드(Dan Saffer가 명명한 네 부분)로 구성된 하나의 작은 작업입니다.
- 대부분의 좋은 작업은 약 200-400ms 내에 완료되고 입력과 동일한 프레임에서 시작하며 중단 가능 상태를 유지합니다.
- 피드백은 작업을 수행하는 것입니다. 피드백은 작업을 확인하고 변경된 사항을 설명하며 종종 텍스트 없이도 설명합니다.
- 모션 없이 동일한 정보를 전달하는 선호-감소-모션 폴백을 항상 제공하세요.