Profile Header
个人中心头部
The top block of a Me page: avatar, nickname, a row of stats, and an edit button.
iOSAndroidHarmonyOSWebPersonalContent areaComponent
大白话说明
个人中心头部是用户身份的展示面:大头像、昵称与账号、关键数据横排,点任意处或编辑按钮进资料页。有会员体系时把会员标识贴在昵称旁,别单独占一行。
什么时候用
有账号体系的 App 的「我的」页顶部;社区类产品还兼做他人主页的头部。
什么时候不用
工具类产品没有社交与资产时,一行简洁的账号行就够,别硬撑一个大头部占首屏。
细节与变体
- 头像用本站「头像堆叠」之外的单人形态:圆形、至少 56px
- 数据行每个数字都可点进对应列表,不可点的数字别加粗
- 未登录态整体换成「点击登录」入口,不要留一片假数据
配套效果见下方「可用效果」。
Matching prompt (fill in & copy)
Effects you can apply
Reference implementations (open source)
- TDesign ↗ MIT · 免费(MIT)
Tencent's full-stack design system covering web, mobile, mini-programs, and desktop.
- Ant Design ↗ MIT · 免费(MIT)
The de-facto standard for admin interfaces in China — tables, forms, lists.