需要在多人里指认「这是哪个人」：评论区作者、团队成员、协作者堆叠、聊天发言者、用户菜单入口。
界面与交互 · 内容与数据展示
头像Avatar
用照片或姓名首字母指认一个人的身份线索；缺图回退、状态变化、多人堆叠时仍保持可辨认、可访问。
团队页的头像：缺图、状态、尺寸、超员都长在物件上
亲手切换图片状态、在线状态、尺寸和显示人数，再点「邀请加入」——主头像、状态点、堆叠和加 N 都在头像物件上即时变，不只在底部说明里。
第 0 步：这是团队协作页。主角色固定为 56px，在线状态同时有实心点与「在线」文字。现在只需做三件事：模拟图片失败、邀请协作者、重置。
张张三产品负责人在线
其他协作者共 6 人 · 显示 3 位 · 另有 3 位
- 李
- 周
- 陈
- +3
对照：主头像显示照片和「在线」文字；协作者只显示 3 位，另有 3 位收成加 3。下一步：模拟图片失败、邀请一位协作者，或重置回基线。
面板教会的知识点
把刚才操作里看到的现象命名为五条规则。
- 缺图首字回退：照片失败时换成姓名首字「张」，圆形尺寸不变——身份线索保留，不露破图、不跳布局。
- 状态用形状加文字：在线实心点、离开半填、离线空心环，再配文字标签；色盲用户也读得出，不只靠颜色。
- 尺寸是可读性阶梯：大号 56px 给主角色，中号 40px 给列表行，小号 28px 给密集堆叠——像素值有意为之。
- 超员用加 N 汇总：固定显示前几位，剩余人数收成「加 N」；完整人数走可访问名称，读屏读得出。
- 可访问名称与视觉同步：读屏读「张三的头像，图片失败，显示姓名首字，在线」，与眼睛看到的是同一个人。
什么时候用，怎么用
从一个具体信号判断，再走最短路径。
纯品牌或装饰图（用 image）；只表达分类的色块（用 tag 或 badge）；代表事物而非人物（用 icon）。
- 定来源：有照片显示照片；没有或加载失败，回退姓名首字，圆形尺寸保持不变。
- 定尺寸：按场景选阶梯（主角色大号、列表中号、堆叠小号），同场景内尺寸一致。
- 定状态：在线/离开/离线用形状加文字，不只用颜色；状态点压在头像角落并加白环。
- 定超员：堆叠固定前几位，剩余收成「加 N」，可聚焦打开完整名单；可访问名称读完整人数。
- 定名称：信息头像 alt 说明「谁」；装饰头像空 alt 但姓名文本可见；可点击头像说明动作。
同一评论作者头像：正例与反例
目标都是指认作者。差别只在于缺图、状态、可访问名称是否守规则。
照片失败回退首字「张」，尺寸不变；在线用实心点加「在线」文字；alt 是「张三的头像，在线」；堆叠超员显示「加 3」。
断网仍认得人，读屏同步，状态一眼读得出。加载失败露出破图图标且尺寸塌陷；在线只靠绿点没有文字；alt 空着；6 人硬塞成一行挤压姓名。
断网后认不出人，色盲读不出状态，读屏什么也说不出。快速自测
评论区一位作者的头像图片加载失败，且他当前不在线。最稳的做法是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。