从 dji.com 提炼的产品灵魂、页面骨架、视觉系统、内容原则与转化策略——一套可迁移到技术硬件品牌的完整网站方法论。
DJI 的 Web 体验不是设计师的审美表达，而是一套严格执行的产品哲学。这套哲学解决的是技术硬件品牌的核心挑战：产品复杂但用户不愿意读说明书。
DJI 的站点用四层漏斗把"随便逛逛"的访客转化为买家。每层有明确的单一使命：
| 层级 | 页面 | 使命 | 入口 | 出口 |
|---|---|---|---|---|
| L1 首页 | dji.com | 展示产品矩阵广度，最快路径引导到具体产品 | 品牌搜索、直接访问 | Learn More → L3，Buy Now → L4 |
| L2 家族页 | /products/consumer | 帮用户从品类兴趣缩窄到具体型号 | 导航、首页品类入口 | 产品卡 → L3，Quiz → L3，Compare → L3 |
| L3 PDP | /air-3s 等 | 功能叙事 + 参数说服 → 建立购买信心 | L1/L2 的 Learn More | Buy Now → L4，Compare → L2 |
| L4 Store | store.dji.com | 配置选择 + 结算 + 增值服务 | 任何 Buy Now 按钮 | 支付完成 → App/Support |
DJI 的导航采用产品品类导向的 mega menu。比 Apple 复杂（Apple 只有 6-7 个产品线），但比 TP-Link 的多级嵌套更有组织。
| 导航项 | 类型 | 子层级 |
|---|---|---|
| Camera Drones | 产品线 | Mavic / Air / Mini / Flip / Avata / Inspire |
| Handheld | 产品线 | RS 稳定器 / OM 手机云台 / Pocket / Action |
| Power | 产品线 | 便携电源 |
| Specialized | 行业入口 | Enterprise / Agriculture / Delivery |
| Explore | 内容 | About / Media / Community / SkyPixel |
| Support | 服务 | 知识库 / 下载 / 维修 / Fly Safe |
| Store | 转化 | store.dji.com 独立子域名 |
DJI 首页约 15 屏，内容密度高于 Apple（10 屏）。核心策略：产品矩阵轰炸——用产品数量和广度传递品牌实力。
| # | 屏幕内容 | HBM | 布局 | 背景 |
|---|---|---|---|---|
| 1 | Hero 旗舰轮播 — Mavic 3 Pro "Inspiration in Focus" + 双 CTA | B+M | 全屏产品图 + 居中文案 | 产品图 |
| 2-4 | 核心产品逐个展示 — Air 3S / Osmo Action 6 / Pocket 3，每款一屏一信息 | Brain | 大图 + 产品名 + 标语 + 双 CTA | 浅色 |
| 5-7 | 扩展产品矩阵 — RS 5 / Flip / Power / Osmo 360 | Brain | 同上模式 | 浅色 |
| 8 | 行业解决方案 — Enterprise / Agriculture / Delivery 三路分流 | Brain | 三列卡片 | 浅色 |
| 9-10 | "Shot on DJI" 用户作品展 — UGC 内容，产品能力的社会证明 | Heart | 作品瀑布流/网格 | 浅色 |
| 11 | 创新叙事 — "Standing at the Forefront of Innovation" + 行业报告 | Heart | 标题 + 子卡片 | 浅色 |
| 12 | 服务入口 — Where to Buy / Support / Fly Safe | Muscle | 三列卡片 | 浅色 |
| 13 | DJI Store App 推广 — 虚拟飞行 + 设备管理 | Muscle | 居中文案 + CTA | 浅色 |
| 14-15 | 邮件订阅 + Footer | Muscle | 表单 + 多列链接 | 深色 |
15 屏中 8 屏是独立产品展示。每款产品一屏一信息，绝不混搭。产品图是页面唯一的视觉焦点。
所有产品屏标配 "Learn More" + "Buy Now"。无例外。CTA 按钮位置和样式跨页面一致。
每个折叠屏幕承载一个产品或一个概念。不堆砌，不混合。信息密度中等，有呼吸感。
"Shot on DJI" 用真实用户作品证明产品能力。不是广告，是证据。比奖项标签更有说服力。
DJI 的 PDP 采用高度标准化的叙事弧线。每款产品遵循相同的四阶段弧线，但内容各异。这个模板是 DJI 最核心的页面资产。
| # | Section | 阶段 | 布局 | 内容模板 |
|---|---|---|---|---|
| 1 | Hero | 激发欲望 | 全屏产品图 + 居中叠加文案 | 产品名 + 情感标语 + 双 CTA（Buy Now / Watch Video） |
| 2 | 参数矩阵 | 建立信心 | 4-6 列网格，每格一个核心参数 | 大数字 + 短描述词。如 "43-Min" + "Max Flight Time" |
| 3 | 主卖点 1 | 建立信心 | 左图右文 / 全屏图 + 叠加文 | 核心功能叙事 — 参数 + 场景利益 + 视觉证据 |
| 4 | 主卖点 2 | 建立信心 | 右图左文（交替） | 同上，换一个功能维度 |
| 5 | 主卖点 3 | 建立信心 | 左图右文（交替） | 同上 |
| 6 | 智能/易用 | 消除障碍 | 卡片网格 / tab 切换 | 降低使用门槛的功能（AI 追踪、一键拍摄等） |
| 7 | 配件 + 服务 | 推动购买 | 横向滚动卡片 | DJI Care + Fly More Combo + 配件推荐 |
| 8 | 规格 + 对比 | 补充 | 折叠表格 + Compare 链接 | 完整规格 + "对比其他型号"入口 |
DJI 的 /products/consumer 是从"我想买无人机"缩窄到"我要 Air 3S"的关键页面。它配备了三件套导购工具：
"Find your perfect drone" — 通过 3-5 个问题（拍摄场景/经验水平/预算）缩窄推荐。对 SKU 复杂的产品线至关重要。
预设热门对比组合（Air 3S vs Mavic 3 Pro）。替用户预判最常见的选择困难，而非让用户自己选要对比什么。
"Which drone is right for me?" — 内容型导购文章，嵌入购买链接。用编辑视角辅助决策。
| 系列 | 人设 | 用户画像 | 组织原则 |
|---|---|---|---|
| Mavic | 专业创作者 | 职业摄影师、独立制片 | 按性能降序：Mavic 3 Pro → Mavic 3 Classic |
| Air | 进阶探索者 | 旅行摄影、内容创作者 | 核心性能 + 便携平衡 |
| Mini | 轻量入门 | 休闲用户、旅行者 | Under 249g 合规，易上手 |
| Flip | 创意便携 | Vlogger、日常记录 | 折叠设计 + 创意拍摄 |
| Avata | 沉浸飞行 | FPV 爱好者 | 体感飞行体验 |
每张产品卡严格遵循四层信息：
DJI 的色彩哲学可以用一句话概括：产品即色彩，页面退到后面。
| 元素 | 处理方式 | 设计意图 |
|---|---|---|
| 背景 | 白色 (#fff) + 浅灰 (#f5f5f5)，偶尔深色区 | 产品图是唯一的视觉焦点 |
| 品牌色 | 几乎不使用。无品牌色渐变、装饰条、色块 | 避免品牌色和产品色竞争注意力 |
| 文字色 | 纯黑标题 + 灰色正文，两级层次 | 极简排版层级 |
| CTA 色 | 深色填充按钮（Buy Now）+ 轮廓按钮（Learn More） | 明确主次 CTA 层级 |
| 产品色 | 产品渲染图自带色彩（无人机灰、运动相机黑） | 产品自身的颜色 = 页面的色彩点缀 |
L1：产品名 — 超大字号，900 字重
L2：标语/Section 标题 — 中等字号，700 字重
L3：参数标签 — 小字号，600 字重
不超过 3 级。DJI 不在页面里做"小标题套小标题"。
核心参数用巨型数字展示：
43Min Flight Time
数字是视觉锚点（吸引眼球），描述词是语义锚点（传递含义）。数字永远比描述词大 3-4 倍。
Studio 级别光影，精确的材质反射，浅色背景。看起来像实物但比实物更精致。这不是照片，是工业设计的视觉诗。
用产品拍出来的作品（Shot on DJI）。航拍壮丽风景、极限运动、日落延时。不是展示产品长什么样，而是展示产品能做什么。
产品在真实环境中被使用。背包里的折叠无人机、旅行者手持 Pocket 3、农田上空的农业无人机。让用户把自己代入使用场景。
DJI 的产品文案遵循一套严格的写作公式，在整个站点一致执行：
DJI 的信息密度精确控制在 Apple 和 ASUS 之间：
| Apple（极简） | DJI（中密度） | ASUS（高密度） | |
|---|---|---|---|
| 参数可见度 | 隐藏在脚注 | 主内容中可见，配合叙事 | 规格表为核心内容 |
| 每屏信息量 | 1 个概念 + 大留白 | 1 个概念 + 中等留白 | 多个卖点堆砌 |
| 文案风格 | 诗意、抽象 | 具体、场景化 | 技术、罗列式 |
| 适合品类 | 情感消费品 | 技术硬件 | 极客向硬件 |
DJI 在用户旅程的每个关键节点都部署了转化钩子。这不是随机放置的 CTA，是一套按决策心理学设计的系统。
| 决策阶段 | 用户心理 | DJI 的钩子 | 机制 |
|---|---|---|---|
| 认知 "我不知道我需要" |
潜在需求 | Shot on DJI | UGC 作品激发"我也想拍这种画面"的欲望 |
| 好奇试探 | 虚拟飞行 App | 零成本体验飞行乐趣，降低心理门槛 | |
| 考虑 "我在几款之间犹豫" |
选择焦虑 | Quiz 导购 | 问卷→推荐，把选择题变成判断题 |
| 对比困难 | Popular Comparisons | 预设热门对比，替用户做最难的一步 | |
| 信息不足 | Buying Guides | 编辑式内容辅助深度决策 | |
| 决策 "我要买但还在犹豫" |
价格锚定 | Fly More Combo | Bundle 显示"省 $XX"，锚定效应 |
| 风险恐惧 | DJI Care Refresh | 付费延保 + 意外换新，消除"买了怕摔" | |
| 运费犹豫 | Free Shipping $35+ | 几乎无门槛免运费 | |
| 复购 "下次还来" |
渠道惯性 | DJI Credit 1% | 积分锁定自有渠道复购 |
| 升级需求 | Official Refurbished | 旧机回收 + 官翻低价入门 |
DJI 最简单但最重要的转化设计决策：每个产品区块都有两个按钮。
轮廓按钮（视觉次要）。服务还在研究的用户。跳转 PDP，继续产品教育。
不强迫未准备好的用户做购买决策。
填充按钮（视觉主要）。服务已做好决策的用户。跳转 Store，直接进入购买流程。
不让准备好的用户多走弯路。
DJI 和 Apple 都是产品页面的顶级实践者，但方法论在根本上不同。理解这个分野是选择正确参照物的前提。
| 维度 | Apple | DJI | 谁适合技术硬件 |
|---|---|---|---|
| 品牌定位 | 情感消费品（生活方式） | 技术工具（性能即价值） | DJI — 硬件品牌更需要证明性能 |
| 参数策略 | 隐藏 — "Fast that lasts" | 可见 — "43-Min" + 叙事 | DJI — 技术用户需要看到参数 |
| 动效投入 | 重 — ScrollyTelling, 3D | 轻 — 基础过渡，靠摄影 | DJI — 实现成本低，ROI 高 |
| 导购工具 | 无（产品线简单不需要） | Quiz + Compare + Guide | DJI — SKU 复杂的品牌必须有 |
| DTC 能力 | 完整（apple.com/shop） | 完整（store.dji.com） | 两者都是标杆 |
| 页面密度 | 低 — 极度留白 | 中 — 有呼吸感但信息充足 | DJI — 技术产品需要足够信息量 |
| 社会证明 | Shot on iPhone（广告级） | Shot on DJI（UGC 真实） | DJI — UGC 更真实、成本更低 |
| 可迁移性 | 低 — 需要 Apple 级品牌力 | 高 — 技术硬件通用方法论 | DJI |
以下是从 DJI 官网提炼的、可降维应用到任何技术硬件品牌官网的 10 条设计原则，按实施优先级排序：
| # | 原则 | DJI 的做法 | 通用应用 | 难度 |
|---|---|---|---|---|
| 1 | 参数+叙事组合 | "1/1.3" CMOS" + 低光样片 | 每个技术参数配一个用户场景故事 | 低 |
| 2 | 双 CTA 纪律 | 所有产品区标配 Learn More + Buy Now | 研究路径和购买路径并行，不强迫 | 低 |
| 3 | 产品即色彩 | 白/灰背景，品牌色退场 | 页面为产品摄影服务，不反过来 | 低 |
| 4 | 预设对比组合 | Popular Drone Comparisons | 预判用户最常见的选择困难 | 低 |
| 5 | 按场景分组产品 | Mavic=专业 / Air=进阶 / Mini=入门 | 系列即人设，先选场景再选规格 | 低 |
| 6 | Quiz 导购工具 | "Find your perfect drone" 问卷推荐 | 3-5 步问卷缩窄推荐 | 中 |
| 7 | UGC 社会证明 | Shot on DJI 用户作品展 | 用产品的输出证明产品的能力 | 中 |
| 8 | PDP 叙事弧线 | 激发→说服→消除→转化四阶段 | 标准化 PDP 模板，跨产品复用 | 中 |
| 9 | Bundle + 延保 | Fly More Combo + DJI Care | 套装省钱锚定 + 保险消除风险恐惧 | 中 |
| 10 | DTC 闭环 | store.dji.com 完整商城 | 拥有从教育到购买的完整用户旅程 | 高 |