跳到正文

单页滚动布局

Single Page

初级通用

单页滚动布局(Single Page)是把一组相关内容按顺序排在同一页面中,让用户通过向下滚动浏览的页面布局。它适合把介绍、功能和行动入口连成一条阅读路径,例如一页讲清一个新产品。

你可能会说:「我想把产品介绍都放在同一页,用户往下滑就能依次看到功能、价格和注册入口。」

动手看看

慢思笔记
介绍 → 功能 → 开始
01 / 产品介绍
把零散想法,变成清晰思路慢思笔记,把阅读摘录、工作灵感和复盘放在一起,让每次记录都能接上下一次思考。
向下滚动,看看怎么用
02 / 核心功能
从记下来,到用起来
快速收集摘录与灵感先收进收件箱,不打断手头的工作。
关联回顾用主题串起旧笔记,复盘时找回思考的来路。
03 / 开始使用
从今天的一个想法开始先记录,再整理。不必一次搭好整个知识库。
免费开始
演示入口,不会创建账号
滚动时保留品牌栏

把鼠标放进小页面,向下滚动:先看介绍,再看功能,最后遇到行动入口。三段内容都在同一页里,不需要切换页面;也可以悬停或聚焦末尾的按钮。

品牌栏会留在顶部,提醒你仍在浏览同一个产品。单页布局的关键是内容连续排列;固定品牌栏只是帮助定位,不是必须条件。

要点

  1. 1

    围绕一条浏览路径排内容

    我们通常把用户最先要理解的信息放在前面,再逐步展开细节。比如介绍 AI 写作工具时,先说明它解决什么问题,再展示用法、价格和开始使用的入口。

  2. 2

    用区块分隔不同的话题

    虽然内容都在一页里,功能、案例和常见问题仍然需要清楚分区。这样用户往下滑时知道自己读到了哪里,也能快速跳过暂时不关心的部分。

  3. 3

    给长页面提供定位方式

    如果页面较长,我们可以在导航中加入指向各区块的锚点,让用户直接跳到价格或常见问题。滚动负责连续浏览,锚点负责快速定位,两者可以一起用。

容易混淆的地方

它说的是内容怎样铺在页面上,不是技术上的单页应用:单页应用可以切换多个视图,而单页滚动布局强调在同一页面内连续浏览。它也不等于无限滚动;后者常用于不断加载列表内容,单页滚动布局通常有明确的内容区块和结尾。

什么时候用

适合用

  • 做新产品介绍页时,想让访客沿着问题、功能、案例和注册入口一路看下来。
  • 做活动报名页时,规则、日程、嘉宾和报名入口都围绕同一个主题。
  • 做个人作品集首页时,作品数量不多,适合按顺序展示背景、项目和联系方式。

不适合用

  • 做商品目录时,用户需要反复搜索、筛选和比较大量商品,改用列表或卡片网格布局。
  • 做后台管理系统时,用户频繁在独立任务之间切换,改用带导航的多页面结构。
  • 写篇幅很长且需要按章节查阅的帮助文档时,改用独立文档页和目录导航。

练一练

你要为一款刚上线的 AI 会议工具做介绍页,内容包括产品用途、三项功能、价格和试用入口。用户主要从广告点进来。哪种安排更贴合单页滚动布局?

让 AI 帮你做

请把这个 AI 会议工具介绍页做成单页滚动布局:按产品用途、核心功能、价格、常见问题和试用入口分区,顶部导航用锚点跳转到对应区块。保持每区主题清楚,并兼顾手机屏幕的阅读顺序。

接下来学什么