AI 写的项目，UX 交互很怪，但是不知道怎么改？
一天一个 vibe coding 术语课，今天讲加载态、无数据态、错误态和权限态。
一、什么是加载态、无数据态、错误态和权限态？
用户打开订单列表。此时正在找后端拿数据，订单列表还没出来。中间一个圈在转，或者先摆几块灰色占位。
这个叫加载态，英文 loading state。
过一会儿，数据成功回来了。刚注册的账号确实一条订单都没有。中间写着「您还没有下单」，底下一个「立刻去下单」按钮。
这个叫无数据态，英文 empty state，中文也常叫空状态。
再换成一个明明下过单的用户。可要是网断了，或者后端程序报错，订单没有成功读出来，页面空着的原因就变了。
这时候页面要是还照刚才那一套，中间写着「您还没有下单」，底下挂着「立刻去下单」，用户就以为自己的单子没了。
实际上单子还在。他一点那个按钮，可能再付一回，更严重的甚至觉得这个产品在骗人。
这时候应该用错误态，英文 error state，明确告诉用户这一次没有成功。
再换成一个没有查看资格的账号。系统拒绝当前账号访问这块内容，这也不是没有数据，更不是多点几次重试就能解决。
这叫权限态。英文界面上常写 access denied，也就是拒绝访问。
换到商品、消息和审批，判断方式一样。普通员工点进只有管理员能看的审批，就是权限态。
一个页面上还可以同时有好几种。数据看板上，订单量正常显示，销售额这张卡片还在加载，另一张卡片当前账号不能看，这三块各自显示自己的状态。
要把这四个分清，第一步不是看它长什么样，是问这一块内容现在为什么空着。
二、内容还在读取，正常结果没出来，叫加载态
用户刚点开订单，页面上一条订单也还没有。这时候页面只需要说清一件事：数据还在路上，页面没有卡住。
如果这时候先写「暂无订单」，用户刚准备点「去下单」，过两秒原来的订单又冒出来。页面前后打架，用户自然不知道该信哪一次。
内容区可以放一个不停转的小圆圈，旁边写着「正在加载订单」。也可以先摆几块灰色形状，占住内容将来出现的位置，这叫骨架屏，英文 skeleton。两种都是加载态的样子。
需要等待数据时才用加载态。数据已经在本地，或者能直接显示，就不用先转一下再消失。
用户改了筛选，原来的订单已经不能代表新条件，新的结果又还没回来，这一块内容就重新进入加载态。刚选的筛选条件要留下，旧订单也别假装成新条件下的结果。
页面上已经有能看的东西，只是一张数字卡片的数据还在等，就只让这一张进加载态。别为了一张数字，把整页锁住。
换到商品详情、消息和审批，只要正在等新的内容回来，对应的内容区也是加载态。
三、数据成功读完，当前范围里确实没有内容，叫无数据态
刚注册的账号再打开这份订单列表，一条订单都没有。这一次是真的没有。
用户得看懂：这里是空的，接下来能干什么。
中间通常是一块说明区。一个图标，一句短标题，一两句说明。用户确实有下一步能做，再放一个按钮。
标题写「您还没有下单」。下面再补一行，写着「下单以后会显示在这里」。底下还是那个「立刻去下单」按钮。
成功读完却没有内容，其实有三种，下一步各不相同。
第一种就是刚才那份订单，第一次空着。先告诉用户这里将来会出现什么。如果当前账号确实能创建或者添加，再把他送到能填满这里的那一步。收藏夹、优惠券和关注列表第一次空着，也是这么处理。
第二种是条件把内容滤没了。商品列表勾了「只看有货」，搜索框里又打了「无线耳机」，数据成功读完，当前条件下确实一件都没有。这不是店里没货。中间该写着「没有符合条件的商品」，底下一个「清除筛选」按钮。如果这时候中间写着「这家店还没有商品」，用户就以为白来一趟，转头就走。订单这边也一样，搜索框里打了订单号 888，当前搜索确实找不到，就承认没找到，让用户改词或者清空。刚选的筛选、刚打的字，都留着，别一空就抹掉。
第三种是用户自己做完的。待办勾完了，收件箱读完了，购物车结完了。待办全部完成，中间写着「目前没有待办」就够了，别马上硬塞一个「新建待办」。购物车结完，页面先承认已经结算完成；要不要继续购物，是下一步，别和刚完成的结果混在一起。
四、网断了，或者后端程序报错了，叫错误态
同一份订单列表，用户在电梯里打开，信号断了。也可能网好好的，是后端程序自己出了岔子。
不管是哪一种，订单都没读回来。用户得看懂：刚才没成功，大概出了什么事，接下来能怎么办。
说明区还在。标题换成「订单加载失败」，底下一个「重试」按钮。别只丢一句「出错了」。
如果这时候页面还是无数据那一套，就把失败说成了没有。用户不知道该重试。
列表里已经有二十条，再刷一次失败了，就把这二十条留着，只告诉用户这一次没更新成。第一次打开就失败，才把整块换成错误态。
如果接口带回的是专门给用户看的错误说明，就直接写原因。
要是没有这样的说明，就别把一堆乱码似的报错全摊上去。
第一，用户看不懂。
第二，有的报错里还夹着不该给用户看的资料。
这些资料页面上不写出来，不等于它没被传出来。不过那是后端要收住的事，不在这四种状态里。
只有确定是服务器出了问题，才写「服务器暂时出错」。原因判断不了，就写「订单加载失败」。能重试时，底下还是那个「重试」按钮。
五、系统拒绝当前账号访问，叫权限态
再换一个只有管理员能看的审批入口，普通员工点进去，直接被挡在外面。
这时候页面要是给他一个「重试」，点一百次也出不来。区别在账号资格，不在重试次数。
如果这时候还是无数据那一套，就是页面在说谎：它把不能看讲成了没有。
说明区换一套字。标题写着「没有访问权限」。说明写「当前账号没有查看权限」。
下一步只给用户真做得到的那一条。
项目里有申请流程，就放「申请权限」。没有申请流程，就写「建议联系管理员」。换错账号能解开，就给「换账号」。不管哪一种，都给一条「返回」，回到能看的页面。
别写成「去创建」。没有创建资格的用户，点一下会再撞一次墙。
挡住的也不一定是整页。
还是那份审批，换成普通员工能打开的那一种。他看得到谁提交的、走到哪一步，只有每条的报销金额不让他看。这时候就只换金额那一格，写「没有权限查看」，不放按钮。提交人和状态还应该留着。
要是内容本身敏感，比如别人的订单，页面不一定要告诉用户这笔订单是否存在。只说当前账号不能访问，给「返回」。
还没登录是另一回事。通常先让用户登录。这里说的权限态，是系统已经认出了当前账号，但不允许它访问这块内容。
六、这四种状态在页面上怎么摆
整页订单空着的时候，中间从上到下：一个图标，标题和说明，最底下是一个「立刻去下单」按钮。
这叫纵向排列，英文 vertical layout。
整页空着，或者空出来的地方比较大，纵向排列更容易把图标、说明和操作放完整。如果用户接下来要去下单、重试或者申请权限，就把对应按钮放在说明下面，不用让他满页找。
订单列表里有一行金额。当前账号不能看金额。左边一个图标，右边写着「没有权限查看」，没有按钮。
这叫左右排列，英文 horizontal layout。
侧栏、表格里的空行和小卡片，地方比较紧，常用左右排列。地方更小的时候，甚至可以只留一句文字。
用哪种排法，先看这块空间和旁边原本的内容。要不要按钮，再看用户有没有真能执行的下一步。这是两件事，不能拿左右还是纵向替用户决定。
没有下一步，就根本不放按钮，不是放一个点不了的。反过来，小卡片加载失败、用户必须当场重试，就算空间不大，也得把重试入口留在附近。
要是顶上本来就有「新建」按钮，说明区里就不用再塞一个。一屏好几张卡片同时空着，每张都丢一个最重的按钮，用户会先停一下：我该点哪个。动作留在本来就有的入口上。
需要整块替换内容区时，无数据态、错误态和权限态都可以用这块说明区。不需要整块替换的，就只复用这套文案和视觉规则，把提示放在对应内容附近。
七、第一次用到这四种状态，就适合做成项目里统一的一份
几乎所有项目里，这四种状态都会反复出现。订单空了要用，消息打不开要用，审批没权限也要用。
假如你让 AI 每个页面自己摆一遍，有的从上到下，有的从左到右，按钮大小还不一样，看起来就不像同一个产品。
所以你在项目里第一次真正用到这四种状态，就让 AI 把它们做成一份，后面都用这一份。这叫封装。
这一份做成以后，再碰到订单空了、消息打不开、审批没权限，就不用让 AI 重画。你只要告诉它：这一次是哪一种，用什么图标，两句什么说明，要不要按钮，填进这一份就行。
纵向还是左右，间距、字号、图标多大、按钮长什么样，也由这一份管着。
加载态零件更少，常常就是转圈和一句状态文字，或者骨架屏。这一份同样能用，只是少填几样。
以后要改样子，也只改这一份，不用每个页面分别改。
八、这四种状态不能互相顶替
样子统一了，判断还是不能混。同一块内容、同一时刻，只能用符合真实情况的那一种主要反馈。
还在读取，就用加载态。成功读完，有内容就换成真实内容；确认当前范围里确实没有，才用无数据态。没有成功读出来，就用错误态。系统拒绝当前账号访问，就用权限态。
你要是只跟 AI 说空着不好看、加两句字，这四种情况最后都可能变成中间写着「暂无数据」。
网断了还拿无数据那一套来顶，用户以为订单没了，可能再付一回。
当前账号不能看，还写成没有。用户不知道该返回、换账号，还是申请权限。
还在等就先写成没有，真订单出来时，用户已经不信这个页面了。
空白看起来一样。先问这一块为什么空着，再用对的那个名字。
