产品设计

Framer CMS List:让一项内容成为可以增删、排序的整体

Framer 是可视化网站制作与发布工具。CMS List 让内容团队按行维护课程收获、常见问题或教程步骤,再用统一的卡片设计展示不断变化的内容。

先给出你的方案与理由,再展开思路,检查是否遗漏了重要的取舍与验证。这些问题没有唯一答案。

01
产品思考中阶

把编号字段变成列表前,怎样让人看懂迁移?

练习场景

课程网站目前把每条收获保存成独立编号字段,例如“收获1标题”和“收获1说明”。你要设计把这些字段转换成“收获列表”的确认体验:每一行包含一个标题和一段说明,页面卡片再读取这些行。迁移不仅改变存储方式,还可能影响页面如何显示,用户需要在确认前看懂变化。

已知条件与要求

为自己的CMS设计“把编号字段改为列表”的迁移确认流程,不假设这是Framer现有界面。

  1. 既有内容。 课程有“收获1标题/说明”到“收获5标题/说明”;有的字段缺失,有的存在但为空,也可能只填了说明。页面卡片还绑定着旧字段。
  2. 变更范围。 转换同时涉及内容和页面绑定,不能只展示一个“转换成功”提示。不同课程可能产生不同数量的行。
  3. 保留决定权。 用户需要看出哪些项目被保留、哪些需人工判断,以及哪些页面绑定不能自动对应;不得默默删除空项或自动改写正文。
  4. 验证。 设计预览、确认和返回修改的路径。给出至少两项可以检验用户是否理解变更的任务;本题不要求还原产品内部机制。

用这个情境检查你的方案

课程 A 的第 1 组字段完整,第 2 组标题为空但有说明,第 3 组字段缺失;页面上的第二张卡片仍读取“收获2标题”。请展示用户怎样看到这三种差别、检查卡片影响并处理无法自动对应的绑定。绑定就是“页面从哪个字段取内容”的连接。

需要交付什么

交付迁移前后预览草图、一条有未解决项目的确认/返回流程,以及两项让用户预测“内容是否保留、页面会变成什么”的任务。无需实现数据迁移或自动补全文案。

查看思路
  1. 先给内容差异,再给统计。 用一门课程并排显示旧字段与新行;缺失、空字符串和有说明无标题分别标识。总行数只能辅助,不能证明信息无损。
  2. 把内容和页面关联起来。 点击一行应能找到将使用它的卡片或绑定;自动映射不了的项进入待处理清单,说明受影响页面,而不是只暴露字段ID。
  3. 将确认绑定到可见版本。 用户修改迁移规则后刷新预览;不要继续沿用旧确认。允许保留原内容并返回处理,不把强行补标题作为通过条件。
  4. 测试理解,不先宣称提效。 安排一门只有说明的课程和一处指向旧字段的页面,让参与者指出将保留什么、上线前还缺什么。实验尚未执行,先记录误判类型与完成路径,再决定如何改界面。