头像
Avatar
初级通用头像（Avatar）是界面中用来代表用户、团队或 AI 助手的小幅图像，常出现在名称或消息旁。它帮助你在聊天记录、成员列表等多人场景里快速分清“谁是谁”，也让同一个对象在不同页面更容易被认出来。
你可能会说：「我想在聊天消息和成员列表里放一张小图，让人一眼看出是谁发的、谁在这个团队里。」
动手看看项目成员列表里的头像
品牌网站 · 项目成员
3 位成员
林晓
产品设计师
负责人
陈宇
前端工程师
成员
周宁
内容编辑
成员
头像样式
切换头像样式，看看你能多快找到同一个人。悬停成员行或用 Tab 聚焦，整行会给出反馈；头像负责帮你认人，旁边的姓名负责确认身份。
姓名首字适合还没上传照片的成员：比统一人形更好辨认，也不需要图片资源。遇到同姓成员，仍要看完整姓名，不能只靠颜色。
要点做头像时，先想清楚哪些事？
- 1
先确定它代表的是谁
头像可以代表个人、团队，也可以代表 AI 助手。你做聊天界面时，先让同一个发言者在消息列表和成员列表中使用同一头像，这样用户才容易把两处信息对上。
- 2
给没有图片的情况留后路
有人没上传头像，图片也可能加载失败。你可以用姓名首字、默认图形等方式补上，并让名称仍然可见，因为用户不能只靠一张小图判断身份。
- 3
按展示位置处理图片
头像通常显示得很小，原图里的脸或图案可能被裁掉。你可以规定统一的显示尺寸和裁切方式，再检查聊天消息、列表和个人页里的效果，避免同一张图在不同地方看起来像换了一个人。
容易混淆的地方
头像代表界面里的某个对象，重点是帮你认出“这是谁”；图标通常代表操作或状态，比如搜索和通知。团队头像可能使用标志，但两者也不等同：标志承载品牌识别，头像则是在消息、成员列表等位置代表这个团队。个人头像也不一定是真人照片。
什么时候用
适合用
- 做团队协作网站的评论区时，用头像配合姓名，帮助读者分清每条评论是谁留下的。
- 做 AI 聊天工具时，给用户和不同助手显示头像，让对话轮次的发言者更容易辨认。
- 做后台成员列表时，在姓名旁展示头像，方便管理员扫视并找到要操作的人。
不适合用
- 页面里只有一段匿名公告，没有发言者或成员身份要区分时，用标题和正文展示就够了。
- 你想表达“这条消息发送失败”时，用状态文字或图标更合适；头像回答的是谁发的，不是发送结果。
- 你要给网站浏览器标签页放品牌识别图案时，用网站图标；那里不是展示成员身份的位置。
练一练选一个答案，看看解释
你在做一个 AI 工具的对话页，用户能与多个助手交谈。现在消息只有正文和时间，读者常看不出是谁说的。你会怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请为对话页和成员列表加入头像：分别展示用户与各个 AI 助手的头像，旁边保留名称；同一对象在两处使用一致的图片。没有图片或加载失败时显示默认形象，并检查小尺寸下的裁切效果。