架站前的規劃：網站地圖與資訊架構怎麼做

你有沒有遇過那種逛起來很「卡」的網站？想找價格找半天、想聯絡卻不知道按哪裡、選單點進去又跳回首頁。多半不是設計醜，而是它在動手做之前，根本沒把結構想清楚。

我們接案這些年最常聽到的一句話是：「先把網站做出來，內容之後再補。」這句話聽起來很有效率，實際上是災難的開始。網站跟蓋房子一樣，地基跟格局如果沒先畫好，等磚都砌上去了才發現廁所開在客廳中間，那拆掉重來的代價可不是改一張設計稿就好。這篇就專門講「動手之前」的那段——目標怎麼訂、網站地圖怎麼畫、資訊架構怎麼整、使用者流程怎麼設計，以及哪些坑最多人踩。把這段做紮實，後面設計跟開發會順得多。

架站前的規劃到底在規劃什麼？

簡單講，規劃就是在還沒花錢開發之前，先把「這個網站要達成什麼、要有哪些東西、人進來會怎麼走」想清楚並寫下來。它不是設計、也不是寫程式，而是更前面的腦力工作，產出的是文件而不是畫面。

很多人會直接跳過這一步，覺得「邊做邊調就好」。但我們實際做下來發現，規劃階段每多花一小時，開發階段大概能省下三到五小時的來回修改。原因很單純：規劃是用文件溝通，改一句話五分鐘；開發是用程式溝通，改一個結構可能要重切版、重接後台，動輒半天。規劃做得好的專案，後續改稿次數通常比沒規劃的少一半以上，這在網站架設完整指南裡也是我們反覆強調的重點。

規劃階段大致要交出三樣東西：清楚的目標與成功指標、一張網站地圖、一份資訊架構與主要使用者流程。下面一個一個拆開講。

為什麼網站目標要先訂清楚？

因為目標決定了網站的長相，沒目標的網站等於沒方向的施工。一個要「收名單」的網站，跟一個要「賣商品」的網站，首頁該放什麼、按鈕該寫什麼、頁面該怎麼排，幾乎完全不同。

訂目標時，別只寫「做一個官網」這種空話。要具體到能衡量。我們通常會請客戶回答三個問題：這個網站最重要的一個動作是什麼（買東西？填表單？打電話？）、主要客群是誰（年齡、習慣、用手機還是電腦）、怎麼算成功（一個月帶來幾組詢問？線上營收佔比多少）。

舉個例子。我們服務過一家台南的婚紗工作室，一開始老闆只說「想要漂亮一點的網站」。聊到後來才釐清，他真正要的其實是「讓新人看完作品後願意預約諮詢」。目標一改，整個網站的重心就從「放一堆美照」變成「作品集 + 明確的預約入口 + 真實評價」。上線兩個月，線上預約諮詢從每月 3 組成長到 11 組。同樣一筆預算，目標訂得準，效果差很多。

如果你連目標都還很模糊，建議先別急著進入畫地圖的階段，把這三個問題想清楚再說。

網站地圖（sitemap）怎麼畫？

網站地圖就是把網站所有頁面攤開、用樹狀結構畫出彼此關係的一張圖，通常從首頁往下展開到各個分類與子頁面。它回答的是「這個網站到底有哪些頁面、誰是誰的下層」。

實際做法很土法煉鋼，但有效：拿張紙或開個白板工具，先把首頁放最上面，往下列出主選單會有的幾個大區塊（例如「關於我們、服務項目、案例、最新消息、聯絡我們」），再往下展開每個區塊底下的子頁面。畫完之後退一步看整張圖，問自己幾個問題——層級會不會太深？同一類東西有沒有散在不同地方？有沒有哪個頁面孤零零連不到？

實務上有個很好用的原則叫「三次點擊」：理想狀態下，使用者從首頁出發，最多點三次就該能到達任何一個重要頁面。如果你的某個關鍵頁面要點五六次才找得到，那它幾乎等於不存在。我們盤過一個中小企業官網，原本的產品規格表藏在「服務 → 產品 → 系列 → 型號 → 規格」第五層，後台數據顯示那頁的瀏覽量幾乎是零；把它拉到第三層後，瀏覽量直接成長了將近四倍。

順帶一提，這裡講的「網站地圖」是給人看的結構規劃圖，跟給搜尋引擎看的 sitemap.xml 是兩回事，後者屬於上線時的 SEO 設定，這部分在SEO 友善的網站架構裡會細談。

