← 文档中心
Team Roles · 设计团队职能分工 · v0.1
设计团队职能分工
TP-Link US 官网重设计项目里,产品 / 交互 / UI / Visual 四个角色到底各管什么?本页把边界钉死——每个角色对应项目里已有的实际产出,可直接拿去跟团队 / 外包 agency 对齐 deliverable,避免"UI / Visual 一锅炖"。
范围 · tp-link.com/us 消费网络主站重设计
用途 · 团队 / 外包角色边界对齐
日期 · 2026-06-16
一句话各司其职
产品 PM
定 做什么 / 为什么做 · 该不该做、值不值
交互 UX
定 怎么用 · 结构、流程、逻辑顺不顺
UI 界面
定 怎么操作 · 组件、交互、操作手感
Visual 视觉
定 怎么看 · 品牌、美感、视觉表达
01 · 职能矩阵
四角色职能对照
横向四角色,纵向六维度。每个角色的"对应文档站现有页"一列,直接把抽象职责锚到本项目已经存在的产出上——证明这个分工不是纸上谈兵。
| 维度 |
产品 PM |
交互 UX |
UI 设计师 |
Visual 设计师 |
| 一句话职责 |
定 做什么 / 为什么做 |
定 怎么用:结构流程 |
定 怎么操作:界面组件 |
定 怎么看:品牌视觉 |
| 核心交付物 |
项目目标 / KPI需求优先级 PRD功能范围 / roadmap数据洞察 / 竞品策略干系人对齐 |
用户旅程信息架构 IA低保真线框页面类型清单 |
Design System模块系统 MS交互原型控件状态响应式规范 |
品牌 Identity配色 / 字体层级Hero KV(满屏大图)高保真视觉稿产品图风格 |
| 对应文档站现有页 |
项目启动报告 · 项目蓝图 · PRD · 竞品定位 · 数据分析报告 · HomeShield 策略 |
信息架构 IA · 4 条用户旅程 · 当前 sitemap 实测 · site-demo 线框 · 页面类型清单 PT |
模块系统 MS · 扩展钩子 EX · wireframe-pdp · 能力架构 Capability |
品牌纲领 · Identity 完整应用 · demo-home 高保真 · DJI 白皮书(方法论) |
| 核心问题 |
"该不该做?做了值不值?" |
"用户路径顺不顺?卡哪?" |
"界面怎么摆怎么点?" |
"看着够不够高级?" |
| 关注指标 |
转化率 / 续费率 / ROI / 业务目标 |
任务完成率 / 漏斗 / 跳出率 |
一致性 / 可交互性 / 组件复用率 |
品牌调性 / 视觉冲击 / 高级感 |
| 项目阶段 |
全程(最前 + 全程把关) |
前期(定方向定结构) |
中期(骨架变界面) |
中后期(界面上妆) |
02 · 角色详解
逐角色展开
每个角色配一句定位 + 在本项目里的实际落点。
P1
产品 PM / Product
全程在场
定 做什么、为什么做。整条链的上游——立项定目标、排需求优先级、framing 功能范围,然后从立项盯到上线复盘,保证设计不跑偏业务目标。是唯一全程在场的角色。本项目里产品侧文档其实最厚。
本项目落点
Tapo 内容收口方案决策
竞品 / 数据策略
HomeShield 转化目标
范围 / roadmap
P2
交互 UX / Interaction
前期
定 怎么用。把 PM 定下的"做什么"翻译成用户走得通的结构——用户旅程、信息架构、低保真线框。关注的是逻辑和流程:从首页到买 Deco 走几步、Tapo 内容该放哪、搜不到结果怎么引导。
本项目落点
site-demo 10 页线框
IA 信息架构
4 条用户旅程
PDP / 筛选 / 对比流程
P3
UI 设计师
中期
定 怎么操作。把交互定好的线框骨架变成能看能点的界面——组件库、控件状态(hover / active / disabled)、交互原型、响应式断点。微交互动效(按钮反馈 / loading / toast)也归 UI。
本项目落点
模块系统 MS
Design System 骨架
控件状态规范
微交互动效
P4
Visual 设计师
中后期
定 怎么看。给界面"上妆"——品牌视觉语言、配色字体、Hero KV、高保真视觉稿。DJI 式满屏大图 + 滚动叙事这类品牌大动效也归 Visual + 前端,普通 UI 兼不出这个水平。本项目最该独立 / 外包的一岗。
本项目落点
品牌 Identity
DJI 式 Hero 视觉
配色 / 字体层级
品牌叙事动效
03 · 协作链条
实际流转顺序
本项目的真实流转:产品定方向 → 交互搭骨架 → UI 装关节 → Visual 上妆 → 前端落地 → 数据回收 → PM 复盘迭代。
产品 PM
定目标 / KPI
PRD / 需求优先级
范围 / roadmap
竞品 / 数据策略
交互 UX
用户调研
IA + 旅程图
低保真线框
(site-demo)
UI 界面
组件库 / MS
交互原型
控件状态
响应式规范
Visual 视觉
品牌 Identity
Hero KV / 配色
高保真视觉稿
产品图风格
↓ 合并最终设计稿 → 前端 → 上线 → 数据回收 → PM 复盘 ↑
产品全程把关业务目标 —— UX / UI / Visual 各管一段,PM 从立项盯到上线复盘
04 · 边界要点
最容易糊掉的几条线
这几个边界本项目特别要钉死,否则角色一兼就糊。
产品 ✕ 交互
PM 定 要不要做、做哪些页面(业务 + 范围);交互定用户 怎么走到这些页面、信息 怎么组织(结构)。例:Tapo Duplicate Content 那封邮件——选方案 1/2/3 是 PM 决策,但"用户搜不到 Tapo 怎么引导"是 交互的活。
交互 ✕ UI
交互管"PDP 加购流程几步、筛选逻辑顺不顺"(线框层);UI 管"按钮长啥样、点下去什么反馈"(组件层)。site-demo 那 10 页线框 = 交互的活,给它做界面皮肤 = UI 的活。
UI ✕ Visual
两者在 Design System 重叠:UI 搭骨架(组件结构 + 状态 + token 命名),Visual 定皮肤(具体颜色值 / 字体 / 质感)。别让 Visual 只交几张好看的稿就走,组件级规范要 UI 兜。
动效归属
微交互(hover / loading / toast)归 UI;DJI 式满屏大图 + 滚动叙事归 Visual + 前端;动效合不合理、干不干扰流程由 交互(UX) 把关;最终性能由前端兜底。
给本项目的实操判断
- 产品和设计必须分开 —— PM 定方向、设计执行,合并 = 既当裁判又当运动员,最容易自嗨。本项目 PM 侧由 Kevin + Elena(MKT) + Milan 分担。
- 交互 + UI 可以一人兼(Product Designer / UX-UI),但别让交互的活被视觉稿盖过去——前期结构没定好,界面再美也是给错的流程化妆。
- Visual 建议独立或外包 —— DJI 式品牌视觉是另一套技能,普通 UI 兼不出来,这一岗别省。本项目真正的缺口在 Visual + Motion。
- 外包 agency 打包时,要求按本页职能矩阵拆 deliverable,否则"UI / Visual 一锅炖"最后线框逻辑和品牌视觉都不到位。
一句话串四角色:产品定方向,交互搭骨架,UI 装关节,Visual 上妆。 产品管值不值得做,后三个管做得好不好。