调研日期：2026-07-13 · 样本量：22 站 · 范围：非中国 · 目标：降低客户决策心智负担
一、执行摘要
本次调研覆盖 22 个全球公益基金会/NGO 网站，横跨 7 种机构类型、11 个国家/地区、15+ 关注领域。核心发现：
- 站点天然分为两大阵营：Grant-making 基金会（10 站）vs 公众捐赠/行动型 NGO（10 站），首页信息架构截然不同
- 导航项数高度收敛：4–5 项为主流，超过 6 项的站点转化率感知更差
- 配色遵循「品牌色 + 大量留白」：深色系多见于 Mozilla、Acumen 等技术/投资型站点
- 捐赠入口不是标配：10 站有强捐赠 CTA，10 站以 Grant/Program 为主，客户需先明确「募款 vs 资助」定位
已排除无法访问站点：Open Society Foundations、Amnesty International
二、机构类型分布
| 类型 | 数量 | 代表站点 | 典型首页目标 |
|---|
| 私人/家族基金会 | 9 | Gates, Ford, Rockefeller, MacArthur | 展示使命 + Program + Grant 入口 |
| 国际 NGO | 7 | WWF, Oxfam, MSF | 捐赠/行动 CTA + 紧急诉求 + 故事 |
| 捐赠信托 | 1 | Wellcome | Funding 机会 + 科研内容 |
| 联合国机构 | 1 | UNICEF | 全球行动 + 紧急募捐 |
| 人道组织 | 1 | ICRC | 冲突地图 + IHL 专业内容 |
| 技术基金会 | 1 | Mozilla | Campaign + 深色品牌 |
| 影响力投资 | 1 | Acumen | Portfolio + Patient Capital |
| 公益金融科技 | 1 | Kiva | Loan 浏览 + 低门槛参与 |
| 娱乐公益 | 1 | Comic Relief | 趣味视觉 + 活动驱动 |
客户选型提示：先问「你的机构是发钱（Grant）还是收钱（Donate）？」——这一步可直接排除约 50% 的参考站点。
三、栏目设计模式对比
3.1 首页区块模式矩阵
| 模式 | 站点数 | 典型区块顺序 | 适用客户 |
|---|
| Grant-making 型 | 10 | Hero 使命 → Program 卡片 → Grant 指南 → 报告/News | 私人基金会、企业基金会 |
| 捐赠驱动型 | 9 | Hero + 捐赠 CTA → 紧急诉求 → 影响力数据 → 故事 | NGO、人道组织 |
| Campaign 行动型 | 2 | Hero → Campaign 卡片 → Donate | 倡导型 NGO（Oxfam） |
| Portfolio/Network 型 | 4 | Hero → 人物/Awardee/Fellow → 项目地图 → Impact | 社会创业、影响力投资 |
| 目标量化型 | 2 | Hero + 量化目标 → Strategy → Data Viz → Resources | 政策导向基金会（Lumina） |
| 众筹透明型 | 2 | Hero + 100% Model → 项目地图 → 个人故事 | 垂直领域众筹 NGO |
3.2 主导航结构对比
| 导航模式 | 站点 | 导航项 | 特点 |
|---|
| Program 导向 | Gates, Hewlett, Packard | 4–5 | Work/Programs + Grants + About |
| 行动导向 | WWF, UNICEF, MSF | 4–5 | What we do + How to Help/Donate |
| 内容导向 | Knight, Rockefeller | 4–5 | Programs + Ideas/Insights |
| Fellow/Awardee 导向 | MacArthur, Skoll, Ashoka | 4 | 人物展示为核心导航 |
| 双模式 | Mozilla | 4 | Campaign + Grant 兼有 |
共识：导航不超过 5 项；「About」和「News/Resources」几乎为标配。
四、功能矩阵
| 功能 | 有该功能的站点数 | 代表站点 | 客户是否需要 |
|---|
| 在线捐赠 | 10 | UNICEF, WWF, MSF, charity:water | 公众募款型必选 |
| Grant 门户/申请 | 10 | Gates, Ford, Wellcome, Lumina | 基金会型必选 |
| 紧急募捐 Banner | 6 | UNICEF, MSF, Save the Children, ICRC | 人道/儿童 NGO |
| 请愿/Petition | 1 | Oxfam | 倡导型 NGO |
| 项目/活动地图 | 5 | ICRC, charity:water, Ashoka, Kiva | 全球运营型 |
| Fellow/Awardee 搜索 | 4 | MacArthur, Skoll, Ashoka | 网络/品牌型 |
| 影响力数据可视化 | 8 | Gates, Lumina, Kiva, charity:water | 增强信任感 |
| Newsletter 订阅 | 14+ | 几乎所有站点 | 标配 |
| 多语言 | 6 | UNICEF, ICRC, MSF | 国际组织 |
| 电商/Shop | 3 | Oxfam, WWF, Comic Relief | 可选增值 |
| 100% 透明模型 | 1 | charity:water | 众筹型差异化 |
五、配色趋势分析
5.1 主色分类
| 色系 | 站点 | 色彩 | 心理感知 |
|---|
| 蓝色系 | Gates, Wellcome, Ashoka, Packard, Hewlett | #0072C6 – #0066CC | 信任、专业、机构感 |
| 红色系 | Ford, ICRC, MSF, Save the Children, Knight, Comic Relief | #C41230 – #FF002A | 紧迫、行动、情感 |
| 绿色系 | MacArthur, WWF, Oxfam, Kiva | #006B3F – #63B330 | 自然、希望、成长 |
| 深色系 | Mozilla, Acumen, Rockefeller | #1A1A1A – #1B3A4B | 权威、前沿、智库 |
| 黄/暖色系 | charity:water | #FDB933 | 温暖、差异化 |
| 紫色系 | Lumina | #7B2D8E | 教育、创新、独特 |
5.2 配色规律
- NGO 偏暖色/高饱和（红、绿），强调行动与情感
- 基金会偏冷色/低饱和（蓝、深蓝、深绿），强调专业与信任
- 辅色几乎均为白色或近白，大量留白
- Accent 色用于 CTA 按钮，通常与主色互补或对比
六、捐赠入口设计对比
| 策略 | 站点 | 实现方式 |
|---|
| 导航固定 CTA | WWF, UNICEF, MSF | 右上角「Donate」按钮，品牌色填充 |
| Hero 双按钮 | Save the Children, charity:water | Hero 区「Learn More + Donate」并列 |
| 滚动浮层 | WWF, UNICEF（原型已实现） | 滚过 Hero 后底部浮出捐赠条 |
| 无捐赠入口 | Gates, Ford, Rockefeller 等 10 站 | 以 Grant/Partner 替代 |
| 替代参与方式 | Kiva（Lend $25） | 低门槛非金钱参与 |
七、客户选型决策树
客户要做公益网站
├── Q1: 机构定位？
│ ├── 私人/企业基金会（发 Grant）
│ │ ├── 参考: Gates, Ford, Hewlett, Lumina
│ │ ├── 必备: Program 导航 + Grant 门户 + 年度报告
│ │ └── 可选: Fellows 展示(MacArthur), 量化目标(Lumina)
│ │
│ ├── 公众募款 NGO（收 Donate）
│ │ ├── Q2: 领域？
│ │ │ ├── 儿童/人道 → UNICEF, Save the Children, MSF
│ │ │ ├── 环境 → WWF
│ │ │ ├── 倡导/减贫 → Oxfam
│ │ │ ├── 垂直众筹 → charity:water
│ │ │ └── 娱乐公益 → Comic Relief
│ │ ├── 必备: Donate CTA + 影响力数据 + 故事
│ │ └── 可选: 紧急 Banner, Sponsor
│ │
│ ├── 社会创业/影响力投资
│ │ ├── 参考: Skoll, Acumen, Ashoka
│ │ └── 必备: Portfolio/Awardee + Impact Metrics
│ │
│ └── 技术基金会
│ ├── 参考: Mozilla
│ └── 必备: Campaign + 深色品牌 + Research
│
├── Q3: 目标受众？
│ ├── 公众 → 简化导航(4项) + 强 CTA + 故事驱动
│ ├── 申请者/合作伙伴 → Grant 搜索 + Program 细分
│ └── 政策制定者 → Policy Brief + Data Viz + 量化目标
│
└── Q4: 品牌调性？
├── 专业可信 → 蓝色系 + 留白 + 数据
├── 行动紧迫 → 红色系 + 紧急 Banner + 捐赠浮层
├── 温暖亲和 → 暖色/绿色 + 人物故事
└── 前卫权威 → 深色系 + 大排版 + 内容导向
八、推荐模板组合（降低决策负担）
| 客户场景 | 推荐参考组合 | 核心借鉴点 |
|---|
| 新成立私人基金会 | Gates + Hewlett + Lumina | Program 导航 + Grant 门户 + 量化目标 |
| 儿童/教育 NGO | UNICEF + Save the Children | 紧急 Banner + Sponsor + 月度捐赠 |
| 环境保护 NGO | WWF + Packard | 视觉叙事 + Adopt + Action Center |
| 倡导/减贫 NGO | Oxfam + Ford | Campaign + 故事叙事 + 报告库 |
| 垂直领域众筹 | charity:water + Kiva | 100% 透明 + 项目地图 + 低门槛参与 |
| 社会创业平台 | Skoll + Ashoka + Acumen | Awardee 展示 + Fellow 搜索 + Portfolio |
| 医疗人道组织 | MSF + ICRC | 现场报告 + 冲突地图 + 紧急捐赠 |
| 企业 CSR 门户 | Gates + Knight | 影响力报告 + Ideas 内容 + 城市/社区聚焦 |
九、全站点速查表
| # | 站点 | 国家 | 类型 | 捐赠 | Grant | 主色 | 模式 |
|---|
| 01 | Gates Foundation | 美国 | 家族/企业基金会 | ✗ | ✓ | #0072C6 | 机构型 |
| 02 | Ford Foundation | 美国 | 私人基金会 | ✗ | ✓ | #C41230 | 倡导型 |
| 03 | Rockefeller Foundation | 美国 | 家族基金会 | ✗ | ✓ | #003366 | 智库型 |
| 04 | Wellcome | 英国 | 捐赠信托 | ✗ | ✓ | #009639 | 科研型 |
| 05 | MacArthur Foundation | 美国 | 私人基金会 | ✗ | ✓ | #006B3F | 品牌型 |
| 06 | WWF | 瑞士/国际 | 国际 NGO | ✓ | ✗ | #006747 | 行动型 |
| 07 | UNICEF | 国际 | 联合国机构 | ✓ | ✗ | #1CABE2 | UN 机构型 |
| 08 | ICRC | 瑞士 | 人道组织 | ✓ | ✗ | #ED1C24 | 人道型 |
| 09 | Oxfam | 英国/国际 | 国际 NGO | ✓ | ✗ | #48A23F | Campaign 型 |
| 10 | Save the Children | 英国/国际 | 国际 NGO | ✓ | ✗ | #FF002A | 儿童型 |
| 11 | Mozilla Foundation | 美国 | 技术基金会 | ✓ | ✓ | #20123A | 技术型 |
| 12 | Packard Foundation | 美国 | 家族基金会 | ✗ | ✓ | #005581 | Grant 型 |
| 13 | Skoll Foundation | 美国 | 私人基金会 | ✗ | ✗ | #F47920 | 社会创业 |
| 14 | Knight Foundation | 美国 | 私人基金会 | ✗ | ✓ | #E5231B | 城市/新闻 |
| 15 | Hewlett Foundation | 美国 | 家族基金会 | ✗ | ✓ | #003865 | Program 型 |
| 16 | charity:water | 美国 | 公益众筹 NGO | ✓ | ✗ | #FDB933 | 众筹型 |
| 17 | MSF | 瑞士/国际 | 医疗人道 NGO | ✓ | ✗ | #D50000 | 紧急医疗 |
| 18 | Acumen | 美国 | 影响力投资 | ✗ | ✗ | #1B3A4B | 投资型 |
| 19 | Kiva | 美国 | 公益金融科技 | ✗ | ✗ | #63B330 | 金融科技 |
| 20 | Ashoka | 美国/国际 | 社会创新网络 | ✓ | ✗ | #0066CC | 网络型 |
| 21 | Comic Relief | 英国 | 娱乐公益 | ✓ | ✗ | #E30613 | 娱乐型 |
| 22 | Lumina Foundation | 美国 | 私人基金会 | ✗ | ✓ | #7B2D8E | 目标驱动 |
十、文件索引
research/
├── index.html ← 总览导航（推荐入口）
├── SITE_LIST.md ← 站点清单
├── COMPARISON_REPORT.html ← 本报告（网页版）
├── shared/ ← 共享原型样式/脚本
├── 01-gates-foundation/ ← 每站含 screenshot.png + metadata.json + prototype.html
├── 02-ford-foundation/
├── ... (共 22 个站点目录)
└── 22-lumina-foundation/
使用方式：
- 打开 index.html 浏览全部站点，按类型筛选
- 点击「交互原型」查看该站信息架构与配色
- 参考本报告决策树，快速定位 2–3 个最匹配参考站
- 基于原型模板二次开发