UI/UX

1. 理论基础（建立底层逻辑）

• Laws of UX (UX 定律):
• 特点：将复杂的心理学理论简化为 20 条设计原则（如菲茨定律、希克定律）。每个定律都有精美的插图和简洁的解释。
• 适用场景：当你纠结按钮该放哪、菜单该多长时，这里有科学依据。
• 链接：lawsofux.com
• Nielsen Norman Group (NN/g):
• 特点：用户体验界的“圣经”。他们发布了大量的研究报告和文章，涵盖了从导航设计到移动端交互的所有细节。
• 链接：nngroup.com
• Refactoring UI (针对开发者的设计指南):
• 特点：由 Tailwind CSS 的作者编写，专门教开发者如何从程序员视角做出漂亮、好用的界面。虽然完整书收费，但其博客和推特上的技巧分享非常实用。
• 链接：refactoringui.com

2. 大厂设计规范（最实用的组件参考）

学习大厂的 Design System 是掌握交互设计最快的途径，因为它们不仅提供组件，还解释了为什么要这么设计。

• Ant Design (中台设计语言):
• 特点：国内前端（尤其是 React/Vue 开发者）必看。它的“设计原则”部分详细讲解了：确定性、意义感、层级感等。
• 链接：ant.design (设计文档部分)
• Material Design 3 (Google):
• 特点：定义了现代 Web 和 Android 交互的标准，包括动效（Motion）、自适应布局等。
• 链接：m3.material.io
• Human Interface Guidelines (Apple):
• 特点：极致的交互细节和动效规范，适合追求极致 Web 体验的开发者。
• 链接：developer.apple.com/design

3. 灵感与案例（看别人怎么做）

• Mobbin:
• 特点：收录了全球顶级 App 的真实截图和交互流程（Flows）。你可以看到像 Airbnb、Instagram 是如何处理注册、搜索和下单流程的。
• 链接：mobbin.com
• Dribbble / Behance:
• 特点：偏向视觉表现。搜索 "Web Interaction" 或 "Dashboard" 可以看到很多前卫的设计概念。
• 链接：dribbble.com
• Awwwards:
• 特点：展示全球最有创意、交互最酷炫的网站。适合学习高级动效和非线性交互。
• 链接：awwwards.com

4. 前端交互实现（技术落地）

作为前端，了解如何用代码实现这些交互至关重要：

• Framer Motion (React 动效库文档):
• 特点：即使你不使用这个库，它的文档中关于“布局动画”、“手势交互”的解释也非常专业。
• 链接：framer.com/motion
• GSAP (GreenSock):
• 特点：Web 动效界的行业标准，其官网有很多令人惊叹的交互案例和教程。
• 链接：gsap.com

---

给前端开发者的 3 个交互设计建议：

1. 关注“状态”而非“静态”：设计页面时，多想想：**加载中（Loading）**是什么样？**请求失败（Error）**怎么提示？**搜索无结果（Empty）**怎么办？
2. 反馈（Feedback）是核心：用户点击按钮后，必须有即时的视觉反馈（变色、Loading 图标或震动），否则用户会感到迷茫。
3. 无障碍（Accessibility）：这也是交互设计的一部分。确保你的页面可以用键盘操作，颜色对比度足够，这在 CI/CD 监控大屏设计中尤为重要。