推动应用完成设置的空状态设计

为什么空状态决定设置是否完成

一个空白界面并非中性。它会产生一个停顿，用户会开始猜该做什么、是否漏了某步，或产品是否根本不起作用。在设置流程中，这种停顿代价很高。它会把“我要开始了”变成“我改天再来”。

空状态是用户在尚未创建、导入或连接任何内容时看到的界面。它不是加载屏、错误信息或权限提示。它出现在价值产生之前，应用需要在这一刻帮助用户达到第一个有意义的结果。

一个好的空状态只有一个目标：尽量减少用户思考，把他们带到下一个成功的操作。这里的“成功”很重要。下一步应当产生真实成果（第一个项目、已连接的数据源、创建的第一个条目），而不是一个无果的表单或模糊的产品导览。

这些时刻比团队预期的更频繁出现：注册后的首次登录、新工作区、某个功能标签下还没有条目（项目、客户、文件），或导入被跳过导致什么都不存在的设置路径。

当空状态发挥作用时，它能迅速回答三个问题：

• 这个界面是什么？
• 为什么这里是空的？
• 我现在该做什么？

示例：在 Koder.ai 中，新用户打开一个新工作区看到还没有应用。一个清晰的空状态会直白地说明尚未创建任何内容，提供一个明显的下一步操作例如“创建你的第一个应用”，并加上一小条安全提示（例如，开始后可以导出源码并有快照功能）。目标是把“这里什么都没有”变成“我知道如何得到第一个可用结果”。

用户看到空白界面时在想什么

对首次使用者来说，空白屏往往让人感觉应用卡住了或自己做错了什么。大脑会很快填补空白，通常不会朝着对你有利的方向想。

大多数人在心里会默问同一组问题：

• 这个页面是做什么的？
• 我应该先做什么？
• 做完后会发生什么？
• 我会弄错吗？
• 我能以后更改或撤销吗？

这些问题背后的情绪会驱动行为。不确定会让人徘徊，害怕做错会让人避开主要按钮，急躁会让人在几秒内关掉应用如果没有清晰的下一步。

新手的空状态和高级用户的空状态解决不同问题。新手需要上下文和安全感，因为他们还不熟悉你的术语。回访用户想要速度：快速创建条目、导入数据或重复熟悉的操作。

设置类空状态也不同于错误和加载状态。加载表示“请稍等，有东西在进行中”。错误表示“出问题了，这就是原因”。设置类空状态表示“这里还没有内容，这是正常的，我会告诉你如何开始”。

举个具体例子：如果有人在 Koder.ai 打开一个新工作区并看到空的“项目”页，他们不会在想功能本身，而是想“我要从提示开始、导入代码，还是选模板？会不会出错？”你的空状态应在不用把他们推到文档的情况下回答这些问题。

一个简单且有效的结构：说明、引导、安抚

一个好的空状态并不显得空旷。它像路牌一样指引："这是做什么的，下一步点哪里。"

在大多数设置流程中，一个有效结构有三部分：

• 说明含义：一句简短的话说明该区域是做什么的。
• 引导下一步：一个主操作，匹配最常见的下一步。
• 安抚用户：一句小提示，降低感知风险或工作量。

把说明控制在很短的范围。如果需要一段话来解释页面，那就是在要求用户思考太多。目标是 1 到 2 句短话，用平实词汇，比如“添加你的第一个项目”或“创建你的第一个工作区”。

然后用单一主按钮把下一步变得显而易见。如果你展示三个同等重要的按钮，就是在要求用户在理解页面之前选路径。如果必须提供替代（导入、模板、跳过），让它们在视觉上低调于主操作。

用安抚行来消除常见顾虑：担心弄错、浪费时间或需要技术能力。关于接下来会发生什么以及能否撤销的简短提示，比冗长说明更有效。

给首次“项目”页面的示例文案：

标题： 开始你的第一个项目

说明： 项目承载你的应用设置与发布。

主操作： 创建项目

安抚： 大约需要 2 分钟，可随时重命名。

如果你的产品支持多种启动方式（例如像 Koder.ai 那样可通过聊天构建、导入或模板），把“创建”设为默认，并把“导入”和“使用模板”作为次要操作放在下方。

能减少困惑的文案模式

当文案谈论功能而不是用户能得到的结果时，空状态就会失败。你的文字应快速回答：这个页面是做什么的？我为什么要在这里做事？下一步该做什么？

简单的标题公式是“结果 + 对象”。命名用户将得到的结果和他们将创建的对象，而不是你的内部功能名。

• 好："添加你的第一个客户" 或 "创建你的第一个项目"
• 不好："客户" 或 "项目模块"

正文用“它是什么 + 为什么重要”在一两句内说明：

"客户是你销售的对象。现在添加一位，这样你就能发送发票并追踪付款。"

按钮文案应以明确的动词开头并包含具体名词。避免在存在多条路径时使用模糊的按钮，如“开始使用”。

