官網『Stat Counter 數字統計動畫區塊』設計完整攻略：中小企業如何用 4 個會跳的大數字，把「我們很專業」翻譯成「有實力可以信」
四個會從 0 跳到滿的數字，比四頁形容詞更能說服客戶。從數字挑選、動畫時機、擺放位置到常見地雷，一次講清楚官網 Stat Counter 的設計邏輯。
你有沒有滑過那種官網，滾到某一區忽然出現四個很大的數字：「服務客戶 1,280+、完成專案 850、合作年資 12 年、客戶回頭率 92%」，數字還會從 0 一路跳到滿為止？
那個東西叫做 Stat Counter（數字統計區塊），也有人叫 Stats Section、Number Counter、Facts & Figures。看起來就是幾個大字加動畫，好像沒什麼難的，但實際上這是整個官網裡「單位面積說服力」最高的區塊之一。因為文字要看、案例要滑、見證要讀，但數字，客戶一眼就懂。
今天這篇就把中小企業官網最實用的 Stat Counter 拆給你看：什麼樣的數字該放、怎麼放才有說服力、動畫要不要做、數字寫錯反而扣分的地雷有哪些。看完你就知道，為什麼別人放的數字看了會想合作，你放的數字卻看起來像自吹自擂。
Photo by Luke Chesser on Unsplash
一、Stat Counter 到底在賣什麼？
先講一個很殘忍的事實：客戶進到你的官網，看你在講「我們專業、我們用心、我們客製化」，他們心裡只有一句話——「你講你的，我怎麼知道是真的？」
Stat Counter 賣的不是「數字」本身，而是「用具體、可量化的證據，回答客戶心裡那句『真的嗎』」。
同一個訴求，兩種寫法：
- 寫法 A：「我們累積多年經驗，服務過眾多客戶。」
- 寫法 B：「12 年 · 1,280 位客戶 · 850 個上線專案 · 平均回頭率 92%」
A 是形容詞，讀完你不會記得。B 是四顆事實。你就算三個月後想不起我們公司名字，也會有個模糊印象：「有一家做網站的，說他們回頭率 90 幾……」數字會留在腦子裡，形容詞不會。這就是 Stat Counter 最核心的功能。
而且它還有一個附加價值：它是官網裡最快能被同事、朋友、客戶截圖轉發的區塊。因為它濃縮、有畫面、又有數字，很適合放在提案簡報第一頁。你把它做好，等於同時做了廣告物料。
二、四種放法：這四種數字是首選
不是所有數字都適合上 Stat Counter。太模糊的、灌水的、跟客戶利益無關的，放上去反而扣分。中小企業最常用、效果也最穩的，就這四類：
1. 時間類：告訴客戶「我們做這件事很久了」
例如：成立 12 年、深耕產業 8 年、平均年資 5.5 年。這一類數字回答的是「你們會不會做到一半就跑掉」。特別適合工程、系統、代理服務、B2B 這類「客戶會擔心後續維護」的產業。
2. 規模類：告訴客戶「不是只有你」
例如：累積客戶 1,280+、完成專案 850 個、每月處理 3.4 萬張訂單。這一類回答的是「除了我還有誰願意信你」，是社會認同（social proof）的量化版。只要不是新公司剛開張，這一格幾乎必放。
3. 品質類：告訴客戶「大家跟我們合作後不會後悔」
例如：客戶回頭率 92%、平均合作年數 4.2 年、NPS 68 分、客戶滿意度 4.8/5。這一類最強，因為它同時證明「有人做過」和「做完覺得值得」，殺傷力比前兩類都大。可是沒數字就千萬不要編，被戳穿一次可以送走十年信譽。
4. 成效類：告訴客戶「跟我合作可以拿到什麼」
例如：平均轉換率 +38%、廣告 ROAS 4.2、SEO 排名平均進前 3、上線時程平均 21 天。這一類最貼近客戶利益，因為它已經預告了「你來找我，會拿到類似結果」。這也是最需要有真實案例撐住的一類，寫之前先確認自己有幾個佐證專案可以拿出來聊。
版面通常一排 3～4 個剛剛好。3 個顯得穩、4 個顯得多，超過 5 個就變成客戶滑過去而不是被打動。時間 + 規模 + 品質 + 成效，各挑一個湊成一組，比放四個規模數字有效得多——因為前者證明「多面向都強」，後者只證明「量很大」。
Photo by 1981 Digital on Unsplash
三、動畫要不要做？做了會加分還是拖速度？
這是很多老闆糾結的問題：「那個數字從 0 跑到 1280 的效果，我要做嗎？」
直接講結論：做，但只做一次，而且只在使用者「真的滑到那一區」的時候才觸發。
為什麼？因為動畫的價值只有一個——把使用者的視線抓過來，停在數字上，讓他多看兩秒。你不會希望一進首頁就看到數字在跑（那時候他還在看你的主標題），也不希望滑回來又跑一次（那會變成很煩的裝飾）。
技術上很簡單，用 IntersectionObserver 監聽該區塊進入視窗，然後用 requestAnimationFrame 做個 1.2～1.8 秒的緩動計數就好，不需要花俏的第三方套件。整個功能 30 行 JS 就寫完，載入影響幾乎零。
幾個常被踩的坑，順便講：
- 不要跑太久。超過 2 秒的計數動畫會讓人失去耐心，尤其手機使用者本來就短耐心。
- 不要用同樣速度。四個數字如果都花 1.5 秒跑完，「92」跟「1280」看起來會一個好像很慢、一個好像追不上。用固定時長、動態計算增量，讓大家「同時抵達」。
- 要有 SEO fallback。初始 HTML 就要有完整數字（例如
<span data-target="1280">1280</span>），不要一開始是 0，靠 JS 才填進去。Google 爬蟲、社群分享預覽、以及 JS 被擋掉的少數使用者，都要能看到正確數字。 - 加個「+」、「%」、「年」的單位。「1280」跟「1280+」給人的感覺完全不同，前者像精準到誇張的假數字，後者像「至少這個量、實際還更多」。
四、放在頁面哪個位置最有效？
Stat Counter 的位置不是隨便挑一區塞進去，它有幾個「甜蜜點」：
甜蜜點 1：首頁 Hero 下方的第一個內容區塊
使用者滑過主視覺、剛開始好奇「這家到底是誰」，這時候丟四個數字，是最直接的「先建立信任、再往下說故事」。這是最經典也最有效的位置，八成以上的 B2B 官網都這樣放。
甜蜜點 2：關於我們頁的頁首
使用者主動點進「關於我們」，代表他已經對你有興趣，想確認你是不是真的可以合作。這時候用一組數字打頭陣，比落落長的公司理念有力得多。
甜蜜點 3：服務頁最後一屏
他看完你的服務內容，正猶豫要不要按下「聯絡我們」，這時候給他一組「別人選了都很滿意」的數字，是臨門一腳。這時候放「品質類 + 成效類」最有效，效果比放在頁首還好。
甜蜜點 4：案例集列表頁的區塊分隔
如果你有案例牆，可以在案例區之後放一組數字，用來收尾。這裡放「規模類」最有畫面感——「這些不是我們的所有案例，我們一共做了 850 個」。
反過來，Stat Counter 不建議放在頁尾之前、聯絡表單旁邊、或部落格內文中。這些地方使用者不是專心讀內容、就是準備行動，放數字反而分散注意力。
五、寫數字最容易踩的五個地雷
地雷 1：湊數的假精準
「服務客戶 1,283 家」——請問你怎麼算出來的？如果被客戶問「上個月幫誰做了什麼案子」你答不出來，這個 1283 就是自爆彈。寫成「1,200+」或「上千家客戶」反而更可信，因為它承認了「這是估算」，同時也表達「量真的很大」。
地雷 2：跟業務無關的數字
「員工每天喝掉 42 杯咖啡」、「辦公室有 6 隻貓」——這種數字放個人 IG 很可愛，放公司官網會讓客戶懷疑你到底在賣什麼。Stat Counter 的每一個數字都應該指向「和客戶利益或信任有關」。
地雷 3：太籠統的形容詞式數字
「多年經驗」、「上千個好評」、「數百位客戶」——這些等於沒說，跟形容詞沒兩樣。能寫具體數字就寫具體數字，寫不出來就別放這一格，別用「多年」湊。
地雷 4：明顯灌水
「客戶滿意度 100%」、「零客訴」、「10 年無失誤」——這些不是自信，這叫紅旗。真實的品質類數字通常長這樣：92%、4.7/5、NPS 62，不會是 100 分。真做到 100% 的公司，也不會拿這件事當賣點。
地雷 5：三年沒更新
Stat Counter 最尷尬的一種情境是——寫「成立 8 年」，但公司實際已經 12 年了。要嘛用相對表達（"深耕產業超過 10 年"）、要嘛養成每年 1 月更新的習慣。更好的做法是用當年年份計算、由後端動態產生，一勞永逸。
Photo by Md Ishak Rahman on Unsplash
六、視覺上該怎麼做才不像素材站
設計層面幾個很小、但差很多的細節：
- 數字字體要粗、要大、要用等寬數字。桌機建議 48～72px、行動版 32～40px。用
font-variant-numeric: tabular-nums，讓每個位數寬度一致，跳數字時才不會左右跳動。 - 數字用品牌主色，說明文字用中性色。兩者對比要大，讓數字自己跳出來，說明文字扮演註腳。
- 加個小圖示或小標籤放在數字上方。不要花俏的插畫，簡潔的 line icon 就好，功能是「引導視線落點」。
- 間距寧可寬、不要擠。每一組數字之間留大量白，讓每個數字都有自己的呼吸空間，看起來才有份量。
- 行動版務必變單欄或兩欄。桌機的 4 欄擠到手機上，字會小到看不清，反而毀了整個區塊。手機上單欄縱向滾動、每一組數字獨立占據視野一格，才有震撼力。
七、老闆給你的行動清單
不用馬上重做整個官網，就照這個順序做一次：
- 先列 6～8 個你真的算得出來的數字，時間、規模、品質、成效各兩個。算不出來的先擱著。
- 從裡面挑出最能證明「客戶願意選你」的 4 個，其他先收起來，未來寫案例或提案簡報還用得上。
- 把數字放到首頁 Hero 下方或關於我們頁頁首，先靜態版上，看一週的頁面停留時間和滾動深度有沒有變化。
- 再加計數動畫、加圖示、加圓角背景卡片，做一次視覺升級。
- 行事曆訂每年 1 月 15 日，全站數字更新一次。這件事不做，一年後這一區塊就變成扣分項。
Stat Counter 不是官網最華麗的區塊，但它是最直接把「你是誰」翻譯成「有實力可以信」的地方。做對，客戶滑過一次就記住；做錯，滑過去只覺得又是一家愛講大話的公司。四個數字，說服力可以贏過四頁形容詞，前提是——每個數字都是真的，而且每個數字都跟客戶的下一步決策有關。
如果你的官網現在還沒有這一區塊，或者放的是「我們專業、我們用心」這種形容詞版本，這禮拜找一段時間，坐下來把公司過去累積的「事實」列出來——你會發現，最動人的行銷素材，其實已經躺在你的資料夾裡好幾年了。