团队介绍页：人物排版的艺术

背景：公司官网缺一个团队页面。不是简单的「头像 + 名字 + 职位」陈列，而是让人感受到团队氛围和文化。我用 huashu-design 做了一个有人情味的团队介绍页，18 分钟。

为什么大多数团队介绍页很无聊？

打开大部分公司官网的「团队」页面，就是一行行排列的头像 + 名字 + 职位。信息没有错，但感觉像通讯录，不是团队介绍。

好的团队页面应该传递两样东西：
1. 专业性：这些人靠谱吗？
2. 文化感：这些人好相处吗？

大多数团队页面只做到了 1，忽略了 2。

第一步：确认结构

开工前 AI 给了几个布局选项：

选了交错排列——每行两个人，但左右交替（左图右文 / 左文右图），打破网格的单调感。5–8 人的团队页面用这个布局最出效果。

第二步：单人卡片——信息量刚好

每张卡片的信息层级：

[头像 · 真人照片]    [姓名 · 职位]
                     [一句话介绍 · <10 字]
                     [社交媒体链接]
                     [个人风格标签]

头像用真人照片（不是 SVG 人脸！），圆形裁切，灰度处理——团队页面统一灰度，去掉肤色/光线差异的干扰，视觉更统一。

名字用 18px 衬线字体，职位用 12px Inter（灰色），一句话介绍用 13px 300 weight。

关键细节： 每个人写一句 10 字以内的个人介绍，不是「负责 XX 业务」而是个人特点——「全栈但偏爱前端」「前建筑师转行设计师」「团队里的段子手」。这些细节让团队页面有了人味。

第三步：交互——hover 展示更多

桌面端添加了极简 hover 交互：
- 头像轻微放大（scale 1.02）
- 显示一个隐藏标签——「Coffee Chat 欢迎 ☕」

这个交互没有功能性价值，但是它传递了一个信号：这些人愿意和你聊天。

第四步：团队文化区

在团队成员列表下方，加了一个「团队文化」区块——用 3 张带文字的小图片展示团队日常：

┌─────────┐ ┌─────────┐ ┌─────────┐
│ 每周五   │ │ 远程友好  │ │ 开源优先 │
│ 设计评审  │ │ 4 个时区  │ │ 16 个项目 │
└─────────┘ └─────────┘ └─────────┘

每张卡片 = icon + 标题 + 一行描述。没有边框，没有背景色，靠留白区分。

第五步：响应式——手机上的阅读体验

团队页面在手机上最容易出问题——两列变一列，间距全乱。

huashu-design 的处理：
- 桌面（≥1024px）：两列交错排列
- 手机（<768px）：单列，左图右文统一

头像在手机上缩小到 48px，名字字号保持 16px——保证在小屏幕上也能看清人。

为什么不用 carousel / slider？

团队页面最常见的设计失误：用 carousel 展示团队成员。用户必须点箭头/拖拽才能看到所有人。

一个人需要被「找到」，不是被「展示完」。 面试官想找的是「设计总监在哪儿」，carousel 让他多点了 3 次——这就是差的体验。

全部展示、可扫视、可定位——这是团队页面的设计原则。

耗时复盘

核心心得

团队介绍页设计的本质：让人看完想说「我想和这些人一起工作」。

不要只展示履历——展示性格。不要只陈列职位——陈列氛围。灰度头像 + 一句话人味介绍 + 文化标签，比任何精美的 SVG 人物插画都更有说服力。

下次你做公司官网的时候，别在团队页放一排 LinkedIn 风格的头像列表了。让人物有温度，比排列整齐重要得多。

截图清单

1. ✅ 团队介绍页（交错排列 + 灰度头像 + 人味介绍 + 文化区）— 已插入上文