个人中心头部

Profile Header

「我的」页面最上面那块:头像、昵称、一行数据(关注/粉丝/积分)和编辑按钮。

iOSAndroid 安卓HarmonyOS 鸿蒙Web 网站个人空间内容区组件

大白话说明

个人中心头部是用户身份的展示面:大头像、昵称与账号、关键数据横排,点任意处或编辑按钮进资料页。有会员体系时把会员标识贴在昵称旁,别单独占一行。

什么时候用

有账号体系的 App 的「我的」页顶部;社区类产品还兼做他人主页的头部。

什么时候不用

工具类产品没有社交与资产时,一行简洁的账号行就够,别硬撑一个大头部占首屏。

细节与变体

  • 头像用本站「头像堆叠」之外的单人形态:圆形、至少 56px
  • 数据行每个数字都可点进对应列表,不可点的数字别加粗
  • 未登录态整体换成「点击登录」入口,不要留一片假数据

配套效果见下方「可用效果」。

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • TDesign(腾讯) ↗ MIT · 免费(MIT)

    腾讯出品的全栈设计系统:Web、移动、小程序、桌面都有,国内生态最完整的一套。

  • Ant Design(蚂蚁) ↗ MIT · 免费(MIT)

    国内中后台的事实标准:表格、表单、列表都是行业参照物。