Chưa có tác phẩm nào gắn tag này.
Khi bạn pull-to-refresh trên Instagram và logo bounce playfully; khi bạn swipe Tinder card và nó tilt + fade theo finger; khi heart button trên app fill từ trong ra ngoài kèm haptic — đó là Interaction Designer.
Trong khi UI Designer design what it looks like, Interaction Designer design how it feels khi bạn touch. Họ là cầu nối giữa Visual Designer và Engineer — define micro-interaction, animation, transition, gesture response → tạo nên cảm giác "the app feels alive".
Interaction Designer là chuyên gia thiết kế cách người dùng tương tác với digital product — animation, transition, micro-interaction, gesture, response, góp ý. Phân loại theo focus: (1) Micro-interaction designer — small interaction (button hover, toggle, like animation); (2) Motion + transition designer — page transition, screen choreography, navigation flow; (3) Gestural interaction designer — touch gesture (swipe, pinch, drag), beyond-screen (VR, AR, voice); (4) Game UX / interactive designer — game interaction, immersive media; (5) Conversational designer — voice + chatbot interaction. Specialization growing với new platform (AR/VR, voice UI).
Khác với UI Designer (visual layer + layout) — Interaction Designer behavior layer. Khác với UX Designer general (flow + research) — Interaction Designer micro level (per-component). Khác với Motion Designer (broader motion) — Interaction tied to interactivity specifically. Khác với Animator (story animation) — Interaction functional animation. Hợp tác chặt với: UI Designer, UX Researcher, Frontend Engineer, Motion Designer, Product Manager.
Interaction Designer — cầu nối visual + engineering
Interaction Designer join sau UI Designer (static design done), trước Engineer (implementation). Báo cáo Design Lead / Head of Design. Phối hợp với UI Designer (visual context), Engineer (technical feasibility — animation perform smooth?), Product Manager (priority + scope). Quy trình: review static design → identify interaction point → prototype → review với team → spec animation cho engineer → QA implementation. Project: 2-4 tuần for feature; ongoing trong product team.
Review static UI design. Identify interaction point: button press, scroll, swipe, tap, hover, drag, pull-to-refresh, modal open/close, page transition. Decide: what behavior cho mỗi point? Goal: góp ý (user know action register), continuity (smooth state change), delight (small joy). Reference: Material Design Motion guideline, iOS Human Interface Guideline, examples database (UX Archive, Mobbin).
Identify + plan
Build prototype trong tool: Figma (basic prototype + Smart Animate), ProtoPie (advanced + sensor + variable), Principle, Framer (production-level + code), After Effects (high-fidelity for showcase). Test feel on device — animation feel different on phone vs desktop. Iterate timing + easing curve until "right".
ProtoPie prototype
Figma Smart Animate
Engineer cần spec precise. Provide: timing (duration ms), easing curve (cubic-bezier, spring physics), property animated (transform, opacity, color), trigger (on tap, on scroll, on state change), state diagram (initial → hover → active → done). Công cụ: Lottie (After Effects → JSON for code), Rive (interactive animation), Framer Motion (React library specs).
Spec cho engineer
After engineer implement, review built feature. Animation match spec? Performance smooth (60fps)? Feel match prototype? Address issue qua tickets. Iterate based on user góp ý + analytic (animation that delays user might harm metric). Document patterns trong design system for reuse.
QA + iterate
Foundation. Disney 12 principle of animation apply tới UI motion (anticipation, follow-through, ease). Study: "The Illusion of Life", Material Design Motion guideline, Apple HIG Motion section, Val Head's "Designing Interface Animation".
Figma + Smart Animate — basic interaction trong design tool itself. ProtoPie — advanced prototype với sensor + variable (industry favorite). After Effects + Lottie — high-fidelity animation cho production. Rive — interactive animation editable trong runtime. Framer — code-based with React. Principle (Mac) — quick interaction.
Difference giữa "feels great" và "feels off" usually là 50-100ms timing hoặc easing curve. Train ear (eye?). Practice: re-create animation từ app bạn admire — observe timing. Standard: 200-300ms for major transition, 100-150ms for micro. Easing: ease-out for entering, ease-in for exiting, spring for natural feel.
Interaction = state machine. Initial → hover → active → loading → success → error. Map all state + transition. Edge case: what if data slow? what if error? what if user interrupt mid-animation? System thinking required.
Hiểu CSS transform, transition, animation, keyframe. Hiểu JavaScript animation library: Framer Motion, GSAP, Lottie. Code basics let bạn communicate effectively với engineer + prototype với code. Bonus: build own interactive prototype trong React.
Animation phải serve UX goal, không decoration. Hiểu: animation có thể slow down perceived performance — cần balance. Test với user — what feels natural vs distracting. Don't over-animate.
Nền tảng: UX/UI Design, Motion Graphics, Interaction Design. VN: RMIT Digital Design, FPT Arena, Arena Multimedia. Quốc tế: SCAD Interactive Design, CMU HCI, Copenhagen Institute of Interaction Design, Royal College of Art Design Interactions. Thêm: online course (DesignLab, Interaction Design Foundation).
Many Interaction Designer start as UI Designer. Develop motion skill side-by-side. Build portfolio of interactive prototypes. Share on Twitter, Dribbble, Mobbin community.
2-4 năm — formal interaction role. VN: top tech (VNG, Tiki, Momo, Shopee, Zalo, VPBank tech, Techcombank Digital) — start having dedicated interaction designer. Quốc tế: Apple, Google, Meta, Microsoft — strong motion team. Tasks: contribute to design system motion language, support UI team.
4-7 năm — own complex interaction. Define product-wide motion language. Spec animation cho engineer. Mentor junior. Lead motion within feature team.
7-12 năm — Principal Interaction Designer / Motion Lead. Cross-product motion strategy. Influence design system. Spec for AR/VR / immersive product.
Lộ trình dài hạn: (1) Principal Interaction Designer tại major tech (Apple, Google); (2) Head of Motion Design / Design Engineering Lead; (3) Independent consultant — high-rate niche; (4) AR/VR Interaction Designer — emerging high-demand (Meta Reality Labs, Apple Vision Pro team); (5) Creative Technologist — interactive installation, exhibit; (6) Educator + content creator. Lương: VN Interaction Designer mid 25M-60M/tháng; senior 60M-130M; principal 130M-200M+. Quốc tế: $90K-$140K mid; $140K-$220K senior; Principal $220K-$350K+. Apple + Meta pay top. High demand + growing với new platform.