Skip to content

用同一组卡片演示 grid、list、featured 布局切换,以及筛选和排序变化时的空间连续性。

Preview

同一组卡片切布局、换排序、做筛选

左边只看结果,右边统一调状态。FLIP 的重点不是花样,而是让位置变化还能看得懂。

Grid6/6 张
当前第一位

增长首页 现在排在第一位

增长94

增长首页

把最能带动点击的入口抬到首屏,让推广位更像在讲一个重点。

首屏点击 +12%4月18日
转化91

定价改版

把套餐差异讲得更直接,减少用户在对比时的停顿成本。

试用转付费 +9%4月17日
转化88

激活流程

把注册后的前三步压缩成更短路径,先帮用户做出第一次成功动作。

激活完成率 +15%4月16日
留存86

留存复盘

把高风险用户单独抬出来,让运营先看最需要处理的部分。

7 日留存 +6%4月15日
增长84

活动专题

把当前 campaign 资源聚成一屏,减少用户在不同区块来回找。

活动访问 +18%4月14日
留存82

召回触达

把快流失人群单独拉出来,给召回动作更高优先级。

召回打开率 +7%4月13日

Flip 在解决什么

Flip 不是帮你“做动画花活”,而是在 DOM 结构变化后,尽量保住用户对元素位置的认知连续性。

最常见的三类变化

变化类型典型场景是否适合 FLIP
布局切换grid / list / featured很适合
排序变化权重、热度、时间很适合
过滤变化分类、标签、状态适合,但要加轻量 enter / leave

实战建议

  • 把布局、排序、筛选收敛成一组状态,不要分散在多个孤立 watcher 里。
  • 先拿旧 DOM 做 Flip.getState(),等视图更新后再 Flip.from()
  • 新增和移除的元素最好配 onEnter / onLeave,不然变化会显得硬切。

不适合的情况

  • 高频实时刷新的列表。
  • 数据量极大、虚拟滚动主导的页面。
  • 用户本来就不关心卡片“从哪里移动到哪里”的页面。

基于 VitePress 的个人知识库骨架