樹狀圖與線框圖：規劃階段怎麼把網站架構畫出來

為什麼要先畫出來

網站架設最常見的糾紛，是雙方對「網站長什麼樣」的想像不同。口頭討論很難精確，等到設計稿出來才發現落差，修改成本已經產生。

規劃階段用兩種圖把架構具體化，可以大幅降低這個風險：

• 樹狀圖——網站有哪些頁面、彼此的層級關係
• 線框圖——單一頁面上要放哪些區塊、順序如何

兩者都不需要美術能力，用紙筆或簡單的線上工具就能完成。

樹狀圖怎麼畫

基本形式

首頁
├─ 關於我們
│   ├─ 公司簡介
│   └─ 服務據點
├─ 產品介紹
│   ├─ 空調設備
│   │   └─ （產品明細頁）
│   └─ 通風工程
├─ 施工實績
│   └─ （案例明細頁）
├─ 最新消息
│   └─ （消息明細頁）
└─ 聯絡我們

畫的時候要標註三件事

1. 這一層是列表還是單頁——「產品介紹」點進去是列表，「公司簡介」點進去是一頁內容，兩者的程式工作量完全不同
2. 哪些是後台可管理的——用不同顏色或符號標示。這直接對應報價
3. 預估數量——產品有 20 項還是 500 項，決定要不要做分類與搜尋功能

括號表示的「明細頁」是同一個版型重複套用，不需要各自設計。這一點常被誤會成「有 100 個產品就要設計 100 頁」，實際上只需要設計一個明細頁版型。理解這件事，對看懂報價單很有幫助。

線框圖怎麼畫

線框圖只處理結構與優先順序，不處理顏色、字體、圖片。用方框和文字標示即可。

以首頁為例，由上而下排出

1. 主視覺——一句話說明你是做什麼的
2. 核心服務——三到四個區塊
3. 為什麼選我們——具體事實，不是形容詞
4. 代表案例——三筆
5. 最新消息——三筆
6. 聯絡方式與行動呼籲

重點在於順序。畫在上面的就是你認為最重要的，這個排序才是設計要溝通的核心，比「用什麼顏色」重要得多。

每個區塊要註明的事

• 這一區要放幾筆資料
• 資料從哪裡來（後台哪個系統）
• 手機版時這一區怎麼變化，或要不要隱藏

兩種圖各自解決什麼問題

順序不能顛倒：樹狀圖沒定，報價就只能是估算；線框圖沒定，設計稿就會反覆修改。

用樹狀圖檢查三件事

一、深度有沒有超過三層

從首頁數下來超過三層的頁面，訪客不容易找到，搜尋引擎的抓取優先度也較低。

二、有沒有孤島頁面

沒有任何地方連過去的頁面，等於不存在。規劃時就要確認每一頁「從哪裡進得去」。

三、內容量是否失衡

如果某一個分支特別龐大，其他分支都很單薄，通常代表分類方式需要調整——把大的拆開，或把小的合併。

樹狀圖也是驗收與後續維護的依據

網站完成後，樹狀圖可以直接用來核對：每個規劃的頁面是否都存在、後台管理項目是否都做出來了。這比憑印象驗收可靠得多。

上線後，這張圖也是製作網站地圖檔案的基礎——把結構化的頁面清單提交給搜尋引擎，有助於完整收錄。

如果不知道怎麼開始

最實際的做法：找三個同業的網站，把它們的選單抄下來排在一起比較。 你會很快看出哪些單元是這個行業的標準配備、哪些是各家差異、以及哪些做法你覺得不好。

這不是抄襲，是理解使用者的既有預期。訪客逛過同業網站，對「這類公司的網站應該長怎樣」已經有預設，太偏離反而造成困擾。

整理完之後，再回頭問那三個判斷問題，決定自己要保留哪些。