官網『時間軸』(Timeline) 設計完整攻略：中小企業如何用一條線把公司歷程、專案里程碑做成客戶信任你的證據
把公司歷程做成一條時間軸，用時間點串出信任感。從版型選擇、節點寫法到手機版設計，中小企業官網最容易被忽略的成交利器。
做官網的時候，最容易被跳過的一個區塊，就是「時間軸」(Timeline)。老闆通常會覺得「客戶又不關心我們公司幾年成立的」，於是把公司歷程壓成一行小字塞進「關於我們」頁面下方，甚至乾脆不寫。
但這其實是個很可惜的決策。因為對台灣中小企業來說，「你做多久了」、「你做過什麼」、「你怎麼一路走到今天」，這三件事就是客戶決定要不要跟你合作的核心信任基礎。時間軸剛好把這三件事，用一條線串成一個「看得到、記得住、信得過」的故事。
Photo by Sincerely Media on Unsplash
一、為什麼中小企業官網很需要一條時間軸？
你有沒有發現，很多客戶第一次跟你聊，第一個問的其實不是「多少錢」，而是「你們做多久了？」這個問題背後真正想知道的是：「你們會不會做一半就跑路？」、「你們有沒有踩過雷、學到教訓？」、「找你合作是不是一個穩定的選擇？」
時間軸的功用，就是把這些疑慮用「事實 + 時間點」一次回答完。當客戶滑到「2019 年服務第 100 家企業」、「2022 年推出第二條產品線」、「2024 年進軍海外市場」的時候，他心裡其實在算：「這家公司是一直在動的，不是那種做兩年就消失的」。
更務實一點的說法是：對中小企業來說，時間軸是用一條線把「時間」變成「證據」。你可能沒有大品牌背書、沒有百人團隊，但你有真實走過的路，這就足以說服很多客戶。
二、時間軸適合放在哪些頁面？
很多老闆會直覺覺得「時間軸就是放在關於我們頁面嘛」，但其實可以應用的場景比想像中多：
1. 關於我們／公司沿革頁面：最經典的用法，用來展示公司成立、重要里程碑、獲獎紀錄、規模成長。這是建立品牌信任感的主戰場。
2. 案例／專案介紹頁：把一個專案從「客戶第一次聯絡」→「需求盤點」→「原型設計」→「開發交付」→「上線後成效」用時間軸走一遍，客戶看得懂你怎麼做事，也能預期跟你合作大概會經歷什麼過程。
3. 產品版本歷程：如果是 SaaS 或有持續迭代的產品，一條「版本更新時間軸」會讓客戶知道你有在維護、有在進步。這一點對訂閱型客戶特別有說服力。
4. 服務流程說明：把「合作流程」用時間軸走一次，可以取代冗長的文字說明。搭配預估時間（例如「Day 1 需求訪談 → Day 7 提案 → Day 14 簽約 → Day 30 交付」），客戶會覺得你很有節奏、不會拖。
三、時間軸的四種常見版型，怎麼選？
時間軸並不是只有「一條垂直線加幾個小點」這一種，主要有四類版型可以選：
1. 垂直時間軸（Vertical Timeline）：最常見、也最好讀。手機上尤其自然，因為手機本來就是往下滑。適合公司沿革、專案流程。缺點是節點一多會拉得很長，要注意「摺疊」或「分段」處理。
2. 水平時間軸（Horizontal Timeline）：桌面版視覺很有張力，很適合當「首頁一個亮點區塊」用。但手機版要小心，往往要改成滑動或直接切成垂直版，否則字會小到看不到。
3. 交錯式時間軸（Zigzag Timeline）：節點左右交錯，中間一條主軸線。視覺豐富，但要注意「哪一邊是先發生的」邏輯清楚，不然客戶會讀錯順序。
4. 卡片式時間軸（Card Timeline）：每個節點是一張卡片，內含標題、日期、圖片、短說明。資訊量大的時候特別好用，例如「歷年得獎紀錄」、「服務過的重要客戶」。
選版型的原則其實很簡單：手機優先，內容量決定版型。節點少於 6 個，可以考慮水平或交錯；超過 6 個，就直接用垂直或卡片式，別硬塞。
Photo by Morgan Housel on Unsplash
四、時間軸的每個節點該寫什麼？
這一點很多老闆都寫錯。最常見的失敗案例，是把時間軸寫成「流水帳」：「2018 年公司成立」、「2019 年遷至新辦公室」、「2020 年員工人數突破 5 人」——這些對客戶來說，一點都不重要。
客戶想看的是「這件事對他有什麼意義」。所以每個節點的寫法，建議套一個公式：
時間點 + 具體事件 + 對客戶的意義
例：「2022 — 累計交付 100 個網站專案，我們開始有能力預估報價誤差不超過 15%。」
你會發現，把「意義」加上去之後，時間軸不再是「我們家的日記」，而是「我們家一路累積下來對客戶的價值」。這才是客戶會看完、還會記得的內容。
另外幾個實用的節點類型可以參考：
里程碑數字型：「第 100 家客戶」、「服務累計 5,000 位使用者」、「破 1,000 篇部落格文章」。數字帶來具體感。
能力升級型：「導入 CI/CD 部署流程，交付時程縮短 40%」、「取得 ISO 27001 認證，資訊安全合規」。強調的是「我們變得更專業」。
產品／服務推出型：「推出 LINE 官方帳號整合服務」、「加入 AI 客服模組」。告訴客戶你的服務範圍在擴張。
合作／獲獎型：「與 XX 集團簽訂年度合約」、「入選 XX 創業加速器」。有第三方背書時特別有用。
五、實作上，這幾個細節會拉開品質差距
1. 節點數量控制在 5-9 個：太少會顯得公司「沒故事」，太多會讀累。如果公司歷史很長，可以把每 3-5 年合併成一個「階段」，例如「2015-2018：草創期」，底下寫這幾年的重點事件。
2. 手機版一定要重新設計，不是縮小就好：桌面的水平時間軸放到手機上會爆掉。最保險的做法是桌面走水平或交錯、手機自動切成垂直。
3. 每個節點都放圖或圖示：純文字時間軸讀起來很枯燥。可以在每個節點旁邊放一張照片（產品、團隊、活動現場）或一個圖示（獎盃、星星、火箭），視覺記憶點會強很多。
4. 加入捲動觸發動畫（Scroll Reveal）：時間軸最適合搭配「滑到哪一節就浮現哪一節」的動畫。這種漸進式揭露，會讓客戶不知不覺看完整條線。但注意動畫要「輕」，不要每個節點都翻兩圈，會讓人頭暈。
5. 記得放「未來的節點」：時間軸不一定只寫過去，也可以放「2026 進軍東南亞市場」這種未來規劃。這會讓客戶覺得公司有方向、有企圖心，而不是活在過去。
6. 資料要定期更新：這是最容易被忽略的一點。如果時間軸最新的一筆是三年前，會給客戶「這家公司是不是沒動靜了」的錯覺。建議把時間軸更新排進每半年的官網維護清單裡。
六、什麼時候「不要用時間軸」？
時間軸雖然好用，但也有不適合的場合，這裡幫老闆先排雷：
公司成立不到 1-2 年：只有兩個節點的時間軸，反而暴露資歷不足。這種情況建議改成「創辦初衷」或「團隊介紹」，用故事取代時間。
歷史沒有亮點、也沒有連續性：如果每個節點都寫得很勉強（「這年做了 XX 案」、「那年參展一次」），不如省略，把版位留給更能打的內容，例如客戶見證或案例。
頁面已經很長：時間軸通常會佔一整個 section 的版位，如果「關於我們」頁面已經塞滿了願景、團隊、辦公環境、聯絡資訊，時間軸擠進去會讓頁面變得更難讀。這時可以獨立拉一個 /history 子頁面放時間軸。
結語：時間軸是「用過去為未來背書」的最省力方法
做官網的時候，很多老闆會投入大筆預算在首頁動畫、產品介紹頁、聯絡表單這些「看得見成交效果」的地方，卻忽略時間軸。但實際上，客戶下決定的那一刻，很多時候不是被 CTA 按鈕逼出來的，而是他在滑「關於我們」的時候，看到「你已經走了 8 年、服務過 200 家企業」，心裡默默點了頭。
時間軸不需要花俏，不需要用最新的動畫套件，只需要把公司真實走過的路，用一條線清楚地說出來，並且把每個節點的意義寫給客戶看。這一段小小的區塊，往往就是官網轉換率背後最安靜、卻最有力量的信任基礎。
如果你的官網還沒有一條時間軸，或者現有的時間軸已經三年沒更新了，這週就找一個下午，把公司這幾年的關鍵事件列出來，重新梳理一次。你會發現，原來公司比你以為的更值得客戶信任。