LeapAll 官网设计：从任务场景到交互细节

2026 年 5 月，我在做公司产品 LeapAll 的 Landing Page。它面向普通电脑用户，介绍处理文件、生成 PPT、图片和视频等功能。页面需要把这些能力讲清楚：用户会在什么情况下打开它，怎样交代任务，最后又能得到什么。

页面开头保留大幅首屏，向下滚动后，正文逐渐盖住首屏。进入功能介绍时，再用一组场景演示，把收到任务、输入需求和展示成品连起来。文案也围绕这些操作展开，减少对产品概念的解释。

让正文逐渐盖住首屏

开始只看到标题和下载入口。向下滚动后，首屏停住，正文从下面向上移动，逐渐覆盖首屏。导航始终留在最上层，从居中的 Logo 和名称展开为完整的章节导航。

这个效果要照顾比较矮的桌面窗口。首屏可能比视口高，如果一开始就固定，下载按钮还没露出来，正文就把它盖住了。因此，首屏需要先随页面滚动，等底部进入视口后再固定，让正文继续向上覆盖。

实现时，页面分成首屏、正文和导航三层。正文背景不透明，层级高于首屏；导航再高一层。首屏背景占满页面宽度，正文内容按最大 1280px 居中。

首屏外面保留一个占位容器，内部才是参与定位切换的内容。内容变成 fixed 后，外层高度仍然保持原样，后续正文的位置不会因为切换定位而突然改变。

判断依据是首屏底部是否进入视口。一种做法是在末尾放一个 sentinel（用于观察位置的标记元素），再用 IntersectionObserver 观察。这样可以根据内容的位置决定何时固定，不必继续增加宽高组合的媒体查询。

固定的位置也需要衔接。如果切换前首屏已经随页面向上移动，切换时却直接设置 top: 0，画面就会被拉回去。短视口下尤其明显：固定时应保留已经滚过的部分，让首屏底部停在合适的位置。

短视口和快速滚动仍是这部分需要检查的边界。观察回调可能晚于实际越过触发点的时刻；直接采用回调当下的位置，又可能把首屏固定得过高。占位高度、触发位置和固定后的 top 需要一起检查，不能只看缓慢滚动时的一次切换。

导航自动展开，也保留手动控制

导航的变化和首屏覆盖同步。首屏阶段只显示居中的品牌，进入正文后，Logo 左移，右侧出现章节链接和体验按钮。

收起时出现过一个布局问题：容器先缩窄，右侧链接随后才淡出，品牌会先被挤到一边。即使链接已经看不见，Logo 也没有回到中心。

处理时把右侧链接移出容器的宽度计算，分别控制导航宽度、品牌位置，以及链接的 opacity 和 transform。这样缩窄和淡出可以同时进行，链接不会继续占据品牌旁边的空间。

导航也允许手动展开。用户在首屏点击打开后，轻微滚动不应该马上把它收起。手动状态会持续到页面进入正文，再交给滚动控制；之后向上回到首屏，才按自动规则收起。

自动展开与收起使用不同阈值。当时正文顶部到达视口顶部下方 96px 时展开，退到 156px 之外时收起。中间保留的区间可以避免导航在同一个临界位置反复开关。手动状态的交接则单独处理，不靠增加这个区间来代替。

用两栏演示一次任务

官网原先较多围绕 PPT 展开，后来转向完整的任务场景。PPT、图片和视频是输出形式，页面需要让人看懂的是如何从一个需求走到结果。

演示区采用左窄右宽的两栏布局。左边模拟聊天窗口，交代任务来自哪里；右边是更宽的 LeapAll 界面，显示输入、处理和结果。两边同时出现，读者可以直接对应需求和产品操作。

例如竞品分析场景，左边先出现老板临时要材料的消息，右边随后输入需求、发送消息，最后显示 PPT 封面和缩略页。换到图片场景，结果区就展示海报，而不是所有场景都只停在一句完成提示。

演示面板沿用产品的主要 UI 结构：空状态快捷入口、输入区、消息、处理状态和结果。内容预先准备，再按阶段播放，重点放在操作顺序和具体产出上。

用时间轴组织场景演示

这组演示的组织方式接近视频剪辑软件的时间轴：聊天消息、输入过程和结果展示各有出现时间，但需要按同一个播放进度呈现。前面的消息交代需求，后面的产品操作接续需求，结果出现后再留出时间让人看清，最后切换到下一个场景。

底部的场景标签可以手动选择内容，进度条显示当前场景的播放进度。暂停、继续和重播都应当作用于整段演示，消息停在哪一步，进度条也就停在哪里。

实际看页面时，演示和进度条没有始终同步：暂停后，进度条仍在前进；连续点击同一个 tab，场景重新播放，进度条却没有重置。

处理这些问题时，进度条需要和演示共用播放状态。场景按等待、出现聊天、输入、发送、展示结果、自动切换几个阶段推进。暂停时保存当前阶段和剩余时间，继续时从原位置播放；选择场景时，同时重置演示与进度。每个场景的时长也要参与进度计算，不能让进度条独立播放一段固定时长的 CSS 动画。

场景切换时的淡出也需要统一管理。否则演示已经暂停，另一组计时器的旧回调仍然可能改变画面。切换场景和卸载组件时清理这些任务，避免上一段演示的回调影响下一段。

文案从用户的操作开始

中文文案需要让普通电脑用户看懂。我用 Agent 比较了苹果中国官网、即刻、少数派、Figma、Arc、Notion 等品牌的表达，最后把参考范围收窄到少数派。

我主要参考它如何用具体场景介绍工具，以及怎样控制标题、句长和技术词的出现顺序。Landing Page 的文字还要配合布局：首屏标题需要快速说明用途，功能区要和演示对应，不能直接沿用长文章的展开方式。

不同模型给出的规则有一些冲突，例如标题是否必须包含产品名、CTA 能否使用“立即”、技术词应该替换还是解释后保留。我让它们互相审阅，再按所在位置取舍，整理成面向普通电脑用户的文案规范。

能力区的改动比较典型。原文用“五大能力域”“Skills 以原子能力为单位持续接入”概括产品，确认稿改为“从一句话 到一份成品”，再说明查资料、处理文件和整理结果这些具体操作。

替换术语之后，还要通读整组文案。有一版每项描述都以“你……它……”结尾，单独看没有问题，连续出现就很机械；另一些句子虽然没有技术词，仍然没有说明具体做什么。这些也一起调整。

文案先输出修改前后的对照，确认后再写回页面。首屏已有的 slogan 和适合继续使用的描述保留，只修改需要调整的部分。

按设备提供下载入口

下载入口最初并排显示 Windows、macOS、Android、iOS 四个按钮，后来改为按系统显示一个主按钮，其他选项放进“其他平台下载”菜单。开发面板提供系统模拟选项，不必切换设备才能检查按钮文案和平台状态。

桌面菜单同时支持 hover 和 click，曾出现悬停刚打开、点击又马上收起的冲突。处理范围只限制这一条路径：由 hover 打开后，一秒内的 click 不执行关闭，其他操作保持原来的响应。手机端只使用点击。

系统识别与平台是否开放也分开处理。主按钮可以按设备变化，尚未发布的平台仍然保持禁用。开发面板则继续用于暂停场景、检查中间画面，以及比较调色与滚动效果。

后记

文中提到的页面可以在 LeapAll 官网 查看。