入坑助手 - Case Study

一、项目背景与痛点

1.1 问题发现

随着漫威电影宇宙、星球大战等长线IP的不断扩张，影视和游戏系列的作品关系变得错综复杂。在观察用户的实际观影行为时，我发现了一个普遍痛点：入坑门槛过高。

具体表现有三个典型场景：

无从下手：面对几十部甚至上百部的作品列表，新手在决策起点时就已感到疲惫，极易被劝退。
断层焦虑：用户害怕按错误顺序观看，担心看到一半发现漏了关键前作、体验受损或看不懂剧情。
官方顺序的局限：官方通常只提供”上映顺序”或”时间线顺序”两种标准答案，但用户实际需要的是”仅看主线”、“跳过口碑差的”或”按某位UP主推荐”等定制化顺序。

1.2 核心洞察

在对多个IP社群的观察中，我发现了一个关键现象：

对刚入坑的新人来说，他们根本不需要去理解作品间错综复杂的网状关系。他们只想搞懂一件事——“按什么顺序看哪些作品才是最适合我的”。

这个洞察直接决定了产品的设计方向：放弃”关系图谱”这种常见的全貌浏览方案，转而提供清晰的”行动指引”。

1.3 产品定位

基于以上洞察，“入坑助手”被定位为一个UGC驱动的结构化观看指南工具。用户可以：

为自己喜欢的IP创建多条观看路线（如”入坑推荐”、“剧情时间线”、“跳过支线版”）
跟随他人创建的路线，一步步完成观看
记录个人进度和观看笔记

1.4 产品原则

整个设计遵循三条核心原则：

原则	含义
灵活性优于严谨性	不追求展现所有作品关联，而是切实解决”下一步看什么”的问题
概念极简	用户只需要理解【作品】、【组】、【路线】三个概念
软引导而非硬限制	提供依赖提醒，但不阻止用户按自己的意愿标记

二、信息架构：将复杂逻辑收敛为三个概念

为了降低用户的认知负荷，我将底层复杂的逻辑关系收敛为用户只需理解的三个极简概念：

概念	定义	对用户的意义
作品	构成指南的原子单位（一部电影、一季剧集、一款游戏）	“我看的是这个东西”
组	作品的容器。分为”有序组”（如三部曲，带序号）和”无序组”（如平行外传，无序号）	“这几个作品是一起的”
路线	一个指南包含多条路线，每条路线由节点（作品/组）按顺序排列而成	”按照这个顺序看”

这组概念的设计意图是：用户不需要知道为什么某部作品被归入某个组、为什么这个组出现在这个位置——他们只需要跟随路线，消费内容。

三、核心决策一：将”前置依赖”从作品属性移至节点属性

3.1 常规思路的问题

在设计初期，一个看似自然的想法是：把”必看前作”设为【作品】的一个字段。

但这个方案很快暴露出问题——同一个作品在不同语境下，前置条件可能是不同的。

举例：《龙珠Z》和《龙珠改》（原版和重制版）。

在【怀旧路线】中，《龙珠Z》可能是后续作品的前置
在【新玩家路线】中，《龙珠Z》的位置则被《龙珠改》替代

如果把”前置依赖”绑定到作品本身，这个矛盾就无法调和。

此外，该方案还会带来一个隐性问题：作品一旦被赋予前置依赖，即使未被纳入任何路线，也会持续受到限制。 这种“全局硬约束”会显著削弱系统的灵活性。

与此同时，如果将「前置依赖」进一步弱化为纯粹的“建议”，彻底移除“锁定”机制，也会带来新的问题：

一方面，缺乏结构化的顺序提示，会使路线的理解成本显著上升，用户更难把握内容之间的关系；另一方面，也会削弱产品中的“进程感”（sense of progression），降低探索与推进路径时的趣味性。

因此，本方案在“自由”与“引导”之间做出折中： 通过“软锁”提供结构感与目标感，同时避免对用户行为施加硬性限制。

3.2 设计方案

核心决策：前置依赖降级为【路线节点】的属性。

具体实现：

软锁机制：未完成前置的节点显示灰色锁定图标，同时不显示勾选框，这为需要按部就班的用户提供视觉指引。
强制自由：用户只要点击进入作品详情侧拉栏，就可以随时强制标记”已看”，系统不做硬性拦截。
解耦复杂条件：同一个作品在不同路线下可以有完全不同的前置设置，且不污染作品本身的基础数据。

3.3 设计考量

这个决策背后是产品原则的体现：灵活性优于严谨性，软引导而非硬限制。

