中華民國田徑協會｜透過一頁式網站，讓協會粉絲數飆升 8 倍！

專案背景

中華民國田徑協會每年舉辦國際賽事，這是我們與協會合作的第 3 年，任務是為「新北國際田徑公開賽」打造官方網站。賽事在板橋體育場舉行，網站要同時服務國內外參賽者、媒體與現場觀眾，讓他們快速找到賽程、參賽名單與即時轉播。

另一個問題同樣迫切：協會的 Facebook 粉絲專頁只有 600 多位追蹤者，與賽事的規模和關注度不成比例。賽事結束後，這些訪客很容易就此散去，協會缺少一條能持續對話的管道。

核心挑戰

賽事網站的生命週期短、時程緊，流量卻高度集中在賽前與賽期那幾天。我們要在兩週內上線，同時完成兩件事：

• 把賽程、名單、轉播等資訊用最短的路徑交到訪客手上，不論對方用的是桌機還是手機
• 讓這波集中的流量留下來，轉成協會長期經營的社群

兩件事看似分開，實際上互相牽動。資訊找得到，訪客才會對賽事產生好感，這時邀請他們追蹤，才不會像是打擾。

解決方案

我們把網站收斂成一頁：開場、主視覺、賽事資訊、主辦與協辦單位、頁尾，從上往下滑就是完整的資訊路徑。視覺上沿用賽事主視覺的速度感，但所有裝飾都讓位給資訊。

桌機

網站載入時先出現一段簡短的開場畫面，跑者剪影置於賽事主色上，讓等待的那一兩秒也在說田徑，而不是一片空白。

首屏把賽事名稱、日期與地點放在最醒目的位置，背景是主視覺的放射色塊。訪客不需要往下捲，就能確認「是哪一場比賽、何時、在哪裡」。

往下一屏就是賽事資訊。競賽規程、賽程等文件各自是一張卡片，標題寫清楚、按鈕只有一個動作，國內外訪客都能直接點開需要的那一份。

手機

同一套一頁式架構也用在協會的「臺灣國際田徑公開賽」官網上。以下是該站的手機與桌機畫面，可以看到在小螢幕上，首屏依然保留賽事名稱、日期、場地與報名按鈕，下方用一條細線引導訪客往下滑到「賽事詳細資訊」。

在手機上，桌機的三欄文件卡片改成單欄堆疊，每個「查看文件」按鈕都有足夠的點擊面積。指導、主辦與協辦單位的標誌集中在一區，頁尾再次列出主辦單位與版權資訊。

關鍵設計

一頁式，因為訪客只來查幾件事

賽事網站的訪客目的很明確：看賽程、查名單、找轉播。多一次點擊，就多一次找不到的機會。一頁式設計讓所有關鍵資訊都在同一條滾動路徑上，國內外參賽者、媒體與觀眾不需要理解網站結構，往下滑就找得到。這也是兩週內能上線的關鍵：只做真正需要的部分。

第一秒就看到最重要的資訊

我們把最常被查詢的資訊放在視覺中心，載入後第一眼就能定位。流線型的線條與放射色塊呼應田徑的速度感，但只做為背景，不搶走文字與按鈕的位置。資訊區改用深色底與淺色卡片，對比清楚，戶外看手機也讀得到。

跑馬燈分隔，讓長頁面有節奏

一頁式網站很容易變成一長條沒有段落的內容。我們在主要區塊之間放上賽事名稱的跑馬燈帶，既是分隔線，也讓品牌名稱在滑動過程中反覆出現，訪客隨時知道自己還在同一場賽事的頁面上。

讓社群成長的那顆按鈕

粉絲專頁連結的位置是刻意設計的：放在使用者已經拿到想要的資訊、對賽事產生興趣的時刻。這時候邀請關注，不是打擾，而是順勢。粉絲數從 600 多位成長到 5,000+，就是從這個小小的位置開始。

同樣的做法也延續到協會其他賽事。臺灣國際田徑公開賽的網站頁首就放了「FB 賽事粉專」按鈕，與賽事粉絲專頁、活動頁面串成同一條路徑。

成果

• 粉絲專頁追蹤人數從 600+ 成長到 5,000+（8 倍）
• 2 週內上線
• 報名成功率 100%，無任何未成功報名案例
• 同一套一頁式架構也用於協會的臺灣國際田徑公開賽官網

給同類型活動與協會的建議

活動網站和品牌官網不一樣，它的生命週期短、時間壓力大，但流量集中。規劃時可以這樣想：

1. 訪客只會來查幾件事：先列出這幾件事，全部放上第一屏或一頁之內。
2. 把活動流量留下來：活動結束後網站可能就沒人看了，但社群可以留住這群人。在訪客最滿意的時候引導關注，比放在頁尾有效得多。
3. 時程緊就做減法：兩週上線的關鍵不是加班，而是只做真正需要的功能。