首屏与信息架构：一页只回答一个问题

首屏不是产品的目录，是产品的第一句话。

一、什么都说，等于什么都没说

以下情境为教学假设，人物、引语和数字不代表经核实的真实案例。

简宁的排班工具上线半年，首屏改过三版。最新一版从上到下依次是：一句标语、一段 80 字的产品介绍、三个并排的功能卡片、四个客户 logo、两个按钮（「免费开始」和「了解更多」）、一段创始人故事，最底下才是产品截图。

她请五个目标用户看首屏，问三个问题：这是什么？给谁用？现在该点哪里？

五个人里，三个人说「好像是管理排班的」，两个人说「不太确定」；只有一个人说得出目标用户；关于点哪里，四个人指向了「了解更多」，因为那个按钮颜色更亮。

这不是设计能力问题，是信息没有排序。首屏把十件事并列摆出来，用户只能随机挑一件。

首屏的唯一任务是让对的人继续。 它不是产品说明书，不是品牌形象片，也不是功能清单。它只需要让目标用户在两秒内确认「这是给我的」，然后知道下一步做什么。

首屏有两种典型失败。一种是「太满」：什么都想说，结果什么都没说清；另一种是「太空」：只有一句抽象标语和一张渐变背景，用户看完仍不知道产品做什么。前者缺排序，后者缺具体信息。

判断属于哪一种，看用户离开时能否用一句话转述。转述得出但不想用，是说服力问题；转述不出，是结构问题。

二、首屏三问与三层信息

首屏要回答三个问题，顺序不能变。

三个元素之后的一切，都属于第二层或第三层。

第一层只能有一个主按钮。 第二个按钮要么是次要样式，要么干脆删掉。两个同等权重的按钮，会让用户在选择上消耗掉本应用来判断产品的时间。

副标题不要重复主标题。 「三分钟生成排班表」之后不要再写「快速生成排班」，而要写「给 20 人以下门店，导入员工名单即可」。前者是重复，后者是补充。

客户 logo 不属于第一层。 它证明的是「有人用」，不是「这是什么」。放到第二层，或者干脆等到有十个真实客户再放。

创始人故事放到最后一屏。 对陌生用户来说，你的故事是加分项，不是决策依据。放在前面，只会挤掉承诺。

社会证明要放在第二层。 客户数量、评价、媒体报道都属于这一类。它们回答的是「别人用过吗」，前提是用户已经知道「这是什么」。

第二层不超过三块内容。 三块分别回答「能做什么」「长什么样」「谁在用」。超过三块，用户会开始跳读，第二层等于没有。

三、导航与页面骨架

信息架构决定用户能不能找到第二层之后的内容。一个人维护的产品，导航越少越好。

一级导航项 ≤ 5
每个导航项下的页面 ≤ 7
任意页面到目标内容 ≤ 3 次点击

常见五项：产品 / 定价 / 文档 / 更新日志 / 登录

导航按用户的词命名，不按内部模块命名。 「工作台」「资源中心」是内部视角；「定价」「文档」是用户视角。用户不会先理解你的架构再找东西。

页面骨架按阅读顺序排，不按视觉模板排。 F 型、Z 型是眼动研究的结果，不是设计规范。真正要保证的是：最重要的信息在左上到右下的主阅读路径上，且不被装饰元素打断。

每页只回答一个问题。 首页回答「要不要用」，定价页回答「多少钱」，文档页回答「怎么开始」。一页试图回答两个问题，两个都会答不好。

移动端不是把桌面端缩小。 首屏在手机上通常只剩标题、副标题和一个按钮。这不是损失，而是强制排序：如果你在手机上放不下承诺，说明承诺还不够短。

面包屑与页脚不是信息架构的替代品。 它们是补救措施。真正的问题是：用户为什么会走到需要靠面包屑找路的位置。

每个重要页面要有唯一入口。 同一个功能从三个地方都能进，用户会记不住路径，你也会在改版时漏掉一个入口。

链接文字要能独立成句。 「点击这里」「了解更多」在跳读时毫无信息。写成「查看定价」「阅读部署文档」，用户不读上下文也知道会去哪。

四、5 秒测试与改版对照

