入坑助手 - Case Study

一、项目背景与痛点

1.1 问题发现

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

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

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

1.2 核心洞察

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

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

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

1.3 产品定位

基于以上洞察，“入坑助手”被定位为一个UGC驱动的结构化观看指南工具。产品涵盖两个核心角色与使用场景：

创作侧——用户可以：

为自己喜欢的IP创建完整指南：搭建作品库、分组归类、编排多条观看路线、维护作品间的关联关系
通过JSON导入/导出实现数据迁移，发布给他人使用或备份继续编辑

消费侧——用户可以：

跟随他人创建的路线，一步步完成观看
记录个人进度和观看笔记

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 路线切换

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

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

六、创作模式：从消费到生产

消费侧验证完成后，产品自然延伸到一个关键问题：路线从何而来？

如果路线只能由我作为设计者手动录入，那”UGC驱动”的定位就难以成立。因此，我围绕如何让爱好者为自己的心头好创建结构化指南这一命题，设计了创作模式。

6.1 创作工作流

我将创作过程解构为五个功能域，用户在顶部Tab间自由切换，没有严格的先后顺序：

步骤	功能域	用户操作
1	指南设置	修改标题、简介、封面、作者署名
2	作品库管理	添加作品条目，填写类型、发行时间、集数、时长、简介
3	分组管理	将作品归入有序组或无序组，随时增删、调整组内顺序
4	路线搭建	以时间线视图将作品/组按顺序排列，支持拖拽、备注、前置依赖、附属作品
5	作品关联	标注作品间的续作/前传/重制/外传关系，建立有向关系网

这种松耦合的工作流设计降低了创作的心理门槛——不需要一次完成所有事情，可以随时迭代编辑。

6.2 本地优先的架构决策

创作模式采用 Local-First 原则：

所有数据存储在浏览器本地，无需联网、无需登录
每次修改后自动保存到 localStorage，关掉页面再打开也不会丢
通过 JSON 文件的导入/导出实现数据迁移：导出给消费侧使用，或导入备份继续编辑

这个架构选择的背后思考是：降低发布门槛比功能完整更重要。如果用户需要注册账号、搭建服务器才能发布一个指南，大部分人会直接放弃。

6.3 四个操作域的交互设计

指南设置

采用表单式布局，字段包括标题、简介、封面图、作者署名。所有字段失去焦点即触发自动保存，用户无保存负担。

作品库

作品以卡片网格排列，每张卡片展示标题、类型标签和发行年份。顶部提供搜索框、类型筛选下拉和排序切换（按标题/按发行时间）。点击卡片进入编辑弹窗，表单包含标题、作品类型（TV/剧场版/OVA/游戏）、发行时间、集数、每集时长、简介。其中仅标题为必填项，其余字段用以富化展示。

分组管理

同时展示”有序组”和”无序组”两个区块。每个组以折叠面板呈现，展开后显示内部作品列表。有序组的作品带有序号标识，支持拖拽重新排序；无序组的作品无序号，仅作为集合展示。组内增删操作通过下拉选择器完成，从已有作品中选取加入。

路线搭建

路线编辑采用纵向时间线布局，与消费侧 L2 层视觉一致。每条路线在顶部有标题输入框和描述输入框。

节点添加通过”添加节点”按钮触发，弹出选择器让用户选取作品或组作为节点。每个节点附带三个可选属性：

备注：为节点添加额外的说明文字
前置依赖：设置该节点依赖的前置节点，消费侧据此计算锁定状态
附属作品：将一个或多个作品附加到该节点下，附带位置说明（如”在两集之间观看”）

节点间的顺序通过拖拽手柄调整。拖拽时其他节点自动让位，给予流畅的视觉反馈。

6.4 设计意图

创作模式的设计核心在于：消费侧的概念模型就是创作侧的操作模型。用户在消费侧看到的【作品】、【组】、【路线】三个概念，在创作侧以同样的结构呈现和编辑。这种对称性降低了用户从消费到创作的角色转换成本——熟悉消费界面的用户，自然知道如何在创作界面操作。

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

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

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

步骤	方法	目的
1	Figma低保真线框	剥离色彩和样式，专注于L1-L3布局及编辑模式信息层级
2	AI辅助生成代码	将线框+PRD数据规范输入AI，生成涵盖消费侧与创作侧的Vue组件骨架
3	迭代优化AI输出	对初始生成结果提出具体改进意见，反复对话打磨至可用效果
4	本地数据构建	用TS文件模拟节点多态、软锁状态、编辑器CRUD等完整数据模型
5	云端部署	产出可直接体验的Demo，进行交互验证

这个流程的核心价值是：跳过视觉打磨，快速验证核心交互逻辑是否自洽。当前 Demo 已完整覆盖消费侧体验（跟随路线、标记进度）与创作侧体验（指南设置、作品库管理、分组管理、路线搭建、作品关联、导入导出），完整验证了从内容消费到内容生产的 UGC 闭环。

八、总结

洞察驱动设计：放弃关系图谱不是偷懒，而是基于”新人不需要理解关系网，只需要行动指引”这一核心洞察的主动选择。
概念收敛的力量：将复杂逻辑收敛为三个极简概念，降低了用户的认知门槛，也让整个产品的信息架构更加清晰。
灵活性与严谨性的平衡：软锁机制+强制自由的设计，在提供引导的同时保留用户主体性，是对现实用户行为的尊重。
分层设计的价值：L1/L2/L3三层信息架构，让用户按需深入，在大信息量场景中避免了认知超载。
消费与创作的概念对称：消费侧的概念模型直接映射为创作侧的操作模型，降低了用户从跟随便用到内容创作的角色转换成本，让 UGC 闭环真正可落地。