规范手册- 团队简介页面个人头像
2025-11-10
本文档为公司官网「团队简介」页面制定统一的头像图像规范，涵盖 真人拍摄标准 与 AI生成指南，并明确 图像格式、分辨率、响应式加载 等技术要求，确保在 MacBook、4K电视、投影仪、手机等所有设备 上呈现专业、一致、高清的企业形象。
证件照标准 #
- 头像：正脸，无遮挡、整洁发型、嘴唇微启、表情中性、友好、微笑
- 宽高比：3:4
- 分辨率：最低
520 × 694 px（源图1200 × 1600 px） - 服装：合理得体的简约深蓝色T恤、衬衫、正装、休闲装、工装等类型均可、不带帽子
- 背景：浅灰
#f5f7fa - 格式：优先 WebP，回退 JPEG/JPG
- 质量要求：
- 光线：自然柔和的光线，避免强烈阴影、过曝或反光
- 真实感：照片级，清晰对焦
- 细节：超细致皮肤纹理，工作室质量
- 镜头建议：85mm人像镜头效果最佳
- 技术参数（适用于AI生成）：
--ar 3:4 --v 6.0 --style raw --q 2 - 参考标准：接近证件照效果，参考中央政府和大公司的团队简介页面的头像
注释：
- 分辨率：建议提供更高分辨率源图，以应对不同场景
- 背景色：浅灰 #f5f7fa 比米白 #fdfdfd 在网页上更显专业，避免过曝边缘，纯色（浅灰/白），简洁无干扰
- 图像格式：优先WebP + 回退 JPEG，比 PNG 更适合网页头像（体积更小）
这样调整后，规范更符合现代网页开发的最佳实践。
二、真人头像拍摄制作规范 #
1. 基本构图要求 #
- 画面比例：3:4（宽:高）
- 人物占比：头部至肩部或胸部上沿，人脸占图像高度的 60%–70%
- 面部朝向：正脸，双眼平视镜头，表情自然（可微笑）
- 无遮挡：不戴墨镜、帽子、口罩；长发建议束起或不遮挡脸部
2. 图像质量 #
- 分辨率：最短边 ≥ 1000 像素（最大源图）
- 光线：均匀柔和自然光，避免强烈阴影、过曝或逆光
- 对焦：面部清晰锐利，无模糊
- 首选 WebP（体积小）
- 回退 JPEG（兼容性好）
- 压缩质量：70–85%
3. 着装风格（合理得体即可） #
✅ 接受类型：
- 正装：衬衫、西装、职业套装
- 休闲装：纯色 T 恤、Polo 衫、简约针织衫
- 工装/技术风：深色连帽衫、工装夹克（体现程序员/工程师身份）
❌ 避免：
- 花哨图案、大面积品牌 Logo、荧光色
- 吊带、背心、睡衣等过于随意服饰
4. 背景要求 #
- 纯色背景为佳：推荐浅灰、米白、淡蓝等中性色
- 若非纯色：必须简洁、无杂物、无强烈对比元素
- 禁止：办公室杂乱场景、风景、多人合影裁剪
证件照背景色推荐 #
以下是几种适合证件照的中性背景色及其色号编码：
推荐背景色 #
| 颜色名称 | 色号编码 | RGB值 | 适用场景 |
|---|---|---|---|
| 浅灰 | #f5f7fa | (245, 247, 250) | 通用推荐，专业感强 |
| 米白 | #fdfdfd | (253, 253, 253) | 温和自然，接近白色 |
| 淡蓝 | #f0f8ff | (240, 248, 255) | 清新感，适合科技行业 |
| 浅灰蓝 | #f8f9fa | (248, 249, 250) | 中性色，与 #f5f7fa 相似 |
| 纯白 | #ffffff | (255, 255, 255) | 传统证件照标准色 |
| 淡灰 | #f9f9f9 | (249, 249, 249) | 比纯白稍暗，层次感好 |
| 奶白 | #fefefe | (254, 254, 254) | 比纯白更柔和 |
颜色选择建议 #
- 正式场合：推荐
#f5f7fa或#f8f9fa（浅灰系列） - 科技公司：可选
#f0f8ff（淡蓝）体现专业感 - 传统行业：使用
#ffffff（纯白）最安全 - 避免使用：过于鲜艳的颜色、深色背景
这些颜色都属于中性色系，能够很好地突出人物主体，同时保持专业、正式的视觉效果。
5. 整体风格参考 #
参照 中央政府官网、Apple / Google / Microsoft 高管头像：
专业、清晰、亲和、一致，接近高质量证件照。
三、AI 生成头像规范（用于无法拍摄真人照片时） #
🎨 推荐 Prompt（英文，适用于 Midjourney / DALL·E / Stable Diffusion） #
Professional corporate headshot of a Chinese software engineer, front-facing, neutral but friendly expression, natural soft lighting, plain light gray background (#f5f7fa), wearing a simple dark blue t-shirt or casual shirt, clean hairstyle, no glasses, photorealistic, sharp focus, studio quality, 3:4 aspect ratio, ultra-detailed skin texture, 85mm portrait lens --ar 3:4 --v 6.0 --style raw --q 2
分辨率适配表 #
以下表格列出了不同设备类型对应的图像分辨率要求，以确保在各种显示设备上都能获得最佳的视觉效果。
由于本案例中，个人简介的头像只占页面中很小的一部分，因此不需要太大的图。
优化后的分辨率适配表 #
| 设备类型 | 显示尺寸 | 源图分辨率（3:4） | 用途说明 |
|---|---|---|---|
| 手机 | CSS: 160-220px 宽 | 260 × 347 px (1x)520 × 694 px (2x) | 窄屏（≤640px）显示约160–220px，提供2倍图适应高清屏 |
| 电脑 | CSS: 最大 260px 宽 | 520 × 694 px (2x) | 桌面端最大宽度260px，Retina屏清晰显示 |
| 大屏/电视 | CSS: 最大 260px 宽 | 520 × 694 px | 远距离观看，2x 源图已足够清晰 |
| 统一理想源图 | - | 1200 × 1600 px | 适用于所有场景，兼顾投影等大屏展示与未来扩展 |
注意事项 #
为了确保图像质量和加载效率，在准备图像资源时，请注意以下几点：
- 比例保持一致：无论何种设备，所有图像应保持
3:4的长宽比。 - 文件格式：
- 首选 WebP：体积更小，适合网页快速加载。
- 回退 JPEG：对于不支持WebP的浏览器，JPEG提供了良好的兼容性。
- 避免 PNG：除非需要透明背景，否则PNG不推荐用于此场景。
- 压缩质量：对于WebP和JPEG，均建议使用70–85%的质量设置来平衡文件大小与图像质量。
- 响应式加载：利用HTML
<picture>元素结合srcset和sizes属性实现响应式加载，确保在各种设备上都能高效加载最适合的图片版本。例如：