미세 상호 작용 및 피드백
1) 미세 상호 작용이란 무엇입니까
미세 상호 작용은 시스템이 사용자의 의견을 듣고 결과를 향해 나아가고 있음을 확인하는 짧은 신호 인 응답주기입니다.
클래식 4:1. 트리거 (클릭, 스 와이프, 초점, 시스템 이벤트).
2. 규칙 (변경 사항 및 방법).
3. Fidbeck (비주얼/사운드/촉각/텍스트).
4. 루프/메타 규칙 (반복, 만료, 실행 취소/재실행).
목표는 과제를 방해하지 않고 불확실성과인지 부하를 줄이는 것입니다.
2) 디자인 원칙
의미> 효과. 그 효과는 "무슨 일이 있었는지" 와 "다음 단계" 를 설명합니다.
직감성. 첫 번째 응답은 100 ms (버튼/스위치) 입니다.
모호하지 않습니다. 구별 할 수있는 상태: 호버/포커스/프레스/비활성화/로딩.
저축. 최소 속성, 짧은 시간, 불꽃 놀이 없음.
일관성. 동일한 동작이 동일한 신호입니다.
접근성. Fidbek은 스크린 리더가보고 듣고 읽습니다. 모션/사운드에 대한 대안이 있습니다.
3) 타이밍과 곡선
호버/포커스: 120-180ms
프레스/토글: 80-120
토스트/툴팁: 입력 180-240ms, 출력 120-160ms
인라인 유효성 검사: 필드 초점 손실 후 약 100ms
기본 곡선은 '입방-베지어 (0. 2, 0, 0. 2, 1)`; 압축-가속 '입방-베지에 (0. 4, 0, 1, 1)`.
4) 미세 상호 작용 카탈로그
4. 1 단추 및 스위치
즉각적인 응답: 네트워크에서 쿼리 할 때 시각적 클릭/입력 + 바쁜 상태.
낙관적 인 업데이트: UI를 즉시 변경하고 오류를 롤백하십시오 (실행 취소).
더블 클릭 토론 :/타임 아웃에 응답 할 때까지 반복을 차단하십시오.
4. 양식의 인라인 검증 2 개
흐림 필드에 대한 검증; 메시지는 짧고 건설적입니다 ("최소 8 자").
상태 아이콘 + 색상 + 텍스트 (하나의 색상이 아님).
암호의 경우 "강도" 의 즉각적인 표시기 (입력을 방해하지 않음) 입니다.
4. 토스트/배너/간식 3 개
비 차단 확인에 사용하십시오.
2-5 초 동안, 호버/초점에서 일시 정지, 적절한 경우 실행 취소 버튼.
중요한 콘텐츠와 CTA를 종료하지 마십시오.
4. 4 진행 및 골격
프로세스 길이가 알려진 경우 진행 상황 표시 줄입니다. 그렇지 않은 경우 스피너 대신 골격.
레이아웃 점프 없음: 수정. 블록 높이.
4. 배지/카운터 5 개
Digit 콘트라스트 이상 4입니다. 5:1; 잘림 '99 +' 로 최대 99/999.
증가 애니메이션-" 떨리는 "레이아웃없이 40-60ms 배치의 짧은 단계.
4. 6 툴팁/도움말
호버/포커스에 의한 모양; 'aria-describedby' 를 통한 접근성.
툴팁에서만 중요한 정보를 금지합니다.
5) 오류, 빈 상태, 실행 취소
오류: 정직한 텍스트, 이유와 동작에 대한 설명 ("반복", "카드 변경").
빈 상태: 그것이 무엇이며 시작하는 방법; 그림 음소거, 텍스트 대비 AA/AAA.
실행 취소 창: 가역 조치의 경우 5-10 초 (제거, 총알 전에 베팅 취소).
6) 복합 모달 피드백
소리: 이벤트 유형 당 조용하고 짧으며 하나의 패턴 (성공/오류/주의); 설정을 끄십시오.
Vibro/haptika: 쉬운 보도 응답/성공; '선호 감소 모션' 및 시스템 제한을 존중하십시오.
비주얼: '변환/불투명도', 배열에 큰 흐림/그림자 없음.
7) 가용성 (A11y)
': 키보드 용 초점 표시'; 흐릿하지 않은 포커스 링.
화면 보호기: 토스트에 대한 'role = "상태 "/" 경고"'; 살아있는 지역 'aria-live = "polite/surgative"'.
사운드/모션에 대한 대안; '감소 운동 선호: 감소'.
텍스트 및 아이콘 대비 - WCAG (일반 5:1).
8) 성능
해당 네트워크에 시각적으로 응답하십시오.
애니메이션 '변환/불투명도'; 여러 요소에서 '높이/왼쪽/상자 그림자' 를 피하십시오.
네트워크 효과-프리 페치 및 낙관론; retrai는 demmpotent입니다.
9) 미세 상호 작용 토큰 (디자인 시스템)
json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast": { "timeoutMs": 3500, "pauseOnHover": true },
"badge": { "max": 99, "emphasisStepMs": 50 }
}
}10) 구현 스 니펫
호버 및 실행 취소 일시 정지 토스트:html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>js const rules = { password: v => v.length>=8 "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }11) 측정 및 품질 관리
INP p75 <200 ms, 긴 작업은 <5% 를 공유합니다.
첫 번째 사용자 피드백 klik → vizualnyy
UX 설문 조사: 오류 메시지 명확성, 확인 가시성.
QA 체크리스트
- 각 대화식에는 '압축/바쁜/비활성화' 가 있습니다.
- 오류에는 텍스트 및 작업 (재시도/실행 취소) 이 수반됩니다.
- 토스트는 SR에서 사용할 수 있으며 키 컨텐츠와 겹치지 않습니다.
- 인라인 검증은 입력을 방해하지 않습니다. 메시지는 구체적입니다
- '감소 운동 선호' 지원; 소리/진동이 꺼졌습니다.
- 레이아웃과 스트로브 점프가 없습니다. '변환/불투명도' 에 대한 애니메이션.
12) iGaming의 세부 사항
내기/구매: 즉각적인 '프레스 → 바쁜', 실행 취소 된 "허용 된" 토스트 (규정이 허용되는 경우), demempotent 키; 지연> 1 초- "확인을 기다리는 중"...
스핀/공개: 짧은 프레스 피드백, 끝없는 깜박임없이 부드러운 시작/중지; 승리-버스트 확장 500ms + 읽을 수있는 텍스트 (AAA).
라이브 계수: 배치로 업데이트, "점프" 없이 시각적 diff (화살표/두께).
지불/결론: 단계별 진행 (KUS → Proverka → Vyplata), 거부 사유에 대한 투명한 텍스트.
책임있는 플레이: 방해 효과가없는 알림; 더 높은 대비, 명시 적 "제한" CTA.
13) 반 패턴
클릭에 대한 응답을 표시하기 전에 네트워크 응답을 기다리십시오.
"모양이없는 색": 상태는 그늘에서만 다릅니다.
끝없는 맥동/깜박임, 스위치없이 날카로운 소리.
키보드에서 중요한 컨텐츠를 사용할 수없는 툴팁.
진행 상황/골격없이 공극> 1-2 초에 회전합니다.
수백 가지 요소에 얇은 그림자/흐림 (약한 장치의 지연).
14) 설계 시스템의 문서
"마이크로 토큰": '지속/완화', 토스트/배지/유효성 검사기의 사전 설정.
"패턴": 버튼, 모양, 토스트, 진행 상황, 인라인 오류, 실행 취소.
"A11y & Motion": SR/HC/감소 운동 규칙; ARIA 예.
"Do/Do n 't": 타이밍이있는 짧은 클립, INP/First Feedback 번호.
간략한 요약
마이크로 상호 작용은 자신감의 언어입니다. 100ms로 응답하고, 이해할 수있는 상태를 캡처하고, 안전한 롤백으로 낙관적으로 사용하고, 색상과 애니메이션 조명 속성에만 의존하지 마십시오. 가용성과 성능을 존중하십시오. 특히 실시간 시나리오에서 제품은 살아 있고 정직하며 신뢰할 수 있습니다.