• "创建项目"
• "导入联系人"
• "选择模板"
• "连接支付账户"
• "邀请团队成员"

在看起来有风险的选择旁边添加微文案。小的安抚语常常比长篇说明更有效：

• "你可以稍后修改。"
• "大约需要 2 分钟。"
• "可随时删除。"

如果产品会为用户生成初稿（像 Koder.ai），应设定预期，让人们知道这不是最终版本："我们会生成一个初稿，你可以在部署前审核并编辑。"

布局模式：让下一步显而易见

好的空状态应像路标而非海报。布局需要清晰的顺序，让人一眼就能理解并采取行动。

采用与视觉扫描一致的简单层级：标题、一句短话、主 CTA、然后更安静的次要操作（导入、模板、跳过）。

让主按钮靠近信息块。如果用户得读完再滚动然后决定，他们往往就停了。常见模式是把标题 + 正文 + CTA 做成紧凑块，并在该块与导航、页脚或侧边栏之间留出较多空白。

图标和小插画能帮助快速识别，但前提是它们有意义。比如在“暂无项目”旁放一个文件夹图标是有用的，随机吉祥物就没有。如果使用插画，保持小巧并放在标题上方，避免抢走 CTA 的注意力。

一个很有力的模式是展示一个小的成功预览：示例卡片、表格里的示例行或淡化的示例图块。在像 Koder.ai 这样的工具中，空的“应用”页可以展示一个示例应用卡片（名称、状态、最近更新），让用户立即理解他们将要创建的是什么样子。

选择合适的路径：创建、导入还是模板

当用户看到空白屏时，他们通常想做三件事之一：从头开始、把已有数据带进来，或用起始模板快速上手。好的空状态会把这些路径清楚地呈现出来，而不是让用户苦思冥想。

以创建为先：当从头开始是任务本身

当第一个真正的胜利是新建某个对象（项目、工作区、页面或第一条记录）时，应以“创建”为主。这在用户能很快完成且操作可撤销时效果最佳。

如果创建过程较长，把它拆成更小的第一步（例如“创建草稿”），这样他们能前进而不觉得被锁定。

以导入为先：当用户已有数据源

当大多数新用户来自已有系统、文件或账户时，应以“导入”为主。空状态应说明支持哪些导入，以及导入后会得到什么（例如字段映射和条目创建）。

一个实用做法是利用上下文选择主 CTA：如果用户是从迁移相关内容过来的，就突出“导入”；如果他们点击了空的“新建项目”按钮，就突出“创建”；如果设置复杂，就突出“模板”。

以模板为先：当速度比控制更重要

当产品有常见起点且用户主要想调整而非从头设计时，用模板为主。按结果命名模板（"销售管道"、"周计划"），而不是功能名。

提供一个安全的“试用示例数据”选项会减轻顾虑，明确可以删除。例如聊天优先的构建器如 Koder.ai，可以用示例项目展示一个可工作的应用外观，让用户在写自己提示前先看到形态。

逐步实现：为设置完成设计空状态

空屏并非中性。最好的空状态让下一步成功操作看起来明显、安全且迅速。

可复用的五步方法

1. 选定一个要推动的设置里程碑。 选择能证明用户正获得价值的单一动作（创建第一个项目、添加第一个团队成员、连接第一个数据源）。当你同时支持三项目标时，用户会僵住。
2. 把输入减到最少。 只保留达到该里程碑所需的必要字段。可选字段放在“添加详情”后面，等第一次胜利之后再收集。
3. 按此顺序写核心要素：
   • 标题： 该区域的用途（用平实词，不要花哨）
   • 正文： 操作后会发生什么（一句话）
   • 主 CTA： 用与里程碑匹配的动词
   • 一个备用操作： 导入、示例数据或模板（明确为次要）
4. 添加安抚语和逃生口。 回答隐藏的担忧：“我会弄坏东西吗？”一条短语如“你可以稍后编辑”加上明显的撤销/编辑/删除方式能降低犹豫。
5. 用 3 个人做可用性测试，然后追踪完成率。 观察他们在哪里停顿、先点了什么。上线后跟踪空状态展示数、主 CTA 点击数和里程碑完成率。

示例：如果有人打开新的 CRM 并看到“联系人”页为空，最快的胜利是“添加你的第一个联系人”。只要求姓名 + 邮箱，提供“导入 CSV”作为备选，并提示可以之后更新字段。

常见错误会让用户卡住

大多数“卡住”的空状态有一个共同原因：让下一步看起来有风险或不清晰。

1) 竞争性的 CTA

如果你展示三个看起来同等重要的按钮，用户会停顿。选一个主操作和一个次要操作。把其他选项放到安静的“更多选项”中。

2) 文案在兜售功能而不是结果

“强大的仪表盘、灵活的权限、高级设置”并不能告诉人现在该做什么。把文案换成点击后能得到的下一步结果。

