个人主页
Profile Page
别名:个人主页个人资料页用户主页个人介绍页头像主页空间主页介绍一下自己的页面
这是什么
以身份为中心展示"这是谁、有什么、在做什么"的页面：封面与头像建立视觉身份， 下方是姓名、简介与统计数字，再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮，本人视角配编辑入口，页面结构相同而操作不同。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 社区、创作者平台展示用户身份与内容
- 团队成员/作者等人物介绍页
- 用户需要查看或管理自己的公开形象
✕ 不适用场景
- 纯功能性的账号信息修改（并入设置页）
- 无内容流、只留联系方式的极简名片（静态区块即可）
- 需要强营销转化的官方品牌页
常见形式
卡片式
Card Profile
信息收在一张圆角卡片内，克制通用
封面头图式
Cover Profile
大封面 + 叠放头像，社交平台标准
极简列表式
Minimal Profile
只留头像、一句话与链接，名片风
作品集式
Portfolio Profile
内容以作品网格为主视觉
页面结构
- 01
封面与头像
身份的第一眼，头像与封面比例固定避免跳动。
- 02
身份信息
姓名、角色、简介、地点与联系方式。
- 03
统计
关注数 / 作品数等关键数字，横向排列。
- 04
内容页签
作品 / 收藏 / 关于等分区，切换不跳页。
- 05
操作按钮
关注 / 编辑 / 分享等主操作，按权限显隐。
实现要点
flexgridtransform: translateY(50%)object-fit: cover封面变体：头像用负 margin（translateY 或 -mt）叠在封面下缘，圆环描边避免与封面糊在一起。 统计数字用 flex 分列；页签切换内容流且保留滚动位置。关注按钮三态（未关注/已关注/互关） 与 hover 状态区分；本人视角用 avatar 菜单替换操作区。
相关概念
以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
组件包含组件用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件包含组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件