加载、错误和空状态:AI应用漏掉的三件事

加载、错误和空状态,是 AI 做的应用最容易漏掉的三种:每个界面都有四种状态——加载、错误、空和成功——而大多数 AI 做的产品只处理了最后一种。这就是它们感觉像原型的原因。把这三种被遗忘的状态补上,你的应用立刻就会像一个别人愿意付费的产品。

我十秒钟就能看出,某个人是不是把应用直接从 AI 编程会话里发布出来的。我打开它,看到的是纯文本的"Loading..."。一个错误就让整个页面崩掉。空白的界面除了留白什么也没有。功能都能用。产品却依然感觉是坏的。

每个界面都有的四种状态:加载、错误和空状态,外加成功

当你的应用获取数据时——几乎每个界面都会获取数据——可能发生四种情况。数据正在路上。出了问题。还没有数据。或者数据到了,一切正常。大多数开发者只为圆满结局做设计,因为那是他们在开发时看到的状态。结果他们的应用有 40% 的时间看起来是坏的,因为真实用户会在另外三种状态里花掉真实的时间。

用户是根据自己此刻所处的状态来评判你的产品,而不是根据你设计时想到的那一种。每次页面加载需要 2–5 秒。首次使用的用户总是落在一个空界面上。网络会出故障。如果这些时刻看起来很糟,不管功能多好,你的产品都显得不专业。

加载状态:骨架屏胜过转圈图标

纯文本的"Loading..."有两重失败。它看起来很糟,而且真实内容到达时布局会跳动。解决办法是骨架屏:灰色、轻轻脉动的占位形状,与即将出现的内容的布局相匹配。一个由五张卡片组成的列表,会在五个灰色卡片轮廓后面加载。数据到达时,它正好嵌入骨架屏占着的位置。

骨架屏是我的秘密武器。即使应用并没有变快,它们也会让应用感觉快 2 倍,因为当人们能看到即将出现的内容的形状时,对等待的感知就不同了。这是用户体验心理学,而不是性能优化——而且你只需要向你的 AI 提一个要求,不用花任何成本。

简单的规则:对于按下按钮、耗时不到一秒的快速操作,用小的转圈图标;对于任何加载页面或列表的内容,用骨架屏。做骨架屏是套公式,不是设计任务:复制真实组件的布局,把文字换成灰色矩形,把图片换成灰色圆形,保持同样的间距,加一个脉动动画。只要你提出要求,AI 一次就能做到。

错误状态:要有帮助,不要吓人

AI 做的应用里默认的错误状态,是一条原始的技术信息——更糟的是一个彻底崩溃的页面。两者都会吓到用户。好的错误状态承担三项任务:用人话说明发生了什么("我们无法加载你的申请"),说明接下来该做什么("请检查网络连接后重试"),并提供恢复的办法——重试按钮、返回按钮、客服链接。

还有一层是大多数开发者跳过的:围绕整个页面的安全网,这样当某个组件崩溃时,它会显示一张礼貌的"出了点问题"卡片,而不是把整个屏幕一起拖垮。向你的 AI 要一个"error boundary(错误边界)",你就能得到这个——一个崩溃的小组件不再让整个页面报废。

永远不要把错误代码当作标题展示给用户。永远不要丢掉他们正在进行的工作。并且始终给他们一个可以按的按钮——无助感才是让错误显得灾难性的原因。

本书The Solopreneur RevolutionLuis Gonçalves 讲述如何在不辞职的情况下用 AI 打造独立创业者事业。获取本书 →

空状态:把死胡同变成下一步

空状态是三者中最被忽视的,也是最有价值的。每一个新用户都是从空界面开始的。如果那个界面一片空白,他们会认为产品坏了,然后离开。如果它欢迎他们,并指向下一步操作,它就变成了新手引导。

好的空状态有三个部分:一个清晰的、表示缺少了什么的视觉元素,一个有帮助的标题,解释这里将放什么("还没有申请"),以及下一步("分享你的申请链接")。语气很重要——"开始吧"是邀请,"这里什么都没有"是泄气。

空状态也应该随情境而变化。没有搜索结果,应该是"没有符合你搜索的结果——试试其他关键词",外加一个清除筛选的按钮。首次使用的用户,应该得到一句欢迎和对第一步操作的指引。同样的机制,不同的信息——每一种都把一个困惑的时刻变成一个被引导的时刻。

如何让 AI 每次都做出全部四种状态

下面这部分让这件事对非技术创始人变得可行:你不需要亲手构建其中任何东西。你需要提出要求。当你让 AI 做一个新界面时,大多数人只描述成功状态——所以他们得到的也只有这个。相反,要在请求里把各种状态写清楚:

创建申请列表界面。加载:显示带有五张占位卡片的骨架屏。错误:显示一条友好的提示,并带重试按钮。空:显示一条有帮助的信息,并带一个创建第一份申请的按钮。成功:显示数据。沿用现有界面的同样模式。

多写五行。AI 就会自动生成全部四种状态,而一旦某个界面有了这套模式,你就可以把它当作之后每个界面的参照。这就是用 AI 开发的核心技能:你来定标准,AI 来实现。人人都忘记的那些状态,之所以被遗忘,只是因为没人要求过。

处理好这三种被遗忘的状态,是让应用感觉真实的一半。另一半是一致性——每个界面看起来都属于同一个产品。那是一套体系,而不是一种天赋,而设计令牌和组件库恰恰能给你这套体系。

12 周企业职业生涯从来都不是计划申请加入 Solopreneur Accelerator。立即申请 →

常见问题

什么是加载、错误和空状态?

它们是每个界面除了"一切顺利"之外可能处于的三种情形:数据仍在到达、出了故障,或者还没有数据。用户会不断遇到这三种——每次页面加载、每次网络小故障、每次首次访问——所以只设计成功状态的产品,在很大一部分时间里看起来是坏的。

骨架屏真的能让应用感觉更快吗?

能——即使实际速度没变,感知速度也会提升。与内容形状一致的占位符,让等待感觉比通用的转圈图标短大约 2 倍,因为用户能看到即将出现的内容的形状,内容到达时布局也不会跳动。

好的空状态是什么样的?

三样东西:一个展示缺少了什么的视觉元素,一个解释这里将出现什么的标题,以及一个通向下一步操作的按钮。最好的空状态同时也是新手引导——每个新用户都从这里开始,所以把它当作迎宾地毯,而不是死胡同。

AI 会自动添加这些状态吗?

只有你提出要求时才会。AI 做的是你描述的内容,而大多数人只描述顺利的路径。在每个界面请求里加上四行——加载、错误、空、成功——并指向一个做得好的界面作为模式。从此以后,每个新界面都会带着全部四种状态上线。