Avatar 头像

用于展示账号信息,通常为一个或一群成员的头像展示。

    通用原则

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

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

    类型

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

    单个头像

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

    • 鼠标 hover 可移除成员

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

    构成

    • 头像

    • 名称

    • 移除外框

    行为

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

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

    头像群

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

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

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

    构成

    • 头像

      • 移除外框
    • 添加成员入口

    行为

    • 查看成员名称:鼠标 hover 成员头像,Tooltip 显示成员名称

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

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

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

    头像组

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

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

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

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

    构成

    • 头像

    • 更多成员查看入口

    行为

    • 查看成员名称:鼠标 hover 成员头像,Tooltip 显示成员名称

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

    默认头像

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

    • 字体颜色默认为白色

      • 公有云下字体为 Microsoft-YaHei

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

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

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

    实践案例