第 18 课：UI/UX 设计协作

第三章：产品开发协作 | 第 18 课

课前思考

一个小团队里可能没有专职设计师。PM 常常需要同时负责产品逻辑和界面设计。AI 时代，设计协作的方式也变了——设计稿可以直接驱动代码生成。

---

一、PM 需要懂多少设计

你不需要成为设计师，但需要掌握：

1. 信息架构：页面之间的层级关系，用户从哪进来、往哪走
2. 交互流程：一个操作需要几步？每一步用户看到什么、做什么
3. 一致性原则：同类功能用同样交互方式，减少学习成本

好的设计标准（PM 视角）：用户 30 秒内找到核心入口、核心操作不超过 3 步、错误提示能告诉用户哪里错了怎么改。

---

二、设计到代码的 AI 管道

有设计稿时：Figma → 截图喂给 AI →「参考这个设计稿生成前端代码」

没有设计稿时：先让 AI 做 3 个风格预览，选一个再继续——不要直接做一个你不确定长什么样的东西。

---

三、与 AI 协作设计的实用技巧

1. 先布局后视觉：「三栏布局，左侧导航 240px，中间自适应，右侧 320px」
2. 给参考：「参考 Notion 的简洁风格」
3. 移动端优先：「先做移动端布局，再做桌面适配」
4. 用组件库：让 AI 用 shadcn/ui、Element Plus 等成熟组件库，不要从零写

---

课后练习

1. 找一个你常用的 App，分析它完成核心操作需要几步
2. 让 AI 帮你生成一个页面原型——先用 Vibe 方式描述，再尝试结构化描述，对比结果差异