運動品牌網站常常有兩種調子：一種是競技大片，速度、汗水、衝線，令普通人覺得「這不是給我的」；另一種是貨架式的分類頁，上衣、短褲、配件一字排開，訪客要自己判斷該買哪件。對剛開始跑步的人來說，兩種都不太友善。
這篇拆解 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 團隊製作的虛構品牌案例，案例中的購物和訂單都是示範，不會真正扣款或出貨。
可以用這個設計開始建立自己的網站嗎？
可以。在 逐程案例頁 選擇「以此範本開始」，註冊後會以這個案例為起點建立網站，再換上你自己的商品和品牌內容。更多行業的設計方法，可以看 品牌網站設計指南。