交互设计指南：用户交互模式、动画与可访问性最佳实践

interaction-design by aj-geddes/useful-ai-prompts

156 周安装量

160 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill interaction-design

设计用户体验前端架构

🇨🇳中文介绍

交互设计

概述

交互设计关注用户如何与系统互动，通过反馈和响应能力创造直观且愉悦的体验。

使用场景

设计用户流程和触点
创建动画和过渡效果
定义错误和加载状态
构建微交互
提升可用性和反馈
移动端交互模式

快速开始

最小工作示例：

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

Double Tap:
  Use: Zoom, favorite, select
  Feedback: Immediate visual response
// ... (see reference guides for full implementation)

参考指南

references/ 目录下的详细实现：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

指南	内容
动画与过渡设计	Animation & Transition Design
错误处理与反馈	Error Handling & Feedback
交互中的可访问性	Accessibility in Interactions

🇺🇸English

Interaction Design

Overview
When to Use
Quick Start
Reference Guides
Best Practices

Overview

Interaction design focuses on how users engage with systems, creating intuitive and delightful experiences through feedback and responsiveness.

When to Use

Designing user flows and touchpoints
Creating animations and transitions
Defining error and loading states
Building microinteractions
Improving usability and feedback
Mobile interaction patterns

Quick Start

Minimal working example:

Common Interaction Patterns:

Swipe:
  Use: Mobile lists, carousels
  Feedback: Visual sliding, momentum
  Accessibility: Keyboard alternative (arrows)

Tap & Hold:
  Use: Context menus, drag prep
  Feedback: Visual feedback after delay
  Duration: ~500ms before trigger

Pinch & Zoom:
  Use: Image viewing, maps
  Feedback: Smooth zoom animation
  Boundaries: Set min/max zoom levels

Drag & Drop:
  Use: Reordering, moving items
  Feedback: Visual during drag, drop confirmation
  Fallback: Alternative method (buttons)

Double Tap:
  Use: Zoom, favorite, select
  Feedback: Immediate visual response
// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Animation & Transition Design	Animation & Transition Design
Error Handling & Feedback	Error Handling & Feedback
Accessibility in Interactions	Accessibility in Interactions

Best Practices

✅ DO

Keep animations under 400ms
Provide clear visual feedback
Use animations to guide attention
Respect motion preferences
Make interactions reversible
Test with keyboard and screen readers
Provide multiple interaction methods
Design for touch and mouse
Use appropriate easing curves
Document interaction behavior

❌ DON'T

Animate for decoration only
Use animations longer than 500ms
Ignore motion-sensitive users
Remove focus indicators
Trap users in modals
Use confusing animations
Animate everything
Ignore loading states
Forget error states
Skip accessibility testing

Weekly Installs

113

Repository

aj-geddes/usefu…-prompts

GitHub Stars

121

First Seen

Jan 21, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode96

gemini-cli94

codex91

claude-code88

cursor85

github-copilot78