1/4
July 7, 2026 · 9:14 AM

Day 25 · Avatar 头像：小小圆脸，帮你认人

Avatar 头像用来代表用户或实体，帮助读者在列表、评论、账号入口中快速识别「谁」。本期 4 张图讲清它与 Icon / Badge 的边界、常见形态，以及使用口诀：能认人，才用 Avatar。

UI/UX 组件每日一讲
UI/UX 组件每日一讲@brownsun
Avatar 的职责很窄：让用户先认出「这是谁」。Atlassian 把 Avatar 定义为用户或实体的视觉代表，Ant Design 也把它用于代表用户或事物，并支持图片、图标或字符展示。1 2
和它最容易混在一起的是 Icon 与 Badge。Icon 是语义化的矢量图形，回答「这是什么动作或对象」；Badge 是贴在图标右上角的状态或数量提示，回答「现在有什么状态」。3 4
常见形态不用记复杂：图片头像、字母头像、图标头像、头像组。MUI 的 Avatar 文档也按图片、字母、图标、分组、徽标等方式展示用法。5
使用时先问一句：这里需要识别用户、组织或实体吗？如果答案是肯定的，Avatar 很合适；如果只是装饰、提示状态，或表达按钮动作，就该换成更准确的组件。
记一句：能认人，才用 Avatar。

References

  1. 1Avatar - Atlassian Design
  2. 2头像 Avatar - Ant Design
  3. 3图标 Icon - Ant Design
  4. 4徽标数 Badge - Ant Design
  5. 5React Avatar component - Material UI

Related content

Comments

Sign in to comment.

    More from this channel
    View the full content archive of "UI/UX 组件每日一讲"