SuperAPI AI 工具集

avatar-profile

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面中的用户头像与个人资料展示提供统一设计模式,覆盖头像尺寸、图片缺失时的回退、首字母头像、在线状态与群组头像等场景。

主要能力:

  1. 头像尺寸分级:XS 24px 用于密集列表与行内提及;SM 32px 用于评论与聊天消息;MD 40px 用于卡片与列表项;LG 56-64px 用于资料页头部与侧边栏;XL 96-128px 用于个人主页与账户设置。
  2. 回退链:优先用户上传照片;其次为彩色背景上的首字母(背景色由姓名哈希派生,保证同一人颜色一致);最后才使用通用剪影图标。
  3. 首字母规则:取名字与姓氏首字母(John Doe 为 JD);单名取前两个字母(John 为 JO);文字颜色在深色背景用白色、浅色背景用深色。
  4. 在线状态指示:绿点表示在线/活跃,黄点表示空闲/离开,红点表示忙碌/勿扰,灰点或无点表示离线;位置在头像右下角,大小为头像直径的 25-30%。
  5. 群组头像:重叠堆叠展示,显示 3 个并附“+5 more”,从左到右重叠,最近或最相关者在上,点击可展开完整列表。

使用方式与限制:资料未提供具体安装命令、代码示例或平台接入方式,仅给出设计规范层面的尺寸、颜色与交互约定,实际实现需自行按上述规则落地。