FF 官方商城（shop.ff.com）用户体验评估与优化建议

2026-10-22 · Hai Zhang

执行摘要

总体评分：2.6 / 5。 商城能完成“看产品—加购—结账”的基本闭环，但作为一个售价从 $299 到 $137,900、横跨 15 个 SKU 的机器人商城，它目前更像“产品陈列页”，缺少帮助用户比较、决策和建立信任的能力。

最需优先解决的 5 个问题：

1. 首页不展示价格，也无“立即购买”入口——用户必须逐个点进详情页才能知道 $299 和 $137,900 的区别。
2. 商品详情页主图被懒加载（loading=lazy），首屏图片区显示为空白灰框，严重影响第一印象和 LCP。
3. 搜索相关性很差：搜“robot dog”第 3 位是人形机器人 FF Master；搜“humanoid”前两位是机器狗 FX Navi、FX Aegis。
4. 高客单价却缺少决策支持：无产品对比、无用户评价、无分期付款、无企业/教育机构询价通道，配送政策没有时效和费用。
5. CTA 混乱：Aegis 详情页 “Amazon” 按钮颜色比 “Add to cart” 更深，把流量导向站外；Nova 页面显示数量选择器，但主按钮却是跳转外站的 “Apply Now”。

测试范围与方法

测试于 2026-10-22 在桌面端（1024×768）和移动端（375×812，Android Chrome 模拟）进行，结合人工走查、DOM/网络检查和 Shopify 公开接口（/products.json、/search/suggest.json）。结账流程只走到支付页，未提交任何订单，测试后已清空购物车。

评分标准：5 = 行业标杆，4 = 良好、少量瑕疵，3 = 可用但有明显短板，2 = 影响转化的问题较多，1 = 阻塞任务。严重程度分为 P0（阻塞/严重影响转化）、P1（明显影响体验）、P2（体验优化）。

局限：未测试登录/账户中心、真实下单和售后流程；性能数字来自单次访问，建议用 PageSpeed Insights 复核。

网站结构与信息架构

导航按单个产品平铺，而不是按用户的选购逻辑（人形 vs 四足、用途、预算）组织，用户很难快速找到“适合我的那一台”。

发现的问题

• 一级导航归类不一致：Master 下拉包含 Master Classic 和 Master Mini，但 Nova Mini 却被放进 “More”；Aegis、Navi（机器狗）和 Accessories、Courses 也都挤在 “More” 里。
• “Master Classic” 与 “Master”、“Aegis Classic” 与 “Aegis” 指向同一个 URL，存在重复入口。
• 品牌命名混用：Logo 是 “FF EAI-Robotics”，商品页品牌标签都写 “FARADAY FUTURE”，产品名又分 FF 和 FX 两个前缀，结账页只显示文字 “Faraday Future”，没有解释 FF/FX 的区别。
• 缺少分类页：只有 /collections/all，没有“人形机器人”、“四足机器人”、“教育套装”等集合页；/collections/all 把 15 个商品以完整详情块纵向堆叠，无筛选、无排序。
• 首页隐藏标题与内容不符：H2 写着 “Complete Six Series”，首页却展示 9 个产品卡片。
• 搜索无语义相关性：搜 “robot dog” 返回 10 个结果（几乎全站），人形机器人排第 3；搜 “humanoid” 前两位是机器狗。
• 支持信息入口薄弱：页脚 “Contact Us” 指向政策页，没有电话，只有邮箱和聊天框；/pages/faq、/pages/contact、/pages/compare 均为 404；页脚 “Shop” 栏只列了 4 项，漏掉 Futurist、Nova、Master Mini 等新品。
• 同名课程商品：存在两个 “Physical AI Spark Program Curriculum”（都是 $499），用户无法区分。

建议

• 一级导航改为：Humanoids（Futurist / Master / Master Mini / Nova / Nova Mini）、Quadrupeds（Aegis 系列 / Navi）、Education（课程、教育套装）、Accessories、Support；用 Mega Menu 展示产品图 + 起售价。
• 新建对应分类页，添加按价格、用途（教育/科研/商演/家庭）、形态筛选。
• 为产品配置标签与同义词（robot dog → quadruped），或启用 Shopify Search & Discovery 调整相关性。
• 增加独立的 Contact、FAQ 和产品对比页，并在页脚补全产品链接。

视觉设计评估

视觉基调（深色顶栏 + 白底产品图 + 品牌金棕色按钮）方向正确，但首页信息密度过低、各页面风格不统一，没有体现出“高科技、高价值”的品牌调性。

做得好的地方

• 产品卡片统一白底、统一视角，形态对比一目了然。
• 商品详情页的规格 Tab（Mechanical / Electrical / Sensor / What You Purchase）结构清晰。

发现的问题

