1/4
2026/7/7 · 9:14

Day 25 · Avatar 头像:小小圆脸,帮你认人

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

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

相似内容

评论

登录后可发表评论。