例子：

• “添加你的第一个客户以开始追踪销售（约需 1 分钟）”
• “连接你的代码仓库以生成第一次构建”

3) 在第一次胜利前索要过多信息

空状态里的长表单让人觉得需要承诺。如果你需要更多细节，先赢得第一次可见成果再收集详细信息。

不要在加载任何内容前就要求姓名、公司规模、角色和目标，先只要“项目名称”，其余字段在第一个页面存在后再设为可选。

4) 模糊或玩笑式的文本掩盖会发生什么

幽默可以，但不要用在用户需要明确指引的地方。“这里什么都没有”浪费机会。明确说明点击后会发生什么，以及不会发生什么。

5) 主操作不可用时没有备用方案

有些用户无法从头创建。提供真实的备选路径：导入、模板或示例数据。例如在 Koder.ai 中，如果用户没有想法，“从示例应用开始”能让他们在不写完整说明的情况下看到一个可工作的屏幕。

上线前的快速清单

新用户应能在约五秒内明白页面是什么、为什么重要以及下一步该做什么。

• 主 CTA 明确且具体。 使用动词加对象，如“创建你的第一个项目”或“添加你的第一个客户”，而不是“继续”或“确定”。
• 只有一个操作显得是主要的。 大小、颜色和位置应让下一步显而易见。
• 次要选项表现得更安静。 如果提供“导入”或“使用模板”，视觉上要比主操作低调。
• 页面能快速自我说明。 一句短标题加一句短话应回答：为何为空，以及点击后会发生什么。
• 有通往首次胜利的快捷路径。 模板、示例数据或引导式起步能让用户在不做大量设置的情况下看到价值。

安抚语能把犹豫变成行动。在 CTA 附近加一句小短语降低顾虑，例如“你可以稍后修改”或“确认前不会发布”。语气要平静且具体。

一个简单测试：让同事看屏 5 秒，然后描述如果点击主按钮会发生什么。如果他答不上来，就要收紧文案或层级。

如果你在像 Koder.ai 这样以聊天优先构建的工具里做设置流，以上清单同样适用。空状态应邀请一个成功的下一步：从模板开始、导入数据或生成第一个可编辑的工作版本。

一个现实示例：新应用的首次设置

一个独立创始人注册了 Koder.ai 并打开一个全新的工作区。他来到一个“项目”页，里面没有条目，也不知道什么是“好”的标准。

取而代之的是，空状态展示一条简短的承诺、一个清晰的下一步和一条小的安全提示。下面是示例文案和 CTA（时间估计作为占位，需验证）：

Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.

[Create your first app]
Secondary: Import existing code  |  Browse templates
Note: You can export the source code anytime.

创始人点击 Create your first app 后，下一屏只问一个简单问题：“你在做什么？”并给出一个输入框和两个示例提示（例如“为小型代理做 CRM”或“带注册的登录页”）。路径要窄：一个明显的字段，一个明显的按钮。

第二屏可以是一个快速的计划审查（功能、页面、数据），随后是构建步骤和工作预览。第一次成功的时刻是用户在预览里能做一件真实的事情，比如添加一条记录或提交一次测试注册。

一旦有了数据，回访用户就不该再看到同样的空状态。项目页可以切换到“最近应用”视图，并保留一个显著的快速操作（例如 New app）以及更小的操作（例如 Snapshots 或 Deploy），基于他们上次的操作来展示。

判断空状态是否成功，可以跟踪几个指标：

• 从首次访问到工作预览的首次成功所需时间
• 在空状态和第一个构建步骤之间的掉失率
• CTA 点击率（主操作 vs 次要操作）
• 7 天内的重复使用率
• 在空白区域的支持请求或愤怒点击

接下来的步骤：先改进一个流程，再推广模式

本周挑一个设置流程去改进。选择掉失最多的那条，或新用户首先会触达的那条。重写它的空状态，让它快速回答三个问题：这是什么？为什么现在要做？下一步点哪儿？

把改动保持小范围。你不是要重做整个入职，而是让第一个成功的动作变得显而易见。

一个简单的一周计划：

• 基线：记录该设置步骤的完成率（以及完成所需时间），持续 3 到 7 天。
• 重写：调整标题、一句引导语和主按钮标签。
• 降低风险：加一条安抚语（接下来会发生什么、能否撤销、需要多长时间）。
• 测试：向一小部分新用户发布，然后比较完成率和支持工单数量。
• 固化：如果表现更好，就把它做成可复用模板供他人复制。

取得一次胜利后，把它标准化。创建简短的内部空状态模式：间距、标题样式、图标或插画规则，以及一致的 CTA 布局。当团队遵循相同结构时，用户只需学会一次，能在各处更快地行动。

如果你要快速原型设置步骤，Koder.ai (koder.ai) 能帮你在 Planning Mode 中起草流程并生成第一个版本去测试，然后根据用户停顿的地方迭代。