• 首页过于单薄：只有轮播 Banner、一组 9 个产品入口、一块 “One Brain” 文案和页脚；没有价格、卖点、应用场景、视频、客户案例或媒体背书。
• Banner 文字烧录在图片里（如 HP_Banner_Nova_16x5_EN.jpg）：无法被搜索引擎和读屏器识别，移动端缩放后副标题非常小，第 2、3 张 Banner 没有 alt。
• “NEW” 斜角标过多：9 个产品里 6 个带 NEW，失去了强调作用，红色饰带与整体简约风格也不协调。
• 明暗主题不统一：首页和商品页是白底，购物车突然变成深色全屏，结账页又回到 Shopify 默认白底且只有文字 Logo。
• New Arrival 页只有大图 + 灰色小标签：11 张全宽场景图，没有价格、卖点和按钮；页面没有 H1，初始加载时整屏空白。场景图风格明显是 AI 生成（一张 Banner 文件名含 “ChatGPT_Image”），容易削弱真实感。
• 按钮层级颠倒：Aegis 页 “Amazon”（深棕 #A37A61）比 “Add to cart”（浅棕 #CAB09D）更显眼；浅棕按钮看起来像禁用状态。
• 商品页三栏布局：中间卖点栏独立滚动（出现内嵌滚动条），与右侧描述内容重复，阅读动线散乱。
• 单位不统一：Nova 用公制（mm、kg、m/s），Master Mini 和 Futurist 用英制（in、lbs、mph、lb-ft）。

建议

• 重做首页：首屏用 HTML 文字 + 视频/大图，下方依次放“按系列选购（带起售价）”、“按场景选购”、核心技术（EAI Brain）、客户/学校案例、媒体报道、服务承诺。
• NEW 标签只保留在 30 天内上市的 1–2 款，样式改为与品牌色一致的小徽章。
• 制定统一的按钮规范：主 CTA（Add to cart / Buy now）实心深色，次 CTA（Amazon、View details）描边。
• 购物车、结账页与主站保持同一主题，结账页上传图形 Logo 和品牌色。
• 规格提供公制/英制切换，或统一为“英制（公制）”双写。

关键流程测试

以“首次访问的学校采购老师想买一台机器狗”为场景，从首页走到支付页共 5 步，每一步都有至少一个会造成犹豫或流失的摩擦点。

其他流程问题

• Nova 的“申请购买”模式交代不清：页面显示 MSRP $2,490 和数量输入框，但主按钮是在新窗口打开 developer.ff.com 的 “Apply Now”；用户不知道申请后的流程和时间。数量框在此场景毫无意义。
• Amazon 分流：Aegis、Master 页面提供 Amazon 购买按钮，官方商城的价值主张（独享服务、返现、质保）未说明，等于主动把订单让给第三方。
• 信任信息缺失：商品页和购物车都没有质保期、发货时间、退货政策摘要、用户评价；Shipping Policy 只有免责条款，没有运费和时效。Master Mini 写着“3-month warranty”，对 $9,990 的产品而言不宜在卖点区经出现。

建议

1. 加购改为右侧抽屉，展示小计、推荐配件和“继续选购 / 去结账”两个按钮。
2. 结账开启 Shop Pay、Apple Pay、Google Pay、PayPal，并接入 Shop Pay Installments / Affirm；在商品页显示“低至 $xxx/月”。
3. $10,000 以上的商品增加 “Request a Quote / 教育机构采购” 入口，支持 PO 和批量折扣。
4. 在加购按钮下方放三条信任信息：预计发货时间、质保期、退货期限。
5. Nova 页隐藏数量框，按钮改为 “Apply for Phase One Access”，并用 3 步图示说明申请流程。

移动端体验

移动端（375px）没有横向溢出，产品双列网格和大尺寸加购按钮基本可用，但悬浮组件遮挡和信息顺序问题明显。

• 悬浮 “Contact” 按钮遮挡内容：在首页压住产品名称（如 FX Aegis），在 Master Mini 详情页压住卖点文字；桌面端在购物车页也遮住了 “Terms and Policies”。
• Banner 不适配移动端：16:5 横幅图直接缩小，烧录的副标题字号不到 10px，左右切换箭头压在机器人身上。应提供竖版移动端专用图。
• 详情页信息顺序不合理：变体选择器（Options）出现在商品标题之前；标题旁有一个含义不明的展开箭头。建议顺序：图片 → 标题 → 价格 → 变体 → 加购 → 信任信息。
• 主图加载延迟：移动端首屏同样先显示空白图片区，在弱网环境下更明显。
• 缺少吸底加购栏：滚动到规格和 FAQ 后，需要回到顶部才能购买。
• Cookie 偏好面板的开关和关闭按钮只有 24px，低于 44px 的推荐触控尺寸。

建议：移动端把 Contact 改为小尺寸圆形图标并避开内容区，或在详情页用吸底栏（价格 + Add to cart + 聊天图标）替代。

性能、可访问性与技术问题

首页单次加载发出 302 个请求、约 2.1 MB、128 个脚本，全部加载完成约 4.2 秒；主要拖累来自第三方追踪脚本和图片加载策略。

