运动品牌网站常常有两种调子：一种是竞技大片，速度、汗水、冲线，让普通人觉得「这不是给我的」；另一种是货架式的分类页，上衣、短裤、配件一字排开，访客得自己判断该买哪件。对刚开始跑步的人来说，两种都不太友好。
这篇拆解 Foundax 案例库里的 PACEFORM 逐程。它是一个虚构的城市日常跑步品牌，商品只有轻量跑步背心、跑步短裤和补给背心三件。它的做法是：先让访客觉得「我也可以出门跑一程」，再按跑步场景推荐装备。
运动品牌网站难在哪
- 竞技感劝退新手。 名次、配速和训练成绩，会让普通人觉得门槛很高。
- 货架页不帮忙选择。 访客不知道一次 5K 和一次周末长跑分别需要什么。
- 大品牌的视觉太熟悉。 黑白大片和口号，很难让一个新品牌被记住。
- 情绪和商品之间断开。 品牌页很燃，商品页却回到普通的列表。
所以逐程的设计目标是：用轻快、有温度的语气让人想出门，再从「今天想跑哪一程」出发，把装备推荐给他。
设计概念：不争第一，先走出门
品牌口号是「走，跑一程」和 GO YOUR PACE。网站像一本有速度感的独立跑步刊物：大字和人物叠放，跑道线组织视线，文字只谈路线、衣服和日常感受，把名次和成绩留在画面之外。
视觉语言：一抹出发黄
荧光黄是整个品牌的出门信号，集中用在首屏和行动节点上；纸白承接商品和阅读内容。荧光黄上的文字一律用炭墨色：炭墨色在这种黄底上的对比度约 11.6:1，而白字只有约 1.3:1，几乎看不清。
- 出发黄
#D7EE35首屏、导航与行动节点 - 炭墨
#232820标题、正文与黄底上的文字 - 纸白
#F2F1E9商品与阅读区域的底色 - 橄榄灰
#606659次要文字
| 用途 | 字体 | 为什么 |
|---|---|---|
| 英文大字 | Barlow Condensed Bold | 窄体粗字承担速度感，适合 GO YOUR PACE 这类短句 |
| 正文与界面 | Manrope、苹方 | 标题紧、正文松，中文负责情绪和信息 |
四个招牌时刻
起跑
走，跑一程
荧光黄首屏，大字 GO YOUR PACE 在后，跑者在前；滚动时人物轻微前移，跑道线沿前进方向延伸。
选一程
今天，想跑哪一程
日常 5K、周末长跑、城市夜跑三个场景，点选后文案、路线示意和推荐装备一起切换。
穿好它
装备轻一点，出门简单一点
三件装备的完整静物摄影配目录式条目，点击切换商品说明，再进入商品页选颜色和尺码。
手记
慢一点，也算出发
晨光里的城市和一篇跑者手记，讲一次普通的出门，给暂时不买的人一个留下来的理由。
六幕页面分镜
01
首屏：走，跑一程
荧光黄铺满首屏，超大字 GO YOUR PACE 和奔跑的人物叠放，第一眼就有速度和轻松感。
02
场景：今天，想跑哪一程
选中「日常 5K」，右侧显示「轻一点，出门就好」、5 KM 河岸往返的路线示意，以及这一程推荐的背心和短裤。
03
装备：装备轻一点
三件装备平铺在一起，右侧是带价格的目录条目，当前选中的商品用荧光黄标出，下方进入商品与尺码。
04
单品：三件日常装备
背心、短裤、补给背心各自一张静物图，名称和价格清楚排列，方便快速比较。
05
手记：慢一点，也算出发
河岸晨跑的照片配一篇跑者手记的入口：「有时跑步只是为了，绕一点远路，看看今天的城市」，让品牌有了生活的温度。
06
收尾：下一程，一起出门
订阅表单邀请访客收到下一封跑步手记，超大 PACEFORM 字标收住整个页面。
用场景代替分类
逐程最值得借鉴的，是把「分类」换成了「场景」。日常 5K 推荐背心加短裤；周末长跑 12 公里，在此基础上加一件补给背心。访客不需要先懂装备，只要回答「今天想跑哪一程」。路线图标注了「路线概念示意」，不假装是真实的跑步数据。
从情绪到下单
三件装备都是 Foundax 里的真实商品，背心和短裤有尺码规格，场景和装备区的按钮进入原生商品页、购物袋、结账和订单；订阅表单和跑者手记也使用平台的表单和内容功能。开启「减少动态效果」时，人物和跑道线不再移动，场景切换照常可用。想了解这部分功能，可以看 Foundax 功能介绍。
可以直接借鉴的清单
- 语气要让普通人觉得「我也可以」，把竞技压力留在画面之外。
- 用使用场景组织商品，推荐一整套装备，而不只是列出单品。
- 选一个高辨识度的品牌色，并集中用在行动节点上。
- 亮色背景上的文字先检查对比度，必要时用深色字代替白字。
- 用一篇生活化的手记，给暂时不买的人留下来的理由。
- 示意图要写明是示意，不冒充真实数据。
常见问题
商品只有三件，网站会不会显得太单薄？
商品少，更适合用场景串起来。三个跑步场景、一组装备静物和一篇手记，足以撑起一个完整、有记忆点的品牌网站。
荧光色会不会影响阅读？
会，如果直接在上面放白字。逐程只在首屏和行动节点使用荧光黄，上面的文字一律用炭墨色，正文和商品信息放在纸白底上。
逐程是真实品牌吗？
不是。PACEFORM 逐程是 Foundax 团队制作的虚构品牌案例，案例中的购物和订单都是演示，不会真实扣款或发货。
可以用这个设计开始做自己的网站吗？
可以。在 逐程案例页 选择「以此模板开始」，注册后会以这个案例为起点创建网站，再换成你自己的商品和品牌内容。更多行业的设计方法，可以看 品牌独立站设计指南。