跳到主要内容
Termlib

UI 组件 · 数据展示

头像

Avatar

也叫：用户头像、头像框、Profile Picture、头像组

用圆形或圆角方形的小图片代表一个人或一个账号，没有图片时显示姓名首字或默认图标。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在导航栏右上角放一个 32px 的圆形用户头像，有头像图时裁剪居中显示，没有时显示姓名首字、浅灰底深灰字。头像右下角有一个 8px 小圆点表示在线状态，点击头像弹出下拉菜单，包含「个人中心」和「退出登录」。图片加载失败时自动回退为姓名首字。

发给

01判断

你的内容是这样吗？

对照两列，确认头像是不是你要找的。

符合这些情况，用头像

  • 在评论、消息、聊天等内容旁边，需要一眼区分是谁发布的时候
  • 在导航栏右上角表示当前登录用户，并作为个人菜单的入口时
  • 成员列表、协作者名单等需要展示一组人的地方，可以叠成头像组

是这些情况，换成别的

  • 展示商品图、文章配图等内容本身的图片时

    改用图片

  • 表示分类或状态时，应该用标签，不要拿头像当图标

    改用标签

  • 需要看清人物细节的大幅照片，头像尺寸太小不合适

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    没有图片时显示破图图标或空白圆圈，没有回退成姓名首字

  2. 02

    同一个列表里的头像大小、形状不统一，有圆有方

  3. 03

    图片没有按比例裁剪，被拉伸或压扁成椭圆

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由圆形或圆角方形的容器和其中的图片、姓名首字或默认图标组成，可附带在线状态点或徽标。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1小尺寸的圆形图片，或写着姓名首字的圆形色块
  2. 2常位于导航栏右上角，或列表、评论每一行的最左侧
  3. 3多个圆形略微重叠排成一排，末尾带「+N」

04解释

详细解释

头像是一个小尺寸的圆形或圆角方形图片，用来代表用户、团队成员或某个账号。它常出现在导航栏右上角、评论和消息列表的左侧、成员名单里。用户没有上传图片时，一般显示姓名的第一个字或默认人像图标，配上灰色或按名字生成的底色。

多个头像可以错开叠成一排，组成头像组，超出数量时显示「+5」这样的计数。头像右下角的小圆点表示在线状态，右上角的红色数字表示未读消息，这两者属于徽标的用法。

头像和普通图片的区别在于用途：头像只用来识别「这是谁」，尺寸小、统一裁成圆形；商品图、文章配图这类内容图片应该用图片组件展示。

开发者信息
术语 ID
component-avatar
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-avatar
  • .el-avatar
  • [class*="MuiAvatar-root"]
  • .arco-avatar
  • .t-avatar
  • .n-avatar
  • [data-slot="avatar"]
  • img[alt*="avatar" i]
  • img[alt*="头像"]
  • img[class*="avatar" i]
  • img[src*="avatar" i]
  • img.rounded-circle
  • img.rounded-full
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • avatar
  • user-avatar
  • profile-pic
  • profile-photo
  • profile-avatar
  • avatar-img
  • user-photo
  • author-avatar
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Avatar
  • UserAvatar
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30