跳到主要内容

Avator 头像

用图标、图片、字符的形式展示用户或事物信息


开发说明
  • 只是样式上的变化。
  • 头像类型

    图片头像、图标头像、字符头像。

    头像形状

    圆形和 4px 圆角。

    头像大小

    四种大小:xl: 64pxlg: 40pxmd: 32pxsm: 24px

    设计布局

    可结合姓名、描述等文案进行展示。

    何时使用

    • 辅助信息定位:在列表内通过头像帮助快速查询定位人物或项目。
    • 表示群组:通过头像组表示群组信息。
    • 表示账号信息:通过头像表示当前登录账号信息。

    搭配使用

    • 与导航组合使用,通常会搭配单行文字或单个图标,用于识别身份信息、登录信息。
    • 与列表组合使用,可搭配多行文字,用于展示结构化的成员名称及信息,方便快速识别。
    • 可与徽标数字组合展示,可作为消息提示或人员数量提示等。

    推荐/慎用

    • 对于字符型头像,需要根据场景定义最大字符数,避免字符过多影响可读性,降低可识别度。
    • 使用多个头像组合时,需根据场景和信息类型定义最长数量,避免数值过多影响可读性,降低使用效率。