团队页
Team Page
别名:团队页团队成员页团队介绍页关于我们团队我们是谁页面公司团队页成员介绍页团队墙
这是什么
用人物卡片组介绍组织构成的页面：头像、姓名、职位与一句职责说明构成最小单元，按部门或职能分组， 常附加入职链接与价值观叙述。它把抽象的「我们」换成具体可辨认的人，用真实面孔建立信任。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 公司或产品需要展示核心成员
- 招聘与信任建设需要真实面孔
- 组织可按部门或职能分组呈现
✕ 不适用场景
- 只展示一位创始人（用关于页）
- 成员信息涉密或频繁变动
- 需要详细履历与作品（用个人主页）
常见形式
照片网格
Photo Grid
等尺寸头像网格，悬停显示简介
名册式
Roster
按部门分组的紧凑列表
焦点式
Featured
大图加关键成员长简介
页面结构
- 01
标题与使命
一句团队使命或规模说明，给页面定调。
- 02
成员网格
卡片等宽排列，头像统一裁切比例。
- 03
部门分组
按职能或部门分区，各配短标题。
- 04
成员卡片
头像、姓名、职位与一句职责，可跳转个人页。
- 05
招聘行动区
页尾指向开放职位，承接浏览者的兴趣。
实现要点
gridflexaspect-ratio: 1grid-template-columns: repeat(auto-fit, minmax(140px, 1fr))object-fit: cover成员网格用 repeat(auto-fit, minmax(140px, 1fr)) 自适应；头像统一 aspect-ratio: 1 与 object-fit: cover， 并带真实 alt 文本。卡片悬停可微抬，但必须在 reduced-motion 下关闭。按部门筛选时保持键盘可达， 卡片本身是可聚焦链接而非纯装饰 div。
相关概念
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件以圆形或圆角方形小图代表用户或组织：照片、姓名首字母或图标占位。 常与姓名一起出现在导航、评论与成员列表，可附在线状态点或多人叠加。
组件包含组件附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
组件包含组件以身份为中心展示"这是谁、有什么、在做什么"的页面：封面与头像建立视觉身份， 下方是姓名、简介与统计数字，再用页签切换动态、作品或文章等内容流。 他人视角配关注/私信按钮，本人视角配编辑入口，页面结构相同而操作不同。
页面相似概念鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用