# CRM商机详情设计：身份、阶段与待办的分工

原网页：https://www.jvds.cn/share/ui-design/crm-deal-stage-task-result-u098
语言：zh-CN
发布：2026-10-18
作者：界达设计工作室（JVDS）

这组CRM商机详情把很多内容集中在同一个对象下面：负责人、组织、联系人、金额、阶段、笔记与待办都围绕Palo Alto Networks deal展开。颜色与大容器让页面显得活跃，但更有价值的是不同信息的分工。销售人员进入详情后，需要先确认是哪一笔商机，再了解进度，最后处理具体工作；这三层不宜在一个笼统的完成状态里合并。

## 核心结论

- 大标题和人物信息确定商机身份，金额与概率收在独立概览卡里。
- 交易结果、阶段进度与任务完成分处不同位置，表达不同范围的变化。
- 移动端把Status与Workspace拆为标签，压缩后仍保留任务名称和参与人。

## 身份和概览占据不同区域

桌面图用明暗分界展示同一布局：负责人Bruce Banner在标题上方，组织名称和联系人Wendy Darcy位于标题右侧。左下General蓝卡单独承载33,000金额、Hot Deal标签、65%概率和日期，Details再列联系信息。大标题负责对象身份，蓝卡负责快速概览，二者没有把所有文字挤成同一块表格。

右侧上方是Won与Lost两个实色按钮，下面才是阶段条与工作区域。交易结果动作因此与笔记、电话或邮件入口分开。金额很醒目，却不占据每张任务卡；这种安排适合围绕一笔商机持续处理多种工作，读者可以带着清楚的对象进入具体操作。

明暗两侧的卡片、标题与入口位置一致，说明视觉展示重视结构延续。实际主题适配还应核对细线、标签与文本的差异，尤其浅紫区域里的轻字和深色区域里的灰字，不能因为容器轮廓完整就忽略局部阅读。

![明暗对照中的商机大标题、General蓝卡和右侧阶段待办区](https://www.jvds.cn/upload/2026/1008/d187-tp/u098-i1.webp)

身份、概览与工作区域各有位置，结果按钮独立置于顶部。

## 阶段条与待办表达两种进度

阶段条横向排列圆点与色带，下面写36 Days、24 Days、48 Days和0 Days。色带与时间建立了进程感，但图中没有可见的阶段名称。知道停留了多少天，与知道当前处于什么业务阶段，是两种不同信息；圆点附近若补上名称，时间就更容易找到解释对象。

工作区域提供Notes、Activity、Propose Times、Call、Email、Files和Documents一排入口，再进入Focus任务。Clarification of details任务写明跟进电话，下面还有会议类型、人数、30 Minutes时长与参与人。与上面的阶段条相比，任务卡已经把具体工作说得更完整。

在JVDS看来，商机阶段和[待办完成](https://www.jvds.cn/share/ui-design/crm-ui-ux-design)应分别命名：完成一通电话只改变这项工作，阶段推进或赢单应有自己的对象与反馈。这里已经给Check as completed和Won不同位置，可以继续利用这种分工，在动作后明确刚刚完成了什么，并保留记录与必要的撤回方式。

## 移动工作区保留任务的归属

手机上方继续显示负责人和商机名称，Status与Workspace放在同一行，Workspace下有绿色细线。进入工作区后，一排圆形图标代替桌面文字入口，下面仍保留笔记输入与Focus标题。标签分开状态查看和工作处理，避免小屏同时容纳所有概览。

Clarification of details保留电话图标、名称、简短说明以及Wendy Darcy、Bruce Banner参与人。任务完成按钮缩成圆形勾选，更多菜单在旁边。组织任务使用另一种图标和绿色勾选，帮助形成差别；但黑色与绿色勾选究竟分别表示可操作、已完成还是其他状态，仍需要文字或一致规则解释。

桌面的会议类型和时长没有全部留在这张移动卡中，压缩优先保住对象与任务名称是合理的起点。[图标行](https://www.jvds.cn/share/ui-design/product-icon-system-design)若缺少文字，可以通过可见标签、辅助说明或进入后的标题补充含义，确保用户在外出时也能确认正在记录哪一种活动。

![手机Workspace标签下的Focus电话任务与参与人](https://www.jvds.cn/upload/2026/1008/d187-tp/u098-i2.webp)

移动压缩保留任务身份，完成状态仍需可理解的名称。

## 常见问题

### 移动端任务卡应该保留哪些内容？

优先保留任务名称、所处商机、参与人或负责人，以及当前状态和主要动作。时长等细项可以在任务详情查看，但压缩后不能让完成按钮失去对象。

## 设计检查清单

- 给阶段圆点命名，把天数与具体阶段对应。
- 区分任务完成、阶段推进和交易结果的动作与反馈。
- 核对移动图标和勾选状态的含义，保证对象归属清楚。

## 梳理销售工作台的对象与状态

如果CRM详情需要容纳商机概览、跟进任务和移动记录，界达设计工作室（JVDS）可协助进行UI/UX设计与网站开发，明确各层信息和操作范围。

可以从现有销售流程出发，讨论阶段命名、待办卡片与完成反馈的对应关系。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)