头像Avatar
内容与数据展示用图片、名字首字或图形代表一个人或团队
头像可以代表用户、团队或组织，形式不一定是圆形人脸，也可以是名字首字或 Logo。成员列表和评论区通常还要显示名称，不能只靠头像辨认身份。
林
林油+5
什么时候用
- 评论区、动态里标识这话是谁说的林林小hu 2 分钟前这个配色很舒服 👍
- 团队成员列表、协作者头像组林油K+58 人协作中
- 个人中心的大号头像油阿油前端工程师 · 深圳
- 用户没传图时用名字首字符兜底林油K没传头像？名字首字顶上
什么时候不用
- 只给头像不给名字，谁知道这是谁ABC三个圆圈，谁是谁？
- 风景图、插画想圆形展示 → 用 图片 Image风景插画裁成圆圈，两头都看不清
- 证件照要完整信息，圆形裁切会裁掉关键部分脸证件照被圆形裁掉半张脸
- 同一屏反复出现同一个人的大头像我我的主页我我的文章自己的页面，脸出现四次
组成结构 · Anatomy
1头像Avatar圆形或方形的容器
2头像内容Content用户图片，缺省时用名字首字
3状态点Status可选，表示在线 / 离线
常见变体 · Variants
圆形Circle
代表真实用户的默认形状
方形Square
代表团队、应用等非个人对象
多尺寸Sizes
油油油
按场景主次分级:个人中心用大,评论用小
头像组Group
林+5
一眼展示这件事有哪些人参与
典型使用场景
评论区
全部评论 (2)
林小hu 2 分钟前
这个配色很舒服 👍
油
阿油 1 小时前
收藏了，等更新下一篇
团队成员列表
林小huyou@example.com
负责人
油
阿油ayou@example.com
成员
构建机器人bot@example.com
成员
个人中心
林小hu
前端工程师 · 深圳
12作品
348粉丝
56关注
协作者展示
《AI 图鉴》产品文档
林
+5
8 人正在协作