首屏是否成立，可以用一个五分钟的测试判断。

步骤：
1. 打开首屏，给测试者看 5 秒，然后关闭
2. 问三个问题：这是什么？给谁用？下一步做什么？
3. 每个问题记录「答对 / 模糊 / 答错」

通过率 = 答对人数 ÷ 测试人数

主标题   ≥ 4/5
目标用户 ≥ 3/5
下一步   ≥ 4/5

三项里任何一项低于阈值，问题都能定位：主标题答错，是承诺不清；目标用户答错，是「给谁」太宽；下一步答错，是主按钮不突出或文案含糊。

测试要用陌生人。 同事和朋友会从你的解释里补全信息。找五个只通过首屏认识产品的人，样本虽小，但足以暴露结构问题。

改版要做前后对照。 同一批问题、同一套阈值，改版前后各测一次。只凭「感觉更清楚了」的改版，通常只是换了一种混乱。

不要用点击率替代这个测试。 点击率受渠道、文案、按钮颜色共同影响，无法告诉你用户是否理解了产品。5 秒测试测的是理解，点击率测的是反应，两者不能互相替代。

首屏字数要设预算。 第一层所有文字加起来不超过 100 字。超过这个数，通常意味着你在解释而不是陈述。

改版前先存档旧版截图。 没有旧版，就无法做前后对照，也无法向自己证明这次改动是进步还是换了一种混乱。

不要同时改首屏和定价。 两个变量一起动，转化率变化时你分不清是哪个引起的。一次只改一个变量，这条规则在界面改版上同样适用。

五、行动清单与复算验收

• 写下首屏第一层现有的所有元素，按从上到下列出
• 用「这是什么 / 给谁 / 下一步」给每个元素归类
• 把不属于第一层的元素移到第二层或删除
• 主标题压到 20 字以内，副标题压到 40 字以内
• 只保留一个主按钮，其余改为次要样式或删除
• 数一次第一层总字数，确认不超过 100 字
• 检查一级导航项是否超过 5 个，页面到目标是否超过 3 次点击
• 找 5 个陌生人做 5 秒测试，记录三项通过率

验收标准：能报出三项通过率，并指出低于阈值的项对应哪个元素。 只回答「首屏更清爽了」的，说明改的还是样式，不是结构。

使用边界与实操验收

本文讲首屏与信息架构，不涉及落地页怎么承接注册与转化，那属于从落地页到第一个动作 ；空状态与首次使用路径属于空状态与示例数据：60 秒内看到成品 ；加载、错误等状态属于第 06 篇；界面一致性验收属于第 09 篇。

本文也不主张「首屏必须极简」。工具型产品的首屏可以直接是产品界面，文档型产品可以直接是搜索框。关键不是元素多少，而是第一层是否只回答一个问题。

验证以 5 秒测试为准：连续两次测试中，「下一步做什么」都低于 3/5，问题通常在按钮的视觉权重，而不是文案。先把第二个按钮降级，再改文字。

另一个可复算的指标是首屏滚动深度：用分析工具看有多少人在不滚动的情况下点击了主按钮。这个比例长期低于 10%，说明第一层没有说服力，第二层的内容再好也没人看到。

首屏验收不通过时，先改结构，再改文案，最后才改配色。顺序反过来，你会用一层新颜色盖住一个没有被回答的问题。

关键参考与核验范围

本文的阈值与字数为教学演示。核验日期：2026-10-24。

• Nielsen Norman Group: F-Shaped Pattern of Reading on the Web ：网页扫读路径的实证研究与适用边界。
• GOV.UK Service Manual: Design ：公共服务页面结构与内容优先级的公开规范。

上述两条只用于说明公开研究与实践，不构成对任何布局模板的推荐。5 秒测试的样本量与通过阈值为本文给出的教学口径，未做统计显著性验证。

系列导航

• 上一篇：设计 token：把颜色、间距、字号写成变量
• 下一篇：交互状态：空、加载、错误、成功与无权限
• 回到目录：一个人把产品做得像样：品牌、视觉识别与设计系统
• 相关阅读：从落地页到第一个动作 、空状态与示例数据：60 秒内看到成品