如果App阻止用户标记”已看”，是在挑战用户的真实认知——现实中不按顺序观看的情况太普遍了（例如被朋友拉去看没看过前作的最新院线电影）。系统应该尊重用户的主体性，同时提供足够的信息支持他们做出知情决策。

四、核心决策二：路线节点的”多态表达”

4.1 现实复杂性

在定义了”路线由节点组成”之后，我发现现实中的观看顺序不是绝对线性的，而是充满各种特例：

有时几部外传可以任意顺序观看（不影响主线理解）
有时某三部曲需要作为一个整体区块连续观看
有时某部OVA需要精确插入在两集TV剧集之间

如果只用单一的”作品A → 作品B”来连线，无法准确传达创作者的意图。

4.2 设计方案

我设计了节点的四种多态表达，让创作者可以根据场景选择合适的形态：

节点形态	结构说明	语义传达	典型场景
纯作品节点	节点为一个单独的作品	最直白的线性顺序表达	标准正传按部就班推进
无序组节点	节点为一个无序组，展开后内无序号	此阶段下可任意顺序观看	多部独立外传、平行短篇
有序组节点	节点为一个有序组，展开后带序号	此阶段下建议严格按序连续观看	某角色三部曲作为整体区块
作品节点+附属	主节点下挂载附属作品，可附带备注	需要精确插入特定时间点的特例	某剧场版需插入在某两集之间

4.3 设计意图

这套模型的核心价值在于：让”顺序”这件事的表达更精确，而不增加用户的认知负担。

对跟随路线的用户来说，他们只需要知道：

看到”无序组”→ 这里面的作品随便看
看到”有序组”→ 按组内的序号看
看到”作品+附属”→ 按备注说明的位置看

五、交互设计：查看模式的三层信息降噪

指南详情页是整个产品的核心使用场景。设计的关键挑战是：如何避免用户在面对庞大IP时认知超载？

我的解决方案是分层设计：将信息按使用频率和场景复杂度分为三个层级，用户按需深入。

5.1 L1 宏观层：Tab导航分离视角

页面顶部设置三个Tab，将三种不同的浏览视角分开：

观看路线：默认视图，聚焦于”下一步看什么”
所有作品：完整作品列表，支持搜索、筛选、排序
所有组：按组浏览，理解整体结构

这种分离的价值在于：默认情况下用户只面对单一焦点（路线），不会被全量信息淹没。

5.2 L2 聚焦层：纵向时间线

当前路线的节点流以纵向时间线形式呈现。这个视图的设计原则是极简：

只显示作品/组的标题和状态图标
状态图标采用极简符号：实心绿点=已完成、蓝色边框=当前、灰色锁=锁定
组节点可展开，展开后显示内部列表
所有复杂信息（关联关系、个人笔记）都被隐藏

5.3 L3 微观层：侧拉面板

当用户点击某个节点时，从右侧滑出详情面板。在这里才集中展示：

作品基本信息
关联作品（续作/外传/前传等用户自定义标签）
进度标记控件
个人笔记输入框

这种设计的逻辑是：用户绝大多数时间只需要看时间线、点”标记完成”。只有在需要额外信息或做特殊操作时，才需要进入L3层。

5.4 路线切换

顶部提供下拉菜单，用户可以在多条路线间切换（如”入坑推荐”、“完整时间线”、“仅主线”），时间线内容实时更新。

每一路线的定位和推荐人群会在切换时做简要说明，帮助用户选择适合自己的路线。

六、验证方法：从低保真到可交互Demo

面对节点多态、状态联动（锁定/部分完成/全部完成）、路线切换等复杂交互，传统的静态高保真设计稿往往难以高效验证体验的真实流畅度。

因此我采用了一种注重效率的验证工作流：

步骤	方法	目的
1	Figma低保真线框	剥离色彩和样式，专注于L1-L3布局和信息层级
2	AI辅助生成代码	将线框+PRD数据规范输入AI，生成Vue组件骨架
3	本地数据构建	用TS文件模拟”节点多态”、“软锁状态”等数据结构
4	云端部署	产出可直接体验的Demo，进行交互验证

这个流程的核心价值是：跳过视觉打磨，快速验证核心交互逻辑是否自洽。

七、总结

洞察驱动设计：放弃关系图谱不是偷懒，而是基于”新人不需要理解关系网，只需要行动指引”这一核心洞察的主动选择。
概念收敛的力量：将复杂逻辑收敛为三个极简概念，降低了用户的认知门槛，也让整个产品的信息架构更加清晰。
灵活性与严谨性的平衡：软锁机制+强制自由的设计，在提供引导的同时保留用户主体性，是对现实用户行为的尊重。
分层设计的价值：L1/L2/L3三层信息架构，让用户按需深入，在大信息量场景中避免了认知超载。