活动页面的状态设计与业务逻辑如何完美匹配？本文通过一张AI生成的原型图，深度解析活动状态、报名流程与按钮设计的关联逻辑。从色块搭配到文案表达，揭示产品设计中容易被忽视的数据视角与用户行为映射关系，助你避开常见的交互陷阱。

本篇文章是笔者对工作实践中所遇到的问题的思考，并相信此问题是任意阶段的产品经理都会遇到的问题。

您将收获：

从页面状态、按钮色块、文案文字深入思考代码逻辑的思路，揣摩预设业务逻辑的思路，扩展思考常见现实活动与系统设计的匹配度，即系统符合实际需求。

从一张图开始，下图是利用AI生成的一张活动列表原型图的部分，接下来，将围绕这张参考图开始分析，剖析可能的实际业务活动以及发现一点可能不合理的设计。

图中两条活动展示了很多信息，提取信息以及问题

关注信息如下：

• 每条活动左上角，显示活动阶段状态，文案-色块：即将开始-橘色；已结束-红色。
• 每条活动右上角，显示报名阶段状态，文案-色值：未开始-橘色；已结束-红色。
• 每条活动右下角，显示操作按钮，按钮文案-色块：报名详情-蓝色；查看回顾-蓝色；立即报名-绿色；报名已结束-灰色；报名已结束-灰色。

问题如下：

每条活动右上角，显示“已结束-灰色”“活动完成-灰色”是什么意思？

分析：“活动完成”指用户参与了活动？如何判定？业务是什么？（我们从预测角度，后续分析先忽略此信息）

分析拆解信息：

活动业务有报名阶段和活动开展阶段。

• 推测业务：创建活动时，设置活动开展时段、活动报名时段，活动报名结束时间不大于互动开展时间，活动报名开始时间最早不小于活动发布时间。
• 活动状态：未开始，已开始，已结束
• 报名状态：未开始，已开始，已结束

分析两个状态组合下的页面信息展示：

分析上述表格标注的几个不合理之处。

点（1）：报名未开始，用户不可以报名，没有产生报名数据，按钮“报名详情-蓝色”是否该出现？

点（2）：活动已开始或已结束，按“报名阶段必在活动开始时间”前的业务规则，此两种活动状态下，不存在数据的报名状态是“未开始、已开始”。

从上述两点，分析得出需要引入一个数据视角，用户报名状态，“未报名、已报名”。

设计更改思路：

更改状态标记更清晰的文案。活动标记文案前加“活动”，报名标记文案前加“报名”。

“不合理”标记不体现在系统界面。

删除标记，“报名已结束”可以不显示，强业务用户关心在系统中能做什么和不能做什么，即功能按钮，实际状态值可以合理忽略。

加入报名状态数据视角，控制操作按钮。立即报名-绿色，报名详情-蓝色，查看回顾-蓝色。

设想加入业务逻辑——报名审核流程

分析：

①已报名状态下，报名审核状态“待审核、已审核”；审核结果状态“审核通过、审核不通过”。

如果显示审核结果状态，必然是“已审核”，报名审核状态可以为“待审核、审核通过、审核不通过”。

②同理，显示报名审核状态，必然是“已报名”，是否报名状态可以为“未报名、待审核、审核通过、审核不通过”。

根据上述列表重新说明功能、按钮、文案设计，同时更新各状态。

换个视角对上述列表进行解释

综合上述分析过程，原型页面的状态显示、按钮、文案和文案颜色值等，均对应数据库中唯一数据值组合。

多数情况下，业务方不会去明确每个数据值组合的效果。常见情况是对现成原型页面的显示和状态提出一两点想法，或对必要的业务需求进行说明。就产品经理而言，初期对系统功能包括界面显示等做简化能够减少开发任务，也能一定程度减少系统bug，但需要注意在功能层面需要与业务沟通清楚并有需求确认记录等。