空状态下的UX支架

1）什么是空白状态，为什么需要它们

空状态是指暂时缺少主要内容的屏幕/小部件：在第一个活动之前，清除后，零结果，如果下载错误，则没有权限/访问权限。

• 解释"为什么这里是空的"；
• 显示分区的价值；
• 提出明确的下一步行动（或多种选择）；
• 减少焦虑并防止离开。

良好的空状态=上下文+收益+动作。

2）空状态类型学

1.主要零（第一时间限制）：用户尚未创建/配置任何内容。
2.零搜索/过滤器：查询没有结果。
3.时间空白：数据正在装载或正在排队。
4.限制/权利：没有访问权限,没有足够的验证级别。
5.清除用户：清除购物车/历史记录。
6.技术问题：网络/服务故障,中继。

3）设计原则

上下文：谈论空虚的特定原因。
价值→行动：首先为什么这个部分，然后做什么。
一个主要的CTA：必要时是次要的（学习更多/常见问题）。
简洁明了：1-2句子+清晰的按钮。
视觉支撑：图标/插图支持意义,不分散注意力。
防止僵局：总是有前进的道路。
语调一致性：友好，安静；没有关键步骤中的笑话（付款、安全）。
A11y和本地化：可读的屏幕阅读器，正确倾斜，考虑行长。

4）空状态框架（模板）

标题（可选,1行）-陈述价值或理由。
文本（1-2句子）是"为什么空"+"接下来会发生什么"。
主要CTA是主要目标行动。
次要STA/链接-帮助/规则/文档。
视觉（可选）-24-96 px的简单插图，不要超载。

5）情景模式

5.1 Onbording/第一个零

目标：导致第一个成功的行动。

文字： "查看个人建议,填写个人资料并选择兴趣。"

CTA："填写个人资料"/"选择兴趣"。

提示： 添加微观力量/时间指示器："这需要~ 1分钟。"

5.2搜索/过滤器=零结果

目的：帮助调整查询。

文字： "从"live blackjack"中找不到任何东西。尝试"blackjack"或删除"Ispert： X"过滤器"

CTA："重置过滤器"次要："打开目录"。

5.3付款/钱包为空

目的：鼓励添加方法/首次充值。

文字： "保存付款方式-充值和结论将更快地进行。"

CTA："添加付款方式"次要："规则和佣金"。

5.4验证/访问

目的：以透明的方式解释取出限制和途径。

文字： "本节在确认身份后可用。通常最多需要2分钟"

CTA： "通过验证"次要："为什么需要？"

5.5旅途中的数据/时间空白

目的：减少等待焦虑。

文字： "我们收集您的数据。这通常最多需要30秒。您可以离开页面-我们将在一切准备就绪时通知您"

CTA： "可以理解"次要："接下来会发生什么？"

5.6清理/清除后

目的：确认行动，提出下一步行动。

文字： "历史已被清除。下次补给后将出现新的操作"

CTA："补充账户"。

5.7错误/转发

目标：恢复的明确途径。

文字： "无法下载数据。请检查网络或重试"

CTA："重复"次要："系统状态"。

6）微文本： 现成的模板

• "您添加第一个游戏时，将出现一些游戏。 添加到收藏夹

• "根据要求"{query}"什么也没发现。修改查询或重置过滤器。［重置过滤器］"

• "你还没有保存的方法。添加卡或钱包以加快付款速度。［添加方法］"

• "未经年龄确认,此功能不可用。这需要~ 2分钟。［确认年龄］［为什么需要？］"

• "我们认为过去24小时的统计数据……通常长达30秒。我们将在一切准备就绪时显示通知"

• 服务不可用我们已经喝了。稍后尝试或检查状态。［重复］［系统状况］"

7）视觉语言和插图

使用轻巧的单色/双色插图来避免与CTA争论。
尺寸和缩进-如内容卡（视觉一致性）。
不要在压力脚本（付款/安全）中描绘幽默的场景。

8）本地化和可用性

按行长放置（DE/TR更长）。
在本地翻译数字格式、货币、日期。
对于屏幕阅读器：role="status"，aria-live="polite/assertive"用于扬声器。
不要只在图像中输入含义：复制文本。
检查320 px的可读性和对WCAG的对比度。

9）度量与实验

• CTR的主要空态CTA；
• 转换为"第一次成功"（活动活动）；
• 第一次行动前的时间；
• 返回屏幕的频率没有进展；
• 搜索结果为零的比例；
• 情景支持请求。

• 特定vs通用标题；
• 动作的CTA动词vs是中性的；
• 增加时间估计；
• 次要CTA（FAQ）的可用性和按钮顺序；
• 插图vs图标vs没有视觉效果。

10）反模式

"这里空无一人"，没有解释或步骤。
关键步骤中的笑话（付款，安全）。
单个CTA"了解更多"不参考上下文。

被动承诺： "必须添加"。积极写道："添加……"

长段落：1-2句子最多。
播放器而不是形状上的标签-会损害A11y和理解。
隐藏限制（"即时"，尽管可能会延迟）。

11）发行前的支票清单

• 很明显，为什么是空的？
• 一个句子中有分区的价值吗？
• 是否有一个主要的CTA，如果需要，是次要的？
• 桉文简短（≤ 140个标志）和具体？
• 添加了时间/努力评估（如果适用）?
• 音调是否符合脚本（平静/支持）？
• 已验证本地化和A11y （aria属性、对比度）？
• 图像不主导CTA？

12）"之前/之后"示例"

游戏目录（第一个零）

之前： "这里还没有任何东西"

之后： "收集你的磁带。选择3种最喜欢的类型-开始推荐。［选择类型］"

零搜索

之前： "什么也没找到"

之后： "通过"高限额轮廓"没有结果。移除High limit过滤器或尝试roulette。［重置过滤器］"

付款

之前： "没有付款方式"

之后： "保存卡或钱包-充值和结论将变得更快。［增加方式］［委员会和时限］"

验证化

之前： "无法访问"

之后： "该部分在确认身份后可用。这~需要2分钟。［通过验证］［为什么这很重要］"

13）嵌入设计系统

• "标题"（字符串，可选）
• "body"（句子的简短文本1-2）
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• "icon/illustration"（可选）

将文本存储在组件旁边的i18n文件中,支持密钥和说明,连接音调图（音调和词汇按情况）。

14）快速构造（复制和使用）

• 标题："从第一步开始"
• 桉文是："一旦你选择了利益，这里就会有建议。"
• CTA："选择兴趣"
• 次要："它是如何工作的？"

• 文字："Po" {query}"一无所获。重置过滤器或重新定义查询"
• CTA："重置过滤器"
• 次要："目录"

• 文字："该功能可在年龄确认后使用。通常长达2分钟"
• CTA："确认年龄"
• 次要："为什么需要？"

• 文字："我们每天收集数据。通常长达30秒。我们将在一切准备就绪时通知我们"
• CTA："好"

最终的spargalka

上下文+价值+动作在一个堆栈中。
一个主要的CTA，没有视觉重量竞争。
简而言之：1-2句。
总是打破僵局：没有死胡同的屏幕。
本地化和A11y设置在组件级别。