Avatar
头像
WebMobileDesktop上手难度: 容易
代表一个人或一个实体的圆形小图。
Live Demo
真的可以点陈陈小明林林晓王王大锤赵赵敏
头像永远要有降级方案：首字母 → 默认图标。
你刚才看到的这个：聊天列表左边那个圆形人像、GitHub 用户名旁边的小圆图、评论区每一行的头像。
它到底是什么
Avatar 帮用户在不看名字的情况下快速认出「这是谁」。它的降级方案极其重要：图片加载失败时显示姓名首字母（中文取姓氏），再失败显示通用人形图标。
头像avatar用户头像profile picture圆形头像
Anatomy · 它由什么组成
Image图片
正方形裁切为圆形
Fallback降级
首字母 / 默认图标
Ring描边
在线状态或 VIP 标记
Size尺寸
xs 16 / sm 24 / md 32 / lg 40 / xl 64
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要区分不同的人或实体 | 用 |
| 列表中有多个人物 | 用 |
| 需要显示「当前是谁登录了」 | 用 |
| 只有一个人且不会混淆 | 视情况 |
头像加载不出来还留一片灰，会让页面看起来像坏了——一定要有降级方案。
头像不是点击目标，点击应该落在整行或名字上。
Similar Patterns
别搞混一句话区分：代表一个人或一个实体的圆形小图。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
给列表每行加头像：28px 圆形，加载失败时降级为姓名首字母（中文取姓），再失败显示默认人形图标；在线用户加绿色描边。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个用户头像。
改成这样说
加头像：圆形 + object-fit: cover，onError 降级链为「首字母（中文取姓）→ 默认人形图标」，背景色从名字哈希生成，在线状态用白边 + 绿描边，alt 用真实姓名。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。