MODULE 09 / LESSON 02

内容页与落地页

组织叙事、证据与阅读节奏。

34 / 60 课适配不同平台

先理解这个概念

落地页需要让目标人群理解价值、确认可信度并知道下一步;内容页需要让读者定位主题、连续阅读与理解上下文。标题不是越大越好,叙事结构应由读者的问题推动。

落地页帮助用户判断是否采取行动,阅读页帮助用户持续理解内容。两者都需要层级,但注意力节奏不同。把营销式巨大标题、重复行动按钮和装饰段落套到课程正文,会推迟学习开始;把长篇说明堆到决策页,则可能让价值和条件难以发现。

用程序员的语言说

像 README:先解释项目解决什么,再给最小示例,然后提供深入材料。

记住这三个原则

  1. 01

    首屏说明主题与用户能获得的具体内容。

  2. 02

    论点配证据或示例,避免只有抽象口号。

  3. 03

    长内容用语义标题与清楚的目录关系。

实际设计时,分三步做

  1. STEP 01

    明确首要结果是理解内容还是作出选择,为首屏保留完成这一结果所需的信息。

  2. STEP 02

    阅读页组织章节、示例和目录;决策页交代适用对象、实际能力、限制与下一步,不用空泛口号填充。

  3. STEP 03

    检查内容真实性与顺序,必要条件应在行动前可见,不能把费用或限制藏到用户投入大量时间之后。

一个容易理解的例子

BEFORE / 常见问题

工具官网首屏只有“重新定义未来”,用户看不出产品做什么。

AFTER / 可以这样改

展示一个真实使用场景、核心结果和可理解的操作入口。

具体内容让用户更快判断相关性。

展开看:从场景到设计决定

设计课程首页可以用简洁介绍说明面向谁、学什么,随后直接展示路径。课程详情则应尽快进入概念和例子,目录帮助定位。若每篇都先出现一屏“开启设计之旅”,用户需要重复滚动才能学习。营销表达可以出现在合适入口,但不能占据每次任务开始的位置。

适用边界与取舍

长页面并非问题,信息缺乏结构才是。复杂主题需要充分解释;应通过章节和例子组织,而不是为了短而删掉必要依据。

YOUR TURN

把这个原则用一次

先做一个小判断

为一个图片压缩工具写主标题和首屏内容。

再完成一份设计练习

把一篇产品介绍分别改写成阅读页和试用决策页的内容顺序,保留相同事实。

容易踩的坑

别把所有网站都套成大标题、三张功能卡和用户评价。页面结构应服务它的任务。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

MDN · CSS layout