状态信号：一个状态一个形状，动一下就停

给 Jojo 设计状态信号的时候，我最先想到的也是最常见的做法：头像右上角一个小圆点，工作中是黄的、完成是绿的、出错是红的，进行中的再让它闪一闪。真放到 24px 的头像上、在一排 Agent 里并排看，就发现这套信号几乎没法读：颜色一去掉全一样，几个都在闪，也分不出谁真的需要我。

为什么这样更好#

• 一个状态一个轮廓。工作中是一段绕着圆点走的进度弧，等你回复是一个带问号的气泡，完成时圆点变成带勾的徽章，出错是点里的感叹号，离线则是整个头像变灰。轮廓本身就是答案，颜色只是加强。
• 用最苛刻的条件验收。缩小、灰度、关掉动画，三个条件叠在一起还能一眼分清，才算设计完成。底下那排“体检”就是这个检查。
• 只有正在进行的事一直动。工作中的进度弧会一直走，因为事情确实在进行；等你回复的气泡弹出来一次就停住，完成时对勾画完、闪一下就停，出错晃两下就停。一屏头像里只有真正在忙的那个在动，注意力才不会被浪费。
• 状态和表情分开。出错只是一个信号，不代表角色要哭；表情是角色的情绪，状态是任务的进度，两条线互不干扰。
• 永远配一行文字。图形再清楚，也给它配上“等你回复”这样的文字，读屏软件和第一次看到的人都能明白。

大约 8% 的男性有不同程度的红绿色觉异常，而“绿 = 好、红 = 坏”恰好是他们最难分辨的一组颜色。这也是为什么颜色不能单独承担意思。

什么时候不该用#

• 状态只有两种、旁边又有文字（比如“已发布 / 草稿”标签），文字本身就够了，不必硬配图标。
• 状态种类太多时，形状也会不够用。超过五六种，就该老老实实写文字，而不是发明一套没人记得住的图标语言。

出处#

形状和动效规则来自我为 Jojo 和它的伙伴们设计的状态规范：工作中、等你回复、完成、出错、离线，每种都要在 24px、灰度、静止下分得开，而且状态永远不改变表情。依据是 WCAG 的 1.4.1 Use of Color ↗：颜色不能是传达信息的唯一方式。