技术问题

• 商品主图懒加载：详情页第一张图设置了 loading="lazy"、fetchpriority=auto，且无 preload，直接拖慢 LCP。首图应改为 loading="eager" + fetchpriority="high"。
• 自定义滚动容器：页面内容在 .page-wrapper 内滚动，body 高度固定为视口高度。这会影响浏览器返回时的滚动位置恢复、移动端地址栏自动收起、键盘滚动、部分辅助技术和分析工具的滚动深度统计。建议恢复原生页面滚动。
• 导航加载时闪烁：页面初次渲染时所有导航项平铺并挤出右侧（FF.com、搜索、购物车图标被挤出视口），JS 执行后才收进 “More”，造成布局偏移（CLS）。
• 控制台报错：出现 ERR_TOO_MANY_REDIRECTS、401、ERR_CONNECTION_REFUSED 等资源加载失败，以及视图过渡 AbortError，建议排查对应的第三方应用。
• SEO：首页 H1 只有 “Faraday Future”；New Arrival 页无 H1；商品结构化数据 description 为空；多数商品页 title 仅为 “FF Nova – Faraday Future”，没有品类关键词（只有 Aegis 页做了优化）。
• 可访问性：首页 30 张图中 6 张缺 alt；详情页所有图片 alt 都是产品名（如 14 张都叫 “Nova”），没有描述视角和内容；社交图标链接没有可读名称；规格 Tab 选中态（灰底灰字）对比度不足。
• 文案细节：Contact 页 “Monday – Friday9:00 AM” 缺空格；Aegis 页描述与卖点关于 App 的说法矛盾。

问题清单

共 18 项：6 项 P0、7 项 P1、5 项 P2。

优化路线图

建议分三步推进：先用 1–2 周修复影响首屏和转化的低成本问题，再重组导航、搜索和结账，最后做首页改版和 B2B 采购能力。时间为估计值，需按团队资源调整。

建议每个阶段结束后对比三个指标：加购率、结账完成率、商品页 LCP。

改版设计 Review（第二轮）

2026-10-22 · Hai Zhang

结论

改版解决了原清单 18 项中的 9 项，部分解决 5 项，仍未解决 4 项；同时新引入了 4 个需要优先处理的问题。 最大的进步在信息架构、商品展示和决策支持（价格、对比、询价）；最大的缺口是购物流程本身和移动端——这一版只有桌面稿，而且所有“加入购物车”都直接跳到同一个写死 FX Aegis Pro 的结账页。

本轮 Review 基于设计稿源文件（首页、FX Aegis 详情、结账、六个导航页和公共页头页脚），没有在真机上渲染测试。

对照原问题清单

未解决的 4 项里，搜索和购物车抽屉是设计缺口，滚动容器和第三方脚本属于开发侧，需要在交付说明里写清楚。

改版新发现的问题

共 19 项：4 项 P0、8 项 P1、7 项 P2。P0 都会直接影响设计稿能否交付开发。

内容准确性

产品规格和描述大多来自 shop.ff.com 商品页；下面 7 处是设计时补写或推断的，上线前必须确认。

官网自身还有一处矛盾需要产品团队裁定：FX Aegis 卖点写“12 hours of runtime”，规格表写“1–2 h”；设计稿暂按规格表。

占位符：全稿共 41 处方括号内容待补，按负责方归类：

• 物流：发货时效、运费、可配送国家
• 售后：质保期（按型号）、退货期限与条件、支持电话
• 财务 / 销售：分期合作方与月供金额、PO 账期、询价回复时效、课程是否可随时取消
• 产品：Nova 和 Navi 续航、Nova Mini 速度、Navi 载重、电池 A/B 和控制器适配哪些 Aegis 版本
• 文案：首页 FX Navi、Aegis Mega、Aegis Hyper 的一句话介绍（可直接沿用 Quadrupeds 页文案）

下一步

建议下一轮设计按这个顺序推进，前三项完成后即可交付开发评审：

1. 补购物流程：购物车抽屉 → 按商品显示的结账 → 下单成功页。
2. 补移动稿：首页、列表页、详情页、结账页四张 390px 关键页，含汉堡菜单和吸底加购栏。
3. 替换官方 Logo，并把第 4 节的 7 处说法和 41 处占位符交给对应负责人确认。
4. 做通用详情页模板（含 Nova 申请制、Futurist 询价制变体）和搜索层。
5. 收尾：表单状态、对比选择传递、页脚社媒、字重和 CTA 横幅调整、焦点样式。

第三轮修改记录

上表 19 项中，18 项已在设计稿里修改；第 16 项（AI 场景图）需要补拍素材，设计稿无法解决。第一轮遗留的搜索和购物车抽屉也已补上。

顺带修正：速度、载重等规格补齐英制单位；主图标注 eager + fetchpriority=high，供开发参考。