通用原则

• 使用圆形暗示为成员，区分于其他对象，比如项目。

• 头像可搭配 Tooltip 显示用户的完整姓名或相关信息

类型

类型	何时使用
单个头像	用于仅一个成员的场景
头像群	用于展示一群独立的成员
头像组	用于展示一个有组织的群组成员，重在传递组织，而非个人。

单个头像

• 需展示成员头像及成员名称

• 鼠标 hover 可移除成员

• 点击成员头像之后的操作，根据业务需要定制

构成

• 头像

• 名称

• 移除外框

行为

• 点击成员名称：点击后行为业务决定，可以唤起「成员名片」或「成员选择组件」

• 移除成员：鼠标 hover 头像热区，出现「移除外框」，点击后移除头像

头像群

• 需完整展示组内每一个成员的头像

• 头像之间独立不遮挡，区别组的暗示

• 每个头像均可以单独点击，点击之后的操作根据业务需要定制

构成

• 头像

  • 移除外框

• 添加成员入口

行为

• 查看成员名称：鼠标 hover 成员头像，Tooltip 显示成员名称

• 移除成员：鼠标 hover 成员头像，出现「移除外框」，点击后移除头像

• 点击成员头像：点击后行为业务决定，可以唤起「成员名片」或「成员选择组件」

• 添加成员：点击「添加」，唤起「成员选择」组件或根据业务需要定制

头像组

• 默认最多只显示 4 个头像位

• 超过 4 个头像，最后一个位置为 ...

• 头像之间堆叠，表意组的暗示

• 每个头像建议不要增加单独点击的交互行为，统一为点击进入组成员列表

构成

• 头像

• 更多成员查看入口

行为

• 查看成员名称：鼠标 hover 成员头像，Tooltip 显示成员名称

• 查看全部成员：点击「···」，进入成员列表页。

默认头像

当用户未上传头像时，系统会自动生成头像。规则如下：

• 字体颜色默认为白色

  • 公有云下字体为 Microsoft-YaHei

  • 私有部署下默认为 simhei-regular

• 纯东亚三国语言取后 2 位，带空格的名字取前 2 字的首字母，其它取前 2 字符

• 背景颜色默认从色板中伪随机选择

实践案例