用途:User Profile 用于展示和管理用户身份、活动及个人信息,既是他人查看的身份卡,也是用户查看和编辑自身数据的工具。常见场景包括社区或社交平台的公开资料页、已登录用户的个人资料与编辑、协作工具中的团队成员资料、内容平台的作者资料,以及开源或市场平台的贡献者资料。
主要能力:支持查看与编辑两种模式,平衡信息密度与视觉清晰,并通过隐私控制让用户决定哪些信息对他人可见。
使用方式:先确认该模式与问题及约束匹配,再从 references/pattern.md 的解剖与示例出发,选择最小可行变体;在叠加视觉打磨前先应用无障碍、性能与交互护栏,并用测试指南验证键盘、屏幕阅读器、响应式与失败场景。
无障碍要点:头像 alt 文本包含用户名;标题层级正确(姓名用 h1,分区用 h2);操作按钮可键盘访问且有可见焦点;日期使用带 datetime 属性的 <time>;编辑模式提供清晰表单标签。避免仅用头像作为唯一标识、无明确提示就使统计可点击、在资料页自动播放媒体。
性能目标:资料页加载(含头像与内容)< 500ms;头像图片优化后 < 100KB 并提供多尺寸;编辑模式切换 < 50ms;活动流超过前 10 项懒加载;头像上传加处理与预览 < 2s。可用 srcset 提供响应式头像尺寸。
常见错误:无默认头像导致破图,应使用首字母头像或通用剪影;新资料无空状态,应提示“添加简介”“上传头像”等;编辑模式整页刷新,应改用行内编辑或模态覆盖,保持在同一页面。
限制:不适用于账户安全设置、应用级配置、无需交互的通讯录卡片、用户管理后台。完整实现细节、示例与测试说明见 references/pattern.md。