資訊架構（IA）跟網站地圖有什麼不一樣？

網站地圖是「有哪些頁面、怎麼分層」，資訊架構（Information Architecture，IA）則更進一步，關心的是「資訊怎麼分類、怎麼命名、怎麼讓人找得到」。網站地圖偏骨架，IA 偏邏輯與用詞，兩者相關但不同。

舉個最常見的差別：網站地圖告訴你選單有「服務項目」這一塊，IA 則要決定這塊底下該怎麼分類——是按「服務類型」分，還是按「客戶產業」分？標籤要叫「服務項目」「我們能做什麼」還是「解決方案」？這些選擇直接影響使用者能不能憑直覺找到東西。

做 IA 有個很實用的小技巧叫卡片分類法：把所有內容項目寫在便利貼上，請幾個目標客群幫你分組、命名。你會驚訝地發現，自己覺得理所當然的分類方式，對外人來說常常完全不直覺。我們做過一次，原本把「常見問題」放在「關於我們」底下，結果受測者沒一個人想得到要去那裡找，後來把它獨立出來放進主選單，客服詢問重複問題的次數明顯下降。

IA 還有一個容易被忽略的重點：用詞要講人話。少用公司內部的行話或自創名詞。使用者腦中的詞彙，跟你公司內部的詞彙，往往不一樣，IA 的工作就是搭起這座橋。

使用者流程（user flow）要怎麼設計？

使用者流程是把「某一類使用者，為了完成某個目標，會經過哪些頁面、做哪些動作」用流程圖畫出來。它關心的不是整個網站長怎樣，而是某個具體任務走起來順不順。

做法是先挑出網站最重要的幾條路徑——通常就是對應你的網站目標。比方說電商最關鍵的流程是「進站 → 找到商品 → 加入購物車 → 結帳 → 完成」，服務型網站可能是「進站 → 看服務說明 → 看案例 → 填諮詢表單」。把這幾條主線一步一步畫出來，每一步都問：這一步使用者需要什麼資訊才能放心走到下一步？有沒有哪個地方會讓人猶豫、卡住、跳出？

我們幫一家賣健康食品的客戶檢視過結帳流程，畫出 user flow 後一眼就看出問題：使用者非得先註冊會員才能結帳，這一步硬生生卡掉一堆人。後來改成「可以訪客結帳」，把註冊變成結帳後的選擇，結帳完成率提升了大約 18%。流程圖的價值就在這——它逼你站在使用者角度，把每一步攤開來檢查，問題往往就藏在你自以為理所當然的某一步。

規劃階段最常見的錯誤有哪些？

最常見的幾個錯誤是：沒訂清楚目標就開工、頁面塞太多、用公司內部術語當選單、把所有重要東西全堆在首頁、以及完全沒考慮手機使用情境。這幾個錯一旦帶進開發階段，修起來都很痛。

「頁面塞太多」特別值得提。很多老闆覺得頁面越多越完整，結果做出一個有四十個頁面、但其中三十個從來沒人點的網站。維護是負擔、使用者也迷路。寧可少而精，每個頁面都有它存在的理由。

「把東西全堆在首頁」也很常見。首頁不是倉庫，它的任務是「快速讓人知道你是誰、引導到正確的下一步」，不是把所有資訊一次倒給人看。關於首頁該怎麼安排，可以參考首頁設計結構。

還有一個現在絕對不能忽略的——規劃時就要想手機。台灣多數網站的流量超過七成來自手機，如果你規劃選單和流程時腦中只有桌機畫面，到了手機上選單塞不下、流程點不順，等於白做。手機優先的觀念，在RWD 響應式網頁設計這篇會講得更透徹。

如果這些規劃工作對你來說太花時間，或者你希望一開始就把結構打對，找一個會幫你把目標、地圖、流程都先盤清楚的專業的網站架設團隊，會比事後打掉重練省事很多。

結語：先在紙上把網站走一遍

規劃聽起來不像「做網站」，沒有畫面、沒有程式，很多人因此覺得它可有可無。但真正決定一個網站好不好用的，恰恰是這個沒人看得到的階段。

把目標訂清楚、把網站地圖畫出來、把資訊分類想明白、把幾條主要流程跑一遍——這些都做完，你再去找設計師或自己動手，方向會清楚非常多，來回修改也會大幅減少。下一步，建議搭配RWD 響應式網頁設計一起看，把「手機怎麼呈現」也納入規劃，整個結構才算真正完整。先在紙上把網站走一遍，動手時你會感謝現在的自己。