MODULE 09 / LESSON 02
内容页与落地页
组织叙事、证据与阅读节奏。
先理解这个概念
落地页需要让目标人群理解价值、确认可信度并知道下一步;内容页需要让读者定位主题、连续阅读与理解上下文。标题不是越大越好,叙事结构应由读者的问题推动。
落地页帮助用户判断是否采取行动,阅读页帮助用户持续理解内容。两者都需要层级,但注意力节奏不同。把营销式巨大标题、重复行动按钮和装饰段落套到课程正文,会推迟学习开始;把长篇说明堆到决策页,则可能让价值和条件难以发现。
像 README:先解释项目解决什么,再给最小示例,然后提供深入材料。
记住这三个原则
- 01
首屏说明主题与用户能获得的具体内容。
- 02
论点配证据或示例,避免只有抽象口号。
- 03
长内容用语义标题与清楚的目录关系。
实际设计时,分三步做
- STEP 01
明确首要结果是理解内容还是作出选择,为首屏保留完成这一结果所需的信息。
- STEP 02
阅读页组织章节、示例和目录;决策页交代适用对象、实际能力、限制与下一步,不用空泛口号填充。
- STEP 03
检查内容真实性与顺序,必要条件应在行动前可见,不能把费用或限制藏到用户投入大量时间之后。
一个容易理解的例子
工具官网首屏只有“重新定义未来”,用户看不出产品做什么。
展示一个真实使用场景、核心结果和可理解的操作入口。
具体内容让用户更快判断相关性。
展开看:从场景到设计决定
设计课程首页可以用简洁介绍说明面向谁、学什么,随后直接展示路径。课程详情则应尽快进入概念和例子,目录帮助定位。若每篇都先出现一屏“开启设计之旅”,用户需要重复滚动才能学习。营销表达可以出现在合适入口,但不能占据每次任务开始的位置。
适用边界与取舍
长页面并非问题,信息缺乏结构才是。复杂主题需要充分解释;应通过章节和例子组织,而不是为了短而删掉必要依据。
把这个原则用一次
先做一个小判断
为一个图片压缩工具写主标题和首屏内容。
再完成一份设计练习
把一篇产品介绍分别改写成阅读页和试用决策页的内容顺序,保留相同事实。
别把所有网站都套成大标题、三张功能卡和用户评价。页面结构应服务它的任务。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
MDN · CSS layout