头像
Avatar
别名:头像用户头像圆形头像人员头像账号图片首字母头像名字前面的小圆图
这是什么
以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
交互实验室
试一试，再决定怎么用比较单人头像、默认头像与叠放头像组。
正在加载实验室…
使用时关注什么
- 01图片缺失时仍能识别姓名或身份。
- 02头像组超出可见数量时，用计数说明剩余成员。
✓ 适用场景
- 用户身份的稳定视觉锚点（导航、评论、成员）
- 无图时用姓名首字母 + 品牌底色兜底
- 群组、多负责人场景做叠加展示
✕ 不适用场景
- 非人格化的系统对象（改用图标）
- 图片本身是内容主体（用完整图片展示）
- 需要展示丰富个人信息（用 profile 页或卡片）
常见形式
图片
Image
用户上传的照片，裁切填充
首字母
Initials
无图兜底，底色由名字散列固定
叠加
Stacked
多人重叠 + 余量计数
实现要点
border-radius: 9999pxobject-fit: coverwidthheight图片用 object-fit: cover 裁切防变形；首字母头像底色由名字散列映射到固定色板， 保证同一个人颜色稳定；状态点 absolute 右下并加描边。尺寸阶梯常用 24/32/40/48px。 图片必须有 alt 文本，纯装饰时用 aria-hidden 或空 alt。
平台 API
<img>相关概念
徽标Badge
附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件相似概念下拉菜单Dropdown
由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念个人主页Profile Page
以身份为中心展示"这是谁、有什么、在做什么"的页面：封面与头像建立视觉身份， 下方是姓名、简介与统计数字，再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮，本人视角配编辑入口，页面结构相同而操作不同。
页面搭配使用